モバイルのテスト用にMacでローカルサーバー環境を作ってみる

Pocket
[`evernote` not found]

最近めっきりスマホサイトの案件が増えてきています。なんだ今更感も大きいのですが、時代の流れですね。
都会からきっちり2年遅れのブーム到来という感じです。(某最大級SNSもですが・・・)

という訳で、CMSでゴリゴリというよりは、スタティックなhtmlでスマホも見れるように…みたいな案件が多いんです、最近。
PCサイトは、そのままブラウザでチェックすればいいのですが、スマホサイトを実機検証したい場合、いちいちサーバーにアップして云々ってのはめんどくさい。

そんな時に便利なのがAdobe Edge Inspectです。
これ、chromeのプラグインを入れて、iphoneでもアプリをインストールしておけば、wi-fi環境でPCのchromeで開いている画面をiphoneでも表示できるという神アプリです。って皆さん知ってるよね。

ただ、一つ問題があって、ローカルのhtmlファイルは対応していないのです。なので、「いちいちサーバーにアップしなきゃ」問題は解決されないのであります・・・

ここで裏技があって、ローカルサーバーを起動して、そこで閲覧すれば、Adobe Edge Inspectも使えるんです。

はい、ここからが本題です。
ローカルサーバーを起動するって、つまりApacheみたいなサーバーを立ち上げるということです。
(だんだん難しくなってきました。)
windowsやmacでは、ローカル開発環境を構築するのに、 MAMPとかxamppなどのアプリを使うのが一般的です。

その方法でも間違いは無いと思いますが、今回のようなケースの場合、phpとかMy SQLとは不要なので、Macにもともと入っているApacheを使ってローカルサーバーを立ち上げてみます。(あと、自分が知らないところで変なアプリが起動しているのも気持ち悪いと指摘されたりしたので)

参考:Androidはワンツーパンチ 三歩進んで二歩下がる-Mac OS X Mountain Lionにシステム環境設定の「共有」パネルに Web 共有のオプションが入っていない件について
上記サイトを参考にしました。

Apacheの起動は、問題なくできると思いますが、Mountain Lionでは公開用のSitesが存在しないようです。
(というか、このSitesってローカルサーバーでの公開用ディレクトリだったって今知りました。)

1.Sitesディレクトリを作成する
2.ローカルサーバーから上記サイトを閲覧できるように設定する
3.Apacheの立ち上げと停止

という手順をふめば、sitesフォルダ内にデータを入れてブラウザからアクセスすればいい訳です。
これで、いちいちサーバーにアップしなくても、モバイル環境のテストができるようになりました。
ちなみに、このローカルサーバーを起動しておけば、同一Wi-fi環境内であれば、IPアドレスからMAC内のサイトを閲覧できますので、Adobe Edge Inspectを使わなくてもモバイル環境での実機チェックができるという。しかも、ネイティブなモバイル環境なので、リフレッシュとかもモバイル側で操作できます。
Wi-fi環境なので、完璧な実機検証とまではいきませんが、表示状況のチェックとしては問題ないです。

あと、テザリング環境でもサイトの共有ができるので、クライアント先でもモバイル環境の確認ができたりします。

これ、地味に便利です。

と、他人のふんどしエントリーですが、とても勉強になったのでシェアします。
※公共環境では、自分のPC内が丸見えになる恐れがあるので要注意。

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。