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" index 13b499f..b609f72 100644 --- "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" @@ -6,51 +6,52 @@ 1. 基本手順 (Basic Steps) ------------------------------------------------------------------------ -1-0. 目的 - ・VSCode の拡張機能「Live Server」を使用し，PC と同一ネットワーク上のスマホで Web ゲームの動作確認を行う． +1-1. 事前準備と起動 (Preparation & Launch) + ・PC とスマホを同一の Wi-Fi ネットワークに接続する． + ・VS Code でターミナルを開く (`Ctrl + @`)． + ・以下のコマンドを実行し，ホストモードで開発サーバーを起動する． + $ pnpm --filter client dev -- --host + ・ターミナルに表示された「Network」の URL を確認する． + - 例: http://192.168.1.10:5173 + - ※ Vite のデフォルトポートは 5173 だが，状況により異なる場合がある． -1-1. 事前準備と起動 - 1. PC とスマホを同一の Wi-Fi ネットワークに接続する． - 2. VSCode で index.html を開き，画面右下の「Go Live」をクリックする． - 3. PC ブラウザで起動したローカルサーバーのポート番号を確認する． - - 例: 5500 - -1-2. PC の IP アドレス確認 +1-2. PC の IP アドレス確認 (Check IP Address) + ・ターミナルに表示された Network URL (例: 192.168.1.10) を使用する． + ・表示されない場合は以下の手順で確認する． ■ 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 を入力し，アクセスする． +1-3. スマホからのアクセス (Access from Smartphone) + ・スマホのブラウザ（Safari，Chrome 等）を起動する． + ・アドレスバーに以下の形式で URL を入力し，アクセスする． - 書式: http://[PCのIPアドレス]:[ポート番号] - - 例: http://192.168.1.10:5500 + - 例: http://192.168.1.10:5173 2. トラブルシューティング (Troubleshooting) ------------------------------------------------------------------------ 2-1. 接続できない場合の確認事項 - ■ ネットワーク設定 ・PC とスマホが同じ Wi-Fi に接続されているか確認する． - - ※ ゲスト用 Wi-Fi など，機器間の通信が遮断されているネットワークでは接続できない． + - ※ ゲスト用 Wi-Fi など，機器間の通信が遮断されているネットワークでは接続できない． ■ ファイアウォール設定 ・PC のセキュリティソフトやファイアウォールが，外部からの接続をブロックしている可能性がある． - - 対策: 一時的にファイアウォールを無効化するか，VSCode (Code.exe) の通信を許可する設定を追加する． + - 対策: 一時的にファイアウォールを無効化するか，Node.js (node.exe) の通信を許可する設定を追加する． - ■ 入力情報の確認 - ・IP アドレスやポート番号の入力ミスがないか再確認する． - - NG: http://localhost:5500 （スマホから見た localhost はスマホ自身を指すため不可） + ■ WebSocket 接続エラー (Game Loop が動かない場合) + ・クライアントコード (`apps/client/src/config` 等) の接続先設定を確認する． + ・接続先が `ws://localhost:xxxx` の場合，スマホからは接続できない． + - 対策: PC の IP アドレス (例: `ws://192.168.1.10:xxxx`) に書き換える． 3. 外部ネットワークからの接続 (Port Forwarding)