Tauri を試す
![nonanonno](https://res.cloudinary.com/zenn/image/fetch/s--vW3S97u6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/58e5499c30.jpeg)
Prerequisites によると Rust とWebView2 に依存している。今回はLinux (Docker) で進めるが、Windows10ではWebView2が標準でインストールされているわけではないので注意(Windows11ではインストールされている)
手順は以下のもの
Dockerfile
FROM ubuntu:20.04
RUN apt-get update && apt install -y tzdata && apt-get clean && rm -rf /var/lib/apt/lists/*
ENV TZ Asia/Tokyo
RUN apt-get update && DEBIAN_FRONTEND=noninteractive apt-get install -y \
libwebkit2gtk-4.0-dev \
build-essential \
curl \
wget \
libssl-dev \
libgtk-3-dev \
libayatana-appindicator3-dev \
librsvg2-dev \
&& apt-get clean && rm -rf /var/lib/apt/lists/*
devcontainer
{
"name": "tauri-test",
"build": {
"dockerfile": "Dockerfile"
},
"forwardPorts": [
6080
],
"remoteUser": "vscode",
"features": {
"git": "latest",
"desktop-lite": "latest",
"commont": "latest",
"common": "latest",
"rust": "latest",
"node": "lts",
},
"extensions": [
"rust-lang.rust-analyzer"
]
}
node
は前提として明記されていないが、後でViteを使うので入れておく。
![nonanonno](https://res.cloudinary.com/zenn/image/fetch/s--vW3S97u6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/58e5499c30.jpeg)
cargo install tauri-cli --version "^1.0.0"
により Tauri CLI をインストールする。Tauri CLI は以下の機能を含む。
- Cargo による core (Rust製) のビルド
- Frontend developement server の起動
- アッセトのバンドル
- sidecars and resources when building for production (?)
![nonanonno](https://res.cloudinary.com/zenn/image/fetch/s--vW3S97u6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/58e5499c30.jpeg)
NPM 経由での Tauri CLI の導入
Tauri CLI は Node.js アドオンとしてもコンパイルされ、NPMパッケージとして配布している。CLIはコンパイル済みのものが導入され(cargo install ...
ではソースをダウンロードしてビルドする)、npm の scripts
セクションから呼ぶことができる。
npm install --save-dev @tauri-apps/cli
package.json
{
// This content is just a sample
"scripts": {
"tauri": "tauri"
}
}
インストール経由が違うだけでどちらを使っても良さそう。
![nonanonno](https://res.cloudinary.com/zenn/image/fetch/s--vW3S97u6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/58e5499c30.jpeg)
Quick Start
クイックスタートでは HTML/CSS/JavaScript
か Vite
のどちらかを選べる。Vite
(ヴィートと読む)はフロントエンドのビルドツール。フロントエンド良く知らないので正直何なのかわからんが使ってみる。たぶん最近のフロントエンドの文脈が求められると思うが。
なお、クイックスタートではよくわからん場合は HTML/CSS/JS
が勧められている。通信周りも自分で書くと思うので明確なのだろう。
![nonanonno](https://res.cloudinary.com/zenn/image/fetch/s--vW3S97u6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/58e5499c30.jpeg)
Vite で Tauri アプリを作る
そもそもの話として、TauriはなんらかのFrontendフレームワークとRust coreを持つデスクトップアプリケーションをビルドするフレームワーク。つまり、以下を持つ。
- Rustバイナリ。ウィンドウを作り、そのウィンドウが使用可能なネイティブ関数を公開する
- Frontend。UI周り
手順では、
- Frontendの枠組みを作り
- Rustプロジェクトを作り
- FrontendとRustの通信方法を示す
Frontendを作る
# Project name -> 任意 (vite-project とする)
# Select a framework -> vanilla
# Select a variant -> vanilla-ts
npm create vite@latest
によりテンプレートからプロジェクトが作られる。その後 vite.config.ts
を追加するが、これは作成したプロジェクトのルートに設置する。
import { defineConfig } from 'vite'
export default defineConfig({
// prevent vite from obscuring rust errors
clearScreen: false,
// Tauri expects a fixed port, fail if that port is not available
server: {
port: 3000,
strictPort: true,
},
// to make use of `TAURI_PLATFORM`, `TAURI_ARCH`, `TAURI_FAMILY`,
// `TAURI_PLATFORM_VERSION`, `TAURI_PLATFORM_TYPE` and `TAURI_DEBUG`
// env variables
envPrefix: ['VITE_', 'TAURI_'],
build: {
// Tauri supports es2021
target: ['es2021', 'chrome97', 'safari13'],
// don't minify for debug builds
minify: !process.env.TAURI_DEBUG && 'esbuild',
// produce sourcemaps for debug builds
sourcemap: !!process.env.TAURI_DEBUG,
},
})
Rustプロジェクトの作成
Tauri CLI を使って Tauriプロジェクトを作る。これは、上で作成したvite-project
で実行する。
# cargo の場合
# What it your app name -> 任意(デフォルトにした)
# What should the window title be -> 任意(デフォルトにした)
# Where are your we assets... -> ../dist
# What is the url of your dev server -> http://localhost:3000
cargo tauri init
これによりsrc-tauri
以下にTauriプロジェクト(Cargoプロジェクト)が作成される。
上記コマンドだけで準備はほとんどできているが、vite の開発サーバが自動的に起動するように src-tauri/tauri.config.json
を修正する。
{
"build": {
// The Tauri CLI will execute this command when you run `tauri build`.
// This is the place to bundle your frontend and place html,css, and js files into the `distDir`.
"beforeBuildCommand": "npm run build", <- これ
// The Tauri CLI will execute this command when you run `tauri dev`.
// This should start your development server.
"beforeDevCommand": "npm run dev", // <- これ
"devPath": "http://localhost:3000",
"distDir": "../dist"
},
以下のコマンドでTauriアプリを起動する。
cargo tauri dev
Command を呼び出す
CommandによってFrontendはRustと通信する。Command
は #[tauri::command]
アトリビュートで指定する。
#[tauri::command]
fn greet(name: &str) -> String {
format!("Hello, {}", name)
}
そして .invoke_handler()
関数と generate_handler![]
マクロで関数をJavaScriptから呼べる関数として登録する。
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
NodeJS側では@tauri-apps/api
ライブラリを使ってアクセスする。
# Install
npm install @tauri-apps/api
invoke
関数で呼び出すことができる。
import { invoke } from '@tauri-apps/api'
// now we can call our Command!
// Right-click the application background and open the developer tools.
// You will see "Hello, World!" printed in the console!
invoke('greet', { name: 'World' })
// `invoke` returns a Promise
.then((response) => console.log(response))
何も表示されないが、Viteアプリでは右クリックから開発者モードに入れる。そこのコンソールに出力されていることを確認できる。