W.I.S. Laboratory
menu-bar

Tauri


Windows11にTauri(Rust+WebView2のフレームワーク)を導入してみる

Rust製のフレームワーク「Tauri」をWindows11で環境構築してみた。
手順の大まかな流れは、

  1. Node.jsをインストール（npmを使うために必要）
  2. Microsoft C++ Build Toolをインストール（Rustコードをビルドするために必要）
  3. Rustをインストール
  4. cargoからTauriをインストール
  5. npmでTauriのプロジェクトを新規作成
  6. npmで必要なライブラリをインストール
  7. npmでTauriを実行
  8. npmでTauriをビルド

という感じ。
Windows11にはWebView2がプリインストールされているので、WebView2はインストールしなくて良い。
プロジェクトを作成してライブラリをインストールするとサンプルプログラムも同時に入る。
これを見ればプロセス間通信の書き方も分かるので、Electronより親切な感じがする。
今回はすべて64bit版をインストールしている。

1. Node.jsをインストール

  1. https://nodejs.org/ja/ からダウンロードしてくる
  2. ダウンロードしたインストーラを起動
  3. 設定はデフォルトでOK

2. Microsoft C++ Build Toolをインストール

  1. https://visualstudio.microsoft.com/ja/visual-cpp-build-tools/ からダウンロードしてくる
  2. ダウンロードしたインストーラを起動
  3. 「C++によるデスクトップ開発」にチェックを入れる
  4. あとはデフォルトでOK

3. Rustをインストール

  1. https://www.rust-lang.org/ja からダウンロードしてくる
  2. ダウンロードしたインストーラを起動
  3. 基本的に設定はそのままでOK、Enterキーを押してインストールを完了する

4. Tauriをインストール

  1. Windowsキーを押しながら「R」を1回押す
  2. 「wt」と入力してエンターを1回押す（WindowsTerminalが起動する）
  3. 「cargo install tauri-cli --version "^1.0.5"」と入力してエンターを1回押す（バージョンはその時に応じて変更）
  4. インストールが終わるまで待つ（10分以上かかる。環境によっては1時間くらいかかることがある）

ここまでで下準備完了。

5. Tauriのプロジェクトを作成する

  1. WindowsTerminalを起動する
  2. プロジェクトフォルダを作成したいフォルダまで移動する（例：cd \tauri-practice など）
  3. 「npm create tauri-app」と入力してエンター
  4. プロジェクト名を聞いてくるので入力する（例：tauri-app など）
  5. パッケージマネージャーを聞いてくるので「npm」を選択する
  6. UIテンプレートを聞いてくるので自分が使いたいものを選択する（純粋なJavaScriptが良いなら「vanilla」）

6. 開発に必要なライブラリをインストールする

  1. 作成したプロジェクトフォルダへ潜る（例：cd tauri-app など）
  2. 「npm install」と入力してエンター

7. サンプルコードの場所を確認する

  1. html, CSS, JavaScriptはプロジェクトフォルダ下の「src」フォルダ内にある
  2. Rustのコードは「src-tauri」フォルダ→「src」フォルダ内の「main.rs」

8. サンプルをビルドして実行してみる

  1. WindowsTerminalでカレンドフォルダを上で作成したプロジェクトフォルダにして「npm run tauri dev」と入力してエンター
  2. 初回ビルド時に限り、結構な時間がかかる（2回目以降は速いが、プロジェクトフォルダ内に出来上がる大量のファイル群を削除してしまうとまた時間がかかるようになる）
  3. 無事にビルドが終わるとサンプルプログラムが実行される

9. 頒布用の実行ファイルとインストーラーを生成してみる

  1. 「src-tauri」フォルダ内にある「tauri.conf.json」をテキストエディタで開く
  2. 36行目付近にある「"identifier": "com.tauri.dev",」を「"identifier": "hogefugapiyo",」などに書き換えて上書きする（識別子なので何でも良いが、デフォルトだとビルドに失敗してしまう）
  3. WindowsTerminalから「npm run tauri build」と入力してエンター
  4. ビルド後のexeファイルは「src-tauri」→「target」→「release」の中に、インストーラはさらにその中の「bundle」→「msi」の中にある

html, CSS, JavaScriptは、生成されたexeファイルの中にすべて梱包されるのでこのexe単体で頒布が可能だが、この場合は先方の環境にWebView2が入っていないと動かない。
インストーラーを頒布すれば、もしWebView2が入っていない環境の場合はインストール時ついでに自動でダウンロードしてインストールしてくれるので便利。
html, CSS, JavaScriptのみで書いたWebアプリをexe化するだけなら、一式丸々srcフォルダに入れてビルドすれば、一切Rustを書かずに実現できる。
ただElectronと違い、ビルド後にhtml, CSS, JavaScriptを編集した際は、再度ビルドが必要となる。
Electronよりも遥かに小さくなる上に単体exeやインストーラーでの頒布が可能になる点は、場合によってはかなりのメリットになるかもしれないが、プロジェクトフォルダはElectronのほうが小さい。
Tauriは実行後＆ビルド後のプロジェクトフォルダが4GB近くまで肥大化してしまうので、多数のプロジェクトを作成するとそれだけストレージを圧迫してくるのが難点だ。

[ 戻る ]
saluteweb