【Unity】WebGLプラットフォームの動作確認を手軽にモバイル端末で実施する

モバイル端末用にUnityでWebGLプラットフォームのアプリを開発している時の動作確認方法をまとめました。

課題

• 作成したWebGLアプリをモバイル端末で閲覧したいけどWebサーバー用意するの面倒
• 機能の制約上https通信必須、さらにWebサーバー用意するの面倒

解決策

上記を会社の人に相談したところngrokを教えてもらいました。
ngrokはローカルに立てたサーバーを外部に公開できるサービスです。
以下の構成でモバイル端末からローカルでBuild and Runしたアプリにアクセスできるようにしました。10分程度でできるのでとっても手軽です。

実施方法

具体的な手順を記載します。

環境

OS：Windows10

ngrokのアカウント作成

https://ngrok.com/
にてアカウントを作成します。

ngrokの準備

アカウントを作成するとSetup & Installationページに飛ばされます。
OSを選んでngrokをダウンロードします。ダウンロードしたzipファイルを任意の場所に解凍します。

アカウントの登録

解答したzipファイル内のngrok.exeを実行すると、コマンドプロンプトが起動します。
Setup & Installationの「2. Connect your account」に記載されているコマンドを実行します。
Windowsの場合は下記のようなコマンドになります（「./」が不要）。

> ngrok authtoken [トークン]

これでngrokが使用できるようになりました。

WebGLアプリの起動

動作確認したいプロジェクトを開きBuild And Runを実行してください。

外部へ公開

ngrok.exeを実行し、コマンドプロンプト上で下記のコマンドを実行してください。

ngrok http [Build And Runで起動したサーバのポート番号] -host-header=localhost

正常に起動すると以下が表示されます。

Session Status  online                                                   
Account         アカウント名 (Plan: Free)                     
Version         2.3.35                                                   
Region          United States (us)                                       
Web Interface   http://127.0.0.1:4040                                    
Forwarding      http://07f5fc01d91a.ngrok.io -> http://localhost:XXXXX   
Forwarding      https://07f5fc01d91a.ngrok.io -> http://localhost:XXXXX

Forwardingに記載されているURLをモバイル端末で閲覧するとWebGLアプリにアクセスすることができます。
なお、ngrokの起動時に「-host-header=localhost」オプションをつけないと、400 Bad Requestとなりアクセスできません。