テストプレイ…実機デバッグ?リモードデバッグ?というやつです。
ローカルサーバーに設置したティラノスクリプトのゲームを、Androidスマホで操作できるようにしてみます。セーブ&ロードが正しく機能するかは未確認です。
手順はこんな感じ。
- ローカルサーバーの準備
- スマホ側でデバッグ用の設定をする(←ここから)
- PCとスマホをケーブルでつなぐ
- PC Chromeからスマホを検出する
前提
- ローカルサーバー上でゲームができる状態(起動中)
- ポート番号がわかる(http://localhost: に続く4桁の番号)
ローカルサーバーは多分何でも大丈夫です。テキストエディタのプラグインやXAMPP、Google Chromeの拡張機能でも。
必要なもの
- Androidのスマホ
- 2つのGoogle Chrome(PCとAndroid)
- PCとスマホを繋ぐデータ通信USBケーブル
スマホに付属している通信・充電ができるケーブルで大丈夫です。
1. まずスマホ側の準備をする
この時点でケーブルささってても大丈夫です。 充電するかどうか聞かれたらキャンセルを選びます。
1.1 開発者向けオプションを有効にする
オプションの出し方は端末によって違うかもしれないので、一度調べてから試してください。
「設定」から、システム→端末情報→ビルド番号(7回連打する)
連打後、端末情報の上の辺りに「開発者向けオプション」が表示される。
1.2 USBデバッグを有効にする
開発者向けオプションから「USBデバッグ」をオンにする。許可するか聞かれるのでOKを押す。
2. 次にPC Chromeの設定をする
PC Chromeのアドレスバーに chrome://inspect/#devices と入力してDevicesページを開く。
2.1 ポート番号を設定する
Port forwarding...にローカルサーバーのポート番号があるか確認。なければ追加する。 「Enable port forwarding」にチェックを入れてDoneを押す。
2.2 USBケーブルを挿してスマホを検出する
PCとスマホをUSBケーブルで接続します。充電云々はキャンセルします。
Devicesページの「Discover USB devices」にチェックを入れる。少し待つとスマホ側にデバッグ許可画面が出るのでOKを押す。
Devicesページに接続されたスマホのモデル名と、Android Chromeの現在のタブ一覧が表示される。
3. Android Chromeでローカルホストにアクセスする
これで設定完了。Android Chromeからゲームのurl(http://localhost:xxxx)を開くとゲームが表示される、はず。
コンソールを確認するときは、Devicesページからゲームを開いているタブの「inspect」をクリックすると新しいウィンドウで開発者ツールが開きます。
これが開いている間はPC<->スマホが画面共有状態になり、いろいろ操作ができるようになります。
動作確認を終了するときは
変更した設定を元に戻します。
PC Chromeで2つチェックを外す。スマホの設定からUSBデバッグと開発者オプションを無効にする。
おわりに
この機能はローカルホストだけでなく、yahoo.co.jpやgoogle.comなどふつうの?Webサイトの確認にも使えます。
またSafari<->iPhoneでも何か設定すると同じようなことができるらしいです。
ティラノスタジオ内の開発者ツールも使えそうだけど、スマホが認識されずうまくいきませんでした。Chromeのバージョン関係?