1. 概要
Rustとwebフロント技術でデスクトップアプリケーション開発のできるフレームワーク「Tauri」が正式リリースされたと聞いて，公式のQuick Startを試したり，フロントを書き換えてビルドしたりして遊んでみた．
2. 背景
動機
Rustで動くデスクトップアプリ開発フレームワークが先日（2022/06/16）正式リリースされたと知った．
最近ちょうどRustを触りたいと思っていて，さらにデスクトップアプリ開発にも興味があったので，とりあえずクイックスタートから試してみることにした．
調査
基本情報
クロスプラットフォームなアプリ開発フレームワークで，web技術でフロント，Rustで内部処理を記述できる．
Version.1.0の現在(2022/6/19)時点で，Windows，Mac，Linuxに対応していて，将来的にはモバイル（Android，iOS）への対応予定もある．（昔はM1 Macで動作しなかったという情報も見かけたが，今回試した範囲ではM1 Macでも動作した．）
OSのWebレンダー（HTMLを表示する機能）を利用することで，軽量なアプリサイズを実現している．
- TAURIを触ってみて感じたこと - Qiita
- Rustの活用でElectronよりも軽くて速いアプリフレームワーク「Tauri」が安定版に - 窓の杜
- Rust GUI の決定版！ Tauri を使ってクロスプラットフォームなデスクトップアプリを作ろう
Electronとの比較
web技術でデスクトップアプリを開発できるという点で，よくElectronと比較されている．
- 内部処理をRustで書けるため，Node.jsで処理するElectronよりも軽くて速い点で優れている．
- 他方で，Rustの知識が必要なことと，開発中も更新の度に毎回ビルド（やや時間がかかる）をする必要がある点などを気にしている人もいた．
（以上，デスクトップアプリ開発未経験者がwebで調べた情報）
開発環境
- マシン：MacBook Air (M1, 2020)
- OS：MacOS Big Sur
3. Quick Start
公式のQuick Startを試してみる．
HTML/CSS/JSとViteが用意されているが，今回はHTML/CSS/JS を試すことにした．
アプリケーションの雛形を作る
Tauriホームページに書かれているcreateコマンドを実行(今回はyarnを使用)
yarn create tauri-app
※ npm，yarn，pnpmを使う方法は公式ガイドを参照
アプリ名，ウィンドウ名の入力と，開発環境の選択が案内される
- 今回は，アプリ名とウィンドウ名をデフォルト（
Tauri App），開発環境をVanilla.jsとした．
終了すると以下のメッセージが表示される
Your installation completed.
$ cd tauri-app
$ yarn install
$ yarn tauri dev
上記のコマンドを実行すると以下の画面が表示される
-
dist/index.htmlが表示されている - ウィンドウを閉じるかctrl-cで終了できる
アプリのカスタマイズ方法を学ぶ
フロント開発用のディレクトリを作成
HTMLでUIを作成する
- ディレクトリ
uiを作成し，その中にindex.htmlを作成する
mkdir ui
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Welcome from Tauri!</h1>
</body>
</html>
Rustプロジェクトを作成
Tauri AppのコアとなるRustプロジェクトを作成する．
- Tauriは
tauriというRust crateを通じて，ウィンドウ，ビュー，OSを呼び出す． - 管理には，Rustのビルドツールである
Cargoを使用する．
initコマンドの実行
initコマンドで，最小限のRustプロジェクトを構成する．
yarn tauri init
※npm，yarn，pnpm，cargoを使用する方法は公式ガイドを参照
質問内容
1.アプリ名
- 今回は
tauri-app
2.ウィンドウタイトル
- 今回は
tauri-app
3.webアセットのパス
- 本番用にビルドするフロントエンドのパス
-
<current dir>/src-tauri/taruri.conf.jsonからの相対パスで記入する - 今回は
../uiと答える
4.devサーバのURL
- 開発中にビルドするフロントエンドのパス
-
<current dir>/src-tauri/taruri.conf.jsonからの相対パスで記入する - 今回は
../uiと答える
完了すると，src-tauri/が作成される
生成されたファイルの説明
-
src-tauri/Cargo.toml- Cargoのmanifestファイル
- アプリ構築のメタデータなどを記述
-
src-tauri/tauri.conf.json- アプリのアセットや構成をカスタマイズするために使用
- 先ほど入力したフロントエンドのパスが
"buirld":{"devPath", "distDir"}に書かれている
- 先ほど入力したフロントエンドのパスが
- APIの許可リストなどに利用
- アプリのアセットや構成をカスタマイズするために使用
-
src-tauri/icons/- デフォルトのアイコン画像の入ったディレクトリ
-
src-tauri/src/main.rs- tauriのエントリーポイントとなるメインプログラム
-
#![cfg_attr()]は，windowsでアプリを開く際にコマンドプロンプトを表示しないための記述 -
main()はアプリのエントリーポイントとなるメイン関数
-
- tauriのエントリーポイントとなるメインプログラム
#![cfg_attr(
all(not(debug_assertions), target_os = "windows"),
windows_subsystem = "windows"
)]
fn main() {
tauri::Builder::default()
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
ビルドして変更が反映されていることを確認
再びdevモードでビルドして，新たに作成したUIとRustプログラムが動いていることを確認する．
yarn tauri dev
※ npm，yarn，pnpmを使うは公式ガイドを参照
上手くいけば，先ほど作成したindex.htmlが表示される．
※ 変化がない場合，src-tauri/tauri.conf.jsonの"buirld":{"devPath", "distDir"}が，../uiとなっていることを確認する．（ここがdistだと最初と同じ画面が表示される）
4. フロント部分のカスタマイズ
ui/に適当なフロント要素(HTML/CSS/JS)を配置してみる．
-
HTML，JS，CSSで動く時計アプリ
-
JSでwavファイルを再生するアプリ
5. アプリケーションのビルド
そのままビルドコマンドを実行するとエラーが発生する
You must change the bundle identifier in
tauri.conf.json > tauri > bundle > identifier. The default valuecom.tauri.devis not allowed as it must be unique across applications.
アプリケーションのIDをユニークなものに変更する．
- 今回は検証で公開予定もないので，適当に
.sandboxを末尾につけ足したものだけのものを用いた． - Cf. Generate unique bundle identifier · Issue #2431 · tauri-apps/tauri
ビルドコマンドを実行する
yarn tauri build
src-tauri/target/release/tauri-app（アプリ）とtauri-app/src-tauri/target/release/bundle/dmg/tauri-app_0.1.0_aarch64.dmg（ディスクイメージ）がビルドされる．
tauri-appを開くと，tauri devしたときと同じ動作をするアプリケーションが開いた．
6. まとめ
TauriのQuick Startを試して，その後にフロント部分を変えてビルドまで試してみました．
これから，内部処理の書き方も勉強して色々試してみます．
何か面白いことがあったら続報を上げます．