ぬの部屋（仮）
nu-no-he-ya

<<前の記事次の記事>> |

RustでTauriを使ってGUIを作る(Vanilla)

2024年6月19日公開
2024年6月19日

RustでGUIを扱うよい方法を探している。

環境構築

Node.js

Node.jsは、クライアントPCで動くJavaScript実行環境。Node.jsの公式サイトからダウンロードする。LTS版とCurrent版があるがそれぞれ安全版と最新版程度の違いでしかないので好きなほうでいい。

例のごとく、私はmsiによるインストールを好まないので、Other Downloadsからzip版をダウンロードして導入して自分でパスを通した。

tauri-cli

Tauri Command Line Interface。Tauri開発に必要なコマンドラインツール。

Rust環境は構築済みであることが前提なので、以下のコマンドでtauri-cliを導入する。

cargo install tauri-cli

プロジェクト生成

最初に、プロジェクトを生成するディレクトリへCDする。

cd C:\dev\rs-tauri\

以下のコマンドを叩くと、対話形式でのtauriプロジェクトの生成が始まる。

npx create-tauri-app

Project name プロジェクト名を入力　例：my1st_tauri

Choose which language to use for your frontend カーソル上下でRustを選択してEnter

Choose your UI template 今回はVanillaを選択。選択肢によってプロジェクト構成が違う。

ビルド

まず作成したプロジェクトのディレクトリへ入る。

cd my1st_tauri

続いて、プロジェクトをビルド・実行

デバッグビルド

cargo tauri dev

リリースビルド

cargo tauri build

ただし、これを実行すると、以下のラーが出る

Error You must change the bundle identifier in `tauri.conf.json > tauri > bundle > identifier`. The default value `com.tauri.dev` is not allowed as it must be unique across applications.

このエラーはBundle.identifierという設定項目が初期値のままの時に発生する。

バンドルIDは、アプリケーション固有のIDで、何でもいいが他のTauriアプリケーションと重複しないIDを与える。一般的にはドメインを逆にしたものを与えるらしい。

tauri.conf.jsonからbundle > identifierを変更

src-tauri\tauri.conf.jsonを以下のように変更し、再度cargo tauri buildする。

Before

{
  "build": {
    "devPath": "../src",
    "distDir": "../src",
    "withGlobalTauri": true
  },
  "package": {
    "productName": "tauri-app",
    "version": "0.0.0"
  },
  "tauri": {
    "allowlist": {
      "all": false,
      "shell": {
        "all": false,
        "open": true
      }
    },
    "windows": [
      {
        "title": "tauri-app",
        "width": 800,
        "height": 600
      }
    ],
    "security": {
      "csp": null
    },
    "bundle": {
      "active": true,
      "targets": "all",
      "identifier": "com.tauri.dev",
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ]
    }
  }
}

After

{
  "build": {
    "devPath": "../src",
    "distDir": "../src",
    "withGlobalTauri": true
  },
  "package": {
    "productName": "tauri-app",
    "version": "0.0.0"
  },
  "tauri": {
    "allowlist": {
      "all": false,
      "shell": {
        "all": false,
        "open": true
      }
    },
    "windows": [
      {
        "title": "tauri-app",
        "width": 800,
        "height": 600
      }
    ],
    "security": {
      "csp": null
    },
    "bundle": {
      "active": true,
      "targets": "all",
      "identifier": "my.unique.identify",
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ]
    }
  }
}

なお、cargo tauri devでデバッグビルドと同時に実行した実行ファイルは、src-tauri\target\debug\ 内にある。しかしこの.exeを直接実行しようとすると、ウィンドウこそ開くが

127.0.0.1 により、接続が拒否されました。

参考

プログラマーの魔法の使い方　　　 Tauri デスクトップアプリ開発のはじめ方。

https://programwiz.org/2022/03/27/how-to-develop-desktop-app-with-tauri-framework/

コメントを残すコメントをキャンセル

この記事のトラックバックURL：