tauri
環境
WSL2
❯ wsl --version
WSL バージョン: 2.0.6.0
カーネル バージョン: 5.15.133.1-1
WSLg バージョン: 1.0.59
MSRDC バージョン: 1.2.4677
Direct3D バージョン: 1.611.1-81528511
DXCore バージョン: 10.0.25880.1000-230602-1350.main
Windows バージョン: 10.0.22621.2428
❯ wsl --install Debian
Debian
❯ sudo apt-get update && sudo apt-get upgrade -y
# https://github.com/oktntko/dotfiles/blob/main/.docker/debian/debian/Dockerfile
❯ cat /etc/os-release
───────┬───────────────────────
│ File: /etc/os-release
───────┼───────────────────────
1 │ PRETTY_NAME="Debian GNU/Linux 12 (bookworm)"
2 │ NAME="Debian GNU/Linux"
3 │ VERSION_ID="12"
4 │ VERSION="12 (bookworm)"
5 │ VERSION_CODENAME=bookworm
6 │ ID=debian
7 │ HOME_URL="https://www.debian.org/"
8 │ SUPPORT_URL="https://www.debian.org/support"
9 │ BUG_REPORT_URL="https://bugs.debian.org/"
❯ pnpm create tauri-app
✔ Project name · tiptauri
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, bun)
✔ Choose your package manager · pnpm
✔ Choose your UI template · Vue - (https://vuejs.org)
✔ Choose your UI flavor · TypeScript
Your system is missing dependencies (or they do not exist in $PATH):
╭────────────────────┬──────────────────────────────────────────────────────────────────────────────────╮
│ Rust │ Visit https://www.rust-lang.org/learn/get-started#installing-rust │
├────────────────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ webkit2gtk & rsvg2 │ Visit https://tauri.app/v1/guides/getting-started/prerequisites#setting-up-linux │
╰────────────────────┴──────────────────────────────────────────────────────────────────────────────────╯
Make sure you have installed the prerequisites for your OS: https://tauri.app/v1/guides/getting-started/prerequisites, then run:
cd tiptauri
pnpm install
pnpm tauri dev
Rust は asdf でインストール
webkit2gtk & rsvg2
sudo apt update
sudo apt install libwebkit2gtk-4.1-dev \
build-essential \
curl \
wget \
file \
libssl-dev \
libgtk-3-dev \
libayatana-appindicator3-dev \
librsvg2-dev
いつからか
libwebkit2gtk-4.0-dev
が
libwebkit2gtk-4.1-dev
になったようだ
❯ cd tiptauri
❯ pnpm install
❯ pnpm tauri dev
パーミッションエラーは起きているが起動はする
❯ pnpm tauri dev
> tiptauri@0.0.0 tauri /home/oktntko/workspace/tiptauri
> tauri "dev"
Running BeforeDevCommand (`pnpm dev`)
> tiptauri@0.0.0 dev /home/oktntko/workspace/tiptauri
> vite
VITE v4.5.0 ready in 213 ms
➜ Local: http://localhost:1420/
➜ Network: use --host to expose
Info Watching /home/oktntko/workspace/tiptauri/src-tauri for changes...
Compiling tiptauri v0.0.0 (/home/oktntko/workspace/tiptauri/src-tauri)
Finished dev [unoptimized + debuginfo] target(s) in 6.55s
libEGL warning: failed to open /dev/dri/renderD128: Permission denied
libEGL warning: failed to open /dev/dri/card0: Permission denied
Could not determine the accessibility bus address
libEGL warning: failed to open /dev/dri/renderD128: Permission denied
libEGL warning: failed to open /dev/dri/card0: Permission denied
見た目が壊れちゃう
Permission denied
のせいかもしれないので調べる。
/dev/dri ❯ ll
drwxr-xr-x - root root 2023-10-27 12:16 by-path
crw-rw---- 226,0 root video 2023-10-27 12:16 card0
crw-rw---- 226,128 root 109 2023-10-27 12:16 renderD128
❯ cat /etc/group
32 │ video:x:44:
47 │ oktntko:x:1000:
49 │ messagebus:x:108:
❯ sudo usermod -aG video oktntko
renderD128の109はユーザにもグループにもいないけどきれいに表示されるようになった
Rustのカスタムメニューとwindow.addEventListenerならRustのカスタムメニューの方が強い
let file_save = CustomMenuItem::new("filesave", "File Save").accelerator("Ctrl + S");
...
.menu(menu.add_item(file_save))
.on_menu_event(|event| match event.menu_item_id() {
"filesave" => {
info!("FileSave :: {:?}", event.menu_item_id());
}
_ => {
info!("未実装 :: {:?}", event.menu_item_id());
}
})
した状態で
window.addEventListener('keydown', function (e) {
log.info(`'keydown key', ${e.key}`);
if (e.ctrlKey && e.code === 'KeyS') {
log.info(`'key', ${e.key}`);
log.info(`'code', ${e.code}`);
}
});
した状態で。
Ctrl + S を打つと、フロント側の log.info('key', ${e.key}
);がログに出ない=Rustに吸収される。
サブメニューは
Tauri(Rust+React+TypeScript) から始めるディスクトップアプリ #4[Menuの実装]
が参考
フロントだけでファイル読み込み・書き込みできそうなのでいったんRustは忘れる
つまづいたのは Tauri のAPIを許可リストに入れないといけないこと。
ファイルの読み込みはスコープで定義したところからじゃないとダメ。
だけど、openから読めばどこからでもOK。
tauri-plugin-persisted-scope は archived されていたけど、
persisted-scopeにあった。
よく見ると今までのpluginはすべてplugins-workspaceだった。
ビルドはGitHub Actionsでクロスプラットフォームでできる。
公式 tauri-action
解説 アプリをビルドして配布してみよう
run: yarn install # change this to npm or pnpm depending on which one you use
を見逃してビルドに失敗したので書き換えてリトライ
- name: install frontend dependencies
- run: yarn install # change this to npm or pnpm depending on which one you use
+ uses: pnpm/action-setup@v2
+ with:
+ version: 8
+ run_install: true
また失敗したけどそもそもローカルでビルドしても成功しない状態だったので書き換えてリトライ
Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 3 overrides)
4回目にして成功
Windowsでインストールして起動できた!
アンインストールもできた。
tauri-plugin-store-api
のファイルはどこに行ったんだろ。
Windowsアプリ界隈では常識なのかもしれないけど。
setup.exeだと、デフォルトC:\Users\/user/\AppData\Local\tiptapri
に。インストールに管理者権限不要。
msiだと、デフォルトC:\Program Files\tiptapri\
に。インストールに管理者権限が必要。