TAURIとは？
Electronの代替になりそうなクロスプラットフォームのデスクトップアプリケーション作成ライブラリ。
「タウロイ」と呼ぶっぽい？（By GOOGLE翻訳）
Rust作。
ElectronはChromium依存だが、
TAURIはUI基盤としてOSが備えているWebViewの機能を用いるため、
Electron製のアプリケーションで組み込まれるChromiumのようなレンダラの組み込みを不要にしているとのこと。
（引用: https://www.publickey1.jp/blog/22/electronrusttauri10windowsmaclinux.html ）
つまり、サイズが小さくなり、
Chromiumのバージョンアップなどの対応に追われなくても良くなる。
良さそう
準備
Rustを入れる
私はWindowsで作るつもりだが、Scoopで入れたRustだとコンパイル時にエラーが出る（なんでだよ！！）
なので、公式からインストールをする。
https://www.rust-lang.org/ja/learn/get-started
その際、公式に書いてあるとおり、「Visual Studio C++ Build tools」を入れないとコンパイルに失敗するので入れてあげる。
こいつ、7GBもあるのか…
TAURIを入れる
個人的に昔からyarnを使ってるので、yarnで構築。
npmとかでも行けるっぽいので、適宜変換してほしい。
$ yarn create tauri-app
これを実行すると
Press any key to continue... という文言でCUIが停止するので、
とりあえずEnterを押す。
? What is your app name? (tauri-app) . という文言でCUIが停止するので、
好きなプロジェクト名を入れるか、とりあえずEnterを押す。
すると、
? What should the window title be? (Tauri App) という文言でCUIが停止するので、
好きなウインドウタイトルを入れるか、とりあえずEnterを押す。
すると、
? What UI recipe would you like to add? (Use arrow keys)
> 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)
という文言でCUIが停止するので、
好きなのを矢印キーで選択してEnterを押す。
今回は Vanilla.js (html, css, and js without the bundlers) で進めることにした。
最後に
>> Running final command(s)
Your installation completed.
$ cd tauri-app
$ yarn install
$ yarn tauri dev
という文言で処理が終わるので、表示されたコマンドを一つずつ実行していく。
$ cd tauri-app
$ yarn install
$ yarn tauri dev
yarn tauri devを実行するとデスクトップアプリケーションが立ち上がります。
こんにちは世界！
自分のHTMLでアプリケーションを作る
「準備」で作ったディレクトリのママ作業します。
基本的にチュートリアルの通りすすめてます。
UI用のディレクトリを作成
$ mkdir ui
中身にindex.htmlとして、以下のファイルを作成します。
（./ui/index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
またあったね世界！
</body>
</html>
設定ファイルの作成
最初にディレクトリ内に src-tauriディレクトリがあれば削除しておきます。
その後、以下のコマンドを実行。
$ yarn tauri init
上記コマンドを実行すると、
まず、✔ What is your app name? と、アプリケーション名を聞かれるので自由に入力してEnter
次に、✔ What should the window title be?と、ウィンドウタイトル名を聞かれるので自由に入力してEnter
次に、
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created?
と、
HTMLファイルなどのディレクトリを聞かれます。
ここが曲者で、基準ディレクトリが 作ったプロジェクト/src-tauri なので、先程作ったuiディレクトリを指定するには
../uiと入力します。
最後に✔ What is the url of your dev server?と開発サーバーのURL聞かれるので、
今回はホットリロードなどを用意していないので../uiを入力。
これで準備完了！
コンパイル
$ yarn tauri dev
またあったね世界！
Nは本名から取っています。
Laravelが大好きなPHPerで、WEBを作るときはLaravelを技術スタックに絶対推すマン。
PHP、Pythonと、昔はperlを書いていたP言語エンジニア。
最近はNimを書いたりしています。