🐮

WindowsにTauriを導入してデスクトップアプリケーションを開発する

2022/06/19に公開

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