Skip to content

tauri v2に入門(ローカルファイルアクセス, 開発者ツール, ビルド)

Share
    7981文字(約13分)

モチベーション

tauriはwebview2(OS内蔵)でGUIアプリケーションを作らせてくれる。似たようなフレームワークにelectronがあるがこれはchromiumを同梱するため容量・メモリ使用量が大きくまたセキュリティアップデートが(一応)必要なため、少し避けていた。もちろん意図せずアップデートされないのでレイアウトが崩れるなどの心配は不要だがそこまで気にするアプリを作るわけではないためメリットに対してのデメリットの強さがどうしてもあった。
その点tauriは便利そう、ということでtauriのAPIがこなれるまで待っていた。v2になったことで雰囲気破壊的変更はしつくしたのではないか、ということで着手してみた。
その結果それなりに苦労したので初期セットアップに必要そうな点をまとめた。

使ってみた所感

  • 良い点
    • 導入が楽。公式リファレンスにデバッグ・ビルドまで記載してある。すばらしい
    • 今回の構成だと15MBほど、electronと比べると小さい(と思う。最近ビルドしていないので正確なサイズは知らない)
    • フロント・バック共にホットリロード完備。starterに含まれているのは本当に楽
  • 困る点
    • 地味にビルド時間が長い。ほぼ実装していないが依存ライブラリが多いのか10秒以上は待つ。大規模アプリを作成した場合にどうなるのかがやや不安だが、そんなものは作る予定が無いのでどうでもよい
    • (Rustの実装が難しい)

バージョン

主要なものだけ。どれが主要かはよくわかっていない。

ライブラリ バージョン
cargo 1.82.0
rustc 1.82.0
tauri 2.1.1
tauri-build 2.0.3
@tauri-apps/api 2.2.0

プロジェクト作成

https://v2.tauri.app/start/ を参考にセットアップ。特に苦労はない。以下やや古いログ

>bun create tauri-app
✔ Project name · tauri-app
✔ Identifier · com.tauri-app.app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · bun
? Choose your UI template ›
❯ Vanilla
  Vue
  Svelte
  React
  Solid
  Angular
  Preact
✔ Choose your UI flavor · TypeScript

Template created!

Your system is missing dependencies (or they do not exist in $PATH):
╭─────┬───────────────────────╮
│ Bun │ Visit https://bun.sh/ │
╰─────┴───────────────────────╯

Make sure you have installed the prerequisites for your OS: https://tauri.app/start/prerequisites/, then run:
  cd tauri-app
  bun install
  bun run tauri android init

For Desktop development, run:
  bun run tauri dev

For Android development, run:
  bun run tauri android dev

>cd tauri-app
>bun install
bun install v1.1.34 (5e5e7c60)

+ @sveltejs/adapter-static@3.0.8
+ @sveltejs/kit@2.15.1
+ @sveltejs/vite-plugin-svelte@5.0.3
+ @tauri-apps/cli@2.1.0
+ svelte@5.16.0
+ svelte-check@4.1.1
+ typescript@5.6.3 (v5.7.2 available)
+ vite@6.0.6
+ @tauri-apps/api@2.1.1
+ @tauri-apps/plugin-opener@2.2.2

tauri-app>bun run tauri android init
$ tauri android init
action request:  to initialize Android environment; Android support won't be usable until you fix the issue below and
re-run `tauri android init`!
    Have you installed the Android SDK? The `ANDROID_HOME` environment variable isn't set, and is required: environment
    variable not found
victory: Project generated successfully!
    Make cool apps! 🌻 🐕 🎉

判断したポイント

  • package manager
    • bunにしてみた
    • 何でもよいが最終的にフロントエンド開発もあるためこちらも合わせた環境で管理したい。そのためcargoではなくnode.js系列で適当なものとした。
    • しかしtypescriptを選択したのは失敗だった。viteでのビルドが挟まるためやや難易度増加。またtypescriptが必要なほど大規模な開発をしない。
  • UI template
    • tauriの構造を学ぶのが目的のためVanilla
  • bun run tauri android init
    • androidの開発環境は不要なので飛ばす

最終配置

/
|- dist
 |- jquery.min.js ★2
|- public ★1
 |- lib
  |- jquery.min.js
 |- main.ts
|- src-tauri
 |- tauri.conf.json
 |- target
  |- release
   |- resource
   |- tauri-app.exe ★3
|- tsconfig.json

★はビルド時にコピーされる。★1→★2はviteのビルド、★2→★3はtauriのビルド。
今回はローカルに配置したjqueryを例に進める。また以降大体の区分けで説明を記載するが、区分けた内容以外の設定も混ぜている。説明は手を抜いているが多分わかる範囲だと思う(着手から完了まで時間がかかり、そしてメモしていない点が少しあるため)。

CSPの設定

まずtauriがローカルファイルにアクセスできるようにする。CSPについてはアプリ開発者のにとっての Tauri v2 のセキュリティ構造を読み解くが丁寧に解説してくださっているのでこちらを参照。外部へのアクセスは想定しないためセキュリティについてはそこまでがんばらない、緩くするだけ。
これらの設定によりimport { convertFileSrc } from '@tauri-apps/api/core';からなるconvertFileSrcで変換すれば、フロントエンドは「http://asset.localhost/ファイル名」のような形にしてtauri(バックエンド)からダウンロードできるようになる。あとはfetchなどでいい感じにダウンロードすればよい。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

