Wails v3 の新機能

Wails v3 では、v2 から大幅な変更が加えられています。単一ウィンドウ向けの宣言型 API は、より柔軟な手続き型アプローチに置き換えられました。この新しい API 設計により、コードの可読性が向上し、特に複雑なマルチウィンドウアプリケーションの開発が簡素化されます。

Wails v3 は、Go と Web 技術を使用したデスクトップアプリケーションの構築方法を大きく進化させます。

複数ウィンドウ

Wails v3 では、単一のアプリケーション内で複数のウィンドウを作成、管理できるようになりました。この機能により、単一ウィンドウアプリケーションの制約を超え、より複雑で汎用性の高いユーザーインターフェースを設計できます。

各ウィンドウのサイズ、位置、コンテンツ、動作は個別に設定できます。この柔軟性により、メインインターフェース、設定パネル、補助ビューなど、機能ごとに独立したウィンドウを持つアプリケーションを作成できます。

開発者はこれらのウィンドウをプログラムから作成、操作、管理できるため、ユーザーのニーズやアプリケーションの状態に適応する動的なユーザーインターフェースを実現できます。

例

package main

import (
   "embed"
   "log"
   
   "github.com/wailsapp/wails/v3/pkg/application"
)

//go:embed assets/*
var assets embed.FS

func main() {

   app := application.New(application.Options{
        Name:   "Multi Window Demo",
        Assets: application.AssetOptions{
            Handler: application.AssetFileServerFS(assets),
        },
   })
   
   window1 := app.Window.NewWithOptions(application.WebviewWindowOptions{
       Title:  "Window 1",
   })
   
   window2 := app.Window.NewWithOptions(application.WebviewWindowOptions{
       Title:  "Window 2",
   })
   
   // load the embedded html from the embed.FS
   window1.SetURL("/")
   window1.Center()
   
   // Load an external URL
   window2.SetURL("https://wails.io")
   
   err := app.Run()

   if err != nil {
	   log.Fatal(err.Error())
   }
}

システムトレイとの統合

Wails v3 では、システムトレイ機能が強力にサポートされ、アプリケーションをユーザーのデスクトップに常駐させられるようになりました。この機能は、バックグラウンドでの実行や主要機能へのすばやいアクセスが必要なアプリケーションに特に便利です。

Wails v3 のシステムトレイ統合には、次の主要機能があります。

ウィンドウの関連付け：システムトレイアイコンにウィンドウを関連付けられます。ウィンドウがアクティブになると、アイコンの位置を基準に中央へ配置されるため、アプリケーションへすばやくアクセスできます。
充実したメニューサポート：ユーザーがシステムトレイアイコンから直接アクセスできる、高機能でインタラクティブなメニューを作成できます。アプリケーションの完全なウィンドウを開かなくても、操作をすばやく実行できます。
テーマに適応するアイコン表示：ライトモード用とダークモード用の両方のアイコンがサポートされるため、システムテーマが異なっても、アプリケーションのシステムトレイアイコンは見やすく美しい表示を維持できます。macOS ではテンプレートアイコンもサポートされます。

例

package main

import (
    "log"
    "runtime"

    "github.com/wailsapp/wails/v3/pkg/application"
    "github.com/wailsapp/wails/v3/pkg/icons"
)

func main() {
    app := application.New(application.Options{
        Name:        "Systray Demo",
        Mac: application.MacOptions{
            ActivationPolicy: application.ActivationPolicyAccessory,
        },
    })

    window := app.Window.NewWithOptions(application.WebviewWindowOptions{
        Width:       500,
        Height:      800,
        Frameless:   true,
        AlwaysOnTop: true,
        Hidden:      true,
        Windows: application.WindowsWindow{
            HiddenOnTaskbar: true,
        },
    })

    systemTray := app.SystemTray.New()

    // Support for template icons on macOS
    if runtime.GOOS == "darwin" {
        systemTray.SetTemplateIcon(icons.SystrayMacTemplate)
    } else {
        // Support for light/dark mode icons
        systemTray.SetDarkModeIcon(icons.SystrayDark)
        systemTray.SetIcon(icons.SystrayLight)
    }

    // Support for menu
    myMenu := app.Menu.New()
    myMenu.Add("Hello World!").OnClick(func(_ *application.Context) {
        println("Hello World!")
    })
    systemTray.SetMenu(myMenu)

    // This will center the window to the systray icon with a 5px offset
    // It will automatically be shown when the systray icon is clicked
    // and hidden when the window loses focus
    systemTray.AttachWindow(window).WindowOffset(5)

    err := app.Run()
    if err != nil {
        log.Fatal(err)
    }
}

バインディング生成の改善

Wails v3 では、プロジェクトのバインディング生成方法が大幅に改善されています。バインディングは Go バックエンドとフロントエンドをつなぐ役割を果たし、両者間のシームレスな通信を可能にします。

バインディングの生成には高度な静的解析ツールが使用されるようになり、生成プロセスが抜本的に改善されました。処理速度が向上したほか、コメントとパラメーター名が維持されるため、コード品質も保たれます。

バインディングの生成プロセスが簡素化され、必要なコマンドは wails3 generate bindings の 1 つだけになりました。

例

// @ts-check
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
// This file is automatically generated. DO NOT EDIT

// Generated layout (excerpt): frontend/bindings/<full-go-import-path>/greetservice.js
import { Call as $Call, Create as $Create } from "/wails/runtime.js";

/**
 * Greet greets a person
 * @param {string} $0
 * @returns {Promise<string>}
 */
