はじめに
本記事は Mac + iPhone という環境を想定しています。
Win + Android も基本的なところは共通しています。
確認事項
PCとスマホが同じネットワーク化にいることを確認する
WiFiの場合、 基本的には 同じSSIDで接続していれば同じネットワークです。
ファイアウォールの設定をOFFにする
[システム環境設定]>[セキュリティとプライバシー]>[ファイアウォール]
localhostを立ち上げる
コマンドラインから開発中のディレクトリでhttpサーバーを立ち上げます。
Python2の場合
$ python -m SimpleHTTPServer
python3の場合
$ python3 -m http.server
実行例
$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
オプションでポート番号を指定しない場合は上のように8000番を使用します。
PCからの確認はブラウザで localhost:8000 にアクセスするだけです。
スマホからアクセスする
方法①：ngrokでホスティングする（こっちの方が簡単）
brewでngrokをインストールします。
$ brew install ngrok
インストールできたら、上の手順でローカルホストを立ち上げます。
そこで使用しているポート番号を指定してngrokでのホスティングを開始します。
$ ngrok http 8000
こんな感じで立ち上がります。
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Session Expires 1 hour, 59 minutes
Update update available (version 2.3.38, Ctrl-U to update)
Version 2.3.35
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://b885d499a91a.ngrok.io -> http://localhost:3000
Forwarding https://b885d499a91a.ngrok.io -> http://localhost:3000
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
https://b885d499a91a.ngrok.io このように発行されたURLにアクセスするとページが開けます。
スマホの場合キャッシュのクリアが面倒なので、ブラウザをプライベートモードにすることを強くお勧めします。
方法②：ローカルネットワークのIPアドレスで接続する
MacのIPアドレスを表示する
[システム環境設定]>[ネットワーク]>[詳細]>[TCP/IP]
IPv4アドレス: 192.168.11.43 がローカルネットワークにおけるこの端末のアドレスになります。
通常ローカルのIPv4アドレスは 192.168.XX.XX のような形をしています。
このアドレスは固定ではないため、ネットワークに繋ぐたびにその時のアドレスを確認するようにしてください。
または ifconfig で確認する場合は
$ ifconfig en0 inet
en0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
inet ⭐️192.168.11.43⭐️ netmask 0xffffff00 broadcast 192.168.11.255
iPhoneのブラウザからアクセス
[ローカルIPアドレス] : [ポート番号] で表示することができます。
スマホの場合キャッシュのクリアが面倒なので、ブラウザーのプライベートモードで確認すると捗ります。
アクセスできない場合の確認事項
- httpサーバーを立ち上げるディレクトリは正しいですか？
- ファイアウォールはOFFになっていますか？
- PCとスマホは同じネットワーク下にいますか？
- MacのIPアドレスやポート番号は最新ですか？