2 年 ago
清, 宇
2 minutes

はじめに

Electronの代替を目指す軽量なRust製フレームワーク「Tauri」、リリース候補版に到達
2022年3月2日

rustもJavaScriptもよく知らないけど、試してみる

最終形はこちら（GIFアニメーションあり）

環境構築

Setting Up Windowsにしたがって環境をつくる

    • Windows 11 Home

Win11であれば、WebView2はプリインストールされているらしい

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
1.png

プロジェクトの中身を変更する

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 > withGlobalTauri is set to true:

  "build": {
    "distDir": "../dist",
    "devPath": "../dist",
    "beforeDevCommand": "",
    "beforeBuildCommand": "",
    "withGlobalTauri": true
  },

追加したのは最後の1行だけ

withiGrobalTauriの公式リファレンスはこちら

index.htmlを書き換える

タグの中に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つ、文字表示用の空の

を1つ配置した

また、コードには載せていないが、日本語のテストも兼ねてタグに文字コードUTF8を指定した

bannerAds