[Mac]スマホから手軽に製作中のWEBサイトを確認する方法

製作中のWEBサイトをスマホから確認しようとすると、XAMPやVirtualbox+Vagrantで仮想環境を構築している場合、いちいちhttpd.confを弄らないといけないの面倒ですよね。仮想環境を構築していない場合なんかは、毎回テストサーバーにアップロードして確認しないといけなくて余計に面倒です。

そこで、Mac限定にはなるのですが、ターミナルを開いてコマンドを打つだけでPHPのビルトインウェブサーバーという機能を利用してスマホなどのローカルネットワーク内の他の端末で確認することが出来るようになりますので、今回はその方法をご紹介したいと思います。

手順

• ターミナルを開く
• 製作中のWEBサイトのルートディレクトリまで移動
• ビルトインウェブサーバーを立ち上げるコマンドを実行
• ブラウザで確認

ターミナルを開く

「アプリケーション」＞「ユーティリティ」内に下のアイコンのアプリがありますので、そこから実行してください。

製作中のWEBサイトのルートディレクトリまで移動

まずは、製作中のサイトの位置まで移動する必要があります。

その方法ですが、「cd 」と入力して（cdの後ろに半角スペースを忘れないように）表示したいWEBサイトのフォルダをドラッグ&ドロップしてください。（ドラッグ&ドロップをするフォルダは、サイトのトップページを入れているフォルダです。例えば「my_site」フォルダ直下にトップページである「index.html」を入れてあるなら、「my_site」フォルダをドラッグ&ドロップしてください。）

cd (表示させたいWEBサイトのフォルダをドラッグ&ドロップ)

すると、一例ですが以下のようになるかと思います。

cd /Users/username/work/my_site

これをEnterすると、製作中のWEBサイトのディレクトリへ移動できます。

ビルトインウェブサーバーを立ち上げるコマンドを実行

ビルトインウェブサーバーを立ち上げる前に、端末のIPアドレスを確認します。

IPアドレスを確認する方法はいくつかあるのですが、一番簡単なシステム環境設定から確認する方法を説明します。

「システム環境設定」＞「ネットワーク」を開くと以下のような画面が出てくると思います。

この赤枠で囲んだ部分（今回の場合は「192.168.11.4」）が端末のIPアドレスです。

このIPアドレスを使って、ターミナルに以下のコマンドを打ち込みましょう。

php -S 192.168.11.4:8000

「192.168.11.4」の部分は先ほど確認したIPアドレスに置き換えてください。

「:8000」の部分はポート番号という物なのですが、とりあえず例通り8000を入れておけばそうそう問題はないかと思います。

ブラウザから確認

最後に、ちゃんとサーバーが動作しているか、ブラウザから確認してみましょう。

ブラウザのURLバーに「http://192.168.11.4:8000/」と入力して問題なくアクセス出来ればOKです。（例によって、「192.168.11.4」の部分は各自のIPアドレスに置き換えてください。）

以上

初めてターミナルを触る方にとっては多少ややこしく見えるかもしれませんが、慣れればすぐにスマホからWEBサイトが確認できるようになるので非常に便利です。ターミナル自体も今回の用途以外だけでなく、GulpやGitなどのツールを使用する際に必要になってくることが多いので早めに慣れておくのをオススメします。

WordPress案件や、ゴリゴリのシステム案件なんかだと今回の方法は使用出来ませんが、静的なWEBサイトや多少PHPを使用している程度のサイトなら問題なく手軽に確認出来ますので覚えておいて損はないかと思います。

以上、たにっぱでした〜