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を使う。
なお、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を作っておかないとダメ。
ウィンドウ状態など
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
フォルダを移動したのでビルドできない
cargo cleanでキャッシュ消し。
デバッグ
フロントエンドならwebviewにデバッグポートを開いて、アタッチ。
バックエンドならlldbから起動。
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node-terminal",
"request": "launch",
"name": "Tauri Frontend Debug Launch",
"command": "$env:WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS=\"--remote-debugging-port=1422\"; npm run tauri dev",
"cwd": "${workspaceFolder}"
},
{
"type": "lldb",
"request": "launch",
"name": "Tauri backend Debug",
"cargo": {
"args": [
"build",
"--manifest-path=./src-tauri/Cargo.toml",
"--no-default-features"
]
},
"preLaunchTask": "ui:dev:start",
"postDebugTask": "ui:dev:stop",
},
{
"type": "lldb",
"request": "launch",
"name": "Tauri Prod Debug",
"cargo": {
"args": [
"build",
"--release",
"--manifest-path=./src-tauri/Cargo.toml"
]
},
"preLaunchTask": "ui:build"
},
{
"name": "Tauri Frontend Attach to Webview",
"port": 1422,
"request": "attach",
"type": "msedge",
"webRoot": "${workspaceFolder}",
"sourceMaps": true
},
],
"compounds": [
{
"name": "Tauri Debug Frontend",
"configurations": [
"Tauri Frontend Debug Launch",
"Tauri Frontend Attach to Webview"
]
}
]
}tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "ui:dev:start",
"type": "shell",
"isBackground": true,
"command": "npm",
"args": [
"run",
"tauri",
"dev"
],
"problemMatcher": {
"owner": "custom",
"pattern": {
"regexp": ".",
},
"background": {
"activeOnStart": true,
"beginsPattern": ".",
"endsPattern": "VITE .* ready ",
}
}
},
{
"label": "ui:dev:stop",
"type": "shell",
"command": "echo ${input:terminate}"
},
{
"label": "ui:build",
"type": "shell",
"command": "npm",
"args": [
"run",
"tauri",
"build"
],
}
],
"inputs": [
{
"id": "terminate",
"type": "command",
"command": "workbench.action.tasks.terminate",
"args": "ui:dev:start"
}
]
}Tauri 2.0をフロント(js側)含めてVSCodeでデバッグしてみる
VS Code でのデバッグ
Is there a recommended way to debug a tauri application (react used as frontend) in vscode on Windows? · tauri-apps/tauri · Discussion #4210
[docs] how can i debug the frontend project in vs code with breakpoint instead of using the devtools · Issue #842 · tauri-apps/tauri-docs
Tauri v2 の VS Code デバッグを yarn 無しで実行する | Aqua Ware つぶやきブログ
【VSCode】タスクの問題マッチャ―(problemMatcher)を理解してみる
本当はlaunch.jsonのcompound済みを"presentation"{"hidden": true}"で消すべきだが、見えないと不安なので。
envでWEBVIEWへの環境変数は渡せるはずだが、何故か渡らなかったので。
problemMatcherもcustomだとタスクが終わらなかった。
problemMatcherはエラー文字列を正規表現で抜いて読みやすくするやつ。
無いと警告が出て煩わしい。
【VSCode】タスクの問題マッチャ―(problemMatcher)を理解してみる
中身
wailsのようにchromeで開いて、とやろうとするとtauri特有のAPIが呼べないとエラーが出る。
Tauri Error initialization: TypeError: Cannot read properties of undefined (reading 'invoke')
wailsはバックエンドでHTTPサーバーを開くことにより、フロントエンドからのAPI呼出し→HTTPリクエスト→サーバー→バックエンドというルートを辿らせている。なので通常のブラウザからでも開ける。
tauriはWebViewを開いた後、そこに直接APIを注入する。API呼出し→WebViewの注入されたAPI→バックエンド。なので通常のブラウザからは呼び出す対象が無くエラーになる。
APIを作成しているのはtauri-runtime?
多分。
Tauri アーキテクチャ
どうやって動いているの? | Wails
なのでwebviewにデバッグポートを開かせて、それにデバッガをアタッチすることになる。
これはwebview2を持つwindowsにしか今のところ出来てないっぽい。