2015年10月1日にリリースされた、OSXの最新バージョン「El Capitan（エルキャピタン）」。新しいフォントの追加やSplit Viewなど便利な機能が沢山追加されました。

OS X El Capitan
カテゴリ: ユーティリティ
価格: 無料

今回はEl Capitanの新機能ではないのですが、Mac純正のブラウザである新しいSafari 9に搭載されている「レスポンシブデザインモード」も非常に便利なのでご紹介したいと思います。

特にレスポンシブなサイトを制作されている方に取っては目から鱗の機能になりそうです。

レスポンシブデザインモードに切り替えてみる

注）事前にSafariのバージョンを9にしておいてください。

まずはSafariを起動して初めに開発メニューを表示させる設定が必要になります。※デフォルトの状態では「開発メニュー」は表示されません。

「Safari」→「環境設定」→「詳細」→「メニューバーに”開発”メニューを表示」にチェックを入れます。

すると上部のメニューバーに「開発」が表示されるようになり、開発メニューをクリックします。すると中から「レスポンシブデザインモードにする」という項目が現れるので、ここをクリックで切り替えが出来ます。

レスポンシブデザインモードを触ってみる

では実際にレスポンシブデザインモードに切り替えて触ってみます。以下は起動直後のPCモードで表示。PCのディスプレイサイズそのまま表示されています。

次にiPad mini3での表示に切り替えてみます。切り替えは画面上部のデバイスボタンを押すだけ。表示しているサイトはもちろんレスポンシブサイトなので、途中で画面が切れたりサイズがおかしくなっているということはありません。

最後にiPhoneでの表示に切り替えてみます。デバイスのアイコンをダブルクリックすると横向き表示でも確認することが出来ます。

用意されているデバイスは、

• iPhone 4s
• iPhone 5s
• iPhone 6
• iPhone 6Plus
• iPad mini 3
• iPad Air 2
• ブラウザ　800X600
• ブラウザ　1366X768
• ブラウザ　1920X1080

と豊富。基本的なモバイルデバイスはカバーされている感じ。

嬉しいのはRetinaディスプレイの確認のために「@1x〜3x」の変更も用意されている点。さらにユーザーエージェントを変えて確認出来る機能もついてます。

2〜3年前のレスポンシブサイト制作では簡単なデバッグでも、毎回ブラウザの幅を調整したりして確認しなければなりませんでした。今回のアップデートでより便利に簡単になったSafari 9、ぜひ一度お試しください。