RustでTauriを使ってGUIを作る(Vanilla)
RustでGUIを扱うよい方法を探している。
環境構築
Node.js
Node.jsは、クライアントPCで動くJavaScript実行環境。Node.jsの公式サイトからダウンロードする。LTS版とCurrent版があるがそれぞれ安全版と最新版程度の違いでしかないので好きなほうでいい。
例のごとく、私はmsiによるインストールを好まないので、Other Downloadsからzip版をダウンロードして導入して自分でパスを通した。
tauri-cli
Tauri Command Line Interface。Tauri開発に必要なコマンドラインツール。
Rust環境は構築済みであることが前提なので、以下のコマンドでtauri-cliを導入する。
プロジェクト生成
最初に、プロジェクトを生成するディレクトリへCDする。
以下のコマンドを叩くと、対話形式でのtauriプロジェクトの生成が始まる。
Project name プロジェクト名を入力 例：my1st_tauri
Choose which language to use for your frontend カーソル上下でRustを選択してEnter
Choose your UI template 今回はVanillaを選択。選択肢によってプロジェクト構成が違う。
ビルド
まず作成したプロジェクトのディレクトリへ入る。
続いて、プロジェクトをビルド・実行
デバッグビルド
リリースビルド
ただし、これを実行すると、以下のラーが出る
このエラーはBundle.identifierという設定項目が初期値のままの時に発生する。
バンドルIDは、アプリケーション固有のIDで、何でもいいが他のTauriアプリケーションと重複しないIDを与える。一般的にはドメインを逆にしたものを与えるらしい。
tauri.conf.jsonからbundle > identifierを変更
src-tauri\tauri.conf.jsonを以下のように変更し、再度cargo tauri buildする。
Before
{ "build": { "devPath": "../src", "distDir": "../src", "withGlobalTauri": true }, "package": { "productName": "tauri-app", "version": "0.0.0" }, "tauri": { "allowlist": { "all": false, "shell": { "all": false, "open": true } }, "windows": [ { "title": "tauri-app", "width": 800, "height": 600 } ], "security": { "csp": null }, "bundle": { "active": true, "targets": "all", "identifier": "com.tauri.dev", "icon": [ "icons/32x32.png", "icons/128x128.png", "icons/128x128@2x.png", "icons/icon.icns", "icons/icon.ico" ] } } }
After
{ "build": { "devPath": "../src", "distDir": "../src", "withGlobalTauri": true }, "package": { "productName": "tauri-app", "version": "0.0.0" }, "tauri": { "allowlist": { "all": false, "shell": { "all": false, "open": true } }, "windows": [ { "title": "tauri-app", "width": 800, "height": 600 } ], "security": { "csp": null }, "bundle": { "active": true, "targets": "all", "identifier": "my.unique.identify", "icon": [ "icons/32x32.png", "icons/128x128.png", "icons/128x128@2x.png", "icons/icon.icns", "icons/icon.ico" ] } } }
なお、cargo tauri devでデバッグビルドと同時に実行した実行ファイルは、src-tauri\target\debug\ 内にある。しかしこの.exeを直接実行しようとすると、ウィンドウこそ開くが
127.0.0.1 により、接続が拒否されました。
参考
プログラマーの魔法の使い方 Tauri デスクトップアプリ開発のはじめ方。
https://programwiz.org/2022/03/27/how-to-develop-desktop-app-with-tauri-framework/