Mac版！TAURIを使って、デスクトップアプリを作ってみる

いつものtaanatsuです。
今日は、Electronの代替（に、なるであろう）Rust製の
クロスプラットフォームデスクトップアプリケーション作成フレームワーク「TAURI」で遊んでみましょう。

Electronに変わる、つまり、HTML/CSS/JavaScriptでUIを組めるということです！
さらにさらに、TAURIはChromiumを使わずOSが備えているWebViewの機能を用いるため、吐き出されるファイルも軽量になるようです！
胸熱ですね！！

そして今回、Windows版の記事はあったので、それを見ながらMacでやっていきます。
それではやっていきましょうか。

事前準備

Rust製ということで、RustをPCに入れておかないといけません。
Windows版の記事には「Scoopで入れるとコンパイル時にエラーになる」とのことでしたが、
MacだとBrewで入れていても動くっぽい（動作した）ので、それでやっていきます。

$ brew install rust

TAURIのプロジェクトを作成

フロントエンドあまり書かないマンのわたしは、最近の流行りを知らないので手癖でyarnを使っていきます。
もちろんnpmでも実行できますのでご安心ください。yarnをnpmに置き換えるだけのはずです。

まずは以下のコマンドを実行し、対話形式でtauriのプロジェクトを作成します。

$ yarn create tauri-app

↓

## 好きなキーをおしてください
Press any key to continue...   

## 好きなアプリ名を入れてください。デフォルトは「tauri-app」になります
? What is your app name?

## タイトルバーに表示したい文字列を入力してください。デフォルトは「Tauri App」になります。
? What should the window title be?

## JSに何を使うかを聞かれます。好きなものを選んでください。今回はVanilla.jsを選択しております。
? What UI recipe would you like to add? Vanilla.js (html, css, and js without the bundlers)
❯ Vanilla.js (html, css, and js without the bundlers) 
  create-vite (vanilla, vue, react, svelte, preact, lit) (https://vitejs.dev/guide/#scaffolding-your-first-vite-project) 
  create-react-app (https://create-react-app.dev/) 
  Svelte (https://github.com/sveltejs/template) 
  Solid (https://github.com/solidjs/templates) 
  Vue CLI (https://cli.vuejs.org/) 
  Angular CLI (https://angular.io/cli) 
(Move up and down to reveal more choices)

暫く待つとプロジェクトが作成されます。
その際、以下のような指示があるので表示される3つのコマンドを実行してみましょう。

>> Running final command(s)

    Your installation completed.

    $ cd tauri-app
    $ yarn install
    $ yarn tauri dev

UIを準備する

さて、サンプルは動作したので自分でUIを作っていきたいですね。

デフォルトの設定を破棄する

新しくプロジェクトを作ってもいいですが、面倒なので使いまわしていきます。
設定を書き換える必要があるので、自動で作成されているsrc-tauriディレクトリを削除します。

$ rm -rf src-tauri

それか後述するinit時に、--forceをつけると消さなくても良いかもしれません。（試してない）

UIディレクトリの作成

UIデータを保存するディレクトリを作成します。

$ mkdir ui

UI用のHTMLを作成

作成したuiディレクトリの中に、index.htmlファイルを以下の内容で作成します。
あ、ここですでにいろいろ試したい方は好きに書き換えてください。
ひとまずコピペで遊びたいって人向けに貼っておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
またあったね世界！
</body>
</html>

TAURIの設定ファイルを作成

以下コマンドを実行し、TAURI用の設定を作成します。
設定は対話形式で行われます。

$ yarn tauri init

↓

## 好きなアプリ名を入れてください。デフォルトは「tauri-app」になります
✔ What is your app name?

## 好きなアプリ名を入れてください。デフォルトは「tauri-app」になります
✔ What should the window title be?

## UIアセット（HTML/CSS/JS）がどこにあるかを指定します。
## ここで注意が必要なのは、`プロジェクトディレクトリ/src-tauri`が基準になります。
## 作ったuiディレクトリはsrc-tauriディレクトリの一個上の階層になるので「../ui」と入力します。
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created?  ../ui

## この子も今回はuiディレクトリが基準なので`../ui`と入力します。
✔ What is the url of your dev server?   ../ui