WindowsにTauriを導入してデスクトップアプリケーションを開発する
Tauriとは
- Rustのデスクトップアプリケーションフレームワーク
- 2022/06/16にVersion 1.0 がリリース
- UI基盤にWebviewを使用しており、HTML、CSS、JavaScriptで開発可能
- 実行環境にWebView2(Windows)、あるいはWebkit(macOS)、gtk-rs(Linux)をインストールする必要あり
- (ちなみにElectronではChromiumを使っている)
インストール
Windows10にTauriをインストールする。
公式サイトの導入手順に従って進めていきます。
Node.jsをインストール
Node.jsのインストーラをダウンロードしてインストール実行。
npmコマンドが使えるようになっていれば良い。
Microsoft Visual Studio C++ Build Toolsをインストール
Build Tools for Visual Studio 2022をダウンロードして起動し、ワークロード選択画面で
[C++によるデスクトップ開発]にチェックを付け、インストールの詳細に
- MSVC
- Windows 10 SDK
のオプションが表示されることを確認し、インストールを実行。
WebView2をインストール
MicrosoftからWebView2のインストーラをダウンロードしてインストールを実行。
(インストーラは[エバーグリーン ブートストラップ]を選択)
Rustをインストール
Rustのインストーラをダウンロードして実行。
インストール時の設定はデフォルトで良い。
tauri-cliをインストール
コマンドプロンプトで以下のコマンドを実行。
cargo install tauri-cli --version "^1.0.0"
色々ログが出るが、最終的に
Installed package `tauri-cli v1.0.0` (executable `cargo-tauri.exe`)
と表示されたら完了。(10分ぐらいかかる)
ここまでで一通りのインストール作業は完了。
デスクトップアプリケーションを作成
ここからは試しにアプリを作ってビルドする。(Visual Studio Codeを使用する想定)
テンプレートからアプリのセットアップを実行
Visual Studio Codeのターミナルで以下のコマンドを実行。
$ npx create-tauri-app
出力された指示に従って、アプリ名、TypeScriptを使うかどうか、使用するテンプレート等の設定を入力する。
ちなみにテンプレートは以下から選択可能。
- Solid
- Vue CLI
- Angular
- Dominator
- ClojureScript
- Vanilla.js
- create-vite
- create-react-app
- Svelte
一通りのファイルが作成されたら、入力したアプリ名のフォルダ内に移動する。
そして、以下のコマンドを実行して必要なライブラリのインストール＆アップデートを実行。
$ npm install
以下のコマンドを実行してローカルサーバーを起動。
$ npm run tauri dev
http://localhost:8080 にアクセスして何かしらの画面が表示されれば完了。
(表示される画面は、使用するテンプレートによって変わる)
配布用のインストーラを作成
src-tauriフォルダ内にあるtauri.conf.jsonを開き、32行目あたりにあるidentifierの値を"com.tauri.dev"から任意の値に書き換える。
※これをやっておかないと、リリースビルド実行時に以下のエラーが発生する。
Error You must change the bundle identifier in `tauri.conf.json > tauri > bundle > identifier`. The default Value `com.tauri.dev` is not allowed as it must be unique across applications.
以下のコマンドでリリースビルドを実行する。
$ npm run tauri build
ビルドが完了すると、src-tauri\target\release 内にexeファイルが作成される。
また、 src-tauri\target\release\ 内にインストーラが生成される。
ちなみに、このインストーラを実行した際、その環境にWebView2が未インストールであればそっちのダウンロード&インストールを先にやってくれるらしい。助かる。
おわりに
とりあえず上記の手順でTauriを使用したデスクトップアプリケーションの開発環境構築とビルドができるようになった。
具体的な開発方法については公式のドキュメントを読む。
Discussion