■ブラウザゲームをスマホでテストしたい
スマホ上でどう表示されるか確認したい!
うーがさんからそんな熱い要望がありました。現在、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. 一旦ウィンドウを閉じて、再起動します
「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接続)。ゲームがプレイできるはずです。
(しげまろ)