Macintoshの標準ブラウザSafariに搭載されている「Webインスペクタ」。これを使うと、iPhoneのSafariで表示されているサイトのCSSを、Macからリアルタイムでデバッグすることが可能です。スマートフォン向けサイトを作るのに最適！これ便利すぎで笑ってしまいます。
ウェブ制作者は絶対使った方が良いSafariのWebインスペクタ
ウェブ制作をしている皆さんこんにちは、よしぞう（@otonahack）です。
Macintoshの標準ブラウザ「Safari」に入っているデベロッパーツール「Webインスペクタ」。ブラウザに表示しているサイトのCSSをリアルタイムでいじれる機能です。（Chromeで言うところの「デベロッパーツール」ですね。）
この機能を使うとiPhoneのSafariに表示されているサイトのCSSも、Macintosh側からリアルタイムでいじれます。
知ってました？これ。
全然知らんかったがな！しかも「iOS 6」の頃からあるんですと！
言ってよ（笑）。
もちろん、修正後の状態を「プレビュー」することしかできません。きちんとサイトに反映させるには、修正したCSSファイルをFTPツールで上書きアップロードする必要があります。
それでも、修正後の状態をMacからリアルタイムに確認できるのは凄いです。これは超便利すぎ！
例えば「この部分を広げるとどうなるのかな？」なんていう、ちょっとした確認がやり放題ですよ。これは是非使ってください。
以下、設定方法を解説します。
まずはSafariの「開発」メニューを使えるようにします
まずはMacintosh側のSafariを設定します。
Safariの「開発」メニューはデフォルトでは表示されていませんので、表示させましょう。
Safariのメニュー、「Safari」ー「環境設定...」を開きます。下の図のように「詳細」のアイコンをクリックすると、画面下部に「メニューバーに"開発"メニューを表示」がありますので、チェックボタンにチェックを入れます。
iPhoneで「Webインスペクタ」の設定をする
次に、iPhone側の設定をします。
「設定」アプリの中にある「Safari」をタップします。
タップしたら、画面下の方にある「詳細」をタップします。
すると「Webインスペクタ」という項目がありますので、スイッチをオンにしましょう。色がついた状態がオンです。
「Webインスペクタ」をオンにしたら、iPhoneのSafariを起動して、CSSを修正したいサイトを表示させておきましょう。
iPhoneとMacintoshを物理的に接続します。
両方の設定が出来たら、iPhoneとMacintoshをケーブルで接続します。
「開発」メニューから自分のiPhoneを選択する
接続が済んだらMacintosh側のSafariで、「開発」メニューを見てください。自分のiPhoneがメニューに出ているはずです。
上の図のように、自分のiPhoneを選択すると、さらに右にメニューが表示され、iPhoneで表示しているサイトが選べると思います。
サイトを選ぶと、下の図のように「Webインスペクタ」が表示されます。
CSSを修正するとリアルタイムに反映されるよ！
Macintosh側で「Webインスペクタ」に表示されている特定のコードを選択すると、すぐに「iPhone」の該当部分が選択色で選択されます。
下の図は「Webインスペクタ」でトップページの1つの記事を選択したところ。iPhone側の表示が選択されています。
試しに、Macintosh側の「Webインスペクタ」で記事タイトルのフォントサイズを大きくしてみました。150%にしてみます。
すると、すぐにiPhone側の表示もタイトルが大きくなります。すげー！マジ便利！
この機能を使えば、スマートフォン向けサイトもサクサク作れそうですね。これは凄い。
Safariの「Webインスペクタ」まとめ
では、簡単にまとめます
- Safariの「Webインスペクタ」でiPhoneのサイト表示をリアルタイムに修正出来る
- あらかじめiPhoneとMacintoshの両方でSafariの設定が必要
- iPhoneとMacintoshをケーブルで接続する必要がある
- スマホサイト制作が超捗る！
この機能を知ってると知らないとでは、全然違いますね。ユーザーエージェントの切り替えよりもはるかに早い！
ウェブ制作者の方は、是非使ってみては如何でしょうか？
