WebGL ビルドされた Unity アプリケーションをローカルで実行するエディタ拡張作った

Unity の WebGL アプリケーション開発では結構頻繁にブラウザでの動作を確認したくなることがあります。

そういう場合は `Build And Run` を実行することになるのですが、これが結構不便です。

- 動作確認のたびにビルドが必要となる
  - 再ビルドせずに動作確認したくなることは結構あるのですが、ビルド済みのアプリをプレビューする方法は用意されていないため毎回ビルドすることになります
- 実行するたびにポートが変わる
  - Build And Run で起動するプレビューサーバーのポートは動的に割り当てられます
  - 例えば API サーバーと通信するようなゲームを作っている場合、ポートが変わるとサーバー側の CORS 設定も変えなければならなくなります

これらの問題を解決するために、プレビュー用のサーバーを実行するためのエディタ拡張を作ってみたので紹介したいと思います。

## Unity Preview Server

https://github.com/frozenbonito/UnityPreviewServer

前述の通り WebGL アプリ用のプレビューサーバーを実行するためのシンプルなエディタ拡張です。
Unity Editor 2021.3 以降をサポートしています[^1]。

[^1]: 本当は 2020.3 もサポートしたかったのですがコンパイルエラーを解決できず断念しました…

Unity や C# にはあまり慣れていないので作りがおかしい部分やバグ等があるかもしれませんがご容赦ください。

### インストール方法

Unity パッケージとして公開しているので Package Manger からインストール可能です。
次の 2 種類の方法でインストールすることができます。

#### Git URL でインストール

Package Manager を開き、左上の `+` ボタンをクリックして `Add package from git URL...` を選択します。

![giturl1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586035/f434ff95-73e2-6649-f9f4-e3ee6ec36785.png)

`https://github.com/frozenbonito/UnityPreviewServer.git?path=Packages/jp.frozenbonito.preview-server` と入力して `Add` をクリックします。

![giturl2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586035/8d85430c-68ef-2268-58d1-c3a94fcd389c.png)

#### OpenUPM でインストール

[OpenUPM](https://openupm.com/) でもパッケージを公開しています。

https://openupm.com/packages/jp.frozenbonito.preview-server/

OpenUPM をスコープ付きレジストリとして登録することにより、Package Manager からのインストールが可能になります。

Project Settings を開き、Package Manager の設定で次のようにスコープ付きレジストリを追加します。

- Name: `package.openupm.com`
- URL: `https://package.openupm.com`
- Scope(s): `jp.frozenbonito.preview-server`

![openupm1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586035/07307fc6-6a4d-ab9e-537f-a826c35dfbc1.png)

Package Manager を開き、ツールバーの `Packages` メニューから `My Registries` を選択します。

![openupm2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586035/441f54e4-da83-1e5d-b945-871a4cd0bdc7.png)

`Unity Preview Server for WebGL` というパッケージが出てくるので選択して `Install` をクリックします。

![openupm3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586035/f0f06998-3eb9-402f-b727-38df9a336624.png)

### 使い方

インストールするとメニューバーに追加される `Preview Server` から `Open Window...` を選択し、Preview Server ウィンドウを開きます。

![usage1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586035/76505ef8-3e15-c7f0-1204-c84b00c025f8.png)

まずは WebGL ビルドの出力先フォルダを設定します。
`Use Default Location` のチェックを外し、`Build Location` の `Browse...` ボタンをクリックして出力先フォルダを選択してください。

![usage2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586035/d1ec0125-ca76-8cb9-baca-25bf993b3a56.png)

`Start` ボタンをクリックするとプレビューサーバーが起動します。
この時、ブラウザも自動で開かれます。

![usage3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586035/55d40c26-aa84-7bbb-9384-e5cb4f69f4f3.png)

サーバーを停止するには `Stop` ボタンをクリックします。
また、Unity Editor が閉じられたり、アセンブリリロードが走ったりするとサーバーは自動で停止します。
ただし Unity Editor がクラッシュした場合はサーバーのプロセスが残ってしまうので、ポートを Listen しているプロセスを特定して手動で Kill してください(`unisrv` というプロセスです)。

ポートはデフォルトで 5000 が使用されますが、設定により変更可能です。

Preview Server ウィンドウ内の設定はユーザー固有且つプロジェクト固有の設定として扱われます。
Preferences や Project Settings から、全プロジェクト共通のデフォルト設定やプロジェクト単位のデフォルト設定を変更することができます。
詳細はリポジトリの README を参照してください。

## (おまけ) unisrv

Unity Preview Server は内部的に unisrv というプログラムを呼び出すことでサーバーを実行しています。

https://github.com/frozenbonito/unisrv

unisrv は WebGL ビルドされた Unity アプリケーションをプレビューするためのローカルサーバーを実行する非常にシンプルなサーバープログラムです。

ビルド済みの CLI や Docker イメージも配布していますので、そちらを直接使用することもできます。
詳しい使い方はリポジトリの README を参照してください。