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
- mikoto2000/tauri - Docker Image | Docker Hub
- docker-images/tauri at master · mikoto2000/docker-images

コンテナ起動

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!!! に変更されている

以上。

mikoto2000 の日記

2022年3月23日水曜日

Tauri アプリ入門 2 - レンダープロセスからメインプロセスへ通信

前提