MAMP開発環境構築シリーズ、【Mac OSX】MAMPの初期設定 : バーチャルホストの設定（Apache）ではMAMPでバーチャルホストを作る方法をご紹介しました。

これでMac1台あればいくつでもウェブサイトを並行して作れるわけですが、「スマートフォン対応」する時みなさんはどのように作業していますか？

MacOSXでは実は、MacとiPhoneをUSB接続するだけで簡単にiPhoneから開発中のウェブサイトを見ることができます。

…が、バーチャルホストで作った名前ベースのバーチャルドメインはApacheを動かしている端末だけでしか認識できないので、少し設定をいじる必要があります。今回は基本の1台構成（バーチャルホストなし）の場合とバーチャルホストありの場合の両方の設定方法をご紹介します。

前提

  • Lightning USBケーブル（Wi-Fiなど、MacとiPhoneをLAN接続できるもの）がある
  • MAMPを構築済
  • Mac OSX Marvericks
  • iOS 7

※Marveriksになってから少し過去のOSと設定方法が変わってしまったのでご留意ください。

Mac 設定方法

MacとiPhoneをLightning USBケーブル（Wi-Fi）で接続します。

「アプリケーション」-「システム環境設定」を起動します。
mamp-iphone1

「ネットワーク」をクリックし、「iPhone USB」（Wi-Fi）が接続済になっていることを確認します。
mamp-iphone2

「すべてを表示」をクリックして最初の一覧にもどり、「共有」をクリックします。
上部の「コンピュータ名」の下に記載の、次のアドレスでこのコンピュータにアクセスできますの部分を控えておいてください。（例：air.local）
mamp-iphone6

Macの方はこれで終わりです。

iPhone 設定方法

「設定」-「インターネット共有」をONにします。
（Wi-Fiの場合は、Macが接続されているWi-Fiに接続してください。）
mamp-iphone3 mamp-iphone4

MAMPがバーチャルホスト設定をしていない場合はこのまま「iPhoneからの閲覧方法」まで読み飛ばしてください。

バーチャルホストの場合：Apacheでポート設定

バーチャルホストを設定している場合はバーチャルホストごとに固定のポート番号を設定してアクセスできるようにします。仮に「atomicbox.local」のようなバーチャルホストを作っていたとしてもiPhoneからその名前でMacのそこへアクセスすることはできません。

MAMPのドキュメントルートをいちいち見たいバーチャルホストのパスに変更するのもナンセンスです。てっとりばやく見れるようにするにはポートの振り分けが一番簡単かなと思いました。

「MAMP」-「apache」-「extra」-「httpd-vhosts.conf」を開き、もともとのバーチャルホストの設定に以下のように追記します。

Listen 49152

<VirtualHost *:8888 *:49152>
    ServerName atomicbox.local
    DocumentRoot "/Applications/MAMP/htdocs/atomicbox/"
    ErrorLog "/Applications/MAMP/logs/atomicbox.log"
</VirtualHost>

「Listen 49152」と、<VirtualHost>のポート「*:49152」が増やした部分です。これをバーチャルホストごとに別の番号で設定します。ポート番号の割り振りはここでは専門に扱いませんのでポート番号 – Wikipediaなどを見てください。（49152番 – 65535番を使うのがベターかな？）

iPhoneからの閲覧方法

インターネットブラウザ（Safari）を起動します。

アドレスバーに、調べておいたMacのアドレスにMAMPのポート番号をつけて入力します。

  • Macのアドレス：air.local
  • MAMPのポート番号：8888（デフォルト）

このような場合は以下。

http://air.local:8888/

MAMPのドキュメントルートが見えると思います。
（index.htmlなどがなくてフォルダ一覧権限がないと403エラー（Forbidden）などがでてしまうかもしれませんので、適当にファイルを作って確認してください。）

バーチャルホストに対応した場合は、バーチャルホストごとにポート番号を割り振ったので、後ろのポート番号を変更します。
バーチャルホスト1に「49152」を割り振った場合はこうなります。

http://air.local:49152/

ポート番号は正直サイトを分類するにはわかりにくいので、iPhoneにブックマークを作っておくなどして管理するのがいいですね。

では、今回はこのへんで〜

※Mac OSX Marvericks（10.9.4）、iPhone 5s（iOS7.1.2）での内容です。