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

スマートフォンサイトを作っていると、chromeスマホプレビュー機能がとっても便利。これがないと仕事ができないと言ってもいい。
参考:
wayohoo.com


chromeスマホプレビュー機能を使いどんどん制作をすすめていく。
やったーできた!!
さてさて、テストサーバにアップして実機でみてみましょう。
うんうん、いい感じ。
あれ?? こんなはずじゃないんだけどな。
なんか全体的にイメージ違うし。。。

なんてことがあるから、実機テストはこまめに行いたい。
でも一々テストサーバにアップして。。ってめんどくさいな〜。

そんな時、Macならローカル環境で作成したサイトを簡単に実機で見ることができるんです。

ここからが、本題。

MacWi-Fiアクセスポイントにするところまで

(1)では、MacWi-Fiアクセスポイントにするところまでを説明する。

有線LANをMacを使って無線化するイメージだ。
f:id:fushimik:20160217143830p:plain

Macを有線LANに接続

これは簡単。MacのLANポートにLANケーブルを接続します。
LANポートがない機種の場合は、Apple Thunderbolt - ギガビットEthernetアダプタ MD463ZM/Aを購入しよう。

Macの有線LANを共有する

システム環境設定 ー 共有を開く
f:id:fushimik:20160217143145p:plain

  • 共有する接続経路:有線LANのポート名
  • 相手のコンピュータが使用するポート:Wi-Fi

続いて「Wi-Fiオプション」を開く
f:id:fushimik:20160217143153p:plain

  • ネットワーク名:Macの名前
  • チャンネル:空いてそうなチャンネルを選ぶ
  • セキュリティ:WPA2パーソナル
  • パスワード:8文字以上の任意の文字列(あとで使うので忘れないように)

ここまで設定できたら、最後に右側の「インターネット共有」にチェックを入れる
f:id:fushimik:20160217143201p:plain
開始を押す。
これで、Macをアクセスポイントにすることができた。

スマートフォンから接続してみよう

iPhoneの場合、設定 ー Wi-Fi を開き、先ほど設定したネットワーク名に接続する。パスワードも先ほど設定したものだ。
Androidの場合も同様、Wi-Fi設定を開き、同様にネットワークを選択し、パスワードを入力する。

どうだろう、インターネットに接続できたでしょうか?
当然、Macが接続している有線LANがインターネット接続できていることが前提だ。

次回は、MacのローカルフォルダをWebサーバーにするです。
charlie.hateblo.jp