【Web共有】Mac OS X Lionをwebサーバー化する

15Thumb02

スマートフォンサイト制作の準備などでは、まずLocalに開発環境を整えてます。

補足説明すると、
『PCでスマホサイトを制作途中に(サーバーにアップする前に)表示を実機で確認するための環境を作る、ローカルでサーバー環境を作る』という意味です。

実機確認の方法

スマートフォンサイトの表示確認の方法は(サーバー化も含め)色々あるかと思います。

  • iOS(mobile safali)、Android(chrome lite)のレンダリングエンジンと同じwebkitの、PCブラウザーchrome、safariを使う。
  • safariの【開発】ツールで【ユーザーエージェント】を変える。
  • iOSシミュレータ、Android SDKなどのシミュレータを導入。
  • ローカル環境をWebサーバー化するツール『XAMPP』『MAMP』を使用。

などなど。

以前Windowsの方にXAMPPがインストール済みなんですが、今はMacでの作業がメイン。

MAMPやシミュレータものちのち導入するとして、今回はとりあえず一番簡単なPCブラウザ①②で確認後、macの【Web共有】の機能を使い実機確認するという方法をとりました。

Web共有

『簡単そう』という予想の元、【Web共有】の設定をしてみたら予想を上回る簡単さで驚きました。
ざっと手順だけ挙げていきます。

①【システム環境】で【共有】を開く。

15-01

②【Web共有】にチェック。

15-02

以上。完了。

…簡単すぎる。。
xamppはつまづく時はかなりつまづくので、拍子抜けしました。

あとは【パーソナルwebサイトフォルダを開く】をクリック、そのディレクトリに確認したいファイルを入れて、表示されているアドレス『http://your.computer.address/~yourusername/』に、スマートフォンでアクセスするとサイトが見られるようになります。

15-03

↓デフォルトで用意されているindex.html
15-04

【コンピュータのwebサイトフォルダを開く】の使い方も同様なんですが、こちらのディレクトリはファイルを出し入れするたびにパスワードを入力しないといけないのでパーソナルwebサイトフォルダを使うことにします。

ちなみにこれはタイトル通り、Lionでの設定の仕方。

Mountain Lionだと【web共有】が最初から表示されているという仕様が変わって、去年の夏頃話題になっていた模様。

対処法を紹介しているサイトを貼っておきます。