LoginSignup
8
16

RustのGUIフレームワーク Tauri でデスクトップアプリ開発を始める

Last updated at Posted at 2023-01-13

Rust で作られたGUIフレームワークで、デスクトップアプリ開発を始めるまでの手順と、
Tauri の簡単な設定内容を記録しておきます。

開発環境は Windows で、Rustのバージョンは以下で実施してます。

> cargo -V
cargo 1.65.0 (4bc8f24d3 2022-10-20)

> rustc -V
rustc 1.65.0 (897e37553 2022-11-02)

Tauri はクロスプラットフォーム対応なので、Linux向け、Mac向けもできます。
最近は Tauri Mobile で Android, iOS 向けのアプリも作れるようになったみたいです。
https://tauri.app/blog/2022/12/09/tauri-mobile-alpha/

Tauri をインストールする

cargo から簡単にインストールできます。
https://github.com/tauri-apps/create-tauri-app

> cargo install create-tauri-app
> cargo create-tauri-app

tauri1.png

パッケージマネージャを選ぶ

cargo create-tauri-app すると、パッケージマネージャの選択を促されます。
tauri2.png
Cargoが速いし慣れてるのでCargoを選びたいところですが、Cargoにすると UI Template の選択が Vanilla か Yew の二択になります。
Vanilla でいい人は Cargo にするといいと思います。
ExtJS とかをフロントで読み込んで使う場合は Vanilla がやり易いと思います。

React、Vue や Svelte を使いたい場合は、パッケージマネージャは yarn か npm を選ぶといいです。
npm はちょっと重たいので、今回は yarn を使ってみます。
tauri4.png
色々出てきました。
せっかくだからおれは Svelte をえらぶぜ!

Tauri をビルドする

パッケージマネージャの構築が終わると、続いて入力するコマンドが表示されます。
tauri5.png
選ぶとコマンドを実行しろと言われます。
言われたとおりに入力していきます。

> cd tauri-app
> yarn
> yarn tauri dev

最後のコマンドでビルドが走ります。結構長いです。
ビルドが終わるとアプリの画面が表示されます。
tauri6.png

後は選んだ UI Template に沿って画面を作っていくことになります。

Tauri の設定について

Tauri のアプリケーションとしての設定は、src-tauri/tauri.config.json で管理できます。

アプリのウィンドウサイズを変える

tauri.config.json の windows プロパティで設定できます。width, height とそのままのプロパティがあります。
https://tauri.app/v1/api/config/#windowconfig

こんな感じで書きます。

    "windows": [
      {
        "fullscreen": false,
        "height": 620,
        "minHeight": 400, 
        "resizable": true,
        "width": 800,
        "minWidth": 580
      }
    ]

アイコンを変更する

src-tauri/icons にそれぞれのサイズのアイコンを置くと、ビルドするときに読み込んでくれます。
tauri.config.json にも bundle.icon 以下に設定があります。

Tauri にはアイコン作成のコマンドも用意されています。
png で作った画像ファイルを ico 形式かつサイズ毎に変換してくれます。

> cargo tauri icon .\icon.png -o .\icons\

-o は出力先のオプションです。出力したファイルを src-tauri/icons にコピーすればアイコンを変更できます。

ローカルファイルにアクセスする

コンテンツセキュリティポリシー(CSP)を設定します。
security プロパティに以下を追加すればアクセスできるようになります。

    "security": {
      "csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost"
    },

WebViewプロセスからのコマンド実行を許可する

レンダラプロセスからOSコマンドを実行する場合、shell プロパティに実行するコマンドを明示する必要があります。
https://tauri.app/v1/api/js/shell/

      "shell": {
        "all": true,
        "execute": true,
        "sidecar": true,
        "open": true,
        "scope": [{
          "name": "taskkill",
          "cmd": "taskkill",
          "args": true
        }, {
          "name": "dir",
          "cmd": "dir",
          "args": true
        }]
      }

使えるコマンドを許可したら、レンダラプロセスからコールします。

import { Command } from '@tauri-apps/api/shell';
let cmd = new Command('taskkill', ["/im", "hogehoge.exe", "/f"]);
let process = await cmd.spawn();

その他

コアプロセスからコマンドを実行するサンプルも書きたかったのですが、残念なことにやり方を失念しました…。
確認できたら追記しようと思います。

使い方は概ね Tauri の公式ガイドに大体書いてくれてますが、検索は少し探しにくいです。
https://tauri.app/v1/guides/

プロジェクトサンプル

Tauri でDMM版ウマ娘のイベントチェッカー&育成ログ保存を行う Windows アプリケーションを作成しています。
とっかかりの参考にはなると思いますので、URL書いておきます。

Vanilla JS で作る場合はこちらが参考になると思います。

参考

8
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
16