RustとTauriによるデスクトップアプリケーション開発に触れてみよう

Project name: プロジェクトの名前を入力して下さい。ここで入力した名前はプロジェクトのディレクトリの名前になります。好きな名前で大丈夫ですが、この記事では hello-tauri にします。
Choose your package manager: パッケージマネージャを選択します。今回は cargo を選択します。
Choose your UI template: 利用するUIライブラリを選択します。今回はUIライブラリを利用しないので vanilla を選択します。

STEP3. tauri-cliのインストール

tauri-cli は、Tauri アプリケーションのビルド、デバッグに必要なソフトウェアです。次のコマンドを入力してインストールしましょう。

STEP4. プロジェクトの実行

create-tauri-app の実行後、次のような hello-tauri ディレクトリが生成されています。以降はこのフォルダで作業しましょう。

hello-tauriのディレクトリ構成

これでプロジェクトの作成ができました。

開発ウィンドウの起動

さっそく実行してみましょう！初回のデバッグは時間がかかります。

表示されました！Enter a name... のところに名前を入れて Greet ボタンを押すとあいさつ文が表示されます。あいさつ文はフロントエンドではなくバックエンド (Rust側) で生成されています（後述）。

cargo tauri dev コマンドで起動される開発ウィンドウは、実行中にHTMLやRustのコードなどに変更があった時、自動で変更をウィンドウに反映してくれます。変更のたびにこのコマンドを実行する必要はありません。

開発

画面の表示を変える

画面の表示に使われるHTMLやCSS, JavaScript, 画像などはプロジェクト直下の src ディレクトリに入っています。アプリケーションが起動すると最初に src 内の index.html が表示されています。

"Welcome to Tauri!" の文を "Hello, Tauri!" に変えてみましょう。

src/index.html (18行目)

編集後ファイルを保存すると、実行中のアプリケーションに変更が即座に反映されています。

バックエンドの処理を定義する

src-tauri ディレクトリには Rustプロジェクトが入っており、これがアプリケーションの中核部分を担います。src-tauri/src/ 内の main.rs を開いてみましょう。

src-tauri/src/main.rs

fn greet(name: &str) -> String が先ほどのあいさつ文を生成する関数です。名前 (name) を受け取ってあいさつ文を生成し、それを返しています。#[tauri::command] マクロを関数の前に記述することで、command (コマンド) を作成しています。

fn main() ではアプリケーションの起動、コマンドの登録 (invoke_handler(tauri::generate_handler![greet])) を行っています。

Hello の代わりに Good Morning と挨拶してくれるコマンドを作成してみましょう。

コマンドを作成したら、アプリケーションにコマンドを登録します。

cargo run dev の実行中に保存すると、自動で再コンパイルが行われ、アプリケーションが再起動します。