-  "identifier": "com.tauri-app.app",
+  "identifier": "com.tauri-app-test.app",
  "app": {
    "withGlobalTauri": true,
    "windows": [
      {
        "title": "tauri-app",
        "width": 800,
        "height": 600
      }
    ],
    "security": {
+      "csp": {
+        "default-src" : "'self' ",
+        "connect-src": "ipc: http://ipc.localhost https://ipc.localhost",
+        "img-src": "'self' asset: http://asset.localhost https://asset.localhost blob: data:",
+        "font-src": "'self' asset: http://asset.localhost https://asset.localhost blob: data:",
+        "script-src": "'self' asset: http://asset.localhost https://asset.localhost",
+        "style-src": "'unsafe-inline' 'self'"
+      },
+      "assetProtocol": {
+        "enable": true,
+        "scope": ["**"]
+      }
    }
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ],
+    "resources": [
+      "resources/**/*"
+    ]
  }
  • cspの設定
  • csp以外にもついでにリソースディレクトリの追加なども実施
    • identifierを任意の値に変更
    • resourcesを追加。ここにtauriから参照したいファイルを置く想定

ローカルファイルを含めてビルドする

CSPを設定することでtauriはローカルファイルにアクセスできるようになった。しかし、exeを作成し起動してみると、ビルド時点で含まれていることを期待するファイルが上手く読み取れないことがわかった。これはexe作成時に同梱したいファイルが存在せずそもそも同梱されていないことが原因だった。そのため同梱するために次のように構成を変更した。

/src-tauri/tauri.conf.json

1
2
3

  "build": {
    "frontendDist": "../dist"
  }

※変更なし。説明のため記述

/tsconfig.json

1
2

-  "include": ["src"]
+  "include": ["public"]

デフォルトだとsrcを参照している。よくわからないがtauri-appではviteがデフォルトで採用されており、viteはvite.config.tsで指定しない限りソースディレクトリをpublicとして見ている、らしい。そのためpublic以下のファイルをdistに移動させバンドルしようとするが、publicフォルダが無いので何もバンドルされていなかった、のだと思う。viteの設定を変えるよりもtauriの参照先を変える方が楽そうなので、exeにバンドルしたいファイル群はpublicに移すように変更した。
ただ初期設定で違う位置なのでなにか理解できていない理由があるのかもやしらん。

/index.html

1
2
3

+    <script src="/lib/jquery-3.7.1.min.js"></script>
-    <script type="module" src="/src/main.ts" defer></script>
+    <script type="module" src="/public/main.ts" defer></script>

/public/lib/jquery-3.7.1.min.jsでもデバッグ時は参照できてしまう。しかしexeにする場合publicは無くなるため、/lib/jquery-3.7.1.min.jsにする必要あり。tsconfig.jsonで設定した位置はルート参照できるようにしてくれている、らしい。
なおこれはviteでビルドされるものにはビルドするためなのか適用してはいけない。typescriptやcssはpublicありのパス指定が必要であり、javascriptなどはpublicなしのパス指定が必要。そのためts系列はsrcフォルダに入れたままでも問題はない。

開発者ツールの有効化

(順序が逆だが)デバッグ時に上手くいっているものの、exe作成後にうまくいかない場合のデバッグに必要だった。今回はCSPの設定の正しさや、javascriptがロードできない問題の切り分けに用いていた。今後も何か使いそうなのでF12で起動できるようにしてみた。
デバッグ起動であればこの設定をせずともF12を押すことで開発者ツールは表示される。

src-tauri/Cargo.toml

1
2
3
4

tauri = { version = "2", features = [
+    "protocol-asset",
+    "devtools"
] }

devtoolsを追加した。

src-tauri/src/main.rs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

+ use once_cell::sync::OnceCell;
+ static MAIN_WINDOW: OnceCell<tauri::WebviewWindow> = OnceCell::new();
+
+ // Tauriコマンド: デバッグツールを開く
+ #[tauri::command]
+ fn open_devtool() {
+     let main_window = MAIN_WINDOW.get().unwrap();
+     main_window.open_devtools();
+ }

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
+        .setup(|app| {
+            let window = app.get_webview_window("main").unwrap();
+            #[cfg(debug_assertions)]
+            {
+                window.open_devtools();
+            }
+            MAIN_WINDOW
+                .set(window)
+                .expect("メインウィンドウの設定に失敗しました");
+            Ok(())
+        })
        .invoke_handler(tauri::generate_handler![
            greet,
+            open_devtool
        ])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

デバッグ起動時はどうせ出すので自動で開発者ツールを有効化しておく。リリース時はイベント通知により開発者ツールを有効化するようにする、ここは開発するexeによっては無効化しておいた方が良い。今回のツールは自分で使う用なのでひとまず出せるようにしておく。

src/public/main.ts

1
2
3
4
5
6
7

document.body.addEventListener('keydown',
  async(event) => {
    if (event.key === 'F12') {
      await invoke("open_devtool");
    }
  }
);

フロントエンド側でF12を検出したら、バックエンドにメッセージを投げる。それにより開発者ツールが開かれる。

ビルド

ルートフォルダにて

npm run tauri build

をすると、自動で

tsc && vite build

を実行しdistにviteのコンパイル結果を置く。その後tauriのビルドをし、src-tauri/target/release以下に成果物を置いてくれる。

インストーラなども用意してくれるが、恐らく必要なのはexeと(使うなら)resourceディレクトリだけなのでこれらを任意の場所に移動させて動作が確認できればOK。インストールしても良いが、実装者のPCでインストールしたところで問題が見つかる気がしないので、いざ誰かに渡すようなことがあった場合に手間取りそう。そのためあまり個人では使う気になれない

comments powered by Disqus

目次