PC上で開発したWebページをスマートフォンで確認するには、PCのLAN内IPアドレスと、開発サーバーが待ち受けているポートを指定します。IPアドレスの置き換えに加え、サーバーの待受設定も必要です。
2026年10月8日改訂。接続先・待受アドレス・ネットワーク条件を分けて説明しました。
localhostは、アクセスしている端末自身
PCでlocalhostを開くとPC自身へ、スマートフォンでlocalhostを開くとスマートフォン自身へ接続します。スマートフォンのlocalhostがPCを指すわけではありません。
以下では、PCのLAN内IPv4アドレスを192.168.1.20、開発サーバーのTCPポートを8000、公開するフォルダーをpublicとした例を使います。IPアドレスは自分のPCの値に置き換えてください。
| 閲覧する端末 | 接続先の例 |
|---|---|
| 開発用PC | http://192.168.1.20:8000/ |
| 同じLANのスマートフォン | http://192.168.1.20:8000/ |
1. 同じLANに接続してIPアドレスを確認する
PCとスマートフォンを、相互通信できる同じLANへ接続します。Macでは「システム設定」のネットワーク設定から、使用中の接続のIPアドレスを確認できます。
ゲストWi-Fiや端末間通信を禁止する設定では、同じアクセスポイントにつながっていても接続できません。スマートフォンがモバイル回線を使用していないかも確認します。
2. PCのLAN内アドレスで待ち受ける
Python 3を導入済みで、publicに確認用のHTMLがある場合の例です。プロジェクトのディレクトリで実行します。
python3 -m http.server 8000 --bind 192.168.1.20 --directory public
--bindは待受アドレス、--directoryは配信対象ディレクトリを指定します。Pythonのhttp.server公式資料に各オプションの説明があります。127.0.0.1だけで待ち受ける設定では、別の端末からは接続できません。
フレームワークの開発サーバーでも、host・bindなどの設定を確認します。0.0.0.0はすべてのIPv4インターフェースで待ち受ける指定であり、ブラウザに入力する接続先ではありません。LAN内の特定IPで足りる場合は、そのIPを指定すると公開範囲が明確になります。
3. スマートフォンで開く
ブラウザのアドレス欄にhttp://192.168.1.20:8000/を入力します。ファイルを指定する場合は、公開フォルダーからの相対パスを付けます。例えばpublic/demo/index.htmlなら、URLはhttp://192.168.1.20:8000/demo/index.htmlです。
表示されたら、レイアウトだけでなく、文字の読みやすさ、タップ操作、フォーム入力、横向き表示も確認します。確認後はサーバーのターミナルでCtrl+Cを押して停止します。
つながらないときの確認順
- PC自身からLAN内IPのURLを開けるか。
- サーバーが終了していないか。ポート番号と待受アドレスが合っているか。
- PCのIPアドレスが再接続などで変わっていないか。
- ファイアウォールが対象サーバーの接続を許可しているか。
- ゲストWi-Fi・VPN・端末間通信の制限がないか。
これは信頼できるLAN内での開発確認用です。publicには確認に必要なファイルだけを置き、秘密鍵・設定ファイル・実データを含めません。外部へのシンボリックリンクにも注意してください。インターネットへの公開には、開発サーバーとは別の配信構成を用意します。
