🤖

Tauriを使ったWindowsアプリで静的ページを表示するまで

2023/09/08に公開

Windows

Tauri

devcontainer

tech

OBS用の時計をデスクトップに表示させるためのデスクトップアプリを作る過程の一部です。調べているとnpmやらyarnやらを使用せずに必要最小限のRust(cargo)だけを使ってVanilla JSを含む簡易なローカルHTMLファイルを表示させる方法が見当たらなかったので試してみました。表示するだけなら一切Rustのコードを書く必要がなかったのが印象的でした。

経緯

開発メインPCとしてWindows(WSL2)を使用している
UWQHDで表示させており、縦方向を最大活用するためにタスクバーを自動で隠している
今何時かなと思うたびにいちいちマウスを触る必要がある (机の上に時計置きたくない)
Rust学びたかったしTauriを使ってOBS用の時計を表示させることにした

前提

Rust開発環境はVSCodeのDevContainerを使って構築 (Docker Desktopと拡張機能が必要)
表示する静的ページはローカルファイルであるindex.htmlの一つのみ (Vanilla JS包含)
フロントエンドフレームワークやnode.js、付随のパッケージマネージャ等は一切使用しない
- Rust(cargo, Tauri), Vanilla JS, WebView2を使用する
Windows11で表示する (Windows10の場合WebView2ランタイムが別途必要)

作り方

DevContainerを作る

Windows上でprojectフォルダを作成してVSCodeで開く

以下のdocker-compose.ymlとdevcontainer.jsonファイルを作成する

docker-compose.yml

services:
  rust_devcontainer:
    image: rust:latest
    container_name: rust1
    restart: always
    tty: true

devcontainer.json

{
  "dockerComposeFile": ["docker-compose.yml"],
  "service": "rust_devcontainer"
}

コマンドパレットで"Dev Containers: Open Folder in Container"を選択する

以下のコマンドを実行する (rootでない場合は適宜sudo)

apt update
# Tauriの前提
apt install -y libwebkit2gtk-4.0-dev \
    build-essential \
    curl \
    wget \
    file \
    libssl-dev \
    libgtk-3-dev \
    libayatana-appindicator3-dev \
    librsvg2-dev
# Windowsクロスコンパイルの前提
apt install -y mingw-w64
apt upgrade -y
# Windowsクロスコンパイル設定
rustup target add x86_64-pc-windows-gnu
cargo install tauri-cli

表示するHTMLファイルを配置する

projectフォルダの中のどこかに配置する
- 例: project/dist/index.html など

Tauri Projectとして構成してビルドする

カレントディレクトリをprojectにしてcargo tauri initを実行する
- web assetの質問はproject/src-tauriから見た時の相対パス
  - 例: ../dist など
- dev commandの質問は空白にする
- build commandの質問も空白にする
カレントディレクトリをsrc-tauriをにしてcargo build --target x86_64-pc-windows-gnu --releaseを実行する
- cargo runとするだけでもlinux向けにビルドされlinuxのウィンドウが表示されます

Windows上で実行する

project/src-tauri/target/x86_64-pc-windows-gnu/releaseの中にあるapp.exeとWebView2Loader.dllを移動させWindows上で実行する
index.htmlがウィンドウで表示される (WebView2が使用されている)