export function Greet($0) {
    return $Call.ByID(1411160069, $0);
}

/**
 * GreetPerson greets a person
 * @param {main.Person} $0
 * @returns {Promise<string>}
 */
export function GreetPerson($0) {
    return $Call.ByID(4021313248, $0);
}

ビルドシステムの改善

Wails v3 では、従来の制約を解消する、より柔軟で透明性の高いビルドシステムが導入されています。v2 では、ビルドプロセスの大部分が不透明でカスタマイズしにくかったため、プロジェクトのビルドプロセスをより細かく制御したい開発者にとって、使いづらい場合がありました。

アイコン生成やマニフェスト作成など、v2 のビルドシステムが担っていた主要な処理は、すべて CLI のツールコマンドとして追加されました。これらの呼び出しをオーケストレーションし、v2 と同じ開発者体験を実現するために、Taskfile を CLI に組み込みました。このアプローチにより、ニーズに合わせてビルドプロセスをカスタマイズできるようになり、柔軟性と使いやすさを最適なバランスで両立できます。

お好みであれば、make も使用できます。

例

build/Taskfile.darwin.yml

yaml

darwin:build:
  summary: Builds the application for macOS
  platforms:
    - darwin
  cmds:
    - task: common:go:mod:tidy
    - task: common:build:frontend
    - task: common:generate:icons
    - task: darwin:build:app
  env:
    CGO_CFLAGS: "-mmacosx-version-min=10.15"
    CGO_LDFLAGS: "-mmacosx-version-min=10.15"
    MACOSX_DEPLOYMENT_TARGET: "10.15"

イベント機能の改善

Wails は、さまざまなランタイム操作やシステムアクティビティに応じてイベントを発行するようになりました。これにより、アプリケーションはこれらのイベントにリアルタイムで応答できます。さらに、クロスプラットフォーム（共通）イベントも利用できるため、異なるオペレーティングシステム間で動作する一貫したイベント処理メソッドを記述できます。

イベントフックを登録すると、特定のイベントを同期的に処理できます。On メソッドとは異なり、これらのフックでは必要に応じてイベントをキャンセルできます。一般的なユースケースは、ウィンドウを閉じる前に確認ダイアログを表示することです。これにより、イベントフローとユーザー体験をより細かく制御できます。

例

package main

import (
    "embed"
    "log"
    "time"

    "github.com/wailsapp/wails/v3/pkg/application"
    "github.com/wailsapp/wails/v3/pkg/events"
)

//go:embed assets
var assets embed.FS

func main() {

    app := application.New(application.Options{
        Name:        "Events Demo",
        Description: "A demo of the Events API",
        Assets: application.AssetOptions{
            Handler: application.AssetFileServerFS(assets),
        },
        Mac: application.MacOptions{
            ApplicationShouldTerminateAfterLastWindowClosed: true,
        },
    })

    // Custom event handling — App.Event.On(name, func(e *CustomEvent))
    app.Event.On("myevent", func(e *application.CustomEvent) {
        log.Printf("[Go] CustomEvent received: %+v\n", e)
    })

    // OS-specific application events — App.Event.OnApplicationEvent(eventType, func(e *ApplicationEvent))
    app.Event.OnApplicationEvent(events.Mac.ApplicationDidFinishLaunching, func(event *application.ApplicationEvent) {
        println("events.Mac.ApplicationDidFinishLaunching fired!")
    })

    // Platform-agnostic events
    app.Event.OnApplicationEvent(events.Common.ApplicationStarted, func(event *application.ApplicationEvent) {
        println("events.Common.ApplicationStarted fired!")
    })

    win1 := app.Window.NewWithOptions(application.WebviewWindowOptions{
        Title: "Takes 3 attempts to close me!",
    })

    var countdown = 3

    // Register a hook to cancel the window closing
    win1.RegisterHook(events.Common.WindowClosing, func(e *application.WindowEvent) {
        countdown--
        if countdown == 0 {
            println("Closing!")
            return
        }
        println("Nope! Not closing!")
        e.Cancel()
    })

    win1.OnWindowEvent(events.Common.WindowFocus, func(e *application.WindowEvent) {
        println("[Event] Window focus!")
    })

    err := app.Run()

    if err != nil {
        log.Fatal(err.Error())
    }
}

Wails Markup Language（wml）

htmx と同様に、プレーンな HTML を使用してランタイムメソッドを呼び出すための実験的な機能です。

例

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Wails ML Demo</title>
  </head>
  <body style="margin-top:50px; color: white; background-color: #191919">
    <h2>Wails ML Demo</h2>
    <p>This application contains no Javascript!</p>
    <button wml-event="button-pressed">Press me!</button>
    <button wml-event="delete-things" wml-confirm="Are you sure?">
      Delete all the things!
    </button>
    <button wml-window="Close" wml-confirm="Are you sure?">
      Close the Window?
    </button>
    <button wml-window="Center">Center</button>
    <button wml-window="Minimise">Minimise</button>
    <button wml-window="Maximise">Maximise</button>
    <button wml-window="UnMaximise">UnMaximise</button>
    <button wml-window="Fullscreen">Fullscreen</button>
    <button wml-window="UnFullscreen">UnFullscreen</button>
    <button wml-window="Restore">Restore</button>
    <div
      style="width: 200px; height: 200px; border: 2px solid white;"
      wml-event="hover"
      wml-trigger="mouseover"
    >
      Hover over me
    </div>
  </body>
</html>

例

examples ディレクトリには、ほかにも例が用意されています。ぜひ確認してください！

アクセシビリティ

このドキュメントを編集