2016年10月20日

【RPGツクールMV】スマホでテスト出来る環境を作る

■ブラウザゲームをスマホでテストしたい

スマホ上でどう表示されるか確認したい!

うーがさんからそんな熱い要望がありました。

現在、RPGツクールMVにてブラウザゲームを作っているのですが、スマホにも対応しなくてはいけません。スマホに対応するからには、開発中にスマホでの見栄え、動作を確認したいのは当然のことです。しかし、スマホでプレイするにはゲームをサーバにあげる必要があります。
でも、もっと手軽にテストしたいですよね。

ということで、自分のPCにサーバを立ててスマホから接続できる環境を作りました。

【前提条件】

 ・ Windows
 ・ Google Chromeが入っている
 ・ スマホがPCと同じネットワーク(LAN)内へ接続できる
 ・ ネットワークが「ホーム ネットワーク」または「社内ネットワーク」である
   ※「ネットワークの確認」方法は以下を参照してください

□ネットワークの確認方法

1. 「コントロールパネル」から「ネットワークと共有センター」を開いてください
※コントロールパネルの表示方法が「カテゴリ」の場合は「ネットワーク状態とタスクの表示」を選択してください
2. アクティブなネットワークの表示の項目で、ネットワークが「ホーム ネットワーク」または「社内ネットワーク」であることを確認してください
※「パブリック ネットワーク」とは誰でも接続できる公共の場のネットワークの事です。もし、自宅のネットワークが「パブリック ネットワーク」として設定されているのであれば、「パブリック ネットワーク」をクリックして、表示されたウィンドウ「ネットワークの場所の設定」の中から「ホームネットワーク」を選択してください

■使用するもの

・ブラウザ: Google Chrome
・Chromeアプリ: Web Server for chrome
・フォルダ: ツクールのプロジェクトフォルダ

■アプリの設定

1 . Chromeに以下のアプリを入れてください
Web Server for Chrome

2. 起動します
※ブラウザのアプリから選択できます

赤枠の中のスイッチにて、サーバを起動・切断できます
スイッチが入っているとき、サーバが起動状態です(Web Server: STARTED)

3. 以下の画像のように設定します

①「CHOOSE FOLDER」をクリック、ゲームのプロジェクトフォルダ(index.htmlがあるフォルダ)を選択します
②「Accessible on local network」にチェックを入れます
※LAN内の接続を許可します
③「Automatically show index.html」にチェックをいれます
※URLにindex.htmlを入れなくても、自動的に参照します

4. 一旦ウィンドウを閉じて、再起動します

5. Web Server URL(s)の一覧に、以下のように表示されることを確認してください

「http://127.0.0.1:8887」は自分自身を指すIPです。
「http://192.168.~」はプライベードIPです(画像と違う値になりますが、問題ありません)。スマホに接続するときはこのURLを使います。

これでサーバを立てることができました。とても簡単ですね!


■接続許可の設定

サーバが起動しても、ポートを開放しなくては接続できません。
次は接続許可の設定をします。
※既にChromeの受信規則がある場合は設定の必要はありません

1. 「コントロールパネル」から「Windows ファイアウォール」を開きます
2. 「詳細設定」を開きます
3. 「ローカルコンピュータのセキュリティが強化されたWindowsファイアウォール」の「受信規則」の上で右クリックします
4. 「新しい規則」を選択します
5. 規則の種類で「ポート」を選択して次へを押します
6. プロトコルおよびポートで「TCP」を選択、「特定のローカルポート」を選択してフォームに「8887」(Web Server for ChromeアプリのEnter Portの下と同じ値)を入力して次へを押します
7. 操作で「接続を許可する」を選択して次へを押します
8. プロファイルで「プライベート」をチェック、それ以外のチェックははずします
9. 最後に適当な名前を入力して、「完了」を押します

設定は以上で完了です。

上記の操作が完了した後、アプリからサーバを起動してスマホのブラウザにURLを入力してみてください(Wi-Fi接続)。ゲームがプレイできるはずです。


(しげまろ)