Open5ヶ月前にコメント追加4

v2になったTauri触ってみる

Rust

Tauri

Merucu

v2になったTauri

前々から気になっていたため、v2になったこともあり触ってみる。
将来的には個人開発デスクトップアプリの主力にしたい。

Install

WSL2上のUbuntuで検証する。

依存関係のインストール

sudo apt update
sudo apt install libwebkit2gtk-4.1-dev \
  build-essential \
  curl \
  wget \
  file \
  libxdo-dev \
  libssl-dev \
  libayatana-appindicator3-dev \
  librsvg2-dev

Rust, Nodeはインストール済みのためアップデートのみを行います。
未インストールの型は公式ドキュメントの依存関係ページを参考にインストールしてください。
Nodeやnpm, pnpmなどの管理にはVoltaを使用しています。

rustup update #Rustのアップデート
volta install node@latest #nodeのアップデート
volta install pnpm@latest #pnpmのアップデート

Merucu

Projectの作成

create-tauri-appを使用する。
今回はBashを使用するが、他にもPowewrShell, node, cargoなど様々なものでcreate-tauri-appを実行できる。

❯ sh <(curl https://create.tauri.app/sh)
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 16121  100 16121    0     0  70006      0 --:--:-- --:--:-- --:--:-- 70091
info: downloading create-tauri-app
✔ Project name · sunaba
✔ Identifier · sandbox
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · pnpm
✔ Choose your UI template · Vanilla
✔ Choose your UI flavor · TypeScript

Template created! To get started run:
  cd sunaba
  pnpm install
  pnpm tauri android init

For Desktop development, run:
  pnpm tauri dev

For Android development, run:
  pnpm tauri android dev

今回は公式ドキュメント記載の推奨通りの構成にした。npm, yarnの使用経験はあるが、pnpmは何気に初である。

フロントエンド
- JS/TS
パッケージマネージャ
- pnpm
UIテンプレート
- Vanilla
UIフレーバー
- TypeScript

開発サーバーの起動

cd sunaba
pnpm install
pnpm tauri dev

初回起動時はインストール, ビルドなどが行われるため数分ほどの時間がかかった。2回目以降はビルドのみのため数十秒で起動した。

Merucu

Windows上で動かしてみる

せかっくWSLで開発しているので、WSLのGUIサーバーを通さないで起動したい。

Windows向けにクロスコンパイル

こちらの記事を参考にした。

バンドルを生成しない方法

❯ sudo apt install gcc-mingw-w64-x86-64 llvm
❯ pnpm tauri build --target x86_64-pc-windows-gnu --no-bundle

バンドルを生成する方法

失敗しました

❯ sudo apt install gcc-mingw-w64-x86-64 llvm
❯ pnpm tauri build --target x86_64-pc-windows-gnu
> sunaba@0.1.0 tauri /home/mask/dev/rust/sunaba
> tauri "build" "--target" "x86_64-pc-windows-gnu" 

    Running beforeBuildCommand `pnpm build`

> sunaba@0.1.0 build /home/mask/dev/rust/sunaba
> tsc && vite build

vite v5.4.11 building for production...
✓ 6 modules transformed.
dist/index.html                 8.32 kB │ gzip: 3.44 kB
dist/assets/index-pSGieOOU.css  1.37 kB │ gzip: 0.65 kB
dist/assets/index-DdG3jFR9.js   1.11 kB │ gzip: 0.59 kB
✓ built in 106ms
   Compiling sunaba v0.1.0 (/home/mask/dev/rust/sunaba/src-tauri)
    Finished `release` profile [optimized] target(s) in 24.87s
    Built application at: /home/mask/dev/rust/sunaba/src-tauri/target/x86_64-pc-windows-gnu/release/sunaba.exe
    Warn Cross-platform compilation is experimental and does not support all features. Please use a matching host system for full compatibility.
    Warn Signing, by default, is only supported on Windows hosts, but you can specify a custom signing command in `bundler > windows > sign_command`, for now, skipping signing the installer...
    Warn ignoring msi
    Info Target: x64
    Running makensis.exe to produce /home/mask/dev/rust/sunaba/src-tauri/target/x86_64-pc-windows-gnu/release/bundle/nsis/sunaba_0.1.0_x64-setup.exe
failed to bundle project: error running makensis.exe: No such file or directory (os error 2)
    Error failed to bundle project: error running makensis.exe: No such file or directory (os error 2)
 ELIFECYCLE  Command failed with exit code 1.

失敗...
nsisを入れて再挑戦

❯ sudo apt install nsis
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
The following packages were automatically installed and are no longer required:
  htop libc-ares2 libglfw3 libmbedcrypto7 libmbedtls14 libmbedx509-1 libnode72 libu2f-udev libwpe-1.0-1
  libwpebackend-fdo-1.0-1 nodejs-doc python3-distlib python3-filelock python3-platformdirs python3-virtualenv
  python3-virtualenv-clone python3-wheel-whl
Use 'sudo apt autoremove' to remove them.
The following additional packages will be installed:
  nsis-common
Suggested packages:
  nsis-doc nsis-pluginapi wine
The following NEW packages will be installed:
  nsis nsis-common
0 upgraded, 2 newly installed, 0 to remove and 11 not upgraded.
Need to get 1281 kB of archives.
After this operation, 7006 kB of additional disk space will be used.
Do you want to continue? [Y/n] Y
Get:1 http://archive.ubuntu.com/ubuntu jammy/universe amd64 nsis-common all 3.08-2 [971 kB]
Get:2 http://archive.ubuntu.com/ubuntu jammy/universe amd64 nsis amd64 3.08-2 [309 kB]
Fetched 1281 kB in 2s (711 kB/s)
Selecting previously unselected package nsis-common.
(Reading database ... 152758 files and directories currently installed.)
Preparing to unpack .../nsis-common_3.08-2_all.deb ...
Unpacking nsis-common (3.08-2) ...
Selecting previously unselected package nsis.
Preparing to unpack .../archives/nsis_3.08-2_amd64.deb ...
Unpacking nsis (3.08-2) ...
Setting up nsis-common (3.08-2) ...
Setting up nsis (3.08-2) ...
Processing triggers for man-db (2.10.2-1) ...
❯ pnpm tauri build --target x86_64-pc-windows-gnu

> sunaba@0.1.0 tauri /home/mask/dev/rust/sunaba
> tauri "build" "--target" "x86_64-pc-windows-gnu"

    Running beforeBuildCommand `pnpm build`

> sunaba@0.1.0 build /home/mask/dev/rust/sunaba
> tsc && vite build

vite v5.4.11 building for production...
✓ 6 modules transformed.
dist/index.html                 8.32 kB │ gzip: 3.44 kB
dist/assets/index-pSGieOOU.css  1.37 kB │ gzip: 0.65 kB
dist/assets/index-DdG3jFR9.js   1.11 kB │ gzip: 0.59 kB
✓ built in 118ms
   Compiling sunaba v0.1.0 (/home/mask/dev/rust/sunaba/src-tauri)
    Finished `release` profile [optimized] target(s) in 27.94s
    Built application at: /home/mask/dev/rust/sunaba/src-tauri/target/x86_64-pc-windows-gnu/release/sunaba.exe
    Warn Cross-platform compilation is experimental and does not support all features. Please use a matching host system for full compatibility.
    Warn Signing, by default, is only supported on Windows hosts, but you can specify a custom signing command in `bundler > windows > sign_command`, for now, skipping signing the installer...
    Warn ignoring msi
    Info Target: x64
    Running makensis.exe to produce /home/mask/dev/rust/sunaba/src-tauri/target/x86_64-pc-windows-gnu/release/bundle/nsis/sunaba_0.1.0_x64-setup.exe
warning 5202: -OUTPUTCHARSET is disabled for non Win32 platforms.
    Warn Signing, by default, is only supported on Windows hosts, but you can specify a custom signing command in `bundler > windows > sign_command`, for now, skipping signing the installer...
    Finished 1 bundle at:
        /home/mask/dev/rust/sunaba/src-tauri/target/x86_64-pc-windows-gnu/release/bundle/nsis/sunaba_0.1.0_x64-setup.exe

バンドルの生成には成功。
しかし/home/mask/dev/rust/sunaba/src-tauri/target/x86_64-pc-windows-gnu/release/bundle/nsis/sunaba_0.1.0_x64-setup.exeをWindowsにインストールするとエラーが出て実行不可

Windows上で実行してみる

/home/mask/dev/rust/sunaba/src-tauri/target/x86_64-pc-windows-gnu/release/をエクスプローラーで開きsunaba.exeを実行する。
もしくはWSLからexeファイルを直接実行可能なので、./src-tauri/target/x86_64-px-windows-gnu/release/sunaba.exeを実行する。

成功🎉

Merucu

背景透過&タイトルバー消去&h1をホールドしてウィンドウをドラッグしてみる

 src-tauri/tauri.conf.json
{
  "app": {
    "windows": [
      {
+       "transparent": true,
+       "decorations": false,
+       "shadow": false
      }
    ],
  },
}

 src-tauri/capabilities/default.json
{
  "permissions": [
+   "core:window:allow-start-dragging"
  ]
}

 index.html
 <!doctype html>
 <html lang="en">

  <body>
   <main class="container">
+     <h1 data-tauri-drag-region>Welcome to Tauri</h1>

data-tauri-drag-regionは子要素まで利かないので注意

 src/style.css
**前略**

@media (prefers-color-scheme: dark) {
  :root {
    color: #f6f6f6;
-   background-color: #2f2f2f;
+   background-color: transparent; /* #2f2f2f; */
  }

  a:hover {
    color: #24c8db;
  }

  input,
  button {
    color: #ffffff;
-   background-color: #0f0f0f98;
+   background-color: transparent; /* #0f0f0f98; */
  }
  button:active {
-   background-color: #0f0f0f69;
+   background-color: transparent; /* #0f0f0f69; */
  }
}

ログインするとコメントできます