バージョン: v2.5.0

v1からの移行

概要

Wails v2は、v1から大幅に変更されています。このドキュメントでは、変更点、および既存のプロジェクトを移行する方法に焦点をあてて説明します。

アプリケーションの作成

v1では、wails.CreateAppでメインアプリケーションを作成して、app.Bindでバインディングを追加し、app.Run()でアプリケーションを起動していました。

例:

v1
 app := wails.CreateApp(&wails.AppConfig{
    Title:  "MyApp",
    Width:  1024,
    Height: 768,
    JS:     js,
    CSS:    css,
    Colour: "#131313",
  })
  app.Bind(basic)
  app.Run()

v2では、wails.Run()メソッドだけが、アプリケーションオプションを指定することができます。

v2
    err := wails.Run(&options.App{
        Title:  "MyApp",
        Width:  800,
        Height: 600,
        AssetServer: &assetserver.Options{
            Assets: assets,
        },
        Bind:   []interface{}{
            basic,
        },
    })

バインディング

v1では、任意の関数と構造体の両方をバインドすることが可能でした。 v2では、構造体のみバインドできるようになり、シンプルになりました。 v1においてBind()メソッドに渡していた構造体のインスタンスは、アプリケーションオプションのBindフィールドで指定できます。

v1
  app := wails.CreateApp(/* options */)
  app.Bind(basic)

v2
    err := wails.Run(&options.App{
        /* other options */
        Bind: []interface{}{
            basic,
        },
    })

v1では、バインドされたメソッドをフロントエンドから利用するにはwindow.backendを使用していました。これはwindow.goに変更されました。

アプリケーションライフサイクル

v1では、バインドされた構造体の中に、WailsInit()およびWailsShutdown()という2つの特別なメソッドが存在しました。これらは、アプリケーションオプションの一部として、3つのライフサイクルフックに置き換えられています:

注意: OnDomReadyは、v1でのwails:readyシステムイベントに代わるものです。

これらのメソッドは標準的な関数を指定できますが、一般的には、それらのメソッドを構造体の一部として保持しておきます:

v2
    basic := NewBasicApp()
    err := wails.Run(&options.App{
        /* Other Options */
        OnStartup:  basic.startup,
        OnShutdown: basic.shutdown,
        OnDomReady: basic.domready,
    })
...
type Basic struct {
    ctx context.Context
}
func (b *Basic) startup(ctx context.Context) {
    b.ctx = ctx
}
...

ランタイム

v2のランタイムはv1よりも非常に充実しており、メニュー、ウィンドウ操作、優れたダイアログをサポートしています。メソッドのシグネチャが若干変更されていますので、詳しくはランタイムのリファレンスを参照してください。

v1では、WailsInit()に渡された構造体を介してランタイムを利用できていました。 v2では、ランタイムは独自のパッケージとして移植されています。ランタイムの各メソッドは、OnStartupメソッドで受け渡されるcontext.Contextを引数に取ります。

Runtime Example
package main

import "github.com/wailsapp/wails/v2/pkg/runtime"

type Basic struct {
    ctx context.Context
}

// startupはアプリケーション起動時に呼び出される
func (a *App) startup(ctx context.Context) {
    a.ctx = ctx
    runtime.LogInfo(ctx, "Application Startup called!")
}

アセット

v2での最も大きな変更は、アセットの取り扱い方です。

v1では、2つのアプリケーションオプションを介してアセットを指定していました:

JS - アプリケーションのJavaScript
CSS - アプリケーションのCSS

これは、単一のJSファイルおよびCSSファイルを、開発者が責任をもって作成する必要があることを意味していました。基本的には、webpackのような複雑なパッカーを使用する必要がありました。

v2では、Wailsは一般的なWebサーバと同じように、フロントエンドアセットは何でも構いません。すべてのアプリケーションアセットは、embed.FSインスタンスとしてアプリケーションオプションに渡されます。

つまりアセットをバンドルしたり、画像をBase64でエンコードしたり、カスタムフォントを使用するためにバンドラーの設定を工夫したりする必要は一切ありません。

アプリケーション起動時に、Wailsは、あらかじめembed.FSで指定されたディレクトリ内をスキャンしてindex.htmlを探し、Webサーバの挙動のように、その場所をすべてのアプリケーションアセットのルートパスとみなします。

例: とあるアプリケーションのプロジェクトディレクトリの構成が次のようになっているとします。この場合、最終的に必要なすべてのアセットはfrontend/distディレクトリ配下に配置される必要があります:

.
├── build/
├── frontend/
│   └── dist/
│       ├── index.html
│       ├── main.js
│       ├── main.css
│       └── logo.svg
├── main.go
└── wails.json

これらのアセットは、embed.FSを定義するだけで、アプリケーションから使用することができます:

Assets Example
//go:embed all:frontend/dist
var assets embed.FS

func main() {
    err := wails.Run(&options.App{
        /* Other Options */
        AssetServer: &assetserver.Options{
            Assets: assets,
        },
    })
}

もちろん、必要に応じてバンドラを使用することもできます。唯一行わなければいけないことは、アプリケーションオプションのAssetsキーにembed.FSインスタンスを指定して、Wailsにアプリケーションアセットディレクトリを教えてあげることです。

プロジェクト構成

v1では、プロジェクトルートに存在するproject.jsonファイルで、プロジェクト構成を管理していました。 v2では、プロジェクトルートにあるwails.jsonファイルでプロジェクト構成を管理します。

フォーマットは若干変更されています。比較表は次のとおりです:

v1	v2	備考
name	name
description		消去されました
author / name	author / name
author / email	author / email
version	version
binaryname	outputfilename	変更されました
frontend / dir		消去されました
frontend / install	frontend:install	変更されました
frontend / build	frontend:build	変更されました
frontend / bridge		消去されました
frontend / serve		消去されました
tags		消去されました
	wailsjsdir	wailsjsモジュールを生成するディレクトリ
	assetdir	`dev`モードでコンパイルされたフロントエンドアセットのディレクトリ。通常は自動推定されるため、空のままで構いません。
	reloaddirs	`dev`モードでリロードをトリガーさせたい追加のディレクトリを指定するための、カンマ区切りのリスト。高度なアセット構成をとる場合にのみ必要です。

v1からの移行

概要​

アプリケーションの作成​

バインディング​

アプリケーションライフサイクル​

ランタイム​

アセット​

プロジェクト構成​

概要