今日の世界でWebデベロッパーを務めるということは、時には困難な作業であることが判明しているデバイスやプラットフォームのサポートを意味します。最新のWeb標準に準拠して設計されたコードであっても、ウェブサイトの一部が特定のデバイスや解像度で表示されないようにすることができます。このような幅広いシナリオをサポートするという難題に直面した場合、適切なシミュレーションツールを自由に使用することは非常に貴重です。
あなたがMacを使用する多くのプログラマーの一人であれば、Safariの開発者向けツールセットは常に便利です。 Safari 9のリリースでは、主にレスポンシブデザインモードのため、この機能の幅が大幅に拡大しました。さまざまな画面解像度や異なるiPad、iPhone、iPod touchビルドでサイトをレンダリングする方法をプレビューできます。
このチュートリアルでは、レスポンシブデザインモードを有効にする方法と、開発ニーズにどのように活用するかについて詳しく説明します。
Safari環境設定
まず、Safariブラウザを開きます。
クリック サファリ ブラウザのメニューでは、画面の上部にあります。ドロップダウンメニューが表示されたら、 設定 オプションの丸で囲んだ例を示します。
注意：上記のメニュー項目の代わりに、以下のキーボードショートカットを利用することができます： COMMAND + COMMA（、）
05の02開発メニューを表示する
Safariの環境設定ダイアログがブラウザウィンドウの上に表示されます。まず、 上級 歯車によって表され、ウインドウの右上隅に位置するアイコン。
ブラウザの詳細設定が表示されるはずです。下部にはチェックボックスが付いたオプションがあります メニューバーに現像メニューを表示する 上記の例では円で囲んで示しています。このメニューを有効にするには、チェックボックスを1回クリックします。
03/05レスポンシブデザインモードに入る
画面の上部にあるSafariメニューに新しいオプションが表示されるようになりました。 開発する。このオプションをクリックします。
ドロップダウンメニューが表示されたら、 レスポンシブデザインモードに入る示された例では円で囲まれています。
注意：上記のメニュー項目の代わりに、以下のキーボードショートカットを利用することができます：OPTION + COMMAND + R
04/05レスポンシブデザインモード
上記の例に示すように、アクティブなWebページが応答設計モードで表示されるようになりました。 iPhone 6などのiOSデバイスのいずれかを選択するか、または800 x 600などの指定された画面解像度のいずれかを選択することで、そのデバイスまたはそのディスプレイ解像度でのページのレンダリング方法をすぐに見ることができます。
表示されているデバイスと解像度に加えて、解決ブラウザの上に表示されたドロップダウンメニューをクリックすることで、別のブラウザなどの別のユーザーエージェントをシミュレートするようSafariに指示することもできます。
05/05メニューの開発：その他のオプション
レスポンシブデザインモードに加えて、Safari 9の開発メニューには他にも多くの便利なオプションが用意されています。そのいくつかを以下に示します。
- ページを開く： 現在Macにインストールされている他のブラウザでアクティブなWebページを開くことができます。
- ユーザーエージェント： ユーザーエージェントを変更すると、WebサーバーはブラウザをSafari 9以外のものとして識別します。
- Webインスペクタを接続する： Safari 9のWeb Inspectorは、CSS情報、DOMメトリック、構造、およびそのネイティブソースコードを閲覧する機能を提供し、すべてのWebページのリソースを表示します。
- エラーコンソールを表示する： 開発メニューで最も広く使用されているオプションの1つで、このコンソールにはJavaScript、HTML、XMLのエラーと警告が表示されます。
- ページのソースを表示： アクティブなWebページのソースコードを表示および検索できます。
- ページリソースを表示する： このオプションを選択すると、ドキュメント、スクリプト、CSSなどのリソースが現在のページから表示されます。
- スニペットエディタを表示： 完全なページではなく、コードの断片を編集して実行する機能を提供します。この機能は、テストの観点から非常に便利です。
- 拡張機能ビルダーを表示： それに応じてコードをパッケージ化し、メタデータを追加することで、独自のSafari拡張を構築することができます。
- タイムライン録画を開始する： ネットワーク要求、JavaScript実行、ページレンダリング、およびWebKitインスペクタ内ですべて表示可能なユーザー定義の期間のその他のイベントを含む多数の項目を記録します。
- 空のキャッシュ： このオプションをクリックすると、標準のウェブサイトのキャッシュファイルだけでなく、Safari内のすべてのキャッシュが削除されます。
- キャッシュを無効にする： キャッシュを無効にすると、ローカルキャッシュを利用するのではなく、アクセス要求が行われるたびにWebサイトからリソースがダウンロードされます。
- スマート検索フィールドからのJavaScriptの許可： セキュリティ上の理由からデフォルトでは無効になっていますが、SafariのアドレスバーにJavaScriptを含むURLを入力できます。
- SHA-1証明書を安全でないものとして扱う： Secure Hash Algorithmの略で、SHA-1ハッシュ関数は元々考えられていたより安全性が低いと証明されているため、Safari 9にこのオプションを追加しました。
