17
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-09-30

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

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

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

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

Unity Preview Server

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

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

インストール方法

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

Git URL でインストール

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

giturl1.png

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

giturl2.png

OpenUPM でインストール

OpenUPM でもパッケージを公開しています。

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

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

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

openupm1.png

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

openupm2.png

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

openupm3.png

使い方

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

usage1.png

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

usage2.png

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

usage3.png

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

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

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

(おまけ) unisrv

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

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

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

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

17
12
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?