Vanilla.js のプロジェクトを作って、「レンダープロセス -> メインプロセス」の通信を実装するところまで。
前提
- OS: Windows 11 Pro 21H2 ビルド 22000.556
- Docker: Docker version 20.10.12, build e91ed57
- WSL2 Kernel: 5.10.60.1-microsoft-standard-WSL2
- WSLg で GUI アプリが実行できること
- 使用する Docker コンテナ:
mikoto2000/tauri:latest
コンテナ起動
WSL2 上の Ubuntu で、以下コマンドを実行。
docker run -it --rm -v "$(pwd):/work" --workdir "/work" --name tauri \
-e DISPLAY=:0 \
-e WAYLAND_DISPLAY=wayland-0 \
-e XDG_RUNTIME_DIR=/tmp/wslg/runtime-di \
-e PULSE_SERVER=/mnt/wslg/PulseServer \
-v /tmp/.X11-unix:/tmp/.X11-unix \
-v /mnt/wslg:/mnt/wslg \
-v $HOME/.cargo:/home/node/.cargo \
mikoto2000/tauri:latestプロジェクトひな形の作成
create-tauri-app コマンドで Tauri
アプリのひな形を作る。
今回は、 Vanilla.js で作成。
プロジェクト作成
$ npx create-tauri-app
Need to install the following packages:
create-tauri-app
Ok to proceed? (y) y
We hope to help you create something special with Tauri!
You will have a choice of one of the UI frameworks supported by the greater web tech community.
This tool should get you quickly started. See our docs at https://tauri.studio/
If you haven't already, please take a moment to setup your system.
You may find the requirements here: https://tauri.studio/docs/getting-started/setting-up-linux/
Press any key to continue...
? What is your app name? tauri-app-render2main
? What should the window title be? Tauri App Render2Main
? What UI recipe would you like to add? Vanilla.js (html, css, and js without the bundlers)
>> Running initial command(s)
>> Installing any additional needed dependencies
added 2 packages, and audited 3 packages in 2s
2 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
added 3 packages, and audited 6 packages in 6s
3 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
>> Updating "package.json"
>> Running "tauri init"
> tauri
> tauri "init" "--app-name" "tauri-app-render2main" "--window-title" "Tauri App Render2Main" "--dist-dir" "../dist" "--d
ev-path" "../dist"
>> Updating "tauri.conf.json"
>> Running final command(s)
Your installation completed.
$ cd tauri-app-render2main
$ npm install
$ npm run tauri dev
npm notice
npm notice New minor version of npm available! 8.1.2 -> 8.5.5
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.5.5
npm notice Run npm install -g npm@8.5.5 to update!
npm noticeひな形の実行確認
cd tauri-app-render2main
npm install
npm run tauri dev以下のウィンドウが表示されれば OK.
プロジェクトのファイル構成確認
Node のプロジェクト内に Cargo のプロジェクトが入っている状態。
tauri-app-render2main/
+- node_modules/
+- package-lock.json
+- package.json
+- dist/ : フロントエンド(レンダープロセス)の成果物
| +- index.html
+- src-tauri/ : バックエンド(メインプロセス)のプロジェクト
+- src/ : rust ソースコード
| +- main.rs
+- .gitignore
+- tauri.conf.json : Tauri プロジェクト設定ファイル
+- icons/
+- Cargo.lock
+- Cargo.toml
+- target/
+- build.rsレンダープロセスからメインプロセスの関数を呼び出す
Tauri では、レンダープロセスからメインプロセスを呼び出すために、「コマンド」システムを提供しているので、それを利用して実装する。
手順は以下の通り、それぞれ説明していく。
- メインプロセス側の関数を実装
- 「レンダープロセスから関数呼び出しをするよ」という宣言を追加
- レンダープロセスに、メインプロセスを呼び出す処理を追加
メインプロセス側の関数を実装
レンダープロセスから呼び出される関数(Tauri command)を追加する。
今回は、 src-tauri/src/command.rs
という名前でモジュールを作り、そこに実装する。
use tauri;
#[tauri::command]
pub fn echo(message: String) -> String {
println!("メッセージ「{}」を受け取りました", message);
return message;
}「レンダープロセスから関数呼び出しをするよ」という宣言を追加
src-tauri/src/main.rs
にモジュール使用宣言を行い(mod command;)、
tauri::Builder::default() のメソッドチェーンに
invoke_handler を追加する。
#![cfg_attr(
all(not(debug_assertions), target_os = "windows"),
windows_subsystem = "windows"
)]
mod command; // 使用モジュールの宣言
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![command::echo]) // 作成した関数をレンダープロセスから呼び出すという宣言
.run(tauri::generate_context!())
.expect("error while running tauri application");
}レンダープロセスに、メインプロセスを呼び出す処理を追加
Vanilla.js の場合、 import を使うのが難しいため、
tauri.conf.json で build.withGlobalTauri
のプロパティを追加して、 true を設定する。
これにより、window オブジェクト下に、 Tauri
関連のオブジェクトがぶら下がる。
レンダープロセスからメインプロセスへの呼び出し関数は、
window.__TAURI__.invoke という名前でアクセスできる。
dist/index.html の head
タグ末尾に以下コードを追加する。
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
const invoke = window.__TAURI__.invoke;
async function callEcho(str) {
// メインプロセスからメッセージを取得
let message = await invoke('echo', {message: str});
// メインプロセスから取得したメッセージをコンソールへ表示
console.log(message);
// メインプロセスから取得したメッセージを h1 へ設定
document.querySelector('h1').textContent = message;
}
callEcho('Hello, Tauri!!!');
});
</script>ここまで完了したら、 npm run tauri dev
を実行しなおす。
以下 2 点が反映されていれば OK.
npm run tauri devを実行したコンソールにメッセージ「Hello, Tauri!!!」を受け取りましたと表示される- 表示されたウィンドウにのラベルが、
Hello, Tauri!!!に変更されている
以上。
