2025/04/19

Tauriアプリ開発 Day 2

mclocks というミニマリスト向け複数タイムゾーンの日時表示アプリを開発している。

https://github.com/bayashi/mclocks

先日、Electron から Tauri v2 に移行した。

その後、少し機能を足したりしてみたので、そのメモを書く。

window-state plugin

Tauri v2 にも Window-State プラグインがある。これはアプリのウィンドウサイズや表示位置などを保持してくれるプラグイン。

https://v2.tauri.app/ja/plugin/window-state/

インストール

pnpm tauri add window-state

なにやらエラーが出てインストールできない。script の path がうんぬんと言われているが、Windows のエラーは馴染みがない。とりあえず LLM に聞いてみると、以下の config を打てば直るようだった。

pnpm config set script-shell powershell
pnpm tauri add window-state

無事インストールできた。

window-state はインストールして組み込みが終われば、あとは何もしなくてもアプリの終了時にウィンドウサイズや表示位置などを保持してくれるようになるが、mclocks はデスクトップアプリなのでアプリを明示的に終了させることはない(ちなみに自分の環境ではPCシャットダウン時には window-stateの保存は走ってくれないようだった)。なのでできればウィンドウ位置を移動したときに保存処理を発動させたい。

macOS で saveWindowState するとハングする

理由まで追っていないが、macOS で saveWindowState するとハングしてしまうので、tauri-apps/plugin-os を入れて macOS はウィンドウ移動時の保存しないようになっている(うまい方法がわかったら対応したい)。

ウィンドウ位置が移動したときの event は tauri-apps/api/window に onMoved が用意されている。イベント自体はめっちゃくちゃ飛んでくるので、saveWindowState は少し遅延させて発火させている。

await getCurrentWindow().onMoved(() => {
  if (ignoreOnMoved || currentPlatform === 'macos') {
    return
  }
  ignoreOnMoved = true
  setTimeout(async function () {
    await saveWindowState(StateFlags.ALL);
    ignoreOnMoved = false;
  }, 5000);
});

macOS 対応

Windows で開発して Windows マシンで利用している mclocks ですが、macOS でも動くようにしたいということで対応しました。

ウィンドウを最前面に表示するのとウィンドウをドラッグするのにオプションやパーミッションの設定が必要でしたが、比較的すんなり動いて楽でした。

macOS 対応時の PR はこんな感じ。

https://github.com/bayashi/mclocks/pull/152/files

謎のハマり

これは macOS 対応をする前、window-state を導入直後に起こったことですが、window-state が無事動いているなと確認した後、一度 dev server を止めて、再度起動しようとすると いつもと違う 5137 ポートで起動するようになり、dev server がうまく起動できなくなりました。config がおかしくなったかなと思って見返しますが特に変更はありません。5137ポートに変更してみるも、resource が 404 と言われてしまいます。なんじゃこれ。

node_module 消してやり直してみたりしますが一向に改善せず。最後意味わからないですが rustup を再インストールしたら直りました。そんあことある？

まあ、取り急ぎそこからは無事で特に何も起きなくなりました。

設定ファイルの置き場所

Tauri v2 window-state プラグインは、設定ファイルの保存に xdg config パス + app identifier というディレクトリパスを使ってきます。非常に合理的なのですが、mclocks では Electron 時代から xdg config パス + mclocks というディレクトリを使ってきたので、ひとつのアプリのために2つのディレクトリができてけっこう気持ち悪い。ので、後方互換保ちつつ idntifier を使ったパスに移行した。

開発用にパスを分離

mclocks は開発中も起動して時刻をそれで確認しているが、dev と prod で設定ファイルが同じだとけっこう面倒くさいので window-state plugin の保存ファイルや mclocks 自体の設定ファイルの名前がいい感じに分離されるようにした。こういうのは面倒くさいのであとまわしにしがちだったが、やってみると超快適なので早くやるべきだった。

開発と prod で分離していると言えば、アプリの singleton化も prod でだけやるようにして、devとprod両方起動できるようにしている。

カウントダウン機能

mclocks は複数のタイムゾーンの日時を表示するアプリだったが、Tauri 移行のついでに、思いついたのでカウントダウン機能を追加した。開発のマイルストーンへのカウントダウンなどを表示して無駄にプレッシャーを感じてみて欲しい。詳しくは README を読んでください。

今後

自分の用途的には十分にできあがったのであとは放置モードになる見込み。しかし Windows での開発は10年前と比べ物にならないくらい快適になっている。

Vibe Coding でもここまでできるんやなーという良い機会であった。

サイト内検索