7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Tauriのアプリ開発でドツボにハマッた部分or気になった部分と対策法

Posted at

この記事でTauri V2をベタ褒めしましたが実際には開発でつまづく所もあったので解決方法含めて備忘録として残しておきます。

img src="..."でローカルファイルが参照できない。

タイトルの通りです。
TauriではElectronと同じようにhtmlをアプリ内のローカルホストを使って表示しているのですが、このローカルホスト内からパス表記のローカルファイルは参照できません。
下記の記述ではTauriの画面上で画像がリンク切れになります。

<img src="path/to/aaa.png" />

image.png

以下のような感じでコンソールから怒られています。

localhost/:1  Not allowed to load local resource: file:///Path/to/AAA.png

解決するにはTauriの標準機能「convertFileSrc」を使ってファイルパスをURIに変換してあげる必要があります。

import { convertFileSrc } from '@tauri-apps/api/core';

ImageURL = await convertFileSrc('Path/to/AAA.png')

ただし、この処理だけではtauri devした時のデバッグ画面では正常に表示されるものの、リリースした.exe上では接続拒否のエラーが出てやはり表示されません。

Failed to load resource: net::ERR_CONNECTION_REFUSED

これはブラウザのCSP(コンテンツセキュリティポリシー)にローカルURIの画像が違反しているため、アクセスが拒否されているのが原因です。
解決するにはsrc-tauri/tauri.conf.jsonに以下の設定を追加します。

tauri.conf.json
  "app": {
    "security": {
      "csp": {
        "img-src": "'self' asset: http://asset.localhost blob: data:"
      },
      "assetProtocol": {
        "enable": true,
        "scope": ["**"]
      }
    }
  }

画像以外のCSP設定も公式ガイドに載っているので、動画や外部CSS等を読み込む際につまづいたら参考にしてみてください。

fsプラグインでファイルやパスの読み書きができない

プラグインを導入しimportして問題なく処理を実装したのに実際の画面上ではエラーを吐くことがあります。

import { readFile } from '@tauri-apps/plugin-fs';

const file = await readFile('path/to/aaa.txt')

エラーメッセージはこんな感じ

Uncaught (in promise) forbidden path: path/to/aaa.txt

これはプラグインの機能に適切な権限のスコープ設定がされていないのが原因です。
解決するにはsrc-tauri/capabilities/default.jsonに下記のような権限スコープを追加します。

default.json
  "permissions": [
    "core:default",
    "fs:default",
    {
      "identifier": "fs:allow-read-file",
      "allow": [
        {
          "path": "**"
        }
      ]
    },
 ]

"allow"の"path"には権限が適用されるディレクトリ階層を指定します。
私は作っているツールがそれほど重要なリソースに触れるわけでもない単純な物なので「"**"」でフル権限を付与しましたが、
作るツールの用途に合わせて都度微調整してください。

実行exeのパスが取得できない

TauriのresourceDirで取得できます。

  import { resourceDir } from "@tauri-apps/api/path";

  await resourceDir()

ビルド時にインストーラー無しのexeだけ出力したい。

-no-bundleオプションを付けるだけ

bun tauri build --no-bundle

まとめ

結構触ってみたけど本当に困ったのはCSP周りの設定ぐらいですね。
ビルド時間も比較的早かったので不便さはありませんでした。

7
5
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
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?