スマホでティラノスクリプトの動作確認をしてみる

テストプレイ…実機デバッグ?リモードデバッグ?というやつです。

ローカルサーバーに設置したティラノスクリプトのゲームを、Androidスマホで操作できるようにしてみます。セーブ&ロードが正しく機能するかは未確認です。

手順はこんな感じ。

  1. ローカルサーバーの準備
  2. スマホ側でデバッグ用の設定をする(←ここから)
  3. PCとスマホをケーブルでつなぐ
  4. 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を押す。

Devicesページ。Port forwarding settings画面のスクリーンショット

2.2 USBケーブルを挿してスマホを検出する

PCとスマホをUSBケーブルで接続します。充電云々はキャンセルします。

Devicesページの「Discover USB devices」にチェックを入れる。少し待つとスマホ側にデバッグ許可画面が出るのでOKを押す。

Devicesページに接続されたスマホのモデル名と、Android Chromeの現在のタブ一覧が表示される。

Offlineの状態からスマホが認識された様子のスクリーンショット

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のバージョン関係?

参考リンク

Remote debug Android devices - Chrome Developers