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)での内容です。