Closed13

tauri

ピン留めされたアイテム
oktntkooktntko

環境

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/Dockerfilecat /etc/os-release
───────┬───────────────────────
       │ File: /etc/os-release
───────┼───────────────────────
   1PRETTY_NAME="Debian GNU/Linux 12 (bookworm)"
   2NAME="Debian GNU/Linux"
   3VERSION_ID="12"
   4VERSION="12 (bookworm)"
   5VERSION_CODENAME=bookworm
   6ID=debian
   7HOME_URL="https://www.debian.org/"
   8SUPPORT_URL="https://www.debian.org/support"
   9BUG_REPORT_URL="https://bugs.debian.org/"
oktntkooktntko
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


oktntkooktntko

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
になったようだ

oktntkooktntko

パーミッションエラーは起きているが起動はする

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
oktntkooktntko

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はユーザにもグループにもいないけどきれいに表示されるようになった

oktntkooktntko

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は忘れる

oktntkooktntko

つまづいたのは Tauri のAPIを許可リストに入れないといけないこと。
https://tauri.app/v1/api/js/fs

ファイルの読み込みはスコープで定義したところからじゃないとダメ。
だけど、openから読めばどこからでもOK。
tauri-plugin-persisted-scope は archived されていたけど、
persisted-scopeにあった。

よく見ると今までのpluginはすべてplugins-workspaceだった。

oktntkooktntko

ビルドは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回目にして成功

oktntkooktntko

Windowsでインストールして起動できた!
アンインストールもできた。

tauri-plugin-store-api のファイルはどこに行ったんだろ。

Windowsアプリ界隈では常識なのかもしれないけど。
setup.exeだと、デフォルトC:\Users\/user/\AppData\Local\tiptapriに。インストールに管理者権限不要。
msiだと、デフォルトC:\Program Files\tiptapri\に。インストールに管理者権限が必要。

このスクラップは2023/10/31にクローズされました