Help us understand the problem. What is going on with this article?

PCで編集中のウェブサイトをスマホから確認する方法

はじめに

本記事は Mac + iPhone という環境を想定しています。
Win + Android も基本的なところは共通しています。

確認事項

PCとスマホが同じネットワーク化にいることを確認する

WiFiの場合、 基本的には 同じSSIDで接続していれば同じネットワークです。

ファイアウォールの設定をOFFにする

[システム環境設定]>[セキュリティとプライバシー]>[ファイアウォール]
スクリーンショット 2019-12-04 11.06.18.png

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 にアクセスするだけです。

参照: 開発用ローカルサーバを立ち上げる方法

スマホからアクセスする

MacのIPアドレスを表示する

[システム環境設定]>[ネットワーク]>[詳細]>[TCP/IP]
IPv4アドレス: 192.168.11.43 がローカルネットワークにおけるこの端末のアドレスになります。
通常ローカルのIPv4アドレスは 192.168.XX.XX のような形をしています。
このアドレスは固定ではないため、ネットワークに繋ぐたびにその時のアドレスを確認するようにしてください。

スクリーンショット 2019-12-04 11.10.49.png

または 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アドレス] : [ポート番号] で表示することができます。

IMG_15B724277D94-1.jpeg

スマホの場合キャッシュのクリアが面倒なので、ブラウザーのプライベートモードで確認すると捗ります。

アクセスできない場合の確認事項

  • httpサーバーを立ち上げるディレクトリは正しいですか?
  • ファイアウォールはOFFになっていますか?
  • PCとスマホは同じネットワーク下にいますか?
  • MacのIPアドレスやポート番号は最新ですか?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away