From 65810088824f4d6c60a48f4a09a435cfac3c4861 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 13 Apr 2021 11:15:51 +0900 Subject: Web/CSS/Media_Queries/Testing_media_queries を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/01/19 時点の英語版に同期 - 用語を修正 --- .../media_queries/testing_media_queries/index.html | 69 ++++++++++++---------- 1 file changed, 39 insertions(+), 30 deletions(-) (limited to 'files') diff --git a/files/ja/web/css/media_queries/testing_media_queries/index.html b/files/ja/web/css/media_queries/testing_media_queries/index.html index cce7bfcb84..6c6d4b73e2 100644 --- a/files/ja/web/css/media_queries/testing_media_queries/index.html +++ b/files/ja/web/css/media_queries/testing_media_queries/index.html @@ -1,5 +1,5 @@ --- -title: プログラムによるメディアクエリのテスト +title: プログラムによるメディアクエリーのテスト slug: Web/CSS/Media_Queries/Testing_media_queries tags: - Advanced @@ -7,29 +7,32 @@ tags: - DOM - Guide - JavaScript + - Media Queries - MediaQueryList + - Responsive Design + - Web - matchMedia - ウェブ - - メディアクエリ + - メディアクエリー - レスポンシブデザイン translation_of: Web/CSS/Media_Queries/Testing_media_queries ---
{{cssref}}
-

{{Glossary("DOM")}} では、 {{domxref("MediaQueryList") }} インタフェースおよびそのメソッドやプロパティを用いて、メディアクエリの結果をプログラムで調べることができる機能を備えています。 {{domxref("MediaQueryList") }} オブジェクトを作成すると、クエリの結果を確認すること、あるいは結果が変化したときに自動的に通知を受け取ることができます。

+

{{Glossary("DOM")}} では、メディアクエリーの結果を {{domxref("MediaQueryList")}} インターフェイスおよびそのメソッドやプロパティを用いてプログラムからで調べることができる機能を備えています。 MediaQueryList オブジェクトを作成すると、クエリーの結果を確認したり、結果が変化したときに自動的に通知を受け取ったりすることができます。

-

メディアクエリリストの作成

+

メディアクエリーリストの作成

-

クエリの結果を評価できるようにするのに先立ち、メディアクエリを示す {{domxref("MediaQueryList") }} オブジェクトを作成する必要があります。オブジェクトを作成するには、{{domxref("window.matchMedia") }} メソッドを用います。

+

クエリーの結果を評価できるようにするのに先立ち、メディアクエリーを示す MediaQueryList オブジェクトを作成する必要があります。オブジェクトを作成するには、{{domxref("window.matchMedia")}} メソッドを用います。

-

例えば、デバイスが横置きか縦置きかを調べるクエリリストを設定したい場合は、以下のようにしてください:

+

例えば、端末が横置きか縦置きかを調べるクエリーリストを設定したい場合は、以下のようにしてます。

-
var mediaQueryList = window.matchMedia("(orientation: portrait)");
+
const mediaQueryList = window.matchMedia("(orientation: portrait)");
 

 
-
クエリの結果の確認

+
クエリーの結果の確認

 
-
メディアクエリリストが作成されると、その matches プロパティの値を参照することで、クエリの結果を確認することができます。このプロパティは、クエリの結果を反映します。

+
メディアクエリーリストが作成されると、その matches プロパティの値を参照することで、クエリーの結果を確認することができます。このプロパティは、クエリーの結果を反映します。

 
 
if (mediaQueryList.matches) {
   /* 現在ビューポートが縦長である */
@@ -38,20 +41,28 @@ translation_of: Web/CSS/Media_Queries/Testing_media_queries
 }
 

 
-
クエリの通知の受信

+
クエリーの通知の受信

 
-
クエリの評価結果の変化を継続的に意識する必要がある場合は、クエリの結果をポーリングするよりもリスナーを登録することが効率的です。このためには、 {{domxref("MediaQueryList") }} オブジェクトの addListener() メソッドを呼び出し、メディアクエリの状態が変化したときに (例えば、メディアクエリの結果が true から false へ移行した場合に) 呼び出されるコールバック関数を設定してください。

+
クエリーの評価結果の変化を継続的に意識する必要がある場合は、クエリーの結果をポーリングするよりもリスナーを登録したことが効率的です。このためには、 addListener() メソッドを {{domxref("MediaQueryList")}} オブジェクトに対して呼び出し、メディアクエリーの状態が変化したとき (例えば、メディアクエリーの結果が true から false へ移行した場合) に呼び出されるコールバック関数を設定します。

 
-
var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Create the query list.
-function handleOrientationChange(mql) { ... } // イベントリスナーにコールバック関数を定義
-mediaQueryList.addListener(handleOrientationChange); // クエリリストにコールバック関数をリスナーとして追加
+
// クエリーリストを作成する。
+const mediaQueryList = window.matchMedia("(orientation: portrait)");
 
