========================================================================
スマホ実機デバッグ手順 (Smartphone Debugging Guide)
========================================================================
1. 基本手順 (Basic Steps)
------------------------------------------------------------------------
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-2. PC の IP アドレス確認 (Check IP Address)
・ターミナルに表示された Network URL (例: 192.168.1.10) を使用する．
・表示されない場合は以下の手順で確認する．
■ Windows の場合
1. Win + R キーを押し，「cmd」と入力して Enter キーを押下する．
2. コマンドプロンプトで以下のコマンドを実行する．
$ ipconfig
3. 表示された「IPv4 アドレス」の数値を控える．
■ Mac の場合
1. 「システム設定」＞「ネットワーク」を開く．
2. 接続中の Wi-Fi の「詳細」をクリックし，IP アドレスを確認する．
1-3. スマホからのアクセス (Access from Smartphone)
・スマホのブラウザ（Safari，Chrome 等）を起動する．
・アドレスバーに以下の形式で URL を入力し，アクセスする．
- 書式: http://[PCのIPアドレス]:[ポート番号]
- 例: http://192.168.1.10:5173
2. トラブルシューティング (Troubleshooting)
------------------------------------------------------------------------
2-1. 接続できない場合の確認事項
■ ネットワーク設定
・PC とスマホが同じ Wi-Fi に接続されているか確認する．
- ※ ゲスト用 Wi-Fi など，機器間の通信が遮断されているネットワークでは接続できない．
■ ファイアウォール設定
・PC のセキュリティソフトやファイアウォールが，外部からの接続をブロックしている可能性がある．
- 対策: 一時的にファイアウォールを無効化するか，Node.js (node.exe) の通信を許可する設定を追加する．
■ WebSocket 接続エラー (Game Loop が動かない場合)
・クライアントコード (`apps/client/src/config` 等) の接続先設定を確認する．
・接続先が `ws://localhost:xxxx` の場合，スマホからは接続できない．
- 対策: PC の IP アドレス (例: `ws://192.168.1.10:xxxx`) に書き換える．
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 をスマホに送り，ブラウザで開く．
