Adobe InspectはPCのブラウザで見ている画面を、スマートフォンやタブレットで同時にチェックできるツール。通常ならPCでアクセスしたサイトにスマホでもアクセスして、更新も手動で行わなければいけませんが、このツールを使えばリアルタイムに同期してくれるようになります。
Webデザイナーにとっては非常にありがたいツールなんですが、１つ問題点が。それはローカル環境でプレビューできないという点です。テスト中のサイトをわざわざサーバーにアップしないと使えないのは×。
とこが、ローカル環境の設定を少しいじるとInspectを使ってローカルでもリアルタイムプレビューができるようなので、方法をまとめておきます。
Inspectをローカル環境で使う方法
手軽にローカル環境作るならMAMP!
すでにローカル環境を構築されてる方は飛ばしてもらっても良いですが、最近MAMPが大幅アップデートしました。
なんとMAMPのWindows版が出ているのです！これまではMacではMAMP、WindowsではXAMPPと使い分けないといけなかったんですが、WinでもMAMP使えるようになってますので是非ダウンロードしてみてください。
Inspectを使うためのMAMPの設定方法
ではMacの場合の設定方法を紹介します。アプリケーションフォルダのMAMP->conf->apache->extra->httpd-vhosts.confを開きます。
開くと、サンプルがいくつか記述されてるのでその上に以下のように追記します。
<VirtualHost *:80>
DocumentRoot "/Applications/MAMP/htdocs/"
ServerName htdocs
ServerAlias htdocs.*.xip.io
</VirtualHost>
保存した後、MAMPを再起動します。その後htdocsに何かファイルを入れて、localhost:8888からアクセスすると・・・見事に表示されました。
それでもWordpressは見れない？
ここまでの設定でHTMLファイルはきちんと表示されるのですが、WordpressなどのCMSを見ようとすると、CSSが読み込まれていないような状態で表示されます。
何か解決方法があるかもしれませんが、今はHTMLファイルのみで我慢するしかない？
