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