From 6b8367d36a99d97e88660cf03290ae1fac295a66 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 10 Jul 2021 15:39:58 +0900 Subject: Tools/Responsive_Design_Mode を更新 (#1337) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - conflicting 版は英語版で削除済みの旧版向けの記事であるため削除 - 正規版を 2021/06/29 時点の英語版に同期 - 画像1枚を日本語化 --- files/ja/tools/responsive_design_mode/index.html | 208 ++++++++++----------- .../responsive_setting_menu.png | Bin 0 -> 4047 bytes 2 files changed, 99 insertions(+), 109 deletions(-) create mode 100644 files/ja/tools/responsive_design_mode/responsive_setting_menu.png (limited to 'files/ja/tools') diff --git a/files/ja/tools/responsive_design_mode/index.html b/files/ja/tools/responsive_design_mode/index.html index f5d713a53d..a14ff5927e 100644 --- a/files/ja/tools/responsive_design_mode/index.html +++ b/files/ja/tools/responsive_design_mode/index.html @@ -9,142 +9,142 @@ tags: - Responsive Design - Tools - Web Development - - 'l10n:priority' + - l10n:priority translation_of: Tools/Responsive_Design_Mode --- -

{{ToolsSidebar}}

+
{{ToolsSidebar}}
-

レスポンシブデザイン は、さまざまな端末、特にデスクトップやラップトップだけでなく携帯電話やタブレットでも適切に表示および動作するウェブサイトを設計することです。

+

レスポンシブデザイン は、さまざまな端末、特にデスクトップやラップトップだけでなく、携帯電話やタブレットでも適切に表示および動作するウェブサイトを設計することです。

もっとも明らかな要素は画面のサイズですが、ほかにもディスプレイの画素密度やタッチをサポートするかといった要素があります。レスポンシブデザインモードは、さまざまな端末でウェブサイトがどのように表示および動作するかを確認するために、これらの要素をシミュレーションする手段を提供します。

-

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

+

レスポンシブデザインモードの切り替え

-

レスポンシブデザインモードを切り替える方法は 3 つあります:

+

レスポンシブデザインモードを切り替える方法は 3 つあります。

-

レスポンシブデザインモードを使用する

+

レスポンシブデザインモードの操作

-

レスポンシブデザインモードを有効にすると、ウェブページのコンテンツ領域が特定の端末の画面のサイズに設定されます。初期状態は 320 x 480 ピクセルです:

+

レスポンシブデザインモードを有効にすると、ウェブページのコンテンツ領域が特定の端末の画面のサイズに設定されます。初期状態は 320 x 480 ピクセルです。

-

メモ: レスポンシブデザインモードで選択したデバイスは、セッション間で保存されます。

+

メモ: レスポンシブデザインモードで選択した端末とその向き (縦または横) は、セッションをまたいで保存されます。

-

+

-

レスポンシブデザインモード自体の切り替えとは別に、開発ツールのツールボックスを表示または非表示にすることができます:

- -

- -

レスポンシブデザインモードを有効にした状態で、コンテンツ領域がリサイズされたまま通常どおりにブラウジングを続けることができます。

- -

端末選択

- -

ビューポートの上に [端末が選択されていません] と表示されています。ここをクリックすると、端末名の一覧が開きます。端末を選択すると、レスポンシブデザインモードは以下の特定を、その端末に合わせて設定します:

+

選択した端末の情報がディスプレイの中央に表示されます。表示内容は左から右に向かって次のようになっています。

-

さらに Firefox は User-Agent HTTP リクエストヘッダーを、選択した端末の既定のブラウザーであると名乗るように設定します。例えば iPhone を選択すると、Firefox は自身が Safari であると名乗ります。navigator.userAgent プロパティも同じ値を設定します。

- -

{{EmbedYouTube("JNAyKemudv0")}}

- -

ドロップダウンリストにある端末は、選択可能な端末のサブセットです。ドロップダウンリストの末尾に [リストを編集...] という項目があります。これを選択するとすべての選択肢を含むパネルが表れて、ドロップダウンリストに表示したい端末を選択できます。端末一式や各端末に関連付けられている値は、https://github.com/mozilla/simulated-devices から取得できます。

- -

カスタム端末を保存する

- -

Firefox 54 より、レスポンシブデザインモードでカスタム端末を保存できます。それぞれの端末で以下の特性を持つことができます:

+

画面の右端には 3 つのボタンがあり、次のようなことができます。

-

また、端末モデル名にマウスポインターを乗せると、既存の端末の特性をツールチップでプレビューできます。

- -

+

設定メニューには次のようなコマンドがあります。

-

端末の制御

+

-

ほとんどの端末の特性について、特別な値を与えることもできます。

- -

画面のサイズを設定する

- -

画面のサイズを設定するには、ビューポートの下にある値をクリックして編集します:

+ -

+

これらが変更されたときに再読み込みするようにすると、そうしないと適用されないページの動作があるため便利です。例えば、多くのページでは、ロード時にタッチの対応をチェックし、対応している場合にのみイベントハンドラーを追加したり、特定のブラウザーでのみ特定の機能を有効にしたりしています。

-

ビューポートの右下の角をドラッグして、サイズを変更することもできます。

+

しかし、そのような機能を確認することに興味がない場合 (異なるサイズでの全体的なレイアウトを確認しているだけのような場合)、このような再読み込みは時間を浪費し、生産性の高い仕事を失う可能性があるため、これらの再読み込みを制御できると便利です。

-

また Firefox 59 より、キーボードで画面のサイズを編集できます。2 つの寸法の値のいずれかにフォーカスがある (またはカーソルがある) ときに上下のカーソルキーを押すか押し続けて、寸法を 1 ピクセルずつ増減できます。

+

現在は、このような設定を初めて変更したときに、再読み込みが自動的に行われなくなったことを示す警告メッセージと、再読み込みを自動的に行う方法についての情報が表示されるようになっています。例えば、以下のようになります。

-

より早く寸法を変えたい場合は、Shift キーを押しながら上下カーソルキーを押すか押し続けると、寸法を 10 ピクセルずつ増減できます。

+

-

端末の画素密度を設定する

+

レスポンシブデザインモードと開発者ツールボックス

-

端末の画素密度を設定するには、[DPR] のリストボックスをクリックして希望する値を選択します。

+

レスポンシブデザインモード自体の切り替えとは別に、開発ツールのツールボックスを表示または非表示にすることができます。

-

+

レスポンシブデザインモードを有効にした状態で、コンテンツ領域がリサイズされたまま通常どおりに閲覧を続けることができます。

-

タッチイベントのシミュレーションを切り替える

+

端末の選択

-

タッチイベントのシミュレーションを有効化/無効化するには、人差し指を立てている手のアイコンをクリックします:

+

ビューポートのすぐ上に「no device selected」というラベルがあります。これをクリックすると、端末名の一覧が表示されます。端末を選択すると、レスポンシブデザインモードでは、選択した端末に合わせて以下のプロパティが設定されます。

-

+ -

タッチイベントのシミュレーションを有効化すると、マウスイベントを タッチイベント に変換します。

+

さらに Firefox は HTTP の User-Agent リクエストヘッダーを、選択した端末の既定のブラウザーであると名乗るように設定します。例えば iPhone を選択すると、Firefox は自身が Safari であると名乗ります。 navigator.userAgent プロパティも同じ値に設定されます。

-

ページ再読み込みの動作を制御する

+

{{EmbedYouTube("JNAyKemudv0")}}

-

自動再読み込み ドロップダウンメニューは、Firefox 60 の新機能です:

+

ドロップダウンリストにある端末は、選択可能な端末の一部です。ドロップダウンリストの末尾に リストを編集... という項目があります。これを選択すると、すべての選択肢を含むパネルが表れて、ドロップダウンリストに表示したい端末を選択できます。端末一式や各端末に関連付けられている値は、https://github.com/mozilla/simulated-devices から取得できます。

-

+

カスタム端末の作成

-

メニューをクリックすると 2 つの項目があり、どちらもデフォルトで表示されます:

+

レスポンシブデザインモードでカスタム端末を追加...をクリックすると、カスタム端末を作成して保存することができます。端末ごとに以下の特性を設定することができます。

-

Firefox 60 より前のバージョンでは、自動的に再読み込みしていました。これは、再読み込みしなければ適用されないページがあるためです。例えば、多くのページが読み込み時にタッチのサポートを確認して、サポートされている場合に限りイベントハンドラーを追加したり、特定のブラウザーでのみ特定の機能を有効化したりしています。

- -

しかし、このような機能を実行することに興味がない場合 (さまざまなサイズで全体のレイアウトを確認するなど) は、再読み込みで時間を浪費してよい仕事ができなくなるかもしれませんので、再読み込みを制御できると役に立ちます。

- -

はじめてこの設定を変更したときに再読み込みを自動的に行わないことと、自動的に再読み込みできるようにする方法を示す警告メッセージを表示します。例えば:

- -

- -

向きを切り替える

- -

画面の向きをポートレートまたはランドスケープに切り替えるには、端末選択の隣にあるアイコンをクリックします:

+

また、端末モデル名にマウスポインターを乗せると、既存の端末の特性をツールチップでプレビューできます。

-

+

{{EmbedYouTube("SA0RlGtOCmE")}}

-

ネットワークを調整する

+

ネットワークの帯域制限

-

とても高速なネットワーク接続を使用してすべての開発やテストを行っている場合は、低速な接続を使用してアクセスしたときにサイトで問題が発生するかもしれません。レスポンシブデザインモードで、さまざまな種類のネットワークの特徴をほぼエミュレートするようブラウザに指示できます。

+

とても高速なネットワーク接続を使用してすべての開発やテストを行っている場合は、低速な接続を使用してアクセスしたときにサイトで問題が発生するかもしれません。レスポンシブデザインモードでは、さまざまな種類のネットワークの特徴に近い形でエミュレートするようブラウザーに指示することができます。

-

以下の特徴をエミュレートします:

+

エミュレートするのは以下の特徴です。

-

以下の表で各ネットワークに関連付けられた値を示しますが、正確なパフォーマンスを測定するためにこの機能を頼らないようにしてください。これは、さまざまな状況におけるユーザーエクスペリエンスのおおまかな見解を示そうとするものです。

+

以下の表で各ネットワークに関連付けられた値を示しますが、正確なパフォーマンスを測定するためにこの機能を頼らないようにしてください。これは、さまざまな状況における使い勝手のおおまかな考え方を示すものです。

@@ -152,71 +152,61 @@ translation_of: Tools/Responsive_Design_Mode - + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + +
選択肢 ダウンロード速度 アップロード速度最小の遅延 (ms)最小遅延 (ms)
GPRS50 Kb/s20 Kb/s50 KB/s20 KB/s 500
Regular 2G250 Kb/s50 Kb/s250 KB/s50 KB/s 300
Good 2G450 Kb/s150 Kb/s450 KB/s150 KB/s 150
Regular 3G750 Kb/s250 Kb/s750 KB/s250 KB/s 100
Good 3G1.5 Mb/s750 Kb/s1.5 MB/s750 KB/s 40
Regular 4G/LTE4 Mb/s3 Mb/s4 MB/s3 MB/s 20
DSL2 Mb/s1 Mb/s2 MB/s1 MB/s 5
Wi-Fi30 Mb/s15 Mb/s30 MB/s15 MB/s 2
-

ネットワークを選択するには、初期値として [No throttling] と表示されているリストをクリックします:

- -

- -

スクリーンショットを取得する

- -

カメラのアイコンをクリックすると、ビューポートのスクリーンショットを取得します:

- -

- -

スクリーンショットは、Firefox の既定のダウンロード先に保存します。

+

ネットワークを選択するには、初期値として [帯域制限なし] と表示されているリストをクリックしてください。

-

Firefox 53 より、開発ツールの オプション ページで "Screenshot to clipboard" にチェックを入れると、スクリーンショットをシステムのクリップボードにもコピーします。

+

diff --git a/files/ja/tools/responsive_design_mode/responsive_setting_menu.png b/files/ja/tools/responsive_design_mode/responsive_setting_menu.png new file mode 100644 index 0000000000..b993978ddf Binary files /dev/null and b/files/ja/tools/responsive_design_mode/responsive_setting_menu.png differ -- cgit v1.2.3-54-g00ecf