はじめに
Electronの代替を目指す軽量なRust製フレームワーク「Tauri」、リリース候補版に到達
2022年3月2日
rustもJavaScriptもよく知らないけど、試してみる
最終形はこちら（GIFアニメーションあり）
環境構築
Setting Up Windowsにしたがって環境をつくる
- Windows 11 Home
- Win11であれば、
WebView2はプリインストールされているらしい
- Win11であれば、
- Visual Studio 2022 Community
- C++2019再頒布パッケージ
- Node.js
- 公式では
nvmやyarnを推しているが、入れ替えるのが面倒なのでnpmのまま
- 公式では
アップデート後のバージョン情報
rust
rustup update
> rustc --version
rustc 1.60.0
> cargo --version
cargo 1.60.0
> rustup --version
rustup 1.24.3
npm
> npm update npm
> npm --version
8.7.0
tauriプロジェクト第一歩
Visual Studio Codeのターミナルで作業する
プロジェクトを作成する
プロジェクト名など尋ねられるが、すべてデフォルトにした（＝エンターキーを連打した）
npx create-tauri-app
成功すると次のコマンドを指示されるが、いったん公式通りにnpm run tauri infoを実行する
Your installation completed.
$ cd tauri-app
$ npm install
$ npm run tauri dev
プロジェクトのセットアップを確認する
以降、作成したプロジェクトの階層で作業する
cd tauri-app
npm run tauri info
セットアップの出力結果
Environment
› OS: Windows 10.0.22000 X64
› Webview2: 100.0.1185.44
› MSVC:
› Node.js: 16.14.2
› npm: 8.7.0
› pnpm: Not installed!
› yarn: 1.22.4
› rustup: 1.24.3
› rustc: 1.60.0
› cargo: 1.60.0
› Rust toolchain: stable-x86_64-pc-windows-msvc
Packages
› @tauri-apps/cli [NPM]: 1.0.0-rc.7(outdated, latest: 1.0.0-rc.8)
› @tauri-apps/api [NPM]: 1.0.0-rc.3(outdated, latest: 1.0.0-rc.3)
› tauri [RUST]: 1.0.0-rc.5 (no lockfile),
› tauri-build [RUST]: no manifest (no lockfile),
› tao [RUST]: no manifest (no lockfile),
› wry [RUST]: no manifest (no lockfile),
App
› build-type: bundle
› CSP: unset
› distDir: ../dist
› devPath: ../dist
App directory structure
├─ dist
├─ node_modules
└─ src-tauri
公式だとApp directory structureに.gitの文字があるが、上記出力結果にはない
そのため手作業でプロジェクトをgit管理下におく作業をする
作業と言っても、git initして.gitignoreも追加するだけ
（こちらの.gitignoreが最小の構成かと思われる）
ちなみにcargo newでつくったプロジェクトの.gitignoreにはnode_modulesが入っていないので流用できなかった
プロジェクトをビルドして実行する
初回npm installには数分かかる
npm install
npm run tauri dev
プロジェクトの中身を変更する
Reactは聞いたことがあったが、バニラJS1と言われてもピンとこなかった
そんな知識レベルではあるものの、ボタンを押してハローワールドくらいしてみたい
main.rsを書き換える
こちらがいわゆるバックエンドってやつだと思う（ふわっとした知識）
公式のCreating Rust Commandsの章を参考に進める
動きとしては、画面のボタンが押されたときに、画面に表示したいメッセージを返すこととする
mainにハンドラーを追加して、その実装となる関数も追加した
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![my_custom_command]) // この行追加
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
// この関数を追加
#[tauri::command]
fn my_custom_command() -> String {
"こんにちは、世界！！".into()
}
関数の上のアノテーションっぽいやつとか、.into()の意味はわからない
tauri.conf.jsonを書き換える
ボタンをつくるときに、下記のように指示されたので、
APIを呼び出すために、jsonファイルに1行追加する
// With the Tauri global script, enabled when
tauri.conf.json > build > withGlobalTauriis set to true:
"build": {
"distDir": "../dist",
"devPath": "../dist",
"beforeDevCommand": "",
"beforeBuildCommand": "",
"withGlobalTauri": true
},
追加したのは最後の1行だけ
withiGrobalTauriの公式リファレンスはこちら
index.htmlを書き換える
<body>タグの中にJavaScriptを書く（JavaScriptを書く日が来るなんて！）
<body>
<h1>tauri-app</h1>
// 画面の要素を配置する
<button id="button">ハローワールドのボタン</button>
<div id="label"></div>
// これがJavaScript
<script>
const invoke = window.__TAURI__.invoke
const button = document.querySelector('#button')
const label = document.querySelector('#label')
// ボタンが押されたときの動作
button.addEventListener('click', () => {
invoke('my_custom_command')
.then(displayMessage)
})
function displayMessage(message) {
label.innerText = message
}
</script>
</body>
ボタンを1つ、文字表示用の空の<div>を1つ配置した
また、コードには載せていないが、日本語のテストも兼ねて<meta>タグに文字コードUTF8を指定した
<script>タグ内の説明
- ボタンクリック時に、さきほどつくったrust側のボタンコマンドを呼び出す
-
invokeのあとの.thenにより、コマンドの戻り値（メッセージ）をdisplay~~関数に渡す -
divタグにはlabelidを振っているので、そこにメッセージを表示する
一度きりの動作、クリアコマンドはない
実際に動作している様子
ボタンを押したら、その横にメッセージが表示される
おわりに
tauriプロジェクト生成時にいろんなフレームワークが選べるみたいなので
次やるなら、Reactとか使ってみたい