TauriとLeptosで作るデスクトップアプリ（3）バックエンドを呼び出す
はじめに
TauriとLeptosでデスクトップアプリを作っていきます。今回は、LeptosフロントエンドからTauriバックエンドのコマンドを呼び出します。あわせて、デバッグ用にフロントエンドのコンソールにログを表示できるようにします。
関連記事
環境
- Windows 11 Home
- Rust 1.81
- Tauri 2.0.1
- Leptos 0.7.0-rc0
依存パッケージを追加する
- ロギングを行う
Tauriバックエンド側では、標準出力はそのままcargo tauri devを実行したターミナルに表示されます。Leptosフロントエンド側では、ソースコード内でprintln!()としても、どこにも表示されません。開発者ツールのコンソールでログを確認できるようにlogとconsole_logを追加します。
- Tarui APIをRustフロントエンドで扱う
Rustフロントエンド側でTauri APIにバインディングするためにtauri-sysを追加します。同時にシリアライズするためにserdeを追加します。
上記2つをあわせて、./apps/src-ui/Cargo.tomlの[dependencies]を以下のように更新します。
あいさつコンポーネントを作成する
Tauriのcreate-tauri-appでも自動で作られる「あいさつ」コンポーネントを作成します。LeptosフロントエンドからTauriバックエンドにStringを送信し、それを加工してTauriバックエンドからLeptosフロントエンドにStringを返信します。
Leptosフロントエンドクレート./apps/src-ui内のcomponentsモジュールにgreetサブモジュールを作ります。ディレクトリ構成は以下のとおりです。
tauri-leptos-example
├─ apps/
│ ├─ src-tauri/
│ └─ src-ui/
│ ├─ src/
│ │ ├─ components/
│ │ │ ├─ counter.rs
│ │ │ ├─ greet.rs
│ │ │ └─ mod.rs
│ │ ├─ app.rs
│ │ ├─ lib.rs
: : └─ main.rs
mod.rsにgreetサブモジュールの宣言を追加します。
greet.rsにあいさつコンポーネントを実装します。
on_click関数の中でlog::info!("invoke: {name}");としています。これで、開発者ツールのコンソールにログが表示されます。tauri_sysを使うと、Tauriバックエンドのコマンド呼び出しがinvoke()関数で簡単にできます。view!マクロの<Button>コンポーネントでは、on_click属性が変数と同名なので、短縮表記をしています。また、ボタンのスタイルをappearance属性で指定しています。
以下、LeptosフロントエンドのRustソースコードを変更します。
lib.rsでは、console_log::init()でログレベルをINFOに変更しています。
バックエンドでコマンドを用意する
Tauriバックエンドクレート./apps/src-tauri内でRustソースコードを実装します。ディレクトリ構成は以下のとおりです。
tauri-leptos-example
├─ apps/
│ ├─ src-tauri/
│ │ ├─ src/
│ │ │ ├─ commands.rs
│ │ │ ├─ lib.rs
│ │ : └─ main.rs
: └─ src-ui/
commands.rsにコマンドを書きます。今回はStringを受け取って、Stringを返す単純な関数です。引数の名前nameは、Leptosフロントエンドで用意した構造体GreetArgsのフィード名に一致する必要があります。
lib.rsでコマンドを実装した関数をハンドラに登録します。
プロジェクトを実行します。
> cargo tauri dev
期待どおりの動作が確認できました。
サンプルコード
今回作成したプロジェクトは以下からダウンロード可能です。
Discussion