ツールいらずでMac環境のローカルWebサイトをスマホ実機で確認する方法
パソコンでWebサイトを作成して本番環境にアップする前にスマホでのレイアウトが崩れていないか、ブラウザのデベロッパーツールで確認することが多いと思います。
しかし、ツールで確認してもスマホ実機で確認すると何だか違う・・・ということもしばしばあります。
こういう時にローカル環境で保存しているWebサイトを手元のスマホで確認できたらいいですよね。(サーバーにアップする前に)
それ、ツール不要でMacならさっと確認できますよ。今回はスマホ実機でローカルにほぞんしているWebサイトを確認する方法を紹介します。
Macでローカルに保存したWebサイトをスマホ実機で確認する
まず前提条件として、Macとスマホが同じwifi環境であることが必要です。
それではさっそく見ていきましょう。
1)ターミナルからwebサイトを保存しているディレクトリに移動する
ターミナルを起動して、Webサイトを保存しているディレクトリまで移動します。
入力が面倒な時は、cd と入力した後にそのままフォルダをターミナルへドロッグ& ドロップしてOKです。
xx -no-MacBook-Pro:~ xx$ cd //ここにフォルダをドラッグ&ドロップ//
2)IPアドレスを確認し、サーバーを起動する
次に現在、使用しているIPアドレスを確認しローカルのサーバーを立ち上げます。
IPアドレスの確認方法は、Macの左上リンゴマーク→システム環境設定→ネットワークから確認できます。
次にターミナルにこのIPアドレスを以下のように入力します。
php -S 192.000.00.0:8000 //IPアドレスは自分の番号に差し替える
注意点としては、-Sは大文字です。小文字だとエラーが起こります。
IPアドレスの後に:8000と付けるのも忘れずに。
これでローカルでサーバーが立ち上がります。
3)スマホ実機からアクセスしてみる
最後にスマホから以下のアドレスにアクセスしてみます。ここでもIPアドレスはご自身の環境のものに差し替えてくださいね。
http://192.000.00.0:8000
これで手元のスマホでオンラインのサーバーにアップせずともWebサイトが確認できます。
