========================================================================
スマホ実機デバッグ手順 (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 をスマホに送り，ブラウザで開く．