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

keyboard_arrow_left戻る
Windows
TAURI

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

またあったね世界！