diff --git "a/docs/ENV_04_\343\202\271\343\203\236\343\203\233\345\256\237\346\251\237\343\203\207\343\203\220\343\203\203\343\202\260\346\211\213\351\240\206.txt" "b/docs/ENV_04_\343\202\271\343\203\236\343\203\233\345\256\237\346\251\237\343\203\207\343\203\220\343\203\203\343\202\260\346\211\213\351\240\206.txt" new file mode 100644 index 0000000..13b499f --- /dev/null +++ "b/docs/ENV_04_\343\202\271\343\203\236\343\203\233\345\256\237\346\251\237\343\203\207\343\203\220\343\203\203\343\202\260\346\211\213\351\240\206.txt" @@ -0,0 +1,68 @@ +======================================================================== +スマホ実機デバッグ手順 (Smartphone Debugging Guide) +======================================================================== + + +1. 基本手順 (Basic Steps) +------------------------------------------------------------------------ + +1-0. 目的 + ・VSCode の拡張機能「Live Server」を使用し,PC と同一ネットワーク上のスマホで Web ゲームの動作確認を行う. + +1-1. 事前準備と起動 + 1. PC とスマホを同一の Wi-Fi ネットワークに接続する. + 2. VSCode で index.html を開き,画面右下の「Go Live」をクリックする. + 3. PC ブラウザで起動したローカルサーバーのポート番号を確認する. + - 例: 5500 + +1-2. PC の IP アドレス確認 + + ■ Windows の場合 + 1. Win + R キーを押し,「cmd」と入力して Enter キーを押下する. + 2. コマンドプロンプトで以下のコマンドを実行する. + $ ipconfig + 3. 表示された「IPv4 アドレス」の数値を控える. + - 例: 192.168.1.10 + + ■ Mac の場合 + 1. 「システム設定」>「ネットワーク」を開く. + 2. 接続中の Wi-Fi の「詳細」をクリックし,IP アドレスを確認する. + +1-3. スマホからのアクセス + 1. スマホのブラウザ(Safari, Chrome 等)を起動する. + 2. アドレスバーに以下の形式で URL を入力し,アクセスする. + - 書式: http://[PCのIPアドレス]:[ポート番号] + - 例: http://192.168.1.10:5500 + + +2. トラブルシューティング (Troubleshooting) +------------------------------------------------------------------------ + +2-1. 接続できない場合の確認事項 + + ■ ネットワーク設定 + ・PC とスマホが同じ Wi-Fi に接続されているか確認する. + - ※ ゲスト用 Wi-Fi など,機器間の通信が遮断されているネットワークでは接続できない. + + ■ ファイアウォール設定 + ・PC のセキュリティソフトやファイアウォールが,外部からの接続をブロックしている可能性がある. + - 対策: 一時的にファイアウォールを無効化するか,VSCode (Code.exe) の通信を許可する設定を追加する. + + ■ 入力情報の確認 + ・IP アドレスやポート番号の入力ミスがないか再確認する. + - NG: http://localhost:5500 (スマホから見た localhost はスマホ自身を指すため不可) + + +3. 外部ネットワークからの接続 (Port Forwarding) +------------------------------------------------------------------------ + +3-0. 概要 + ・VSCode 標準のポート転送機能を使用し,異なるネットワーク(4G/5G や外部 Wi-Fi)からデバッグを行う手順. + +3-1. 設定手順 + 1. VSCode 下部パネルの「ポート (Ports)」タブを選択する. + 2. 「ポートの追加」ボタンを押し,Live Server のポート番号(例: 5500)を入力する. + 3. 追加されたポートの「可視性 (Visibility)」列を右クリックし,「パブリック (Public)」に変更する. + 4. 「転送されたアドレス」列に表示された URL をコピーする. + - 書式: https://[ランダムな文字列].vscode-server.net... + 5. 発行された URL をスマホに送り,ブラウザで開く. \ No newline at end of file