up:: Rust

Electronと同様、デスクトップアプリをブラウザ技術で作る。
ElectronはChromiumを搭載しているのに比べ、こちらはWebViewというOS固有のものを使用しているので小さい。あとバックエンドがRustなので早い。

wryというライブラリが各OSのWebViewへアクセスを提供している。

rustあるあるだが、強い型制約のため少しアップデートがしにくいことに注意。
代わりにgoを使ったwailsというのがある。
(Go, Golang) Wails に入門する – Ewig Leere(Lab2)

Get Start

各パッケージマネージャやpowershellからプロジェクトを立ち上げられる。
What is Tauri? | Tauri

フロントエンドにElmはない。(2025/01/10)
Pureからで良ければいろいろ手はありそう。
Site Unreachable
Elm + Tauriの感想 - yowanai.com
GitHub - elm-land/tauri: A template for using Elm Land to build desktop apps with Tauri!

Tauriは公式にSSRをサポートしていない。
SvelteKit | Tauri

Rustフロントエンドという手もある。
[Rust + GUI] icedからDioxusに改宗した話 Rust - Qiita

Dioxusはjsx風のrsx!マクロで表記する。
なおDioxus自体はマルチプラットフォームアプリをRustだけで作るほぼTauriなプロジェクト。書き方だけTauriに持ってきてるっぽい。こちらは仮想DOM。

eguiはゲームと同じく毎フレーム画面更新するimmediate mode。
簡単だが重い。

Elmにインスパイアされたicedという別プロジェクトはある。
[Rust] icedに入門したのでメモを残す GUI - Qiita
[Rust + GUI] icedからDioxusに改宗した話 Rust - Qiita

svelteを使用する場合はsveltekitが使用され、Viteビルド環境が整備される。
5.16のsvelteはroutes/+page.svelteがindex.html的なファイル。他の.svelteはファイルシステムベースでそれぞれのURLにルーティングされる?
SvelteKit チュートリアル - 記事投稿サイトを作ってみよう

hot-reloading

live-serverをインストールし、tauri.conf.jsonのdevpathと合わせて起動。
package.jsonのscriptに"dev": "vite && live-server public --port=1420 --no-borwser",を仕込むと自動で起動できる。
Viteの後じゃないとviteが実行されないのか上手くいかない。

すべてをカスタマイズせよ RustでTAURI GUIツールキットを試す(2):ホットリロードにする
live-server - npm

#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

内部属性。main.rsにあるため、プロジェクト全体≒バイナリクレート全体にかかる。

デバッグアサーションが無効な際(リリースビルド)にwindows用にビルドする。つまりコンソールを表示しない。

フロントとバックを繋ぐ

Eventを使う。

Events | Tauri Apps

なお、reactは@tauri-apps/apiを通してinvokeを使うことでtauri側で#[tauri::command]、及びtauri::Builder::default().invoke_handlerを通し公開されているコマンドを使用することができる。

複数公開する場合は以下のようにgenerate_handlerを増やす。直接Builderを増やすと上書きしてしまう。

    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet,get_image_paths])
        .menu(menu)
        .run(tauri::generate_context!())
        .expect("error while running tauri application");

Calling Rust from the frontend | Tauri Apps

画像を読み込む

ファイルパスがそのままだとERR_UNKNOWN_URL_SCHEMEで引っかかる。
なのでまずconvertFileSrcで変更。

その後、ローカルファイルを読めるようにtauri.conf.jsonでプロトコルを変更。

"tauri": {
    "allowlist": {
      "protocol": {
        "asset": true,
        "assetScope": ["**"]
      }
    },

安全のためにCSPで自分のファイルだけ読めるように。

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

tauriでWebViewから直接ローカルファイル読み込む
コンテンツセキュリティポリシー (CSP) - HTTP | MDN

vscodeでフロントエンドデバッグ

デバッグで出来たexeに対してlaunch.jsonを仕掛ける。
bunに変えたりexe名を変える。9222はwindows用。
一度bun tauri devなどでexeを作っておかないとダメ。

Is there a recommended way to debug a tauri application (react used as frontend) in vscode on Windows? · tauri-apps/tauri · Discussion 4210 · GitHub

tauri security

tauri 階層構造

tauri tauri.conf.json

ウィンドウ状態など

Tauri でフレームレスウィンドウのアプリケーションを作成する TypeScript - Qiita
Tauri でウィンドウ状態を保存・再現する Rust - Qiita
Tauri v2 x Svelte 5 で、アプリケーション開発をはじめる! Rust - Qiita

Godot連携

reactからgodotのwebassemblyを呼べるライブラリがある。
逆はないです。

https://github.com/calico-games/react-native-godot

tauriからwebassembly読めば無敵?

他アプリ呼出し

exeを登録できるsidecar機能というのがあるらしい。
【全CLIアプリGUI化計画】TauriでTypeScriptやRustからCLIアプリを呼び出す TypeScript - Qiita