-handleOrientationChange(mediaQueryList); // 画面の向きが変更された時のハンドラーを一度実行。
+// イベントリスナーのコールバック関数を定義する。
+function handleOrientationChange(mql) {
+  // ...
+}
+
+// 向き変更時のハンドラーを一度実行する。
+handleOrientationChange(mediaQueryList);
+
+// コールバック関数をリスナーとしてクエリーリストに追加する。
+mediaQueryList.addListener(handleOrientationChange);
 

 
-
このコードではデバイスの向き (orientation) を評価するメディアクエリリストを作成し、次にリスナーを追加しています。リスナーを追加した後、そのリスナーが実際に一度呼び出されることに注意してください。これにより、リスナーは現在のデバイスの向きを基にして初期状態の調整を行うことができます (そうでなければ、コードではデバイスの初期状態が縦置きと想定しているが実際は横置きであるような場合に、不整合が発生します)。

+
このコードでは端末の向き (orientation) を評価するメディアクエリーリストを作成し、次にリスナーを追加しています。リスナーを定義した後、そのリスナーを直接一度呼び出しています。これにより、リスナーが現在の端末の向きを基にして初期状態の調整を行うことができます (そうしないと、コードでは端末の初期状態が縦置きと想定しているが実際は横置きであるような場合に、不整合が発生します)。

 
-
次で実装する handleOrientationChange() メソッドでは、クエリの結果の確認やデバイスの向きが変わったときに必要な処理を行います。

+
次の handleOrientationChange() メソッドで、クエリーの結果の確認や端末の向きが変わったときに必要な処理を行います。

 
 
function handleOrientationChange(evt) {
   if (evt.matches) {
@@ -62,30 +73,28 @@ handleOrientationChange(mediaQueryList); // 画面の向きが変更された時
 }
 

 
-
上記で、 evt — イベントオブジェクトの引数を定義しています。これは MediaQueryList の新しい実装を扱うイベントリスナーの標準の方法なのでお分かりでしょう。非標準の {{domxref("MediaQueryListListener")}} メカニズムはもう使われませんが、標準のイベントリスナーのセットアップでは、 {{domxref("MediaQueryListEvent")}} のイベントオブジェクトをコールバック関数の引数として渡します。

+
上記で、引数を evt — イベントオブジェクトとして定義しています。これは MediaQueryList の新しい実装がイベントリスナーを標準の方法で扱うのでお分かりでしょう。標準外の {{domxref("MediaQueryListListener")}} の機構はもう使われませんが、標準のイベントリスナーの設定では、 {{domxref("MediaQueryListEvent")}} 型のイベントオブジェクトをコールバック関数の引数として渡します。

 
-
このイベントオブジェクトは {{domxref("MediaQueryListEvent.media","media")}} 及び {{domxref("MediaQueryListEvent.match","match")}} プロパティも含んでおり、 MediaQueryList のこれらの機能に直接アクセスしたり、イベントオブジェクトにアクセスしたりすることができます。

+
このイベントオブジェクトは {{domxref("MediaQueryListEvent.media","media")}} および {{domxref("MediaQueryListEvent.matches","matches")}} プロパティも含んでおり、 MediaQueryList のこれらの機能に直接アクセスしたり、イベントオブジェクトにアクセスしたりすることができます。

 
-
クエリの通知の終了

+
クエリーの通知の終了

 
-
メディアクエリの値の変化について通知を受ける必要がなくなったときは、{{domxref("MediaQueryList") }} オブジェクトの removeListener() メソッドを呼び出してください。

+
メディアクエリーの値の変化について通知を受ける必要がなくなったときは、 removeListener() メソッドを MediaQueryList オブジェクトに対して呼び出してください。

 
 
mediaQueryList.removeListener(handleOrientationChange);
 

 
-
ブラウザーの対応

-
-
MediaQueryList インターフェイス

+
ブラウザーの対応

 
-
+
MediaQueryList インターフェイス

 
 
{{Compat("api.MediaQueryList")}}

 
-
関連情報

+
関連情報

 
 
    
- 
  • メディアクエリ
    • 
- 
  • {{domxref("window.matchMedia()") }}
    • 
- 
  • {{domxref("MediaQueryList") }}
    • 
- 
  • {{domxref("MediaQueryListEvent") }}
    • 
+ 
  • メディアクエリー
    • 
+ 
  • {{domxref("window.matchMedia()")}}
    • 
+ 
  • {{domxref("MediaQueryList")}}
    • 
+ 
  • {{domxref("MediaQueryListEvent")}}
    • 
 

-- 
cgit v1.2.3-54-g00ecf