VRChat の便利ツールを作った話 その1 (技術選定編)

成果物

今回作成したツールはこちらです。

事の始まり

私は普段、VRChat という SNS を嗜んでいます。そこで、フレンドにこんなことを相談されました。

こんなツール見つけたんだけど、導入方法がわからない 😭

気になったのでよくよく見てみると、大まかな導入方法が次のように書かれていました。

Zip を解凍して npm install 、 npm start してください。

これはまあ、一般人が分かる訳もなく。

そこで、自分の勉強も兼ねて、代替ツールを作ることにしました。

要件

代替と言いつつ、自分の技術力向上が主な目的だったので、独断と偏見で要件定義しました。

機能要件は、

• ブラウザから VRChat チャットボックスにメッセージを送信できる
• スマホからも同様に送信できる

非機能要件は、

• デスクトップアプリとして動作する
• インストーラーが用意できる
• アップデートを管理できる

としました。

技術選定

技術的な要件の整理

まず、以上の要件を満たすために、技術的にできなければいけないことを整理しました。

• OSC 通信が可能
• デスクトップアプリが作成できる
• デスクトップアプリのバックグラウンドで Web サーバーが動作できる
• インストーラーが作成できる
• アップデートが管理できる
• クロスプラットフォーム対応

CLI やタスクトレイの常駐でも良かったのですが、裏で Web サーバーが動いているのに何もユーザー側にフィードバックがないのは不安なのではないかと思い、デスクトップアプリにしました。

クロスプラットフォーム対応についても、本来は必要ないですが、私のメインの開発環境が mac なので、開発体験の意味で要件をつけました。

候補技術

お砂糖^※1※2と壁打ちした結果、以下の技術が候補に挙がりました。

1. Go + Wails
2. Rust + Tauri
3. Electron

世の中にはデスクトップアプリを作成するフレームワークは多く存在しますが、上の要件を満たすとなると結構シビアになります。主に、インストーラーが作成できることと、クロスプラットフォーム対応がネックでした。

今回は、Rust を勉強したいと思っていたのと、Tauri は VRC コミュニティ内でも Alcom などで採用されていることから、Rust + Tauri を採用することにしました。

実装方針

pnpm の monorepo で、以下のようなディレクトリ構成を取りました。

.
├── package.json
├── pnpm-workspace.yaml
├── server
│   ├── package.json
│   ├── src
│   └── src-tauri
└── web
    ├── package.json
    └── src

server ディレクトリはユーザーが起動する Tauri のコードを格納します。Tauri のフロントはテンプレートに従い、React + Vite で構築しました。Next.js にできるということに後から気づいて後悔しました。

web ディレクトリは Tauri のバックグラウンドで動作する Web サーバーのコードを格納します。こちらは Next.js の static モードで構築しました。

server を起動しクライアントから特定のメッセージを受け取ると、axum で web サーバーを起動するといった流れです。web サーバーは web ディレクトリ内の Next.js のビルド成果物を静的配信します。

つまづいた点

今回はデスクトップアプリも Web も shadcn/ui を使用しました。しかし、Command や ComboBox など一部のコンポーネントが Tauri の WebView 環境で正しく動作しませんでした。Tauri を使う際はデスクトップフレンドリーなコンポーネントライブラリの選定が必要そうです。

所感

今回は Rust 自体も使うのが初めてだったり、急ピッチで作ったというのもあり、あまり綺麗なコードが書けなかったのが反省点です。ただ、要件を満たすのには必要十分な技術選定だったと思います。コードさえ綺麗に書ければ、色々な場面で使えそうです。