Macローカル環境でスマホサイトの実機テストを行う方法(3)

前回は、「MacのローカルフォルダをWebサーバーにする」でした。
charlie.hateblo.jp
今回は、「iPhoneAndroidからアクセスしてみる」です。

iPhoneAndroidからアクセスしてみる

MacIPアドレスを固定にする

まず、MacIPアドレスを固定にします。
システム環境設定 - ネットワークと進み接続済みの有線LANを選択します。
f:id:fushimik:20160310164612p:plain
まだ、Macを有線LANに接続し、さらにwi-fiアクセスポイントにしていない方は、
Macローカル環境でスマホサイトの実機テストを行う方法(1) - フロントエンドとかPCとかスマホとか
を参考に設定しよう。
この画面の「IPv4アドレス」と「ルーター」をメモしておき、設定時には最後のオクテットを253以下の十分に大きな数値にします。
ここでは、192.168.0.99を設定値としますが、192.168.0の部分は各自の環境にあった値にします。
f:id:fushimik:20160310165105p:plain
IPv4の設定:手入力
IPアドレス:<先ほど決めたアドレス>
サブネットマスク:通常は、このまま255.255.255.0でよい
ルーター:<先ほどメモしたアドレス>
最後に「適用」を押したら、MacIPアドレスは固定されたことになります。

iPhoneからアクセスする

設定したアクセスポイントにアクセスするのですが、この時に、iPhone側で追加の設定が必要です。
wi-fiアクセスポイント(Macで設定した)の左側の(i)マークをタップします。
f:id:fushimik:20160313130153p:plain

一番下の、HTTPプロキシを設定します。
f:id:fushimik:20160313130212p:plain
サーバ:固定したMacIPアドレス
ポート:8080

ここまで設定できたら、iPhonesafariを開き、アドレス欄に設定したローカルフォルダのURLを入れてみよう。
http://local.oreore.com

無事にローカルフォルダをiPhonesafariで開くことができたはずだ。

Androidからアクセスする

Androidからでも同様に追加の設定が必要です。
f:id:fushimik:20160313130226p:plain
wi-fiアクセスポイント(Macで設定した)を長押しします。
f:id:fushimik:20160313130238p:plain
「ネットワークを変更」
f:id:fushimik:20160313130249p:plain
「詳細設定項目」
f:id:fushimik:20160313130312p:plain
「プロキシ」を「手動」にセットし、さらに下にスクロールします。
f:id:fushimik:20160313130324p:plain
プロキシのホスト名:固定したMacIPアドレス
プロキシポート:8080 (デフォルトで表示されていますが、入力しないと保存できない)
ここまで設定したら、「保存」

これで、AndroidでもMacのローカルフォルダを表示することができるはずだ。