Tauriとは？
開発環境のインストール
- Rustの開発環境がインストールされていること → メモ：WindowsでRustの開発環境 - 滴了庵日録
- Tauri CLI のインストールは下記のコマンドで。
cargo install tauri-cli
- ところが、下記のようなエラーが出る。(2024年3月現在)
Compiling common-path v1.0.0
error[E0599]: no method named `to_str` found for struct `log::kv::Value` in the current scope
--> C:\Users\lipoy\.cargo\registry\src\index.crates.io-6f17d22bba15001f\tauri-cli-1.5.10\src\lib.rs:132:29
|
132 | let action = action.to_str().unwrap();
| ^^^^^^ help: there is a method with a similar name: `to_cow_str`
- オプションに --locked を付けるとインストールに成功した。
cargo install tauri-cli --locked
- 次に下記のコマンドを実行する。(プロジェクトのひな型を生成するツールのインストール)
cargo install create-tauri-app --locked
プロジェクトの作成
- 下記のコマンドで「hello」という名前のプロジェクトを新規作成する。
cargo create-tauri-app hello
- このとき、言語とUIテンプレートを選択できる。
✔ Choose which language to use for your frontend · Rust - (cargo) ✔ Choose your UI template · Vanilla
- 言語は、Rust か TypeScript / JavaScript のいずれか
- パッケージ管理は
- 言語が Rust の場合は、Cargo である。
- 言語が TypeScript / JavaScript の場合は、pnpm, yarn, npm, bun から選択できる。
- UIテンプレートは
- 言語が Rust の場合は、Vanilla (素のJavaScript), Yew, Leptos, Sycamore から選択できる。
- 言語が TypeScript / JavaScript の場合は、Vanilla (素のJavaScript), Vue, Svelte, React, Solid, Angular, Preact から選択できる。
- 対話式でなくオプションで指定することもできる。詳しくは --help オプションで。
cargo create-tauri-app -m cargo -t vanilla hello3
プロジェクトのビルドと実行
cargo tauri dev
- リリースビルドのためには src-tauri/tauri.conf.json の「identifier」が一意な値でなければならない。
- リリースビルドには下記のコマンドを実行する。リリースビルドではアプリは実行されない。
cargo tauri build
プロジェクトのファイル構成
Rust / Vanilla の場合、プロジェクトの主なファイルは下図のような構成になる。
hello ┣src/ 【Webページ】 ┃┣index.html HTML ┃┣styles.css CSS ┃┣main.js JavaScript ┃┗assets/ 画像ファイルなど ┃ ┗src-tauri/ 【Rustプロジェクト】 ┣src/ ┃┗main.rs Rustのソース ┃ ┣Cargo.toml Rustプロジェクトの設定 ┣tauri.conf.json Tauriの設定 ┣icons/ アイコン ┃ ┗target/ ビルド出力先 ┣debug/ ┗release/
VSCodeでのデバッグについて
- 拡張機能 rust-analyzer, CodeLLDB をインストールしておく。
- 拡張機能 Tauri をインストールすると、コマンドパレットからもビルドなどができるので、お好みで。
- VSCodeでプロジェクトのフォルダを開く。
- [View]→[Terminal]で出るターミナルからコマンドを実行できる。
- デバッガを利用するには下記のような .vscode/launch.json を作成する。
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "lldb", "request": "launch", "name": "Tauri Development Debug", "cargo": { "args": [ "build", "--manifest-path=./src-tauri/Cargo.toml", "--no-default-features" ] }, // task for the `beforeDevCommand` if used, must be configured in `.vscode/tasks.json` //"preLaunchTask": "ui:dev" }, { "type": "lldb", "request": "launch", "name": "Tauri Production Debug", "cargo": { "args": ["build", "--release", "--manifest-path=./src-tauri/Cargo.toml"] }, // task for the `beforeBuildCommand` if used, must be configured in `.vscode/tasks.json` //"preLaunchTask": "ui:build" } ] }
デバッグコンソール出力について
- バックエンドの Rust の println!() の出力はターミナルに出る。
- フロントエンドの JavaScript の console.log() の出力は、アプリの画面右クリック→「開発ツールで調査する」で開く開発ツールのウィンドウのコンソールに出る。
tauri.conf.json について
例えば、Windowsでウィンドウのサイズを固定にしたい場合、tauri.conf.json の "windows" を以下のように設定する。
"windows": [ { "title": "アプリのタイトル", "width": 800, "height": 600, "resizable": false } ],
styles.css について
例えば、ウィンドウのスクロールバーを無効にしたい場合、styles.css で以下のように設定する。
body { overflow: hidden; /* スクロールバー無効 */ }
関数の引数名についての注意
- Rust 側の関数の引数名がスネークケースの場合、JavaScript側ではキャメルケースに変換されてしまう。
- つまり、Rustの関数が fn greet(invoke_message: String) の場合、
JavaScriptでは invoke("greet", { invokeMessage:"Hoge" }) のように呼び出さないといけない。 - JavaScript側のアノテーションで #[tauri::command(rename_all = "snake_case")] とすればスネークケースのままになる。
参考
