From 11404b436533331bfdc961908beef147185973aa Mon Sep 17 00:00:00 2001 From: mdn-bot <108879845+mdn-bot@users.noreply.github.com> Date: Thu, 1 Aug 2024 00:32:53 +0000 Subject: [PATCH 01/57] ja: auto-fix Markdownlint issues --- files/ja/web/api/htmlmediaelement/srcobject/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/files/ja/web/api/htmlmediaelement/srcobject/index.md b/files/ja/web/api/htmlmediaelement/srcobject/index.md index 4521d20920734d..2e4150a6c9f2c0 100644 --- a/files/ja/web/api/htmlmediaelement/srcobject/index.md +++ b/files/ja/web/api/htmlmediaelement/srcobject/index.md @@ -110,8 +110,7 @@ worker.addEventListener("message", (msg) => { }); ``` -> [!NOTE] -> {{domxref("MediaSourceHandle")}} は、共有ワーカーまたはサービスワーカーへの、または共有ワーカーを介した移譲は正常にはできません。 +> [!NOTE] > {{domxref("MediaSourceHandle")}} は、共有ワーカーまたはサービスワーカーへの、または共有ワーカーを介した移譲は正常にはできません。 ## 仕様書 From 64a40c908eeae2821657f04511425efa63f3b791 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 1 Aug 2024 21:48:24 +0900 Subject: [PATCH 02/57] Update files/ja/web/api/htmlmediaelement/srcobject/index.md Co-authored-by: Hoarfroster --- files/ja/web/api/htmlmediaelement/srcobject/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/api/htmlmediaelement/srcobject/index.md b/files/ja/web/api/htmlmediaelement/srcobject/index.md index 2e4150a6c9f2c0..d2ee929ba83827 100644 --- a/files/ja/web/api/htmlmediaelement/srcobject/index.md +++ b/files/ja/web/api/htmlmediaelement/srcobject/index.md @@ -110,7 +110,7 @@ worker.addEventListener("message", (msg) => { }); ``` -> [!NOTE] > {{domxref("MediaSourceHandle")}} は、共有ワーカーまたはサービスワーカーへの、または共有ワーカーを介した移譲は正常にはできません。 +> **メモ:** {{domxref("MediaSourceHandle")}} は、共有ワーカーまたはサービスワーカーへの、または共有ワーカーを介した移譲は正常にはできません。 ## 仕様書 From d9d009de3f694388edc016c2469267ebe9b43088 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 1 Aug 2024 21:50:59 +0900 Subject: [PATCH 03/57] =?UTF-8?q?2023/04/08=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=20(#22736)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2023/04/08 時点の英語版に基づき更新 * Update index.md * Update index.md --- files/ja/web/api/window/external/index.md | 66 +++++------------------ 1 file changed, 13 insertions(+), 53 deletions(-) diff --git a/files/ja/web/api/window/external/index.md b/files/ja/web/api/window/external/index.md index bff666a8a31938..e6825101c9f4c5 100644 --- a/files/ja/web/api/window/external/index.md +++ b/files/ja/web/api/window/external/index.md @@ -1,78 +1,38 @@ --- -title: Window.sidebar +title: "Window: external プロパティ" slug: Web/API/Window/external -original_slug: Web/API/Window/sidebar +l10n: + sourceCommit: cc070123f72376faec06e36622c4fc723a75325f --- {{APIRef}} {{Deprecated_Header}} -> [!WARNING] -> この [`window.external`](/ja/docs/Web/API/Window/external) プロパティの Firefox だけの標準外のエイリアスは[削除](#ブラウザーの互換性)されました。 +`external` は {{domxref("Window")}} API のプロパティで、`External` インターフェイスのインスタンスを返します。このインターフェイスは外部の検索プロバイダーをブラウザーに追加する関連の関数を格納するように意図されていました。しかし、これは現在非推奨のものであり、含まれるメソッドは仕様通り何もしないダミー関数になっています。 -ブラウザーにアドオンを登録するためのいくつかのメソッドを含むサイドバーオブジェクトを返します。 +## インスタンスメソッド -## メソッド - -返されるサイドバーオブジェクトは、以下のメソッドを持っています。 +`External` オブジェクトで、以下のメソッドがあります。 - - - - - - - - - - - + - - - - - - + +
メソッド説明 (SeaMonkey)説明 (Firefox)
- addPanel(title, contentURL, "") - サイドバーパネルを追加します。 - Firefox 23 からは廃止されました (SeaMonkey にのみ存在します)。
エンドユーザーは、代わりに「このブックマークをサイドバーに読み込む」オプションを使用できます。また、 Firefox のサイドバーを作成するを参照してください。 - > -
- addPersistentPanel(title, contentURL, "") - バックグラウンドで動作可能なサイドバーパネルを追加します。説明
AddSearchProvider(descriptionURL) - ダミー関数です。何もしません。 - 検索プラグインの自動検出を参照してください。 -
- addSearchEngine(engineURL, iconURL, suggestedTitle, suggestedCategory) - {{deprecated_inline}} - -

- 検索エンジンをインストールします (Sherlock)。 - 詳細はSherlock 検索エンジンを追加にあります。 -

-
-

- Note: これは Firefox 44 で廃止され、 Firefox 59 で完全に削除されました。 -

-
+ ダミー関数。何もしません。 + 検索プラグインの自動発見を参照してください。
- IsSearchProviderInstalled(descriptionURL) - - 特定の検索プロバイダー (OpenSearch) がインストールされているかどうかを示します。 - IsSearchProviderInstalled()ダミー関数。何もしません。
From 4682b2c935ff11a5a73bf346f21cd7a5e96d1f32 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 28 Jul 2024 18:07:22 +0900 Subject: [PATCH 04/57] =?UTF-8?q?2024/06/27=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/http/status/200/index.md | 32 ++++++++++++--------------- 1 file changed, 14 insertions(+), 18 deletions(-) diff --git a/files/ja/web/http/status/200/index.md b/files/ja/web/http/status/200/index.md index db7db6bf776970..50d978be590cef 100644 --- a/files/ja/web/http/status/200/index.md +++ b/files/ja/web/http/status/200/index.md @@ -1,37 +1,33 @@ --- title: 200 OK slug: Web/HTTP/Status/200 +l10n: + sourceCommit: b085d5418eb8ef812682e647045746221bad0e7e --- {{HTTPSidebar}} -HTTP **`200 OK`** はリクエストが成功した場合に返すレスポンスコード。200 のレスポンスはデフォルトでキャッシュしてよい。 +HTTP の **`200 OK`** は成功ステータスレスポンスコードで、リクエストが成功したことを示します。200 レスポンスは既定でキャッシュ可能です。 -成功したという意味はリクエストのメソッドによって異なる: +成功の意味合いは意味は HTTP リクエストメソッドによって異なります。 -- {{HTTPMethod("GET")}}: リソースがフェッチされメッセージのボディ部で返送された。 -- {{HTTPMethod("HEAD")}}: エンティティヘッダがボディ部で返送された。 -- {{HTTPMethod("POST")}}: 実行された結果が記載されたリソースがボディ部で返送された。 -- {{HTTPMethod("TRACE")}}: メッセージのボディ部にサーバーで受信したリクエストメッセージを含んでいる。 +- {{HTTPMethod("GET")}}: リソースの取得が行われ、メッセージ本体が返送される。 +- {{HTTPMethod("HEAD")}}: 表現ヘッダーがメッセージ本体なしでレスポンスに含まれる。 +- {{HTTPMethod("POST")}}: アクションの結果を示すリソースが、メッセージ本体で返送される。 +- {{HTTPMethod("TRACE")}}: メッセージ本体に、サーバーが受信したリクエストメッセージが格納されます。 -{{HTTPMethod("PUT")}} や {{HTTPMethod("DELETE")}} の成功結果は `200` `OK` ではなく、 {{HTTPStatus("204")}} `No Content` (や、リソースの初回アップロードによる作成の場合は {{HTTPStatus("201")}} `Created` )である場合もある。 +{{HTTPMethod("PUT")}} や {{HTTPMethod("DELETE")}} の成功結果は `200 OK` になるとは限らず、 {{HTTPStatus("204")}} `No Content` （またはリソースの初回アップロードによる作成の場合は {{HTTPStatus("201")}} `Created`）である場合もある。 ## ステータス -``` +```http 200 OK ``` -## 仕様 - -| 仕様 | タイトル | -| ----------------------------------- | ------------------------------------------------------------- | -| {{RFC("7231", "200 OK" , "6.3.1")}} | Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content | - -## ブラウザー互換性 +## 仕様書 -{{Compat}} +{{Specifications}} -## 参照 +## 関連情報 -- [HTTP request methods](/ja/docs/Web/HTTP/Methods) +- [HTTP リクエストメソッド](/ja/docs/Web/HTTP/Methods) From 5166958efefb4feadaad0c62ba65c4e70a0d658f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 28 Jul 2024 18:16:08 +0900 Subject: [PATCH 05/57] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/http/status/411/index.md | 46 +++++++++++++++++++++++---- 1 file changed, 39 insertions(+), 7 deletions(-) diff --git a/files/ja/web/http/status/411/index.md b/files/ja/web/http/status/411/index.md index 6bddd351beec18..da3a9ee498df0f 100644 --- a/files/ja/web/http/status/411/index.md +++ b/files/ja/web/http/status/411/index.md @@ -1,28 +1,60 @@ --- title: 411 Length Required slug: Web/HTTP/Status/411 +l10n: + sourceCommit: ef46a4ac6bfec3e33c9209244e7cb1a9206165d6 --- {{HTTPSidebar}} -HyperText Transfer Protocol (HTTP) **`411 Length Required`** クライアントエラーレスポンスコードは、サーバーが定義された {{HTTPHeader("Content-Length")}} ヘッダーのないリクエストの受け入れを拒否することを示します。 +HTTP の **`411 Length Required`** [クライアントエラーレスポンス](/ja/docs/Web/HTTP/Status#client_error_responses)ステータスコードは、{{HTTPHeader("Content-Length")}} ヘッダーが定義されていないリクエストをサーバーが受け入れないことを示します。 > [!NOTE] -> 仕様によっては、一連のチャンクでデータを送信する場合 `Content-Length` ヘッダは省略され、各チャンクの先頭に、現在のチャンクの長さを 16 進形式で追加する必要があります。詳細は {{HTTPHeader("Transfer-Encoding")}} を参照してください。 +> チャンクの連続でデータを送信する場合は、`Content-Length` ヘッダーを省略し、各チャンクの先頭に現在のチャンクの長さを 16 進数形式で記載する必要があります。 +> 詳細は {{HTTPHeader("Transfer-Encoding")}} を参照してください。 ## ステータス -``` +```http 411 Length Required ``` -## 仕様 +## 例 + +### チャンク化した POST リクエスト + +以下のリクエストはチャンク化して送信されます。これは、[ストリームへの書き込み](https://nodejs.org/api/http.html#requestwritechunk-encoding-callback)などの場合の既定のデータ送信方法です。 + +```http +POST /translate/de HTTP/1.1 +Host: api.example.com +Content-Type: application/json +Transfer-encoding: chunked + +2C +{"text": "Hurry up, Ayşe is hungry!"} +0 +``` + +この場合、サーバーは {{HTTPHeader("Content-Length")}} ヘッダーを持つ一回のリクエストを想定しており、411 レスポンスを返します。 + +```http +HTTP/1.1 411 Length Required +Content-Type: application/json +Content-Length: 110 + +{ + "message": "Requests must have a content length header.", + "documentation": "http://api/example.com/docs/errors", +} +``` + +## 仕様書 -| 仕様書 | タイトル | -| ------------------------------------------------- | ------------------------------------------------------------- | -| {{RFC("7231", "411 Length Required" , "6.5.10")}} | Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content | +{{Specifications}} ## 関連情報 +- [HTTP レスポンスステータスコード](/ja/docs/Web/HTTP/Status) - {{HTTPHeader("Content-Length")}} - {{HTTPHeader("Transfer-Encoding")}} From 28db91fafed4e3c9879f1cb5978c226237163d85 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 28 Jul 2024 22:05:11 +0900 Subject: [PATCH 06/57] =?UTF-8?q?2024/07/24=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/http/status/418/index.md | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/files/ja/web/http/status/418/index.md b/files/ja/web/http/status/418/index.md index 55737de5a8e3c7..4220b127eaab18 100644 --- a/files/ja/web/http/status/418/index.md +++ b/files/ja/web/http/status/418/index.md @@ -1,31 +1,28 @@ --- title: 418 I'm a teapot slug: Web/HTTP/Status/418 +l10n: + sourceCommit: ba53fe04589c36a2210d7549c003f3016093ef8e --- {{HTTPSidebar}} -HTTP の **`418 I'm a teapot`** クライアントエラーレスポンスコードは、サーバーが、自身がティーポットであることを理由としてコーヒーを入れることを拒否することを示します。コーヒーとティーの複合ポットで、一時的にコーヒーが提供できない場合は、代わりに 503 を返してください。このエラーは、1998 年のエイプリルフールのジョークである Hyper Text Coffee Pot Control Protocol に由来します。 +HTTP の **`418 I'm a teapot`** ステータスレスポンスコードは、サーバーが、自身がティーポットであることを理由としてコーヒーを入れることを拒否することを示します。コーヒーとティーの複合ポットで、一時的にコーヒーが提供できない場合は、代わりに {{HTTPStatus("503")}} を返してください。 +このエラーは、1998 年および 2014 年のエイプリルフールのジョークである Hyper Text Coffee Pot Control Protocol に由来します。 -一部のウェブサイトでは、自動化されたクエリなど、処理したくないリクエストに対してこのレスポンスを使用しています。 +一部のウェブサイトでは、自動化されたクエリーなど、処理したくないリクエストに対してこのレスポンスを使用しています。 ## ステータス -``` +```http 418 I'm a teapot ``` ## 仕様書 -| 仕様書 | 題名 | -| --------------------------------------------- | ------------------------------------------------------------------------------------------------- | -| {{RFC("2324", "418 I'm a teapot" , "2.3.2")}} | Hyper Text Coffee Pot Control Protocol (HTCPCP/1.0): Semantics and Content | -| {{RFC("7168", "418 I'm a teapot" , "2.3.3")}} | The Hyper Text Coffee Pot Control Protocol for Tea Efflux Appliances (HTCPCP-TEA): Response Codes | - -## ブラウザーの互換性 - -{{Compat}} +{{Specifications}} ## 関連情報 +- [HTTP レスポンスステータスコード](/ja/docs/Web/HTTP/Status) - [Wikipedia: Hyper Text Coffee Pot Control Protocol](https://ja.wikipedia.org/wiki/Hyper_Text_Coffee_Pot_Control_Protocol) From 68894c4ef7772e00490473412fa2ca18e53468da Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 28 Jul 2024 22:12:51 +0900 Subject: [PATCH 07/57] =?UTF-8?q?2024/07/24=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/http/status/429/index.md | 42 ++++++++++++++++++++++----- 1 file changed, 34 insertions(+), 8 deletions(-) diff --git a/files/ja/web/http/status/429/index.md b/files/ja/web/http/status/429/index.md index bf9b6d0e876e64..2da2fac051aa42 100644 --- a/files/ja/web/http/status/429/index.md +++ b/files/ja/web/http/status/429/index.md @@ -1,36 +1,62 @@ --- title: 429 Too Many Requests slug: Web/HTTP/Status/429 +l10n: + sourceCommit: ba53fe04589c36a2210d7549c003f3016093ef8e --- {{HTTPSidebar}} -HTTP **`429 Too Many Requests`** レスポンスステータスコードは、ユーザーが指定された時間内に多くのリクエストを送信した ("rate limiting") ことを示します。 +HTTP の **`429 Too Many Requests`** [クライアントエラーレスポンス](/ja/docs/Web/HTTP/Status#クライアントエラーレスポンス)ステータスコードは、クライアントが指定時間内にたくさんリクエストを送信しすぎたことを示します。 +リクエストの速度を落とすようにクライアントに依頼するこの仕組みは、一般に「速度制限」と呼ばれています。 -新しいリクエストを行う前にどのくらい待つかを示す {{HTTPHeader("Retry-After")}} ヘッダをこのレスポンスに含めることができます。 +新しいリクエストを行う前にどのくらい待つかを示す {{HTTPHeader("Retry-After")}} ヘッダーをこのレスポンスに含めることができます。 + +速度制限の実装は様々で、制限はサーバー全体かもしれませんし、リソース毎かもしれません。 +通常、速度制限の制限はクライアントの IP に基づいて行われますが、 リクエストが認証されていたり {{Glossary("cookie", "クッキー")}} が含まれていたりしていれば、 ユーザーや許可されたアプリケーションに固有の制限をかける可能性もあります。 ## ステータス -``` +```http 429 Too Many Requests ``` ## 例 +### Retry-After ヘッダーを含んだレスポンス + +以下のリクエストが、設定ミスのあるクライアントによって繰り返しループして送信されているとします。 + +```http +GET /reports/mdn HTTP/1.1 +Host: example.com ``` + +この例では、クライアントが 1 分あたりのリクエスト数が設定したしきい値を超えたときに、サーバ全体の速度制限が有効になります。 +リクエストは 60 分後にこのクライアントに再び許可されることを示す {{HTTPHeader("Retry-After")}} ヘッダーとともに 429 レスポンスを返します。 + +```http HTTP/1.1 429 Too Many Requests Content-Type: text/html Retry-After: 3600 + + + + Too Many Requests + + +

Too Many Requests

+

You're doing that too often! Try again later.

+ + ``` ## 仕様書 -| 仕様書 | 題名 | -| ---------------------------------------------- | ---------------------------- | -| {{RFC("6585", "429 Too Many Requests" , "4")}} | Additional HTTP Status Codes | +{{Specifications}} ## 関連情報 +- [HTTP レスポンスステータスコード](/ja/docs/Web/HTTP/Status) - {{HTTPHeader("Retry-After")}} -- [HTTP/1.1: Status Code Definitions](https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html) -- Python solution: [How to avoid HTTP error 429 python](https://stackoverflow.com/questions/22786068/how-to-avoid-http-error-429-too-many-requests-python) +- Python での解決策: [How to avoid HTTP error 429 python](https://stackoverflow.com/questions/22786068/how-to-avoid-http-error-429-too-many-requests-python) From 7d5de97be02426d3ca7c9ffaad1a4f8dca629193 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 28 Jul 2024 22:50:19 +0900 Subject: [PATCH 08/57] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../http/protocol_upgrade_mechanism/index.md | 153 ++++++++++++++++++ 1 file changed, 153 insertions(+) create mode 100644 files/ja/web/http/protocol_upgrade_mechanism/index.md diff --git a/files/ja/web/http/protocol_upgrade_mechanism/index.md b/files/ja/web/http/protocol_upgrade_mechanism/index.md new file mode 100644 index 00000000000000..9bb90dba551b8e --- /dev/null +++ b/files/ja/web/http/protocol_upgrade_mechanism/index.md @@ -0,0 +1,153 @@ +--- +title: プロトコルのアップグレードの仕組み +slug: Web/HTTP/Protocol_upgrade_mechanism +l10n: + sourceCommit: ef46a4ac6bfec3e33c9209244e7cb1a9206165d6 +--- + +{{HTTPSidebar}} + +[HTTP/1.1 プロトコル](/ja/docs/Web/HTTP)は、{{HTTPHeader("Upgrade")}}ヘッダーフィールドを使用して、既に確立された接続を別のプロトコルにアップグレードするために使用することができる特別な仕組みを提供します。 + +この仕組みはオプションであり、プロトコルの変更を主張するために使用することはできません。実装は新しいプロトコルに対応していても、アップグレードを利用しないことを選ぶことができますし、実際には、この仕組みは主に WebSocket 接続の起動に使用されます。 + +また、HTTP/2 はこの仕組みを使用することを明確に禁止しています。HTTP/1.1 に固有の仕様であることにも注意してください。 + +## HTTP/1.1 接続のアップグレード + +{{HTTPHeader("Upgrade")}} ヘッダーフィールドは、クライアントがサーバーに対して、列挙しているプロトコルのいずれかに切り替えるよう、優先順位の高い順に促すために使用します。 + +`Upgrade` はホップバイホップヘッダーなので、{{HTTPHeader("Connection")}} ヘッダーフィールドにも掲載されている必要があります。ということは、Upgrade を記載した典型的なリクエストは次のようになります。 + +```http +GET /index.html HTTP/1.1 +Host: www.example.com +Connection: upgrade +Upgrade: example/1, foo/2 +``` + +リクエストされたプロトコルによっては、他にもヘッダーが必要になるかもしれません。例えば、[WebSocket](/ja/docs/Web/API/WebSocket) へのアップグレードでは、WebSocket 接続の詳細や、接続を開くための安全性に関するヘッダーを追加することができます。詳しくは [WebSocket 接続へのアップグレード](#websocket_接続へのアップグレード) を参照してください。 + +サーバーが接続のアップグレードを決定した場合、{{HTTPStatus(101, "101 Switching Protocols")}} レスポンスステータスを、切り替えるプロトコルを指定する Upgrade ヘッダーとともに送り返します。接続をアップグレードしない（できない）場合は、 `Upgrade` ヘッダーを無視して通常のレスポンス（例えば {{HTTPStatus(200, "200 OK")}}）を返します。 + +ステータスコード `101` を送信した直後に、サーバーは新しいプロトコルを使い始め、必要に応じてプロトコル固有のハンドシェイクを行います。結果的に、アップグレードされたレスポンスが完全に完了すると同時に、接続は双方向のパイプになり、アップグレードを開始したリクエストは新しいプロトコルで完了することができます。 + +## この仕組みの主な用途 + +ここでは、{{HTTPHeader("Upgrade")}} ヘッダーの最も一般的な用途を見ていきます。 + +### WebSocket 接続へのアップグレード + +HTTP 接続をアップグレードする最も一般的な用途は WebSocket を使用することで、常に HTTP または HTTPS 接続をアップグレードして実装します。[WebSocket API](/ja/docs/Web/API/WebSocket) や WebSocket を使用するライブラリーを使用して新しい接続を開く場合は、これが行う必要があるほとんどまたはすべてのことです。例えば、WebSocket 接続を開くための操作はシンプルです。 + +```js +webSocket = new WebSocket("ws://destination.server.ext", "optionalProtocol"); +``` + +{{domxref("WebSocket.WebSocket", "WebSocket()")}} コンストラクターは、最初の HTTP/1.1 接続を作成し、ハンドシェイクとアップグレード処理を行うまでのすべてを行います。 + +> [!NOTE] +> 安全な WebSocket 接続を開くための `"wss://"` URL スキームを使用することもできます。 + +cWebSocket 接続を最初から作成する必要がある場合は、ハンドシェイク処理を自分で処理する必要があります。最初の HTTP/1.1 セッションを作成した後、以下のように {{HTTPHeader("Upgrade")}} と {{HTTPHeader("Connection")}} ヘッダーを標準リクエストに追加して、アップグレードをリクエストする必要があります。 + +```http +Connection: Upgrade +Upgrade: websocket +``` + +### WebSocket 固有のヘッダー + +以下のヘッダーが WebSocket のアップグレード処理に関与します。{{HTTPHeader("Upgrade")}} および {{HTTPHeader("Connection")}} ヘッダー以外は、一般的にオプションか、ブラウザーとサーバーが互いに通信するときに処理されます。 + +#### {{HTTPHeader("Sec-WebSocket-Extensions")}} + +サーバーに使用するように依頼するプロトコルレベルの WebSocket 拡張を 1 つ以上指定します。リクエストヘッダーに複数の `Sec-WebSocket-Extension` ヘッダーを使用することは許可されています。掲載されている拡張をすべて一つのヘッダーに記載した場合と同じ結果になります。 + +```http +Sec-WebSocket-Extensions: extensions +``` + +- `extensions` + - : リクエストする （または対応することに同意する）拡張機能のカンマ区切りのリスト。これらは [IANA WebSocket Extension Name Registry](https://www.iana.org/assignments/websocket/websocket.xml#extension-name) から選択する必要があります。引数を用いる拡張はセミコロン区切りで使用します。 + +例えば、次のようにします。 + +```http +Sec-WebSocket-Extensions: superspeed, colormode; depth=16 +``` + +#### {{HTTPHeader("Sec-WebSocket-Key")}} + +クライアントが WebSocket へのアップグレードをリクエストする資格があることを確認するために必要な情報をサーバーに提供します。このヘッダーは、安全でない (HTTP) クライアントがアップグレードを希望するときに、悪用からある程度保護するために使用することができます。鍵の値は WebSocket の仕様で定義されているアルゴリズムを使って計算されるので、これはセキュリティを提供するものではありません。その代わり、WebSocket 以外のクライアントが不注意で、あるいは悪用されて WebSocket 接続をリクエストされるのを防ぐのに役立ちます。ということは、このキーは「はい、私は本当に WebSocket 接続を開きたいです」ということを確認するものです。 + +このヘッダーは、使用することを選んだクライアントによって自動的に追加されます。{{domxref("Window/fetch", "fetch()")}} または {{domxref("XMLHttpRequest.setRequestHeader()")}} メソッドを使用して追加することはできません。 + +```http +Sec-WebSocket-Key: key +``` + +- `key` + - : アップグレードをリクエストされたときのキー。サーバーは自分自身で作成したキーをレスポンスに記載し、クライアントはそれを検証した上でアップグレードのレスポンスを返します。 + +サーバーのレスポンスの {{HTTPHeader("Sec-WebSocket-Accept")}} ヘッダーには、指定した `key` に基づいて計算された値が入ります。 + +#### {{HTTPHeader("Sec-WebSocket-Protocol")}} + +`Sec-WebSocket-Protocol` ヘッダーは、使用したい 1 つ以上の WebSocket プロトコルを優先順位順に指定します。サーバーが対応している最初のものが選択され、レスポンスに記載する `Sec-WebSocket-Protocol` ヘッダーで返されます。このヘッダーを複数のヘッダーで使用することができます。結果は、カンマで区切られたサブプロトコル識別子のリストを単一のヘッダーで使用した場合と同じです。 + +```http +Sec-WebSocket-Protocol: subprotocols +``` + +- `subprotocols` + - : カンマで区切られたサブプロトコル名のリスト（優先する順）。サブプロトコルは [IANA WebSocket Subprotocol Name Registry](https://www.iana.org/assignments/websocket/websocket.xml#subprotocol-name) から選択してもよいし、クライアントとサーバーが共同で理解するカスタム名にすることもできます。 + +#### {{HTTPHeader("Sec-WebSocket-Version")}} + +##### リクエストヘッダー + +クライアントが使用したい WebSocket プロトコルのバージョンを指定します。これにより、サーバーはそのバージョンがサーバー側で対応しているかどうかを確認できます。 + +```http +Sec-WebSocket-Version: version +``` + +- `version` + - : クライアントがサーバーと通信するときに使用する WebSocket プロトコルのバージョン。この番号は [IANA WebSocket Version Number Registry](https://www.iana.org/assignments/websocket/websocket.xml#version-number) に掲載されている可能な限り最新のバージョンでなければなりません。WebSocket プロトコルの最新の最終バージョンはバージョン 13 です。 + +##### レスポンスヘッダー + +サーバーが指定したバージョンの WebSocket プロトコルを使用して通信できない場合は、エラー（426 Upgrade Required など）で応答します。そのヘッダーには、対応しているプロトコルのバージョンをカンマで区切った `Sec-WebSocket-Version` ヘッダーが記載されます。サーバーがリクエストされたプロトコルのバージョンに対応している場合、 `Sec-WebSocket-Version` ヘッダーはレスポンスに含まれません。 + +```http +Sec-WebSocket-Version: supportedVersions +``` + +- `supportedVersions` + - : サーバーが対応している WebSocket プロトコルのバージョンをカンマ区切りで列挙したもの。 + +### レスポンスのみのヘッダー + +サーバーからのレスポンスにはこれらを含めることができます。 + +#### {{HTTPHeader("Sec-WebSocket-Accept")}} + +サーバーが WebSocket 接続を開始する意思がある場合に、開始ハンドシェイク処理中にサーバーからのレスポンスメッセージに含まれます。レスポンスヘッダーの中に複数現れることはありません。 + +```http +Sec-WebSocket-Accept: hash +``` + +- `hash` + - : {{HTTPHeader("Sec-WebSocket-Key")}} ヘッダーが指定された場合、このヘッダーの値は、キーの値を取り、文字列 "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" を何かに連結し、その連結した文字列の [SHA-1](https://en.wikipedia.org/wiki/SHA-1) ハッシュを取り、20 バイトの値を得ることによって計算されます。その値を [base64](/ja/docs/Glossary/Base64) エンコードして、このプロパティの値を得ます。 + +## 参考資料 + +- [WebSocket API](/ja/docs/Web/API/WebSocket) +- [HTTP](/ja/docs/Web/HTTP) +- 仕様書と RFC: + + - {{RFC(7230)}} + - {{RFC(6455)}} + - {{RFC(7540)}} From 3896b7b1448b5af2a9e56958e74190173b96d769 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 28 Jul 2024 23:49:39 +0900 Subject: [PATCH 09/57] =?UTF-8?q?2023/06/29=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/glossary/callback_function/index.md | 29 +++++++++++--------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/files/ja/glossary/callback_function/index.md b/files/ja/glossary/callback_function/index.md index 6479a8cd473734..bfa3a5fbdf5362 100644 --- a/files/ja/glossary/callback_function/index.md +++ b/files/ja/glossary/callback_function/index.md @@ -7,27 +7,30 @@ l10n: {{GlossarySidebar}} -コールバック関数とは、引数として他の関数に渡され、外側の関数の中で呼び出されて、何らかのルーチンやアクションを完了させる関数のことです。 +**コールバック関数**は、引数として他の関数に渡され、外側の関数の中で呼び出されて、何らかのルーチンやアクションを完了させる関数のことです。 -簡単な例を以下に示します。 +コールバックベースの API の利用者は、API に渡す関数を書きます。API の提供者（_caller_ と呼ばれる）は関数を受け取り、呼び出し側の本体内のある時点で関数をコールバック（実行）します。呼び出し側はコールバック関数に正しい引数を渡す責任があります。また、呼び出し側はコールバック関数からの特定のな返値を期待することがあり、呼び出し側のさらなる動作を指示するために使用します。 + +コールバックの呼び出され方には、同期コールバックと非同期コールバックの 2 つの方法があります。同期コールバックは、外部関数の呼び出しの直後に呼び出され、非同期タスクは介在しません。一方、非同期コールバックは、{{glossary("asynchronous", "非同期")}}処理が完了した後のある時点で呼び出されます。 + +コールバックが同期的に呼び出されるのか、非同期的に呼び出されるのかを理解することは、 副作用を分析する際に具体的な意味があります。次の例を見てください。 ```js -function greeting(name) { - alert(`Hello, ${name}`); -} +let value = 1; -function processUserInput(callback) { - const name = prompt("Please enter your name."); - callback(name); -} +doSomething(() => { + value = 2; +}); -processUserInput(greeting); +console.log(value); ``` -上記の例はすぐに実行される{{glossary("synchronous", "同期型")}}コールバックです。 +もし `doSomething` がコールバックを同期的に呼び出すのであれば、`value = 2` が同期的に実行されるので、最後の文は `2` をログ出力します。もしコールバックが非同期的であれば、`value = 2` が実行されるのは `console.log` 文の後なので、最後の文は `1` をログ出力します。 + +同期コールバックの例としては、{{jsxref("Array.prototype.map()")}} や {{jsxref("Array.prototype.forEach()")}} などに渡されるコールバックが挙げられます。非同期コールバックの例としては、[`setTimeout()`](/ja/docs/Web/API/setTimeout) や {{jsxref("Promise.prototype.then()")}} に渡すコールバックがあります。 -コールバックは{{glossary("asynchronous", "非同期")}}操作が完了した後に続いてコードが実行されることがよくあります。これを非同期コールバックといいます。コールバック関数の良い例は、プロミスが履行されたり拒否されたりした後に連鎖される [`.then()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) ブロックの中で実行されるものです。この構造は [`fetch()`](/ja/docs/Web/API/fetch)のような最近の Web API で良く使われています。 +[プロミスの使用](/ja/docs/Web/JavaScript/Guide/Using_promises#タイミング)ガイドには、非同期コールバックのタイミングについての詳しい情報があります。 ## 関連情報 -- Wikipedia の[コールバック]() +- [コールバック]()（ウィキペディア） From 8f37ec5b336f593a666a4d2f1f71a7e7191ea325 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 1 Aug 2024 21:57:17 +0900 Subject: [PATCH 10/57] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=20(#22743)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2024/07/26 時点の英語版に基づき更新 * Update index.md --- .../client-side_storage/index.md | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md index 47ea629a83a80c..a6829c49405e4e 100644 --- a/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md +++ b/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md @@ -2,7 +2,7 @@ title: クライアント側ストレージ slug: Learn/JavaScript/Client-side_web_APIs/Client-side_storage l10n: - sourceCommit: 1b094710cd2816a6669ce616b6f56d0a5b25e6ad + sourceCommit: bc0d0d1ef796435e969f6d65c7e5d3c08f4023aa --- {{LearnSidebar}} @@ -28,9 +28,9 @@ l10n: - 目標: + 目的: - アプリケーションデータを格納するために、クライアント側ストレージ API を使用する方法について学ぶ。 + アプリケーションデータを格納するために、クライアント側ストレージ API を使用する方法について学ぶこと。 @@ -235,7 +235,8 @@ MDN 学習領域の他の場所で、[静的サイト](/ja/docs/Learn/Server-sid 例が完成しました。よくできましたね! 現時点で残っているのは、コードを保存して HTML ページをブラウザーでテストすることだけです。[ライブ実行される完成版をここで](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html)見られます。 -> **メモ:** [ウェブストレージ API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)のところには、探究するにはほんの少しだけ更に複雑な別の例もあります。 +> **メモ:** +> [ウェブストレージ API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)のところには、探究するにはほんの少しだけ更に複雑な別の例もあります。 > [!NOTE] > 完成版のソースのうち `` という行では、`defer` 属性により、ページを読み込み終わるまでは {{htmlelement("script")}} 要素の中身を実行しないように指定しています。 @@ -585,9 +586,9 @@ function deleteItem(e) { } ``` -3. 以下のスニペットは、`fetchVideoFromNetwork()` 内から引用したものです。ここでは、2 つの別々の {{domxref("fetch()")}} 要求を用いて MP4 版と WebM 版の動画を読み込んでいます。次に {{domxref("Response.blob()")}} メソッドを使用してそれぞれのレスポンスの本文を blob として抽出し、後で格納したり表示したりできる動画のオブジェクト表現を得ています。 +3. 以下のスニペットは、`fetchVideoFromNetwork()` 内から引用したものです。ここでは、2 つの別々の {{domxref("Window/fetch", "fetch()")}} リクエストを用いて MP4 版と WebM 版の動画を読み込んでいます。次に {{domxref("Response.blob()")}} メソッドを使用してそれぞれのレスポンスの本文を blob として抽出し、後で格納したり表示したりできる動画のオブジェクト表現を得ています。 - しかし、ここで問題があります。これらの二つの要求はどちらも非同期的なのですが、双方のプロミスが履行された (fulfilled) 場合にだけ動画を表示もしくは保存しようと試みたいのです。幸い、そうした問題を扱う組み込みメソッドがあります。すなわち {{jsxref("Promise.all()")}} です。これは一つの引数 — 成立したかどうかを調べたい個々のプロミスすべてに対する参照を配列に入れたもの — をとり、これ自体がプロミスに基づいています。 + しかし、ここで問題があります。これらの 2 つのリクエストはどちらも非同期的なのですが、双方のプロミスが履行された (fulfilled) 場合にだけ動画を表示もしくは保存しようと試みたいのです。幸い、そうした問題を扱う組み込みメソッドがあります。すなわち {{jsxref("Promise.all()")}} です。これは一つの引数 — 成立したかどうかを調べたい個々のプロミスすべてに対する参照を配列に入れたもの — をとり、これ自体がプロミスに基づいています。 このプロミスの `then()` ハンドラー内で、先ほどと同様に `displayVideo()` 関数を呼び出して動画を UI に表示し、さらに `storeVideo()` 関数を呼び出して動画をデータベース内に格納しています。 @@ -737,7 +738,7 @@ self.addEventListener("install", (e) => { このブロックの中では {{domxref("CacheStorage.match()")}} を使用して、一致するリクエスト（すなわち URL に一致する）がいずれかのキャッシュで得られるかどうかを調べています。このプロミスは、一致するものが得られた場合は一致するレスポンスで履行され、そうでない場合は `undefined` となります。 -一致するものが見つかった場合、それを独自のレスポンスとして返します。そうでない場合は、ネットワークからのレスポンスを [fetch()](/ja/docs/Web/API/fetch) して、代わりにそれを返します。 +一致するものが見つかった場合、それを独自のレスポンスとして返します。そうでない場合は、ネットワークからのレスポンスを [fetch()](/ja/docs/Web/API/Window/fetch) して、代わりにそれを返します。 ```js self.addEventListener("fetch", (e) => { @@ -764,7 +765,7 @@ self.addEventListener("fetch", (e) => { ## まとめ -これで終わりです。クライアント側での保存の技術についてのこの概要を、皆さんが有用だと思ってくださったのであれば良いな、と望んでいます。 +これで終わりです。クライアント側ストレージ技術の概要が有益なものであったことを期待しています。 ## 関連情報 From 3477c3a26d02597f06e44f8b9c9de985c87260a6 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 29 Jul 2024 00:13:24 +0900 Subject: [PATCH 11/57] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../third_party_apis/index.md | 28 +++++++++---------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.md b/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.md index f5531256332ca5..63577694547bb2 100644 --- a/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.md +++ b/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.md @@ -2,7 +2,7 @@ title: サードパーティ API slug: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs l10n: - sourceCommit: 05d8b0eb3591009b6b7fee274bb7ed1bc5638f18 + sourceCommit: bc0d0d1ef796435e969f6d65c7e5d3c08f4023aa --- {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}} @@ -26,7 +26,7 @@ l10n: - 目標: + 目的: サードパーティ API の仕組み、それらを利用してウェブサイトを強化する方法を学習すること。 @@ -131,7 +131,7 @@ hybrid-style map にするために `'map'` を `'hybrid'` に変えてみてく map.addControl(L.mapquest.control()); ``` -[`mapquest.control()`](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-control/) メソッドは、単純なフル機能のコントロールセットを作成するだけで、デフォルトでは右上隅に配置されます。 `position` プロパティを含むコントロールの引数としてオプションオブジェクトを指定することで、位置を調整することができます。例えば、次のようにしてみてください。 +[`mapquest.control()` メソッド](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-control/) は単純なフル機能のコントロールセットを作成するだけで、既定では右上隅に配置されます。コントロールの位置を指定する文字列である `position` プロパティを格納したコントロールの引数にオプションオブジェクトを指定することで、位置を調整することができます。例えば、このようにしてみてください。 ```js map.addControl(L.mapquest.control({ position: "bottomright" })); @@ -174,8 +174,6 @@ L.marker([53.480759, -2.242631], { では、もう一つの API の例を見てみましょう — [New York Times API](https://developer.nytimes.com/) です。この API を使用すると、New York Times のニュースストーリー情報を取得して、サイトに表示することができます。この種類の API は **RESTful API** として知られています。Mapquest で行ったように JavaScript ライブラリーの機能を使用してデータを取得するのではなく、特定の URL に HTTP リクエストを行い、検索語やその他のプロパティのようなデータを URL 内にエンコードしてデータを取得します（多くの場合、URL 引数として）。これは、API でよく見られるパターンです。 -## サードパーティ API を利用するためのアプローチ - 以下では、 NYTimes API の使用方法を示すエクササイズを紹介しますが、新しい API を使用するためのアプローチとして、より一般的なステップのセットを提供します。 ### ドキュメントを探す @@ -245,11 +243,11 @@ L.marker([53.480759, -2.242631], { - `q` URL 引数で指定しなければならない検索語 (値は `searchTerm` テキスト {{htmlelement("input")}} の値から取得されます)。 - `fq` URL 引数で渡された式で指定された、結果を返す文書の種類。この例では、記事を返したいとします。 -次に、いくつかの [`if()`](/ja/docs/Web/JavaScript/Reference/Statements/if...else) 文を使用して、`startDate` と `endDate` `` に値が入力されているかどうかをチェックします。記入されている場合は、それぞれ `begin_date` と `end_date` の URL 引数で指定された値を URL に追加します。 +次に、いくつかの [`if()`](/ja/docs/Web/JavaScript/Reference/Statements/if...else) 文を使用して、`startDate` および `endDate` 要素に値が入力されているかどうかをチェックします。記入されている場合は、それぞれ `begin_date` と `end_date` の URL 引数で指定された値を URL に追加します。 そのため、完全な URL は次のような形になってしまいます。 -``` +```url https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=YOUR-API-KEY-HERE&page=0&q=cats&fq=document_type:("article")&begin_date=20170301&end_date=20170312 ``` @@ -261,7 +259,7 @@ https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=YOUR-API-KEY-HE ### API からデータを要求する -これで URL を作成したので、それにリクエストしてみましょう。これは [Fetch API](/ja/docs/Web/API/Fetch_API/Using_Fetch) を使って行います。 +これで URL を作成したので、それにリクエストしてみましょう。これは[フェッチ API](/ja/docs/Web/API/Fetch_API/Using_Fetch) を使って行います。 以下のコードブロックを `fetchResults()` 関数の中に追加してください。 @@ -273,7 +271,7 @@ fetch(url) .catch((error) => console.error(`Error fetching data: ${error.message}`)); ``` -ここでは、変数 `url` を [`fetch()`](/ja/docs/Web/API/fetch) に渡してリクエストを実行し、[`json()`](/ja/docs/Web/API/Response/json) 関数でレスポンス本文を JSON に変換してから `displayResults()` 関数に結果を渡し、UI でデータを使用できるようにします。また、発生しそうなエラーはすべて捕捉してログ出力します。 +ここでは、変数 `url` を [`fetch()`](/ja/docs/Web/API/Window/fetch) に渡してリクエストを実行し、[`json()`](/ja/docs/Web/API/Response/json) 関数でレスポンス本文を JSON に変換してから `displayResults()` 関数に結果を渡し、UI でデータを使用できるようにします。また、発生しそうなエラーはすべて捕捉してログ出力します。 ### データを表示する @@ -331,22 +329,22 @@ function displayResults(json) { } ``` -ここにはたくさんのコードがあります。 +ここにはたくさんのコードがあります。順を追って説明しましょう。 - [`while`](/ja/docs/Web/JavaScript/Reference/Statements/while) ループは、DOM 要素のすべてのコンテンツを削除するために使われる一般的なパターンで、この場合は {{htmlelement("section")}} 要素です。私たちは `
` に最初の子があるかどうかをチェックし続け、ある場合は最初の子を削除します。ループは `
` に子がいなくなった時点で終了します。 - 次に、`articles` 変数を `json.response.docs` と等しくなるように設定します — これは検索によって返された記事を表すすべてのオブジェクトを保持する配列です。これは、以下のコードを少しシンプルにするために行われています。 -- 最初の [`if()`](/ja/docs/Web/JavaScript/Reference/Statements/if...else) ブロックは、10 個の記事が返されるかどうかをチェックします ( API は一度に 10 個までの記事を返します。) もし返された場合、前の 10 個 / 次の 10 個のページネーションボタンを含む {{htmlelement("nav")}} を表示します。10 記事未満の記事が返された場合、それらはすべて 1 ページに収まるので、ページ分割ボタンを表示する必要はありません。次のセクションでは、ページ分割機能の配線を行います。 -- 次の `if()` ブロックは記事が返ってこないかどうかをチェックします。もしそうならば、何も表示しようとしません — "No results returned." というテキストを含む {{htmlelement("p")}} を作成して、それを `
` に挿入します。 +- 最初の [`if ()`](/ja/docs/Web/JavaScript/Reference/Statements/if...else) ブロックは、10 個の記事が返されるかどうかをチェックします ( API は一度に 10 個までの記事を返します。) もし返された場合、前の 10 個 / 次の 10 個のページ切り替えボタンを含む {{htmlelement("nav")}} を表示します。10 記事未満の記事が返された場合、それらはすべて 1 ページに収まるので、ページ分割ボタンを表示する必要はありません。次のセクションでは、ページ分割機能の配線を行います。 +- 次の `if ()` ブロックは記事が返ってこないかどうかをチェックします。もしそうならば、何も表示しようとしません — "No results returned." というテキストを含む {{htmlelement("p")}} を作成して、それを `
` に挿入します。 - いくつかの記事が返された場合、私たちはまず、それぞれのニュース記事を表示するために使用したいすべての要素を作成し、それぞれに適切なコンテンツを挿入し、適切な場所で DOM に挿入します。記事オブジェクトのどのプロパティに表示すべき正しいデータが含まれているかを調べるために、Article Search API リファレンス ([NYTimes APIs](https://developer.nytimes.com/apis)) を参照しました。これらの操作のほとんどはかなり明白ですが、いくつかは呼び出す価値があります。 - 私たちは [`for...of`](/ja/docs/Web/JavaScript/Reference/Statements/for...of) ループを使用して、それぞれの記事に関連するすべてのキーワードを読み、それぞれを {{htmlelement("span")}} 内、 `

` 内に挿入します。これは、それぞれのスタイルを設定しやすくするために行いました。 - `if ()` ブロック (`if (current.multimedia.length > 0) { }`) を使用して、各記事に画像が保有されているかどうかを調べます。画像を持っていない記事もあるからです。最初の画像が存在する場合のみ表示し、そうでない場合はエラーが発生します。 -### ページネーションボタンの配線 +### ページ切り替えボタンの配線 -ページ分割ボタンを動作させるために、`pageNumber` 変数の値をインクリメント（またはデクリメント）し、ページ URL 引数に含まれる新しい値でフェッチリクエストを再実行します。これは、NYTimes API が一度に 10 件の結果しか返さないからです — 10 件以上の結果が利用可能な場合、`page` URL 引数が 0 に設定されている場合は最初の 10 (0-9) を (または全く含まれない — 0 がデフォルト値です。) 1 に設定されている場合は次の 10 (10-19) を返します。 +ページ切り替えボタンを動作させるために、`pageNumber` 変数の値をインクリメント（またはデクリメント）し、ページ URL 引数に含まれる新しい値でフェッチリクエストを再実行します。これは、NYTimes API が一度に 10 件の結果しか返さないからです — 10 件以上の結果が利用可能な場合、`page` URL 引数が 0 に設定されている場合は最初の 10 (0-9) を (または全く含まれない — 0 が既定値です。) 1 に設定されている場合は次の 10 (10-19) を返します。 -これにより、単純なページネーション関数を簡単に書くことができるようになりました。 +これにより、単純なページ切り替え関数を簡単に書くことができるようになりました。 1. 既存の [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) コールの下に、関連するボタンがクリックされたときに `nextPage()` および `previousPage()` 関数が呼び出されるように、これら 2 つの新しいものを追加します。 From 7cdc7dcaf64d5c2bcbf059e9082bf842b7f064b2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 29 Jul 2024 00:37:29 +0900 Subject: [PATCH 12/57] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../cross_browser_testing/javascript/index.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.md b/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.md index bb818d0a9e4e79..0c990ad63f8eb4 100644 --- a/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.md +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.md @@ -2,7 +2,7 @@ title: よくある JavaScript の問題の扱い slug: Learn/Tools_and_testing/Cross_browser_testing/JavaScript l10n: - sourceCommit: e8d495591fefeb3c0c484b989cc155b84b50bb57 + sourceCommit: 11a08e7da75bfb0b3e606eb26a9a0ad9301a1be5 --- {{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS","Learn/Tools_and_testing/Cross_browser_testing/Accessibility", "Learn/Tools_and_testing/Cross_browser_testing")}} @@ -23,7 +23,7 @@ l10n: - 目標: + 目的: 一般的な JavaScript のブラウザー間の問題を診断し、適切なツールやテクニックを使用して修正することができること。 @@ -126,7 +126,7 @@ function showHeroes(jsonObj) { } ``` -すなわち、 `jsonObj` （期待通り、 [JSON オブジェクト](/ja/docs/Learn/JavaScript/Objects/JSON)であるはずです）を使用しようとすると、すぐにコードが崩れてしまいます。これは、外部の `.json` ファイルから、以下の {{domxref("fetch()")}} 呼び出しを使用して取得することになっています。 +すなわち、 `jsonObj` （期待通り、 [JSON オブジェクト](/ja/docs/Learn/JavaScript/Objects/JSON)であるはずです）を使用しようとすると、すぐにコードが崩れてしまいます。これは、外部の `.json` ファイルから、以下の {{domxref("Window/fetch", "fetch()")}} 呼び出しを使用して取得することになっています。 ```js const requestURL = @@ -236,12 +236,12 @@ Firefoxでは、デバッガータブは次のようになります。 ### 最新の JavaScript/API 機能の使用 -[前回の記事](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#older_browsers_not_supporting_modern_features)では、言語の性質上、 HTML や CSS のエラーや認識できない機能を処理する方法について説明しました。しかし JavaScript は HTML や CSS ほど寛容ではありません。 JavaScript エンジンが間違いや認識されない構文に遭遇した場合、例えば対応していない新しい機能が使われた場合など、多くの場合エラーになります。 +[前回の記事](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS)では、言語の性質上、 HTML や CSS のエラーや認識できない機能を処理する方法について説明しました。しかし JavaScript は HTML や CSS ほど寛容ではありません。 JavaScript エンジンが間違いや認識されない構文に遭遇した場合、例えば対応していない新しい機能が使われた場合など、多くの場合エラーになります。 新機能への対応にはいくつか戦略がありますが、最も一般的なものを見てみましょう。 > [!NOTE] -> もちろん、必要に応じて組み合わせることもできます。例えば、ある機能が対応しているかどうかを判断するために機能検出を使用することができます。対応していない場合は、ポリフィルや ライブラリーを読み込むコードを実行して、対応していない部分を処理することができます。 +> これらの戦略は別個のものとして存在するのではなく、必要に応じて組み合わせることができます。例えば、ある機能が対応しているかどうかを判断するために機能検出を使用することができます。対応していない場合は、ポリフィルやライブラリーを読み込むコードを実行して、対応していない部分を処理することができます。 #### 機能検出 @@ -321,7 +321,7 @@ JavaScript ライブラリーには、いくつかの主な種類がある傾向 }); ``` -5. [フェッチ](/ja/docs/Web/API/fetch)に対応していないブラウザーで読み込んでも、花の画像が現れるはずです。 +5. [フェッチ](/ja/docs/Web/API/Window/fetch)に対応していないブラウザーで読み込んでも、花の画像が現れるはずです。 ![Fetch basic example という見出しと紫の花の写真](fetch-image.jpg) > [!NOTE] @@ -354,7 +354,7 @@ function browserSupportsAllFeatures() { } ``` -ここでは、[`Promise`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise) オブジェクトと [`fetch()`](/ja/docs/Web/API/fetch) 関数がブラウザーで存在するかどうかをテストしています。両方が存在する場合、関数は `true` を返します。もし関数が `false` を返したら、条件分岐の2つ目の部分のコードを実行します。これは `loadScript()` と呼ばれる関数を実行し、ポリフィルをページに読み込み、読み込み完了後に `main()` を実行します。 `loadScript()` は次のようになります。 +ここでは、[`Promise`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise) オブジェクトと [`fetch()`](/ja/docs/Web/API/Window/fetch) 関数がブラウザーで存在するかどうかをテストしています。両方が存在する場合、関数は `true` を返します。もし関数が `false` を返したら、条件分岐の2つ目の部分のコードを実行します。これは `loadScript()` と呼ばれる関数を実行し、ポリフィルをページに読み込み、読み込み完了後に `main()` を実行します。 `loadScript()` は次のようになります。 ```js function loadScript(src, done) { @@ -402,7 +402,7 @@ Aaron Andersen による [History of the browser user-agent string](https://weba - Chrome/Opera/Safari は `webkitObject` を使用 - Microsoft は `msObject` を使用 -これは [violent-theremin demo](https://mdn.github.io/webaudio-examples/violent-theremin/) （[ソースコード](https://github.com/mdn/webaudio-examples/tree/main/violent-theremin) を参照）から抜粋した例で、[キャンバス API](/ja/docs/Web/API/Canvas_API) と [ウェブオーディオ API](/ja/docs/Web/API/Web_Audio_API) を組み合わせて、楽しい（そしてうるさい）描画ツールを作っています。 +こちらは[ウェブオーディオ API](/ja/docs/Web/API/Web_Audio_API) を使用する例です。 ```js const AudioContext = window.AudioContext || window.webkitAudioContext; From 10eefe6550b6c6a6dccbd5bf50202c95168434bb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 29 Jul 2024 00:43:35 +0900 Subject: [PATCH 13/57] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../command_line/index.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/files/ja/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md b/files/ja/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md index 6707fe62eab9dc..dde9fb33309e44 100644 --- a/files/ja/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md +++ b/files/ja/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md @@ -2,7 +2,7 @@ title: コマンドライン短期集中講座 slug: Learn/Tools_and_testing/Understanding_client-side_tools/Command_line l10n: - sourceCommit: dfedc6e2f59e7072a9ced35ce4049a906438d74c + sourceCommit: 11a08e7da75bfb0b3e606eb26a9a0ad9301a1be5 --- {{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}} @@ -12,13 +12,13 @@ l10n: - + - + @@ -212,7 +212,7 @@ ls -l 重要なものを誤って削除しないように、以下のコマンド例をガイダンスとして使用して、どこかに作成したテストディレクトリーでそれらを試してみてください。 - `mkdir` — これにより、現在のディレクトリー内に新しいディレクトリーが作成され、コマンド名の後に指定した名前が付けられます。たとえば、 `mkdir my-awesome-website` は `my-awesome-website` という名前の新しいディレクトリーを作成します。 -- `rmdir` — 指定されたディレクトリーを削除しますが、それが空の場合のみです。たとえば、 `rmdir my-awesome-website` は上で作成したディレクトリーを削除します。空ではないディレクトリーを削除したい場合 (およびそこに含まれるすべてのものも削除したい場合)、`-r` オプション (再帰的) を使用できますが、これは危険です。ディレクトリーは永久に失われるため、後でディレクトリー内に必要なものがないことを確認してください。 +- `rmdir` — 指定されたディレクトリーを削除しますが、それが空の場合のみです。たとえば、 `rmdir my-awesome-website` は上で作成したディレクトリーを削除します。空ではないディレクトリーを削除したい場合 (およびそこに含まれるすべてのものも削除したい場合)、代わりに `rm -r` を使用することができますが、これは危険です。ディレクトリーは永久に失われるため、後でディレクトリー内に必要なものがないことを確認してください。 - `touch` — 現在のディレクトリー内に新しい空のファイルを作成します。たとえば、`touch mdn-example.md` は `mdn-example.md` という新しい空のファイルを作成します。 - `mv` — 最初に指定されたファイルの場所から 2 番目に指定されたファイルの場所にファイルを移動します。たとえば、 `mv mdn-example.md mdn-example.txt` (場所はファイルパスとして書き込まれます)。このコマンドは、`mdn-example.md` 現在のディレクトリーにあるファイルに `mdn-example.txt` 現在のディレクトリーに。技術的にはファイルは移動されていますが、実用的な観点から見ると、このコマンドは実際にはファイルの名前を変更しています。 - `cp` — 使い方は `mv` と似ていますが、`cp` は指定された最初の場所と 2 番目に指定された場所にファイルのコピーを作成します。たとえば、`cp mdn-example.txt mdn-example.txt.bak` は、`mdn-example.txt.bak` という名前の `mdn-example.txt` のコピーを作成します (もちろん、必要に応じて別の名前にすることもできます）。 @@ -277,7 +277,7 @@ ls | wc -l curl https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/fetch ``` -ページが ([/Web/API/fetch](/ja/docs/Web/API/fetch) に) リダイレクトされているため、出力は得られません。 +ページが ([/Web/API/fetch](/ja/docs/Web/API/Window/fetch) に) リダイレクトされているため、出力は得られません。 `-L` フラグを使用してリダイレクトに従うように `curl` に明示的に指示する必要があります。 また `curl` の `-I` フラグを使用して `developer.mozilla.org` が返すヘッダーを見て、 `curl` の出力を `grep` にパイプすることにより、端末に送信されるすべてのロケーションリダイレクトを出力します。(「 location」という単語を含むすべての行を返すように `grep` に依頼します)。 @@ -368,10 +368,10 @@ Prettier のできること: この記事では、[Prettier インストールガイド](https://prettier.io/docs/en/install.html) で提案されているように、Prettier をローカルにインストールします。 -ノードをインストールしたら端末を開き、次のコマンドを実行して Prettier をインストールします。 +ノードをインストールしたら端末を開き、次のコマンドを実行して Prettier をインストールします（`--save-dev` が何をするかは、次の記事で説明します）。 ```bash -npm install prettier +npm install --save-dev prettier ``` [npx](https://docs.npmjs.com/cli/commands/npx) ツールを使用して、ファイルをローカルで実行できるようになりました。 From 9424753b862fc975fb53edaa6bc9bace41c71cc3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 1 Aug 2024 21:58:59 +0900 Subject: [PATCH 14/57] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=20(#22755)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2024/07/26 時点の英語版に基づき更新 * Update index.md --- .../write_an_api_reference/sidebars/index.md | 30 +++++++------------ 1 file changed, 11 insertions(+), 19 deletions(-) diff --git a/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md b/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md index 53c9f2611a7174..888bfb5cff9563 100644 --- a/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md +++ b/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md @@ -1,6 +1,8 @@ --- title: API リファレンスサイドバー slug: MDN/Writing_guidelines/Howto/Write_an_api_reference/Sidebars +l10n: + sourceCommit: 188594e189f5e73267faf2626adbb84d26128b15 --- {{MDNSidebar}} @@ -59,12 +61,12 @@ API サイドバーを作成するには、次の 3 つの手順を実行する そのため、例えば "Response" とすると、 以下のようなリンクが生成されます。 ```html -
  • Response
    • +
  • Response
    • ``` いくつかの例外があります。 -例えば "guides" サブメンバーには、関連するガイド/チュートリアルへのリンクを定義するリンク情報 (タイトルとスラッグ) が 1 つ以上含まれています。 -この場合、スラッグは MDN の docs ルート — `https://developer.mozilla.org/_<言語コード>/docs` — の最後に追加され、MDN のどこにでも記事を含めることができます。 +例えば "guides" サブメンバーには、関連するガイド/チュートリアルを指す URL が含まれています。 +この場合、URL は MDN の docs ルートの最後 — `https://developer.mozilla.org/<言語コード>` — の最後に追加され、MDN のどこにでも記事を含めることができます。 以下が利用可能なメンバーです。 これらはすべて技術的にはオプションですが、これらを省略する代わりに空の配列を含めることを強く推奨します。 @@ -75,28 +77,18 @@ API サイドバーを作成するには、次の 3 つの手順を実行する "Response" の場合は [https://developer.mozilla.org/ja/docs/Web/API/Response](/ja/docs/Web/API/Response) へのリンクが生成されます。 3. `"methods"` — 値は、 {{domxref("Navigator")}} や {{domxref("Window")}} で生成されたインスタンス化メソッドなど、仕様が他の API に関連付けられたインターフェイスに追加するメソッドを含む配列です。 膨大な数のメソッドがある場合は、最も人気のあるものだけをリストアップするか、リストの先頭に置くことを検討するとよいでしょう。 - "fetch()" を実行すると [https://developer.mozilla.org/ja/docs/Web/API/fetch](/ja/docs/Web/API/fetch) へのリンクが張られます。 + "fetch()" は [https://developer.mozilla.org/ja/docs/Web/API/Window/fetch](/ja/docs/Web/API/Window/fetch) へのリンクが張られます。 同じ API が所有するインターフェイスのメンバーであるメソッドを重複してリストアップしないようにしましょう。 4. `"properties"` — 値は、 API に関連付けられたすべてのプロパティを含む配列です。 これには API 仕様で定義されているインターフェイスのメンバーであるプロパティや、API が他のインターフェイス上で定義しているプロパティを含めることができます。 膨大な数のプロパティがある場合は、最も人気のあるものだけをリストアップするか、リストの先頭に配置することを検討するとよいでしょう。 "Headers.append" を実行すると、 [https://developer.mozilla.org/ja/docs/Web/API/Headers/append](/ja/docs/Web/API/Headers/append) へのリンクが生成されます。 -5. `"events"` — 値は、 API の仕様やその他の場所で定義されている API に関連するすべてのイベントを含む配列です。 +5. `"events"` — 値は配列で、API の一部であるイベントのタイトルが格納され、API の一部ではないインターフェイスで定義されているものです(API内のインターフェイス(`interfaces`)に属するイベントは既定では文書化されます)。 膨大な数のイベントがある場合は、最も人気のあるものだけをリストアップするか、リストの先頭に置くことを検討するとよいでしょう。 - "animationstart" を実行すると、 [https://developer.mozilla.org/ja/docs/Web/Events/animationstart](/ja/docs/Web/API/Element/animationstart_event) へのリンクが生成されます。 -6. `"guides"` — 値は、API の使用方法を説明するガイドへのリンクを定義する1つ以上のオブジェクトを含む配列です。 - 各オブジェクトは、ガイド記事を指す部分的な URL を含む "url" と、リンクのリンクテストを定義する "title" の2つのサブメンバーを含みます。 - 例として、次のようなオブジェクトがあります。 - - ```json - { - "url": "/docs/Web/API/Detecting_device_orientation", - "title": "Detecting device orientation" - } - ``` - - "Detecting device orientation" というタイトルのリンクを生成し、 [https://developer.mozilla.org/ja/docs/Web/API/Device_orientation_events/Detecting_device_orientation](/ja/docs/Web/API/Device_orientation_events/Detecting_device_orientation) を指すようにします。 - + 例えば、`"Document: selectionchange"` は [選択 API](/ja/docs/Web/API/Selection_API) の一部ですが、`Document` はそうではないので、配列にイベントを追加し、[選択 API](/ja/docs/Web/API/Selection_API) のトピックからリンクします。 +6. `"guides"` — 値は文字列の配列で、それぞれが API を使用する方法を説明するガイドトピックに対応しています。 + 文字列は、言語パスの後のガイドの URL アドレスの部分が入ります。すなわち、ガイド URL の`/docs/...` の部分です。 + 例えば、`https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch` にあるトピック「フェッチの使用」にリンクする場合、ガイドの配列には "/docs/Web/API/Fetch_API/Using_Fetch " が入ります。 7. `"dictionaries"` — API の一部であるすべての辞書を一覧にした文字列の配列。 一般的に、特別な意味がある場合や、複数のページから参照する必要がある場合を除き、複数のプロパティやメソッドで使用される辞書のみをここにリストアップすべきです。 "CryptoKeyPair" は [https://developer.mozilla.org/ja/docs/Web/API/CryptoKeyPair](/ja/docs/Web/API/CryptoKeyPair) へのリンクを生成します。 From e3ac04ebe208b642f8c7c26f1b7b2713ab9ac91d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 29 Jul 2024 01:12:56 +0900 Subject: [PATCH 15/57] =?UTF-8?q?2024/07/23=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../page_types/page_type_key/index.md | 31 ++++++++++--------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/files/ja/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md b/files/ja/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md index f7a3b900597fbb..4743ec9c4253b1 100644 --- a/files/ja/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md +++ b/files/ja/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md @@ -2,12 +2,13 @@ title: フロントマターの page-type キー slug: MDN/Writing_guidelines/Page_structures/Page_types/Page_type_key l10n: - sourceCommit: 4b913532d9ec0c30da355b46b1330f50bca1f1ea + sourceCommit: f35cce90b6bfd96bcbe195530ccfba8458e455dd --- {{MDNSidebar}} -> **注目:** **訳注:** 翻訳記事には `page-type` キーを設定しないでください。英語版記事の設定されたキーが使用されます。以下の記事は、 MDN Web Docs の構造を理解しやすくするために翻訳しておきます。 +> [!CALLOUT] +> **訳注:** 翻訳記事には `page-type` キーを設定しないでください。英語版記事に設定されたキーが使用されます。以下の記事は、MDN Web Docs の構造を理解しやすくするために翻訳しておきます。 フロントマターの `page-type` キーは MDN ページ型を記述します。 これにより、 MDN コンテンツツールはコンテンツチェックやサイドバーの整理を自動化することができます。 @@ -29,8 +30,8 @@ JavaScript や CSS など、サイトの主要な領域にはそれぞれドメ 以下のページ型は MDN の特定の技術分野に依存するものではありません。 -- `guide`: 特有の構造を持たない一般的なガイドページです。[概要ページ](#概要ページ)を参照してください。 -- `landing-page`: 他のページへのリンクが掲載されている、主にナビゲーションの補助として機能するページ。[ランディングページ](#ランディングページ)を参照してください。 +- `guide`: 特有の構造を持たない一般的なガイドページです。 +- `landing-page`: 他のページへのリンクが掲載されている、主にナビゲーションの補助として機能するページ。 - `how-to`: 主に目的志向の手引き記事として機能するページ。 - `tutorial`: 学習指向の記事の概要ページです。 - `tutorial-chapter`: 複数部構成のチュートリアルの一部であるページ。 @@ -60,7 +61,7 @@ JavaScript や CSS など、サイトの主要な領域にはそれぞれドメ この節では、[Web/CSS](/ja/docs/Web/CSS)の下にあるページの `page-type` の値を掲載しています。ツリーのその部分にあるすべてのページは `page-type` がなければならず、その値は下記の一覧か[汎用ページ型](#汎用ページ型)の値のいずれかでなければなりません。 -- `css-at-rule`: [アットルール](/ja/docs/Web/CSS/At-rule)。例えば {{cssxref("@charset")}} など。 +- `css-at-rule`: [アットルール](/ja/docs/Web/CSS/At-rule)。例えば {{cssxref("@media")}} など。 - `css-at-rule-descriptor`: アットルール記述子。例えば [`@counter-style/prefix`](/ja/docs/Web/CSS/@counter-style/prefix) など。 - `css-combinator`: 結合子。例えば[子孫結合子](/ja/docs/Web/CSS/Descendant_combinator)など。 - `css-function`: [関数](/ja/docs/Web/CSS/CSS_Functions)。例えば {{cssxref("max")}} など。 @@ -139,15 +140,15 @@ JavaScript や CSS など、サイトの主要な領域にはそれぞれドメ この節では、[Web/API](/ja/docs/Web/API)の下にあるページの `page-type` の値を掲載しています。ツリーのその部分にあるすべてのページは `page-type` がなければならず、その値は下記の一覧か[汎用ページ型](#汎用ページ型)の値のいずれかでなければなりません。 - `web-api-overview`: ある Web API の概要。例えば[フェッチ API](/ja/docs/Web/API/Fetch_API) など。 -- `web-api-global-function`: グローバル関数。例えば [`fetch()`](/ja/docs/Web/API/fetch) など。 -- `web-api-global-property`: グローバルプロパティ。例えば [`origin`](/ja/docs/Web/API/origin) など。 +- `web-api-global-function`: グローバル関数。例えば [`fetch()`](/ja/docs/Web/API/Window/fetch) など。 +- `web-api-global-property`: グローバルプロパティ。 - `web-api-interface`: Web API インターフェイス。例えば [`Request`](/ja/docs/Web/API/Request) など。 - `web-api-constructor`: コンストラクター。例えば [`Request()`](/ja/docs/Web/API/Request/Request) など。 - `web-api-instance-method`: インスタンスメソッド。例えば [`cache.add()`](/ja/docs/Web/API/Cache/add) など。 - `web-api-instance-property`: インスタンスプロパティ。例えば [`request.headers`](/ja/docs/Web/API/Request/headers) など。 - `web-api-static-method`: 静的メソッド。例えば [`Response.error()`](/ja/docs/Web/API/Response/error_static) など。 - `web-api-static-property`: 静的プロパティ。例えば [`Notification.permission`](/ja/docs/Web/API/Notification/permission_static) など。 -- `web-api-event`: イベント。例えば [`Notification.click`](/ja/docs/Web/API/Notification/click_event) など。[API リファレンスサブページ](#api_リファレンスサブページ)を参照してください。 +- `web-api-event`: イベント。例えば [`Notification.click`](/ja/docs/Web/API/Notification/click_event) など。 - `webgl-extension`: WebGL 拡張機能。例えば [`WEBGL_draw_buffers`](/ja/docs/Web/API/WEBGL_draw_buffers) など。 - `webgl-extension-method`: WebGL 拡張機能メソッド。例えば [`OES_vertex_array_object.bindVertexArrayOES()`](/ja/docs/Web/API/OES_vertex_array_object/bindVertexArrayOES) など。 @@ -155,13 +156,13 @@ JavaScript や CSS など、サイトの主要な領域にはそれぞれドメ この節では [WebAssembly/](/ja/docs/WebAssembly) の下にあるページの `page-type` の値を掲載しています。ツリーのその部分にあるすべてのページは `page-type` がなければならず、その値は下記に掲載されている値のいずれかでなければなりません。 -- `webassembly-function`: グローバル関数のうち、 `WebAssembly` オブジェクト直下のメソッドで、名前空間として動作するもの。例えば [`WebAssembly.instantiate()`](WebAssembly/JavaScript_interface/instantiate) など。 -- `webassembly-constructor`: コンストラクター。例えば [`WebAssembly.Exception()`](WebAssembly/JavaScript_interface/Exception/Exception) など。 -- `webassembly-interface`: WebAssembly インターフェイス。例えば [`WebAssembly.LinkError`](WebAssembly/JavaScript_interface/LinkError) など。 -- `webassembly-instance-property`: インスタンスプロパティ。例えば [`WebAssembly.Instance.exports`](WebAssembly/JavaScript_interface/Instance/exports) など。 -- `webassembly-instance-method`: インスタンスメソッド。例えば [`WebAssembly.Exception.getArg()`](WebAssembly/JavaScript_interface/Exception/getArg) など。 -- `webassembly-static-method`: 静的メソッド。例えば [`WebAssembly.Module.exports()`](WebAssembly/JavaScript_interface/Module/exports_static) など。 -- `webassembly-instruction`: 命令または命令の集合。例えば [`Wrap`](WebAssembly/Reference/Numeric/Wrap) など。 +- `webassembly-function`: グローバル関数のうち、 `WebAssembly` オブジェクト直下のメソッドで、名前空間として動作するもの。例えば [`WebAssembly.instantiate()`](/ja/docs/WebAssembly/JavaScript_interface/instantiate_static) など。 +- `webassembly-constructor`: コンストラクター。例えば [`WebAssembly.Exception()`](/ja/docs/WebAssembly/JavaScript_interface/Exception/Exception) など。 +- `webassembly-interface`: WebAssembly インターフェイス。例えば [`WebAssembly.LinkError`](/ja/docs/WebAssembly/JavaScript_interface/LinkError) など。 +- `webassembly-instance-property`: インスタンスプロパティ。例えば [`WebAssembly.Instance.exports`](/ja/docs/WebAssembly/JavaScript_interface/Instance/exports) など。 +- `webassembly-instance-method`: インスタンスメソッド。例えば [`WebAssembly.Exception.getArg()`](/ja/docs/WebAssembly/JavaScript_interface/Exception/getArg) など。 +- `webassembly-static-method`: 静的メソッド。例えば [`WebAssembly.Module.exports()`](/ja/docs/WebAssembly/JavaScript_interface/Module/exports_static) など。 +- `webassembly-instruction`: 命令または命令の集合。例えば [`Wrap`](/ja/docs/WebAssembly/Reference/Numeric/Wrap) など。 ### WebDriver のページ型 From c13e1cc707a1a7fa321e1d76b6acd6e050a14c66 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Thu, 1 Aug 2024 06:10:12 -0700 Subject: [PATCH 16/57] ko: Convert noteblocks to GFM Alerts (part 8) (#22867) --- .../learn/server-side/django/home_page/index.md | 17 +++++++++++------ .../ko/learn/server-side/django/models/index.md | 3 ++- files/ko/web/api/element/innerhtml/index.md | 5 +++-- files/ko/web/api/fullscreen_api/index.md | 13 +++++++++---- files/ko/web/api/navigator/connection/index.md | 2 +- files/ko/web/css/@namespace/index.md | 3 ++- files/ko/web/css/@page/index.md | 3 ++- files/ko/web/css/clear/index.md | 3 ++- files/ko/web/css/float/index.md | 5 ++--- files/ko/web/css/specificity/index.md | 3 ++- .../web/css/transform-function/matrix/index.md | 5 +++-- .../web/javascript/guide/typed_arrays/index.md | 3 ++- .../global_objects/function/call/index.md | 6 ++++-- 13 files changed, 45 insertions(+), 26 deletions(-) diff --git a/files/ko/learn/server-side/django/home_page/index.md b/files/ko/learn/server-side/django/home_page/index.md index a46f18e4b69aa8..fd4b841679b958 100644 --- a/files/ko/learn/server-side/django/home_page/index.md +++ b/files/ko/learn/server-side/django/home_page/index.md @@ -61,7 +61,8 @@ slug: Learn/Server-side/Django/Home_page 그에 반해서 마지막 두 개의 URL들은 특정한 책 또는 저자에 대한 세부 정보를 나타낼 것입니다. 이 URL들은 표시할 항목의 ID를 인코딩합니다(위에서 `` 로 표시). URL 매퍼는 인코딩된 정보를 추출하여 view로 전달합니다. 그리고 view는 데이터베이스에서 무슨 정보를 가져올지 동적으로 결정합니다. URL의 정보를 인코딩하여 우리는 모든 책들(또는 저자들)을 처리하기 위해 단일 모임의 url 매핑, 뷰, 탬플릿을 사용할 것입니다. -> **참고:** **주의:** 장고를 이용해서 당신이 필요로 하는 대로 URL들을 만들 수 있습니다 — 위와 같이 URL의 본문(body)에 정보를 인코딩할 수도 있고, 또는 URL 안에 GET 매개 변수들을 포함시킬 수 있습니다(예: /book/?id=6). 어떤 방식이건 URL들은 깨끗하고, 논리적이고, 읽기 쉬워야 합니다. ([check out the W3C advice here](https://www.w3.org/Provider/Style/URI)). +> [!NOTE] +> 장고를 이용해서 당신이 필요로 하는 대로 URL들을 만들 수 있습니다 — 위와 같이 URL의 본문(body)에 정보를 인코딩할 수도 있고, 또는 URL 안에 GET 매개 변수들을 포함시킬 수 있습니다(예: /book/?id=6). 어떤 방식이건 URL들은 깨끗하고, 논리적이고, 읽기 쉬워야 합니다. ([check out the W3C advice here](https://www.w3.org/Provider/Style/URI)). > 장고 문서는 더 나은 URL 설계(design)를 위해 URL의 본문(body)에 정보를 인코딩하는 것을 권장합니다. 개요에서 다룬 것 처럼, 이 글의 나머지는 색인(index) 페이지를 만드는 방법을 보여줍니다. @@ -162,9 +163,10 @@ view 함수의 마지막에선 HTML 페이지를 생성하고 이 페이지를 ### 탬플릿(Template) -탬플릿은 파일(HTML 페이지 같은)의 구조(structure)나 배치(layout)을 정의하는 텍스트 파일입니다. 탬플릿은 실제 내용물(content)를 나타내기 위해 플레이스홀더(placeholder)들을 사용합니다. 장고는 당신의 어플리케이션 안에서 'templates' 라고 이름지어진 경로 안에서 자동적으로 탬플릿들을 찾을 것입니다. 예를 들어서, 우리가 방금 추가한 색인(index) 뷰 안에서, `render()` 함수는 **/locallibrary/catalog/templates/** 경로 안에서** _index.html_ **_파일을 찾으려 할 것이고, 파일이 없다면 에러를 표시할 것입니다. 이것은 이전의 변경점들을 저장하고 브라우저에서 `127.0.0.1:8000`으로 접근해서 확인할 수 있습니다 - 이것은 다른 세부 사항들과 함께 상당히 직관적인 오류 메세지를 표시할 것입니다 : "`TemplateDoesNotExist at /catalog/`"._ +탬플릿은 파일(HTML 페이지 같은)의 구조(structure)나 배치(layout)을 정의하는 텍스트 파일입니다. 탬플릿은 실제 내용물(content)를 나타내기 위해 플레이스홀더(placeholder)들을 사용합니다. 장고는 당신의 어플리케이션 안에서 'templates' 라고 이름지어진 경로 안에서 자동적으로 탬플릿들을 찾을 것입니다. 예를 들어서, 우리가 방금 추가한 색인(index) 뷰 안에서, `render()` 함수는 **/locallibrary/catalog/templates/** 경로 안에서 _**index.html**_ 파일을 찾으려 할 것이고, 파일이 없다면 에러를 표시할 것입니다. 이것은 이전의 변경점들을 저장하고 브라우저에서 `127.0.0.1:8000`으로 접근해서 확인할 수 있습니다 - 이것은 다른 세부 사항들과 함께 상당히 직관적인 오류 메세지를 표시할 것입니다 : "`TemplateDoesNotExist at /catalog/`". -> **참고:** **주의:** 프로젝트의 settings 파일에 기초해서, 장고는 여러 장소에서 탬플릿들을 찾아볼 것입니다. 기본적으로는 설치된 어플리케이션에서 검색합니다. 장고가 어떻게 탬플릿들을 찾는지, 그리고 어떤 탬플릿 양식(format)들을 지원하는지에 관해 여기([Templates](https://docs.djangoproject.com/en/2.0/topics/templates/) (Django docs))에서 찾아볼 수 있습니다. +> [!NOTE] +> 프로젝트의 settings 파일에 기초해서, 장고는 여러 장소에서 탬플릿들을 찾아볼 것입니다. 기본적으로는 설치된 어플리케이션에서 검색합니다. 장고가 어떻게 탬플릿들을 찾는지, 그리고 어떤 탬플릿 양식(format)들을 지원하는지에 관해 여기([Templates](https://docs.djangoproject.com/en/2.0/topics/templates/) (Django docs))에서 찾아볼 수 있습니다. #### 탬플릿 확장(extend)하기 @@ -172,7 +174,8 @@ view 함수의 마지막에선 HTML 페이지를 생성하고 이 페이지를 아래 코드 조각은 **base_generic.html** 파일의 기본 탬플릿 샘플입니다. 이 샘플은 제목, 사이드바를 위한 섹션과 이름이 지정된 `block` 및 `endblock` 탬플릿 태그(굵게 표시)가 마크된 주요 내용(main contents)들이 포함된 일반적인 HTML을 포함합니다. 블럭(block)들을 비워두거나, 또는 탬플릿에서 파생된 페이지들을 렌더링할 때 사용할 기본 내용을 포함할 수 있습니다. -> **참고:** **주의:** 탬플릿 태그들은 목록을 반복하거나, 변수 값을 기반으로 조건부 연산을 수행하거나, 여타 다른 일들을 할 수 있는 함수입니다. 탬플릿 태그 외에도 탬플릿 구문(syntax)을 사용하면 view에서 탬플릿으로 전달된 변수들을 참조할 수 있고, 탬플릿 필터(filters)를 사용해서 변수의 형식을 지정할 수 있습니다(예를 들어, 문자열을 소문자로 변환). +> [!NOTE] +> 탬플릿 태그들은 목록을 반복하거나, 변수 값을 기반으로 조건부 연산을 수행하거나, 여타 다른 일들을 할 수 있는 함수입니다. 탬플릿 태그 외에도 탬플릿 구문(syntax)을 사용하면 view에서 탬플릿으로 전달된 변수들을 참조할 수 있고, 탬플릿 필터(filters)를 사용해서 변수의 형식을 지정할 수 있습니다(예를 들어, 문자열을 소문자로 변환). ```django @@ -274,7 +277,8 @@ view 함수의 마지막에선 HTML 페이지를 생성하고 이 페이지를 동적 콘텐츠 섹션에서 우리는 우리가 포함하고 싶은 view의 정보를 위한 플레이스홀더(탬플릿 변수)를 선언합니다. 이 변수들은 코드 샘플에서 굵게 표시된 것과 같이 이중 중괄호로(핸들 바)로 묶입니다. -> **참고:** **주의:** 탬플릿 변수와 탬플릿 태그(함수)들을 쉽게 알 수 있습니다 - 변수들은 이중 중괄호로 감싸여져 있고(`\{{ num_books }}`) , 태그들은 퍼센트 기호와 단일 중괄호로 감싸여 있습니다(`{% extends "base_generic.html" %}`). +> [!NOTE] +> 탬플릿 변수와 탬플릿 태그(함수)들을 쉽게 알 수 있습니다 - 변수들은 이중 중괄호로 감싸여져 있고(`\{{ num_books }}`) , 태그들은 퍼센트 기호와 단일 중괄호로 감싸여 있습니다(`{% extends "base_generic.html" %}`). 여기서 주의해야 할 중요한 것은 변수들의 이름은 열쇠(key)들로 정해진다는 것입니다. 이 열쇠(key)들은 우리의 view의 `render()`함수 안의 `context` 사전(dictionary)로 전달하는 열쇠입니다(아래를 확인하세요). 변수들은 탬플릿이 렌더링 될 때 그것들과 연관된 값들로 대체될 것입니다. @@ -355,7 +359,8 @@ TEMPLATES = [ ![Index page for LocalLibrary website](index_page_ok.png) -> **참고:** **주의:** All books와 All authors 링크들에 대한 경로, 뷰 그리고 탬플릿들이 정의되지 않았기 때문에 그 링크들은 작동하지 않을 것입니다. 우리는 단지 `base_generic.html` 탬플릿 안에 그 링크들을 위한 플레이스홀더(placeholder)들을 삽입했을 뿐입니다. +> [!NOTE] +> All books와 All authors 링크들에 대한 경로, 뷰 그리고 탬플릿들이 정의되지 않았기 때문에 그 링크들은 작동하지 않을 것입니다. 우리는 단지 `base_generic.html` 탬플릿 안에 그 링크들을 위한 플레이스홀더(placeholder)들을 삽입했을 뿐입니다. ## 도전 과제 diff --git a/files/ko/learn/server-side/django/models/index.md b/files/ko/learn/server-side/django/models/index.md index 8893d3c736d7a7..7285c01caa44a0 100644 --- a/files/ko/learn/server-side/django/models/index.md +++ b/files/ko/learn/server-side/django/models/index.md @@ -222,7 +222,8 @@ record.save() 모델의 객체(`objects`) 속성(기본 클래스에서 제공됨)을 사용하여 특정 기준과 일치하는 레코드를 검색할 수 있습니다. -> **참고:** **주의:** "추상(abstract)" 모델과 필드 이름을 사용하여 레코드들을 검색하는 방법을 설명하는 것은 조금 혼란스러울 수 있습니다. 아래에서는 `title`과 `genre` 필드가 있는 `Book` 모델을 참조하겠습니다. 이 때 `genre`는 또한 `name`이라는 단일 필드를 가지고 있는 모델입니다. +> [!NOTE] +> "추상(abstract)" 모델과 필드 이름을 사용하여 레코드들을 검색하는 방법을 설명하는 것은 조금 혼란스러울 수 있습니다. 아래에서는 `title`과 `genre` 필드가 있는 `Book` 모델을 참조하겠습니다. 이 때 `genre`는 또한 `name`이라는 단일 필드를 가지고 있는 모델입니다. 우리는 `objects.all()`을 사용하여 모델의 모든 레코드들을 `QuerySet`으로 가져올 수 있습니다. `QuerySet`은 반복가능한(iterable) 객체이며, 이것은 반복/루프할 수 있는 많은 객체들을 포함하고 있다는 의미입니다. diff --git a/files/ko/web/api/element/innerhtml/index.md b/files/ko/web/api/element/innerhtml/index.md index 03cd645dad9aa7..59b517f0830319 100644 --- a/files/ko/web/api/element/innerhtml/index.md +++ b/files/ko/web/api/element/innerhtml/index.md @@ -7,7 +7,7 @@ slug: Web/API/Element/innerHTML {{domxref("Element")}} 속성(property) **`innerHTML`** 은 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정합니다. -> **참고:** **주의:** {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("noembed")}} 노드가 (&), (<), (>) 문자를 포함하는 텍스트 노드를 자식으로 가지고 있다면, `innerHTML`은 이러한 문자들을 각각 `"&"`, `"<"` ,`">"`로 반환합니다. {{domxref("Node.textContent")}}를 사용하여 이러한 텍스트 노드 내용의 원본을 복사할 수 있습니다. +> **경고:** {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("noembed")}} 노드가 (&), (<), (>) 문자를 포함하는 텍스트 노드를 자식으로 가지고 있다면, `innerHTML`은 이러한 문자들을 각각 `"&"`, `"<"` ,`">"`로 반환합니다. {{domxref("Node.textContent")}}를 사용하여 이러한 텍스트 노드 내용의 원본을 복사할 수 있습니다. 요소(element)의 내용을 변경하는 대신 HTML을 문서(document)에 삽입하려면, {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} 메서드를 사용하십시오. @@ -44,7 +44,8 @@ let contents = myElement.innerHTML; 이를 통해 요소의 컨텐트 노드에 대한 HTML 마크업을 볼 수 있습니다. -> **참고:** **주의:** 반환 된 HTML, XML 파편은 요소의 현재 내용일 기반으로 생성됩니다. 따라서 반환 된 마크업과 양식이 본래의 페이지 마크업과 일치하지 않을 수 있습니다. +> [!NOTE] +> 반환 된 HTML, XML 파편은 요소의 현재 내용일 기반으로 생성됩니다. 따라서 반환 된 마크업과 양식이 본래의 페이지 마크업과 일치하지 않을 수 있습니다. ### Replacing the contents of an element diff --git a/files/ko/web/api/fullscreen_api/index.md b/files/ko/web/api/fullscreen_api/index.md index fd9a9b06dc461a..918e8426a5a7f0 100644 --- a/files/ko/web/api/fullscreen_api/index.md +++ b/files/ko/web/api/fullscreen_api/index.md @@ -9,7 +9,8 @@ slug: Web/API/Fullscreen_API API 사용 방법에 대한 자세한 내용은 [Guide to the Fullscreen API](/ko/docs/Web/API/Fullscreen_API/Guide) 문서를 참조하세요. -> **참고:** **주의:** 이 API에 대한 지원은 여러 브라우저에서 이루어지며, 다양한 업체의 접두사(prefix)가 필요하거나, 최신 사양을 구현하지 않는 경우가 많습니다. 이 API 지원에 대한 자세한 내용은 아래에 있는 [Browser compatibility](#browser_compatibility) 섹션을 참조하세요. Fullscreen API를 지원하지 않는 업체의 경우, [Fscreen](https://github.com/rafrex/fscreen) 과 같은 라이브러리를 사용할 수 있습니다. +> [!NOTE] +> 이 API에 대한 지원은 여러 브라우저에서 이루어지며, 다양한 업체의 접두사(prefix)가 필요하거나, 최신 사양을 구현하지 않는 경우가 많습니다. 이 API 지원에 대한 자세한 내용은 아래에 있는 [Browser compatibility](#browser_compatibility) 섹션을 참조하세요. Fullscreen API를 지원하지 않는 업체의 경우, [Fscreen](https://github.com/rafrex/fscreen) 과 같은 라이브러리를 사용할 수 있습니다. ## Interfaces @@ -42,7 +43,8 @@ _{{DOMxRef("Document")}} 인터페이스는 full-screen mode가 지원되고 사 _Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode와 window mode간에 변경하는 과정에서 오류가 발생하는 것을 감지하는데 사용할 수 있는 두 가지 이벤트를 정의합니다. 이러한 이벤트에 대한 이벤트 핸들러는 {{DOMxRef("Document")}} 와{{DOMxRef("Element")}} 인터페이스 에서 사용할 수 있습니다._ -> **참고:** **주의:** 이러한 이벤트 핸들러 속성(property)은 HTML 컨텐트 속성(attribute)으로 사용할 수 없습니다. 즉, HTML 컨텐트에서 {{Event("fullscreenchange")}} 및 {{Event("fullscreenerror")}} 이벤트를 지정할 수 없습니다. JavaScript 코드로 추가해야만 합니다. +> [!NOTE] +> 이러한 이벤트 핸들러 속성(property)은 HTML 컨텐트 속성(attribute)으로 사용할 수 없습니다. 즉, HTML 컨텐트에서 {{Event("fullscreenchange")}} 및 {{Event("fullscreenerror")}} 이벤트를 지정할 수 없습니다. JavaScript 코드로 추가해야만 합니다. #### Event handlers on documents @@ -61,7 +63,9 @@ _Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode ### Obsolete properties - {{DOMxRef("Document.fullscreen")}} {{Deprecated_Inline}} - - : 문서에 현재 full-screen mode로 표시되는 요소가 있는 경우 `true`, 그렇지 않으면 `false`의 Boolean 값입니다.> **참고:** **주의:** 대신에 {{DOMxRef("Document")}} 나 {{DOMxRef("ShadowRoot")}} 에서 {{DOMxRef("Document.fullscreenElement", "fullscreenElement")}} 속성(property)을 사용하세요. 그것이 `null`이 아닌 경우 {{DOMxRef("Element")}}가 full-screen mode로 표시됩니다. + - : 문서에 현재 full-screen mode로 표시되는 요소가 있는 경우 `true`, 그렇지 않으면 `false`의 Boolean 값입니다. + > [!NOTE] + > 대신에 {{DOMxRef("Document")}} 나 {{DOMxRef("ShadowRoot")}} 에서 {{DOMxRef("Document.fullscreenElement", "fullscreenElement")}} 속성(property)을 사용하세요. 그것이 `null`이 아닌 경우 {{DOMxRef("Element")}}가 full-screen mode로 표시됩니다. ## Events @@ -87,7 +91,8 @@ _Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode 사용자는 ESC (혹은 F11) 키를 누르기만하면 사이트 또는 앱이 프로그래밍 방식으로 기다리는 대신에, full-screen mode를 종료하도록 선택할 수 있습니다. 유저 인터페이스의 어딘가에 사용자에게 이 옵션을 사용할 수 있음을 알리는, 적절한 유저 인터페이스 요소를 제공해야 합니다. -> **참고:** **주의:** 다른 페이지로 이동하거나, 탭을 변경하거나, 응용 프로그램 전환기(또는 Alt-Tab)를 사용하여, 다른 응용 프로그램으로 전환하면 마찬가지로 full-screen mode가 종료됩니다. +> [!NOTE] +> 다른 페이지로 이동하거나, 탭을 변경하거나, 응용 프로그램 전환기(또는 Alt-Tab)를 사용하여, 다른 응용 프로그램으로 전환하면 마찬가지로 full-screen mode가 종료됩니다. ## Example diff --git a/files/ko/web/api/navigator/connection/index.md b/files/ko/web/api/navigator/connection/index.md index 2117ab50dc7e1b..c907100cfd1fe5 100644 --- a/files/ko/web/api/navigator/connection/index.md +++ b/files/ko/web/api/navigator/connection/index.md @@ -23,7 +23,7 @@ slug: Web/API/Navigator/connection - {{domxref("window.navigator.connection.onchange", "connection.onchange")}} - : {{event("change")}} 이벤트에 대한 이벤트 핸들러 속성입니다. 연결 정보가 변경될 때 이벤트가 발생합니다. -> **참고:** **주의:** `connection` 객체는 이벤트를 다루기 위한 {{domxref("EventTarget.addEventListener","addEventListener")}} 메서드를 사용할 수 있는 {{domxref("EventTarget")}}을 상속받습니다. +> **경고:** `connection` 객체는 이벤트를 다루기 위한 {{domxref("EventTarget.addEventListener","addEventListener")}} 메서드를 사용할 수 있는 {{domxref("EventTarget")}}을 상속받습니다. ## 명세 diff --git a/files/ko/web/css/@namespace/index.md b/files/ko/web/css/@namespace/index.md index fe8c203e0de7ce..4f37678db810f6 100644 --- a/files/ko/web/css/@namespace/index.md +++ b/files/ko/web/css/@namespace/index.md @@ -15,7 +15,8 @@ slug: Web/CSS/@namespace [외부 요소](https://html.spec.whatwg.org/#foreign-elements)로 알려진 [HTML5](/ko/docs/Glossary/HTML5)에서는, 자동으로 네임스페이스가 할당됩니다. 이는 HTML 요소는 마치 XHTML 네임스페이스 (`http://www.w3.org/1999/xhtml`) 에 있는 것처럼 행동하고, 문서 어디에든 `xmlns` attribute가 없을지라도, [\](/ko/docs/Web/SVG/Element/svg) 및 [\](/ko/docs/Web/MathML/Element/math) 요소는 그들의 적절한 네임스페이스 (`http://www.w3.org/2000/svg` 및 `http://www.w3.org/1998/Math/MathML`) 가 할당됨을 뜻합니다. -> **참고:** **주의:** XML에서, 접두어가 직접 attribute (가령, `xlink:href`)에 정의되지 않는 한, 그 attribute은 네임스페이스가 없습니다. 다시 말해서, attribute은 그들이 붙은 요소의 네임스페이스를 상속받지 않습니다. 이 행동을 일치시키기 위해, CSS에서 기본 네임스페이스는 attribute 선택자에 적용되지 않습니다. +> [!NOTE] +> XML에서, 접두어가 직접 attribute (가령, `xlink:href`)에 정의되지 않는 한, 그 attribute은 네임스페이스가 없습니다. 다시 말해서, attribute은 그들이 붙은 요소의 네임스페이스를 상속받지 않습니다. 이 행동을 일치시키기 위해, CSS에서 기본 네임스페이스는 attribute 선택자에 적용되지 않습니다. ## 구문 diff --git a/files/ko/web/css/@page/index.md b/files/ko/web/css/@page/index.md index bb277f96d605e6..b138a8eed9165d 100644 --- a/files/ko/web/css/@page/index.md +++ b/files/ko/web/css/@page/index.md @@ -19,7 +19,8 @@ slug: Web/CSS/@page `@page` @규칙은 CSS 객체 모델 인터페이스 {{domxref("CSSPageRule")}}를 통해 액세스될 수 있습니다. -> **참고:** **주의:** W3C은 viewport 관련 {{cssxref("<length>")}} 단위, `vh`, `vw`, `vmin` 및 `vmax` 처리법을 논의 중입니다. 그 동안에 `@page` @규칙 내에서 사용하지 마세요. +> [!NOTE] +> W3C은 viewport 관련 {{cssxref("<length>")}} 단위, `vh`, `vw`, `vmin` 및 `vmax` 처리법을 논의 중입니다. 그 동안에 `@page` @규칙 내에서 사용하지 마세요. ## 구문 diff --git a/files/ko/web/css/clear/index.md b/files/ko/web/css/clear/index.md index a805e234f2dc16..4e77e485ded5e1 100644 --- a/files/ko/web/css/clear/index.md +++ b/files/ko/web/css/clear/index.md @@ -15,7 +15,8 @@ slug: Web/CSS/clear 해제(cleared)와 관련된 부동체는 같은 [블록 형성 문맥](/ko/docs/Web/Guide/CSS/Block_formatting_context) 내 앞선 부동체입니다. -> **참고:** **주의:** 요소가 그 안에 모든 부동 요소를 포함하고 싶은 경우, 컨테이너도 부동하거나 컨테이너의 {{cssxref("::after")}} 대체 [가상 요소](/ko/docs/Web/CSS/Pseudo-elements)에 `clear`를 쓸 수 있습니다. +> [!NOTE] +> 요소가 그 안에 모든 부동 요소를 포함하고 싶은 경우, 컨테이너도 부동하거나 컨테이너의 {{cssxref("::after")}} 대체 [가상 요소](/ko/docs/Web/CSS/Pseudo-elements)에 `clear`를 쓸 수 있습니다. > > ```css > #container::after { diff --git a/files/ko/web/css/float/index.md b/files/ko/web/css/float/index.md index 5bacbf96555daa..7d7e2e960b274c 100644 --- a/files/ko/web/css/float/index.md +++ b/files/ko/web/css/float/index.md @@ -32,7 +32,8 @@ CSS 속성(property) **`float`** 은 한 요소(element)가 보통 흐름(normal | `inline-flex` | `inline-flex`, 다만 `float` 은 이러한 요소에 효과가 없음 | | _그외_ | _변화없음_ | -> **참고:** **주의:** JavaScript에서 이 속성을 {{domxref("element.style")}} 객체의 멤버로서 참조한다면, 당신은 `cssFloat`으로 철자를 써야 합니다. 또한 Internet Explorer 8 이전 버전에서는 `styleFloat`으로 썼음을 주의하세요. 이는 DOM 멤버의 이름은 dash(-)로 구분된 CSS 이름의 카멜케이스(camel-case) 명이다는 규칙의 예외(이고 "class"는 "className"으로 \

    ` 요소와 일치합니다. +- `*|h1` - 모든 `

    ` 요소와 일치합니다. +- `|h1` - 선언되거나 암시된 네임스페이스 밖의 모든 `

    ` 요소와 일치합니다. + +## 구문 + +```css +namespace|element { style properties } +``` + +## 예제 + +기본적으로, HTML 이나 SVG 요소 내에 있는 모든 요소는 `http://www.w3.org/1999/xhtml` 및 `http://www.w3.org/2000/svg` 에서 네임스페이스가 있음을 암시하기 때문에 네임스페이스를 가지고 있습니다. 빈 네임스페이스 파라미터를 가진 {{domxref("document.createElementNS")}} 메서드는 네임스페이스가 없는 요소를 생성할 수 있습니다. + +### 명명된 네임스페이스 예제 + +이 예제에서는 모든 요소가 네임스페이스에 속해 있습니다. + +#### HTML + +네임스페이스가 없다면 이는 명시적으로 HTML 내에 선언되거나 SVG 내에 존재합니다. + +```html +

    이 단락은 링크가 존재합니다.

    + + + + 링크는 SVG 내부에서 생성되었습니다. + + +``` + +#### CSS + +CSS는 두 개의 네임스페이스를 선언하고 전역 링크 (`a`), 네임스페이스가 없는 링크 (`|a`), 모든 네임스페이스 또는 네임스페이스가 없는 링크 (`*|a`), 그리고 두 개의 다른 이름이 지정된 네임스페이스 (`svgNamespace|a` 와 `htmlNameSpace|a`) 에 스타일을 지정합니다. + +```css +@namespace svgNamespace url("http://www.w3.org/2000/svg"); +@namespace htmlNameSpace url("http://www.w3.org/1999/xhtml"); +/* 기본 네임스페이스에 있는 모든 ``, 이 경우 모든 `` */ +a { + font-size: 1.4rem; +} +/* 네임스페이스가 없는 경우 */ +|a { + text-decoration: wavy overline lime; + font-weight: bold; +} +/* (네임스페이스가 없는 경우를 포함한) 모든 네임스페이스 */ +*|a { + color: red; + fill: red; + font-style: italic; +} +/* 콘텐츠 내에 있는 svgNamespace 네임스페이스 */ +svgNamespace|a { + color: green; + fill: green; +} +/* HTML 문서 내에 있는 htmlNameSpace 네임스페이스 */ +htmlNameSpace|a { + text-decoration-line: line-through; +} +``` + +#### 결과 + +{{EmbedLiveSample("Named_namespace_example", "100%", 100)}} + +네임스페이스 내에 있지 않은 링크 선택자 `|a` 는 어떤 링크와도 일치하지 않습니다. HTML에서는 `http://www.w3.org/1999/xhtml` 가 명시하는 것처럼 명시적으로 네임스페이스가 선언되지 않았을지라도 네임스페이스 내의 모든 HTML를 의미합니다. SVG에서도 네임스페이스가 명시적으로 선언되지 않았을지라도 `http://www.w3.org/2000/svg` 네임스페이스를 암시합니다. 이는 모든 콘텐츠가 최소 하나의 네임스페이스 내에 있다는 것을 의미합니다. + +### 기본 네임스페이스와 네임스페이스가 없는 것 + +이 예제에서는 JavaScript를 사용하여 네임스페이스가 없는 요소를 생성하고 이를 문서 내에 삽입합니다. `@namespace` 를 사용하여 이름이 지정되지 않은 네임스페이스를 정의함으로써 SVG 네임스페이스를 기본 네임스페이스로 설정합니다. + +> [!참고] +> 기본 또는 이름이 지정되지 않은 네임스페이스가 정의된 경우, 전체 선택자 및 타입 선택자는 해당 네임스페이스의 요소에만 적용됩니다. + +#### HTML + +HTML 내 혹은 SVG 내 어떠한 네임스페이스도 명시적으로 선언되지 않았습니다. + +```html +

    암시적인 HTML 네임스페이스 내 링크

    + + + + SVG 내에서 링크가 생성되었습니다. + + +``` + +#### JavaScript + +{{DOMXRef("document.createElementNS")}}를 이용한 JavaScript에서는 앵커 링크를 네임스페이스 없이 생성할 수 있고 이를 링크에 추가합니다. + +```js +// create 'no namespace' anchor +const a = document.createElementNS("", "a"); +a.href = "#"; +a.appendChild(document.createTextNode("Link created without a namespace")); + +document.body.appendChild(a); +``` + +#### CSS + +{{cssxref("@namespace")}}를 이용하여 네임스페이스를 선언합니다. 네임스페이스의 이름을 생략하면, `@namespace` 선언은 기본 네임스페이스를 생성합니다. + +```css +/* 이름을 생략하는 것으로 이는 SVG를 기본 네임스페이스로 설정합니다. */ +@namespace url("http://www.w3.org/2000/svg"); + +/* (SVG에 설정된) 기본 네임스페이스 `` */ +a { + font-size: 1.4rem; +} + +/* (SVG에 설정된) 기본 네임스페이스 내에 있는 `` 와 `

    ` */ +svg, +p { + border: 5px solid gold; +} + +/* 네임스페이스 외부의 링크 */ +|a { + text-decoration: wavy underline purple; + font-weight: bold; +} + +/* 네임스페이스가 없거나 어떠한 네임스페이스의 링크 */ +*|a { + font-style: italic; + color: magenta; + fill: magenta; +} +``` + +#### 결과 + +{{EmbedLiveSample("Default_namespace_and_no_namespace", "100%", 100)}} + +네임스페이스 구분자가 없는 선택자 `a` 는 SVG `` 요소에만 일치합니다. 이는 SVG가 기본 네임스페이스로 설정되어 있는 것과 연관이 있습니다. + +네임스페이스가 없는 선택자 `|a` 는, JavaScript로 정의하고 추가한 `` 와 일치합니다. 해당 노드는 기본 네임스페이스가 없는 유일한 노드이기 때문입니다. + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [`@namespace`](/ko/docs/Web/CSS/@namespace) +- [`Document.createElementNS()`](/ko/docs/Web/API/Document/createElementNS) 메서드 +- [`Element.namespaceURI`](/ko/docs/Web/API/Element/namespaceURI) 속성 +- [CSS 타입 선택자](/ko/docs/Web/CSS/Type_selectors) +- [CSS 전체 선택자](/ko/docs/Web/CSS/Universal_selectors) +- [CSS 선택자 모듈](/ko/docs/Web/CSS/CSS_selectors) From 2c0926c82840c2877d84dc16a47f2ed7de47572c Mon Sep 17 00:00:00 2001 From: Sujin <102905624+etoile-j@users.noreply.github.com> Date: Fri, 2 Aug 2024 22:20:05 +0900 Subject: [PATCH 23/57] =?UTF-8?q?[ko]=20ServiceWorkerGlobalScope=20?= =?UTF-8?q?=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20(#22836)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/serviceworkerglobalscope/index.md | 132 ++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 files/ko/web/api/serviceworkerglobalscope/index.md diff --git a/files/ko/web/api/serviceworkerglobalscope/index.md b/files/ko/web/api/serviceworkerglobalscope/index.md new file mode 100644 index 00000000000000..0c051e5115edd8 --- /dev/null +++ b/files/ko/web/api/serviceworkerglobalscope/index.md @@ -0,0 +1,132 @@ +--- +title: ServiceWorkerGlobalScope +slug: Web/API/ServiceWorkerGlobalScope +l10n: + sourceCommit: c29cee3dcb0d0e66093dd0c18aa82e0eab9d6d14 +--- + +{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}} + +[Service Worker API](/ko/docs/Web/API/Service_Worker_API)의 **`ServiceWorkerGlobalScope`** 인터페이스는 서비스 워커의 전역 실행 맥락을 나타냅니다. + +개발자는 ServiceWorker 상태가 종료/재시작 주기 동안 유지되지 않는다는 것을 명심해야 하며, 따라서 각 이벤트 처리기는 초기화된 기본 전역 상태로 호출되고 있다고 가정해야 합니다. + +서비스 워커가 성공적으로 등록되면, 메모리와 프로세서 전력을 절약하기 위해 유휴 상태에서 종료될 수 있고 종료될 것입니다. 활성화된 서비스 워커는 {{domxref("ServiceWorkerGlobalScope.fetch_event", "fetch")}}나 {{domxref("ServiceWorkerGlobalScope.message_event", "message")}} 같은 이벤트에 응답하기 위해 자동으로 재시작됩니다. + +또한 서비스 워커 내의 동기 요청은 허용되지 않으며, {{domxref("WorkerGlobalScope/fetch", "fetch()")}} 메서드를 통해 시작된 것과 같은 비동기 요청만 사용할 수 있습니다. + +이 인터페이스는 {{domxref("WorkerGlobalScope")}} 인터페이스와, 그 부모 {{domxref("EventTarget")}}에서 상속받습니다. + +{{InheritanceDiagram}} + +## 인스턴스 속성 + +이 인터페이스는 {{domxref("WorkerGlobalScope")}} 인터페이스와 그 부모 {{domxref("EventTarget")}}에서 속성을 상속받습니다. + +- {{domxref("ServiceWorkerGlobalScope.clients")}} {{ReadOnlyInline}} + - : 서비스 워커와 관련된 {{domxref("Clients")}} 객체를 포함합니다. +- {{domxref("ServiceWorkerGlobalScope.cookieStore")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : 서비스 워커와 관련된 {{domxref("CookieStore")}} 객체에 대한 참조를 반환합니다. +- {{domxref("ServiceWorkerGlobalScope.registration")}} {{ReadOnlyInline}} + - : 서비스 워커의 등록을 나타내는 {{domxref("ServiceWorkerRegistration")}} 객체를 포함합니다. +- {{domxref("ServiceWorkerGlobalScope.serviceWorker")}} {{ReadOnlyInline}} + - : 서비스 워커를 나타내는 {{domxref("ServiceWorker")}} 객체를 포함합니다. + +## 인스턴스 메서드 + +이 인터페이스는 {{domxref("WorkerGlobalScope")}} 인터페이스와 그 부모 {{domxref("EventTarget")}}으로부터 메서드를 상속받습니다. + +- {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} + - : 서비스 워커 클라이언트가 현재 서비스 워커를 사용하고 있는 동안 대기 상태에 있는 서비스 워커 등록이 활성 상태가 되도록 허용합니다. + +## 이벤트 + +{{domxref("EventTarget/addEventListener()", "addEventListener()")}}를 사용하거나 인터페이스의 `oneventname` 속성에 이벤트 수신기를 할당하여 이 이벤트를 수신합니다. + +- {{domxref("ServiceWorkerGlobalScope/activate_event", "activate")}} + - : {{domxref("ServiceWorkerRegistration")}}이 새로운 {{domxref("ServiceWorkerRegistration.active")}} 워커를 획득할 때 발생합니다. +- {{domxref("ServiceWorkerGlobalScope/backgroundfetchabort_event", "backgroundfetchabort")}} {{Experimental_Inline}} + - : 사용자나 앱에 의해 [백그라운드 페치](/ko/docs/Web/API/Background_Fetch_API) 작업이 취소되었을 때 발생합니다. +- {{domxref("ServiceWorkerGlobalScope/backgroundfetchclick_event", "backgroundfetchclick")}} {{Experimental_Inline}} + - : 사용자가 [백그라운드 페치](/ko/docs/Web/API/Background_Fetch_API) 작업을 클릭했을 때 발생합니다. +- {{domxref("ServiceWorkerGlobalScope/backgroundfetchfail_event", "backgroundfetchfail")}} {{Experimental_Inline}} + - : [백그라운드 페치](/ko/docs/Web/API/Background_Fetch_API) 작업 요청 중 하나 이상이 실패했을 때 발생합니다. +- {{domxref("ServiceWorkerGlobalScope/backgroundfetchsuccess_event", "backgroundfetchsuccess")}} {{Experimental_Inline}} + - : [백그라운드 페치](/ko/docs/Web/API/Background_Fetch_API) 작업의 모든 요청이 성공했을 때 발생합니다. +- {{domxref("ServiceWorkerGlobalScope/canmakepayment_event", "canmakepayment")}} {{Experimental_Inline}} + - : 결제 앱의 서비스 워커에서 결제를 처리할 준비가 되었는지 확인하기 위해 발생합니다. 특히, 상점 웹사이트에서 {{domxref("PaymentRequest.PaymentRequest", "PaymentRequest()")}} 생성자를 호출할 때 발생합니다. +- {{domxref("ServiceWorkerGlobalScope/contentdelete_event", "contentdelete")}} {{Experimental_Inline}} + - : {{domxref("ContentIndex")}}에서 항목이 제거되었을 때 발생합니다. +- {{domxref("ServiceWorkerGlobalScope/cookiechange_event", "cookiechange")}} {{Experimental_Inline}} + - : 서비스 워커의 쿠키 변경 구독 목록과 일치하는 쿠키 변경이 발생했을 때 발생합니다. +- {{domxref("ServiceWorkerGlobalScope/fetch_event", "fetch")}} + - : {{domxref("WorkerGlobalScope/fetch", "fetch()")}}가 호출될 때 발생합니다. +- {{domxref("ServiceWorkerGlobalScope/install_event", "install")}} + - : {{domxref("ServiceWorkerRegistration")}}이 새로운 {{domxref("ServiceWorkerRegistration.installing")}} 워커를 획득할 때 발생합니다. +- {{domxref("ServiceWorkerGlobalScope/message_event", "message")}} + - : 메시지를 받을 때 발생합니다. 제어된 페이지는 {{domxref("MessagePort.postMessage()")}} 메서드를 사용해 서비스 워커에 메시지를 보낼 수 있습니다. +- {{domxref("ServiceWorkerGlobalScope/messageerror_event", "messageerror")}} + - : 수신 메시지를 역직렬화 할 수 없을 때 발생합니다. +- {{domxref("ServiceWorkerGlobalScope/notificationclick_event", "notificationclick")}} + - : 사용자가 표시된 알림을 클릭할 때 발생합니다. +- {{domxref("ServiceWorkerGlobalScope/notificationclose_event", "notificationclose")}} + - : 사용자가 표시된 알림을 닫을 때 발생합니다. +- {{domxref("ServiceWorkerGlobalScope/paymentrequest_event", "paymentrequest")}} {{Experimental_Inline}} + - : {{domxref("PaymentRequest.show()")}} 메서드를 통해 상점 웹사이트에서 결제 흐름이 시작되었을 때 결제 앱에서 발생합니다. +- {{domxref("ServiceWorkerGlobalScope/sync_event", "sync")}} + - : 서비스 워커 클라이언트 페이지에서 {{domxref("SyncManager.register")}}를 호출하면 트리거됩니다. 네트워크가 사용 가능하면, 또는 네트워크가 사용할 수 있게 되는 즉시 동기화를 시도합니다. +- {{domxref("ServiceWorkerGlobalScope/periodicsync_event", "periodicsync")}} {{Experimental_Inline}} + - : {{domxref("PeriodicSyncManager")}}를 등록할 때 지정한 주기적인 간격으로 발생합니다. +- {{domxref("ServiceWorkerGlobalScope/push_event", "push")}} + - : 서버 푸시 알림을 받을 때 발생합니다. +- {{domxref("ServiceWorkerGlobalScope/pushsubscriptionchange_event", "pushsubscriptionchange")}} + - : 푸시 구독이 무효화되었거나 무효화되려고 할 때 발생합니다 (예: 푸시 서비스가 만료 시간을 설정할 때). + +## 예제 + +이 코드 조각은 [서비스 워커 prefetch 샘플](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js)에서 가져온 것입니다 ([라이브 prefetch 예제](https://googlechrome.github.io/samples/service-worker/prefetch/) 참조.) {{domxref("ServiceWorkerGlobalScope.fetch_event", "onfetch")}} 이벤트 처리기는 `fetch` 이벤트를 수신합니다. 이벤트가 발생하면, 코드는 {{domxref("Cache")}} 객체에서 첫 번째로 일치하는 요청이 이행된 프로미스를 반환합니다. 일치하는 요청이 없으면, 코드는 네트워크에서 응답을 가져옵니다. + +이 코드는 {{domxref("WorkerGlobalScope/fetch", "fetch()")}} 작업에서 발생하는 예외도 처리합니다. HTTP 오류 응답(예: 404)은 예외를 트리거하지 않는다는 점을 주의하세요. 적절한 오류 코드가 설정된 일반 응답 객체를 반환합니다. + +```js +self.addEventListener("fetch", (event) => { + console.log("Handling fetch event for", event.request.url); + + event.respondWith( + caches.match(event.request).then((response) => { + if (response) { + console.log("Found response in cache:", response); + + return response; + } + console.log("No response found in cache. About to fetch from network…"); + + return fetch(event.request).then( + (response) => { + console.log("Response from network is:", response); + + return response; + }, + (error) => { + console.error("Fetching failed:", error); + + throw error; + }, + ); + }), + ); +}); +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [서비스 워커 사용하기](/ko/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [서비스 워커 기본 코드 예제](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker) From 1b67b21869672026f187f2a77095358aa37a3e7c Mon Sep 17 00:00:00 2001 From: mdn-bot <108879845+mdn-bot@users.noreply.github.com> Date: Fri, 2 Aug 2024 00:29:42 +0000 Subject: [PATCH 24/57] ja: auto-fix Markdownlint issues --- .../client-side_web_apis/client-side_storage/index.md | 3 +-- .../page_structures/page_types/page_type_key/index.md | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md index a6829c49405e4e..67bbb48a1c2aa1 100644 --- a/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md +++ b/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md @@ -235,8 +235,7 @@ MDN 学習領域の他の場所で、[静的サイト](/ja/docs/Learn/Server-sid 例が完成しました。よくできましたね! 現時点で残っているのは、コードを保存して HTML ページをブラウザーでテストすることだけです。[ライブ実行される完成版をここで](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html)見られます。 -> **メモ:** -> [ウェブストレージ API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)のところには、探究するにはほんの少しだけ更に複雑な別の例もあります。 +> **メモ:** > [ウェブストレージ API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)のところには、探究するにはほんの少しだけ更に複雑な別の例もあります。 > [!NOTE] > 完成版のソースのうち `` という行では、`defer` 属性により、ページを読み込み終わるまでは {{htmlelement("script")}} 要素の中身を実行しないように指定しています。 diff --git a/files/ja/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md b/files/ja/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md index 4743ec9c4253b1..19e2279ba05ad4 100644 --- a/files/ja/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md +++ b/files/ja/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md @@ -7,8 +7,7 @@ l10n: {{MDNSidebar}} -> [!CALLOUT] -> **訳注:** 翻訳記事には `page-type` キーを設定しないでください。英語版記事に設定されたキーが使用されます。以下の記事は、MDN Web Docs の構造を理解しやすくするために翻訳しておきます。 +> [!CALLOUT] > **訳注:** 翻訳記事には `page-type` キーを設定しないでください。英語版記事に設定されたキーが使用されます。以下の記事は、MDN Web Docs の構造を理解しやすくするために翻訳しておきます。 フロントマターの `page-type` キーは MDN ページ型を記述します。 これにより、 MDN コンテンツツールはコンテンツチェックやサイドバーの整理を自動化することができます。 From af32dc255b2231bde764138f5cac196e5cff01fd Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 3 Aug 2024 01:44:26 +0900 Subject: [PATCH 25/57] Update files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md Co-authored-by: Hoarfroster --- .../client-side_web_apis/client-side_storage/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md index 67bbb48a1c2aa1..aa0cf437f80368 100644 --- a/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md +++ b/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md @@ -235,7 +235,7 @@ MDN 学習領域の他の場所で、[静的サイト](/ja/docs/Learn/Server-sid 例が完成しました。よくできましたね! 現時点で残っているのは、コードを保存して HTML ページをブラウザーでテストすることだけです。[ライブ実行される完成版をここで](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html)見られます。 -> **メモ:** > [ウェブストレージ API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)のところには、探究するにはほんの少しだけ更に複雑な別の例もあります。 +> **メモ:** [ウェブストレージ API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)のところには、探究するにはほんの少しだけ更に複雑な別の例もあります。 > [!NOTE] > 完成版のソースのうち `` という行では、`defer` 属性により、ページを読み込み終わるまでは {{htmlelement("script")}} 要素の中身を実行しないように指定しています。 From 8ba6b932ca94b1ff262901abe3ef5357a4c6a385 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 3 Aug 2024 01:45:07 +0900 Subject: [PATCH 26/57] Update index.md --- .../page_structures/page_types/page_type_key/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md b/files/ja/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md index 19e2279ba05ad4..ccbacbf1fdf027 100644 --- a/files/ja/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md +++ b/files/ja/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md @@ -7,7 +7,7 @@ l10n: {{MDNSidebar}} -> [!CALLOUT] > **訳注:** 翻訳記事には `page-type` キーを設定しないでください。英語版記事に設定されたキーが使用されます。以下の記事は、MDN Web Docs の構造を理解しやすくするために翻訳しておきます。 +> **注目:** **訳注:** 翻訳記事には `page-type` キーを設定しないでください。英語版記事に設定されたキーが使用されます。以下の記事は、MDN Web Docs の構造を理解しやすくするために翻訳しておきます。 フロントマターの `page-type` キーは MDN ページ型を記述します。 これにより、 MDN コンテンツツールはコンテンツチェックやサイドバーの整理を自動化することができます。 From a68975c37a5ffe40dd8f56cb48b4596abca275d4 Mon Sep 17 00:00:00 2001 From: matsuda-argano <106219284+matsuda-argano@users.noreply.github.com> Date: Fri, 2 Aug 2024 12:29:03 +0900 Subject: [PATCH 27/57] =?UTF-8?q?=E7=BF=BB=E8=A8=B3=E3=83=9F=E3=82=B9?= =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/requestinit/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/api/requestinit/index.md b/files/ja/web/api/requestinit/index.md index d6263ad83a8668..d68caf67e28058 100644 --- a/files/ja/web/api/requestinit/index.md +++ b/files/ja/web/api/requestinit/index.md @@ -9,7 +9,7 @@ l10n: **`RequestInit`** は[フェッチ API](/ja/docs/Web/API/Fetch_API) の辞書で、フェッチリクエストを構成するのに使用する一連のオプションを表します。 -`RequestInit` オブジェクトは {{domxref("Request.Request()", "Request()")}} コンストラクターに渡したり、直絶 [`fetch()`](/ja/docs/Web/API/Window/fetch) 関数呼び出しに渡したりすることができます。 +`RequestInit` オブジェクトは {{domxref("Request.Request()", "Request()")}} コンストラクターに渡したり、直接 [`fetch()`](/ja/docs/Web/API/Window/fetch) 関数呼び出しに渡したりすることができます。 また、`Request` を `RequestInit` で作成し、その `Request` を `fetch()` に別の `RequestInit` と一緒に渡すこともできます。この場合、両方の場所で同じオプションが設定されていれば、直接 `fetch()` に渡された値が使用されます。 From cf577c7dee7884218240be54a694bdfd4016ff73 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 29 Jul 2024 22:11:53 +0900 Subject: [PATCH 28/57] =?UTF-8?q?2024/04/26=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/html/index.md | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/files/ja/web/html/index.md b/files/ja/web/html/index.md index a7f42178cb0909..192ad9aa07bbb1 100644 --- a/files/ja/web/html/index.md +++ b/files/ja/web/html/index.md @@ -2,7 +2,7 @@ title: "HTML: ハイパーテキストマークアップ言語" slug: Web/HTML l10n: - sourceCommit: 667f693fd8957cf531f09aa3438a594dd52f85d5 + sourceCommit: 5f13cbe7517ce96deeb521d4c8e6923266a22913 --- {{HTMLSidebar}} @@ -26,14 +26,6 @@ HTML 要素は文書中で、 "`<`" および "`>`" で囲まれた要素名で - HTML リファレンス - : 広範な [HTML リファレンス](/ja/docs/Web/HTML/Reference)の章で、 HTML のすべての要素と属性についての詳細が分かります。 -> [!CALLOUT] -> -> #### フロントエンドのウェブ開発者を目指している方へ -> -> ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。 -> -> [**始めましょう**](/ja/docs/Learn/Front-end_web_developer) - ## 初心者向けチュートリアル [HTML 学習エリア](/ja/docs/Learn/HTML)は HTML を基礎から学ぶための複数のモジュールを中心としています。――前提知識は必要ありません。 @@ -80,4 +72,4 @@ HTML 要素は文書中で、 "`<`" および "`>`" で囲まれた要素名で ## 関連トピック - [CSS を使って HTML の要素に色をつける](/ja/docs/Web/CSS/CSS_colors/Applying_color) - - : この記事では、 CSS を使用して HTML コンテンツに色をつける方法、 HTML 文書のどの部分に色付けできるかの一覧、使用する CSS プロパティについて説明します。例えば、パレット作成ツールへのリンクなどが含みます。 + - : この記事では、 CSS を使用して HTML コンテンツに色をつける方法、 HTML 文書のどの部分に色付けできるかの一覧、使用する CSS プロパティについて説明します。 From b510c7b20f92dc17a7546251ae8f1adb4d3b1d9a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 29 Jul 2024 22:20:03 +0900 Subject: [PATCH 29/57] =?UTF-8?q?2024/04/22=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/imagebitmaprenderingcontext/index.md | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 files/ja/web/api/imagebitmaprenderingcontext/index.md diff --git a/files/ja/web/api/imagebitmaprenderingcontext/index.md b/files/ja/web/api/imagebitmaprenderingcontext/index.md new file mode 100644 index 00000000000000..aed674b625b957 --- /dev/null +++ b/files/ja/web/api/imagebitmaprenderingcontext/index.md @@ -0,0 +1,29 @@ +--- +title: ImageBitmapRenderingContext +slug: Web/API/ImageBitmapRenderingContext +l10n: + sourceCommit: daeff1a2efaae366bcc8b6d911d86985646e665e +--- + +{{APIRef("Canvas API")}}{{AvailableInWorkers}} + +**`ImageBitmapRenderingContext`** インターフェイスは、キャンバスのレンダリングコンテキストで、指定された {{domxref("ImageBitmap")}} でキャンバスのコンテンツを置き換える機能を提供します。そのコンテキスト ID（{{domxref("HTMLCanvasElement.getContext()")}} または {{domxref("OffscreenCanvas.getContext()")}} の最初の引数）は `"bitmaprenderer"` です。 + +このインターフェイスは、ウィンドウと[ワーカー](/ja/docs/Web/API/Web_Workers_API)コンテキストの両方で利用できます。 + +## インスタンスメソッド + +- {{domxref("ImageBitmapRenderingContext.transferFromImageBitmap()")}} + - : 指定された `ImageBitmap` をこのレンダリングコンテキストに関連付けられたキャンバスで表示します。`ImageBitmap` の所有権はキャンバスに移譲されます。これは以前は `transferImageBitmap()` という名前付きでしたが、仕様変更で名前が変更されました。古い名前はコードの破損を避けるために別名として残されています。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("OffscreenCanvas")}} From 19053cb558085d38f048dbc7ac431a4425076e25 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 29 Jul 2024 22:23:52 +0900 Subject: [PATCH 30/57] =?UTF-8?q?2024/04/22=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../transferfromimagebitmap/index.md | 68 +++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 files/ja/web/api/imagebitmaprenderingcontext/transferfromimagebitmap/index.md diff --git a/files/ja/web/api/imagebitmaprenderingcontext/transferfromimagebitmap/index.md b/files/ja/web/api/imagebitmaprenderingcontext/transferfromimagebitmap/index.md new file mode 100644 index 00000000000000..afc854cb1e3216 --- /dev/null +++ b/files/ja/web/api/imagebitmaprenderingcontext/transferfromimagebitmap/index.md @@ -0,0 +1,68 @@ +--- +title: "ImageBitmapRenderingContext: transferFromImageBitmap() メソッド" +short-title: transferFromImageBitmap() +slug: Web/API/ImageBitmapRenderingContext/transferFromImageBitmap +l10n: + sourceCommit: daeff1a2efaae366bcc8b6d911d86985646e665e +--- + +{{APIRef("Canvas API")}}{{AvailableInWorkers}} + +**`ImageBitmapRenderingContext.transferFromImageBitmap()`** メソッドは、指定された {{domxref("ImageBitmap")}} をこのレンダリングコンテキストに関連付けられたキャンバスで表示します。`ImageBitmap` の所有権はキャンバスにも移譲されます。 + +このメソッドは以前は `transferImageBitmap()` と名付けられていましたが、仕様変更で名前が変更されました。コードの破損を避けるため、古い名前は別名として残されています。 + +## 構文 + +```js-nolint +transferFromImageBitmap(bitmap) +``` + +### 引数 + +- `bitmap` + - : 移譲 {{domxref("ImageBitmap")}} オブジェクトです。 + +### 返値 + +なし ({{jsxref("undefined")}})。 + +## 例 + +### HTML + +```html + +``` + +### JavaScript + +```js +const htmlCanvas = document + .getElementById("htmlCanvas") + .getContext("bitmaprenderer"); + +// WebGL シーンをオフスクリーンで描画 +const offscreen = new OffscreenCanvas(256, 256); +const gl = offscreen.getContext("webgl"); + +// gl コンテキストを使用して何かを描画 + +// 現在のフレームを可視キャンバスに移譲 +const bitmap = offscreen.transferToImageBitmap(); +htmlCanvas.transferFromImageBitmap(bitmap); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このメソッドを定義するインターフェイスである {{domxref("ImageBitmapRenderingContext")}} +- {{domxref("OffscreenCanvas")}} +- {{domxref("OffscreenCanvas.transferToImageBitmap()")}} From 454304eff4721ec260a1895e8b11b13c6c250f54 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 29 Jul 2024 22:30:39 +0900 Subject: [PATCH 31/57] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/audiocontext/audiocontext/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/ja/web/api/audiocontext/audiocontext/index.md b/files/ja/web/api/audiocontext/audiocontext/index.md index 0d8e9b2a3e12bc..fb85a173b0cc0b 100644 --- a/files/ja/web/api/audiocontext/audiocontext/index.md +++ b/files/ja/web/api/audiocontext/audiocontext/index.md @@ -3,7 +3,7 @@ title: "AudioContext: AudioContext() コンストラクター" short-title: AudioContext() slug: Web/API/AudioContext/AudioContext l10n: - sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8 + sourceCommit: a4675b9077ae32f989c7ecac94f454db2653c4fc --- {{APIRef("Web Audio API")}} @@ -81,10 +81,10 @@ const audioCtx = new AudioContext({ {{Specifications}} -## ブラウザー互換性 +## ブラウザーの互換性 {{Compat}} ## 関連情報 -- {{domxref("OfflineAudioContext.OfflineAudioContext()", "new OfflineAudioContext()")}} コンストラクター +- {{domxref("OfflineAudioContext.OfflineAudioContext()", "OfflineAudioContext()")}} コンストラクター From 2b282e63de8332e96d43e4ac3c53a40d5b9c8daa Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 29 Jul 2024 22:35:55 +0900 Subject: [PATCH 32/57] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/dommatrix/index.md | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/files/ja/web/api/dommatrix/index.md b/files/ja/web/api/dommatrix/index.md index 18e4e6ec991837..b3aef39501f11b 100644 --- a/files/ja/web/api/dommatrix/index.md +++ b/files/ja/web/api/dommatrix/index.md @@ -2,7 +2,7 @@ title: DOMMatrix (WebKitCSSMatrix) slug: Web/API/DOMMatrix l10n: - sourceCommit: 6441e1a4ab820e07b4a8b42a63329ae335f7f142 + sourceCommit: 6197320c2f25a975ee4f7df4b8d5b48bf8d01562 --- {{APIRef("Geometry Interfaces")}} @@ -17,7 +17,7 @@ l10n: ## コンストラクター -- {{domxref("DOMMatrix.DOMMatrix", "DOMMatrix()")}} +- {{domxref("DOMMatrix.DOMMatrix","DOMMatrix()")}} - : 新しい `DOMMatrix` オブジェクトを作成します。 ## インスタンスプロパティ @@ -48,7 +48,7 @@ _このインターフェイスは {{domxref("DOMMatrixReadOnly")}} からプロ _このインターフェイスには以下のメソッドがあり、また {{domxref("DOMMatrixReadOnly")}} から継承したメソッドがあります。_ - {{domxref("DOMMatrix.invertSelf()")}} - - : この行列を逆行列に変更します。逆行列にできない場合、その成分はすべて `NaN` に設定され、 {{domxref("DOMMatrix.is2D", "is2D")}} は `false` を返します。 + - : この行列を逆行列に変更します。逆行列にできない場合、その成分はすべて `NaN` に設定され、[`is2D`](/ja/docs/Web/API/DOMMatrixReadOnly#is2d) は `false` を返します。 - {{domxref("DOMMatrix.multiplySelf()")}} - : 指定した `DOMMatrix` と後乗算することで、行列を変更します。これは点積 `A⋅B` と等価であり、行列 `A` は入力行列、 `B` はメソッドへの入力として指定された行列です。自分自身を返します。 - {{domxref("DOMMatrix.preMultiplySelf()")}} @@ -83,7 +83,7 @@ _このインターフェイスは {{domxref("DOMMatrixReadOnly")}} からメソ - {{domxref("DOMMatrix.fromFloat64Array", "fromFloat64Array()")}} - : 倍精度（64 ビット）浮動小数点値の配列が指定された場合、変更可能な新しい `DOMMatrix` オブジェクトを作成します。配列に 6 つの値がある場合、結果は 2D 行列になり、配列に 16 個の値がある場合、結果は 3D 行列になります。そうでない場合、 {{jsxref("TypeError")}} 例外が発生します。 - {{domxref("DOMMatrix.fromMatrix", "fromMatrix()")}} - - : 既存の行列、あるいはそのプロパティの値を提供する {{domxref("DOMMatrixInit")}} 辞書が指定された場合、新しい変更可能な `DOMMatrix` オブジェクトを作成します。 + - : 既存の行列、あるいはそのプロパティの値を提供するオブジェクトが指定された場合、新しい変更可能な `DOMMatrix` オブジェクトを作成します。 ## 使用上の注意 @@ -91,7 +91,11 @@ _このインターフェイスは {{domxref("DOMMatrixReadOnly")}} からメソ 4×4 の抽象行列を構成する 16 個の要素（m_11 から m_44）の位置を示します。 -[m11m21m31m41m12m22m32m42m13m23m33m43m14m24m34m44]\left [ \begin{matrix} m_{11} & m_{21} & m_{31} & m_{41} \\ m_{12} & m_{22} & m_{32} & m_{42} \\ m_{13} & m_{23} & m_{33} & m_{43} \\ m_{14} & m_{24} & m_{34} & m_{44} \end{matrix} \right ] + + + [m11m21m31m41m12m22m32m42m13m23m33m43m14m24m34m44]\left [ \begin{matrix} m_{11} & m_{21} & m_{31} & m_{41} \\ m_{12} & m_{22} & m_{32} & m_{42} \\ m_{13} & m_{23} & m_{33} & m_{43} \\ m_{14} & m_{24} & m_{34} & m_{44} \end{matrix} \right ] + + `DOMMatrix` インターフェイスは、マークアップ内のすべての行列に使用することを意図して設計されています。 @@ -99,12 +103,10 @@ _このインターフェイスは {{domxref("DOMMatrixReadOnly")}} からメソ {{Specifications}} -## ブラウザー互換性 +## ブラウザーの互換性 {{Compat}} ## 関連情報 -- [`MSCSSMatrix` documentation on MSDN]() -- [`WebKitCSSMatrix` documentation at Safari Developer Library](https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/index.html) -- [Mozilla bug 717722: implement `(WebKit)CSSMatrix()`](https://bugzilla.mozilla.org/show_bug.cgi?id=717722) +- 変更不可能な相当品である {{domxref("DOMMatrixReadOnly")}} From 2e5c04a7d683f16bfd0ca7e89d8b7d9dc1ae0464 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 29 Jul 2024 23:38:37 +0900 Subject: [PATCH 33/57] =?UTF-8?q?2024/07/27=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/-moz-force-broken-image-icon/index.md | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/files/ja/web/css/-moz-force-broken-image-icon/index.md b/files/ja/web/css/-moz-force-broken-image-icon/index.md index 0c5e8800fd91d3..94d749e3d8cfc6 100644 --- a/files/ja/web/css/-moz-force-broken-image-icon/index.md +++ b/files/ja/web/css/-moz-force-broken-image-icon/index.md @@ -1,9 +1,11 @@ --- title: "-moz-force-broken-image-icon" slug: Web/CSS/-moz-force-broken-image-icon +l10n: + sourceCommit: 4cb569f768ec9529724f8fb06539f2903a583a41 --- -{{CSSRef}}{{Non-standard_header}} +{{Non-standard_header}}{{CSSRef}}{{Deprecated_Header}} **`-moz-force-broken-image-icon`** は拡張 CSS プロパティで、壊れた画像に `alt` 属性が付いていても、壊れた画像のアイコンを強制的に表示することができます。 @@ -12,7 +14,7 @@ slug: Web/CSS/-moz-force-broken-image-icon ### 値 - {{cssxref("<integer>")}} - - : プロパティの値に `1` を指定した場合、その画像が {{HTMLElement("img", "`alt`", "#attr-alt")}} 属性を持っていたとしても、壊れた画像アイコンが表示されます。`0` を指定した場合、通常通り `alt` 属性のみが表示されます。 + - : プロパティの値に `1` を指定した場合、その画像に [`alt`](/ja/docs/Web/HTML/Element/img#alt) 属性があったとしても、壊れた画像アイコンが表示されます。`0` を指定した場合、通常通り `alt` 属性のみが表示されます。 > [!NOTE] > プロパティの値に `1` を指定した場合もなお、 `alt` 属性は壊れた画像アイコンの隣に同時に表示されます。 @@ -23,9 +25,11 @@ slug: Web/CSS/-moz-force-broken-image-icon ## 形式文法 -{{csssyntax}} +```plain +-moz-force-broken-image-icon = {{cssxref("<integer>")}} +``` -

    例

    +## 例 ### HTML @@ -45,13 +49,14 @@ img { ### 結果 -{{ EmbedLiveSample('Examples','125','125','/files/4619/broken%20image%20link.png') }} +{{EmbedLiveSample('Examples','125','125')}} -> **メモ:** `-moz-force-broken-image-icon` の値に `1` を指定した場合、その画像に width と height を明示的に指定しない限り、壊れた画像アイコンは表示されず、 `alt` 属性も非表示になります。 +> [!NOTE] +> `-moz-force-broken-image-icon` の値に `1` を指定した場合、その画像に width と height を明示的に指定しない限り、壊れた画像アイコンは表示されず、 `alt` 属性も非表示になります。 ## メモ -- このプロパティは Geckoベースのブラウザでのみ使用できます。 +- このプロパティは Gecko ベースのブラウザーでのみ使用できます。 - このプロパティの使用は非推奨です。代わりに適切な `alt` 属性を使用してください。 ## 仕様書 From 0f542339695133e01b0fb6f6288bbb80e7df6d45 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 29 Jul 2024 23:44:19 +0900 Subject: [PATCH 34/57] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/events/event_handlers/index.md | 23 ++++++++++++--------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/files/ja/web/events/event_handlers/index.md b/files/ja/web/events/event_handlers/index.md index 28218570004109..c333ecb52491b1 100644 --- a/files/ja/web/events/event_handlers/index.md +++ b/files/ja/web/events/event_handlers/index.md @@ -1,6 +1,8 @@ --- title: イベントの扱い (概要) slug: Web/Events/Event_handlers +l10n: + sourceCommit: 857c6f9e7f1a847e7d3466b0d047159f7b345991 --- イベントとは、ブラウザーや OS の環境の変化を知らせる信号で、ブラウザーのウィンドウ内で発行されます。プログラマーは、イベントが発行されたときに実行される*イベントハンドラー*のコードを作成することで、ウェブページが変化に適切に対応できるようになります。 @@ -22,7 +24,7 @@ slug: Web/Events/Event_handlers ### onevent プロパティの使用 -慣習上、イベントを発行する Javascript オブジェクトには、それに対応する "onevent" プロパティ (イベント名の前に "on" を付けて命名) があります。これらのプロパティは、イベントが発行されたときに、関連するハンドラーコードを実行するために呼び出されます。 +慣習上、イベントを発行する JavaScript オブジェクトには、それに対応する "onevent" プロパティ (イベント名の前に "on" を付けて命名) があります。これらのプロパティは、イベントが発行されたときに、関連するハンドラーコードを実行するために呼び出されます。 イベントハンドラーのコードを設定するには、適切な onevent プロパティに代入してください。 1 つの要素のそれぞれのイベントに対して、割り当てることができるイベントハンドラーは 1 つだけです。必要に応じて、同じプロパティに別の関数を代入することで、ハンドラーを置き換えることができます。 @@ -32,14 +34,13 @@ slug: Web/Events/Event_handlers const btn = document.querySelector("button"); function greet(event) { - // print the event object to console - console.log("greet:", arguments); + console.log("greet:", event); } btn.onclick = greet; ``` -なお、イベントハンドラーの第一引数には、イベントを表すオブジェクトが渡されます。このイベントオブジェクトは、 {{domxref("Event")}} インターフェースを実装しているか、またはそれを継承しています。 +なお、イベントハンドラーの第一引数には、イベントを表すオブジェクトが渡されます。このイベントオブジェクトは、 {{domxref("Event")}} インターフェイスを実装しているか、またはそれを継承しています。 ### EventTarget.addEventListener @@ -54,8 +55,7 @@ btn.onclick = greet; const btn = document.querySelector("button"); function greet(event) { - // print the event object to console - console.log("greet:", arguments); + console.log("greet:", event); } btn.addEventListener("click", greet); @@ -74,9 +74,8 @@ const controller = new AbortController(); btn.addEventListener( "click", - function (event) { - // イベントオブジェクトをコンソールに表示 - console.log("greet:", arguments); + (event) => { + console.log("greet:", event); }, { signal: controller.signal }, ); // このハンドラーに AbortSignal を渡す @@ -88,4 +87,8 @@ btn.addEventListener( controller.abort(); // このコントローラーに関連付けられたすべてのイベントハンドラーを削除 ``` - + From 847ab4179567f00414b6e52ec74457a7a5266e75 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 29 Jul 2024 23:47:07 +0900 Subject: [PATCH 35/57] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/html/attributes/placeholder/index.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/files/ja/web/html/attributes/placeholder/index.md b/files/ja/web/html/attributes/placeholder/index.md index a8d9fea598a983..914265deafbec0 100644 --- a/files/ja/web/html/attributes/placeholder/index.md +++ b/files/ja/web/html/attributes/placeholder/index.md @@ -2,7 +2,7 @@ title: "HTML 属性: placeholder" slug: Web/HTML/Attributes/placeholder l10n: - sourceCommit: 1d18b939883e7278cf4f8a14cb9cfd797615ea24 + sourceCommit: aee2bd82de11cb7331134e48e8bd548bbedafcc5 --- {{HTMLSidebar}} @@ -13,7 +13,8 @@ l10n: `placeholder` 属性は、入力の種類 `{{HTMLElement("input/text", "text")}}`、`{{HTMLElement("input/search", "search")}}`、`{{HTMLElement("input/url", "url")}}`、`{{HTMLElement("input/tel", "tel")}}`、`{{HTMLElement("input/email", "email")}}`、`{{HTMLElement("input/password", "password")}}` で用いることができます。`{{HTMLElement("textarea")}}` 要素でも用いることができます。以下の[例](#例)では、入力フィールドで期待する形式を示すために `placeholder` 属性を用いています。 -> **メモ:** `placeholder` 属性にはラインフィード (LF) やキャリッジリターン (CR) を含めることはできません。これらが含まれる場合は、プレースホルダーテキストはクリップされます。 +> [!NOTE] +> `placeholder` 属性にはラインフィード (LF) やキャリッジリターン (CR) を含めることはできません。これらが含まれる場合は、プレースホルダーテキストはクリップされます。 ## アクセシビリティの懸念 @@ -51,4 +52,4 @@ l10n: - HTML [`title`](/ja/docs/Web/HTML/Global_attributes/title) - CSS [`:placeholder-shown`](/ja/docs/Web/CSS/:placeholder-shown) 擬似クラスセレクター -- CSS [`::placeholder`](/ja/docs/Web/CSS/::placeholder) 疑似要素セレクター +- CSS [`::placeholder`](/ja/docs/Web/CSS/::placeholder) 擬似要素セレクター From 86749cb6cd9f8ad2ac97422190d690dcbab87651 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 30 Jul 2024 00:14:55 +0900 Subject: [PATCH 36/57] =?UTF-8?q?2024/07/24=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/guide/index.md | 99 ++++++++++++++++++++++--------------- 1 file changed, 59 insertions(+), 40 deletions(-) diff --git a/files/ja/web/guide/index.md b/files/ja/web/guide/index.md index fb2bb66a8763db..0a9fd134838175 100644 --- a/files/ja/web/guide/index.md +++ b/files/ja/web/guide/index.md @@ -1,52 +1,71 @@ --- title: 開発者ガイド slug: Web/Guide +l10n: + sourceCommit: 58ad1df59f2ffb9ecab4e27fe1bdf1eb5a55f89b --- -**これらの記事は、特定の技術や API を利用するための how-to 情報を提供します。** + -- [HTML 学習エリア](/ja/docs/Learn/HTML) - - : **[HTML](/ja/docs/Glossary/HTML)** (ハイパーテキスト・マークアップ・ランゲージ／Hypertext Markup Language) はほぼすべてのウェブコンテンツの中心となる言語です。ブラウザー画面上で目にする大半は、基本的に HTML を用いて記述されています。 -- [CSS 学習エリア](/ja/docs/Learn/CSS) - - : CSS (Cascading Style Sheets) とは HTML 内に書かれた文書の見た目を記述するスタイルシート言語です。 -- [音声と動画の配信](/ja/docs/Web/Guide/Audio_and_video_delivery) +MDN ドキュメントには多くのガイドがあります。この記事は使用例を追加したり、API や機能の使用方法を教えることを目的としています。このページでは、最も人気のある素材をリンクしています。 + +## HTML + +- [HTML によるウェブの構成](/ja/docs/Learn/HTML) + - : HTML の学習領域では、HTML を 1 から学ぶためのチュートリアルを提供しています。 +- [HTML の基本](/ja/docs/Learn/Getting_started_with_the_web/HTML_basics) + - : この記事では、HTML の基本的な理解を深めることができます。このガイドに従うこと以下で、HTML 学習領域の素材をさらに探求することができます。 + +## CSS + +- [CSS を使用した HTML のスタイル設定方法を学ぶ](/ja/docs/Learn/CSS) + - : 最初の段階からテキストのスタイル設定、レイアウトの作成などに至るまで、CSS チュートリアルの完全版です。 +- [CSS レイアウトガイド](/ja/docs/Web/Guide/CSS/CSS_Layout) + - : MDN には CSS レイアウトのガイドがたくさんありますが、このページではそれらを一斉に集めています。 +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations) + - : CSS のアニメーションでは、ある CSS スタイル設定から別の CSS スタイル設定へのトランジションをアニメーション化することが可能です。このガイドは、アニメーションプロパティを使い始めるのに役立ちます。 + +## JavaScript + +- [JavaScript 学習領域](/ja/docs/Learn/JavaScript) + - : 全くの初心者の方も、技術のリフレッシュを期待する方も、始めるにはこの場所から。 + +## メディア + +- [音声と動画の配信](/ja/docs/Web/Media/Audio_and_video_delivery) - : ウェブ上で音声や動画を届ける手段には、「静的な」データからアダプティブライブストリームに至るまでたくさんのものものがあります。この記事は、ウェブベースのメディアを伝送する様々な仕組みや一般的なブラウザーとの互換性について学ぶ最初のステップとして作られたものです。 -- [音声と動画の加工](/ja/docs/Web/Guide/Audio_and_video_manipulation) - - : 様々な技術を組み合わせて新たな形を作ることができるのがウェブの美しいところです。ブラウザーには音声や動画に対する諸々の機能が組み込まれていますから、{{htmlelement("canvas")}}や WebGL、Web Audio API といった技術を使い、直接的に音声や動画を編集することができます。例えば、エコーや圧縮効果を音声に加えたり、白黒やセピアのフィルターを動画に加えたりできます。この記事では、何をすべきかを説明するリファレンスを提供しています。 -- [イベント開発者ガイド](/ja/docs/Web/Guide/Events) - - : イベントは、ウェブ上での処理中に起こる様々な出来事の非同期処理のためのデザインパターンや、様々なタイプの大量の出来事の名付け・特徴化・利用のために必要です。 -- [AJAX](/ja/docs/Web/Guide/AJAX) - - : **Asynchronous JavaScript + XML (AJAX)** は既存の技術同士を組み合わせた新しいアプローチで、ウェブアプリケーションはより速く、表示されているページ全てを再読み込みすることなく、ユーザーインターフェイスを逐次更新できるようになります。そして、アプリケーションにより早い表示、ユーザー操作へのより良い応答性をもたらします。 -- [ウェブのグラフィック](/ja/docs/Web/Guide/Graphics) - - : 現代のウェブサイトとアプリケーションは、グラフィックスによる表現を必要としています。 -- [Web API ガイド](/ja/docs/Web/Guide/API) - - : すべての Web API のリストとそれが何をするのか。 -- [JavaScript](/ja/docs/JavaScript) - - : JavaScript は、ウェブアプリケーションの作成に使われる強力なスクリプト言語です。 -- [Localizations and character encodings](/ja/docs/Web/Guide/Localizations_and_character_encodings) - - : ブラウザー内部では文章は Unicode 形式で処理されます。ところが、ネットワークを介して文章をブラウザーに送る過程では、文字をバイトで表現する (文字エンコード) ことが行われています。[HTML の仕様では (すべての Unicode 文字を表現できる) UTF-8 エンコーディングを利用することが推奨されており](https://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset)、如何なるエンコーディングが使われていようと、ウェブコンテンツはそのエンコーディングを宣言する必要があります。 -- [モバイルウェブ開発](/ja/docs/Web/Guide/Mobile) - - : この記事では、モバイル端末でもしっかりと動作するウェブサイトを設計するのに必要な主な技術の一部についての概要を示しています。[Firefox for Android](/ja/Mozilla/Firefox_for_Android) もご覧ください。 - - - -- [プログレッシブウェブアプリ](/ja/Apps/Progressive#Core_PWA_guides) - - : PWA はどの環境でも動作し、ネイティブアプリケーションと同等のユーザー体験を得られるようないくつかの機能を提供します。このガイド集には PWA について知っておくべき全てのことが書かれています。 -- [最適化とパフォーマンス](/ja/docs/Web/Guide/Performance) +- [音声と動画の加工](/ja/docs/Web/Media/Audio_and_video_manipulation) + - : 様々な技術を組み合わせて新たな形を作ることができるのがウェブの美しいところです。ブラウザーには音声や動画に対する諸々の機能が組み込まれていますから、{{htmlelement("canvas")}}や [WebGL](/ja/docs/Web/API/WebGL_API)、[ウェブオーディオ API](/ja/docs/Web/API/Web_Audio_API) といった技術を使い、直接的に音声や動画を編集することができます。例えば、エコーや圧縮効果を音声に加えたり、白黒やセピアのフィルターを動画に加えたりできます。この記事では、何をすべきかを説明するリファレンスを提供しています。 + +## API + +- [FormData オブジェクトの使用](/ja/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects) + - : [`FormData`](/ja/docs/Web/API/FormData) オブジェクトは、{{domxref("Window/fetch", "fetch()")}} を使用して送信するためのキーと値のペアのセットを収集可能にします。本来はフォームデータの送信に使用することを想定していましたが、キーのついたデータを伝送するためにフォームとは独立して使用することもできます。伝送されるデータは、フォームのエンコードタイプが "multipart/form-data" に設定されている場合に、`submit()` メソッドで送信する際に使用するデータと同じ形式です。 +- [プログレッシブウェブアプリ](/ja/docs/Web/Progressive_web_apps#core_pwa_guides) + - : プログレッシブウェブアプリ (PWA) は、現行のウェブ API と従来のプログレッシブエンハンスメント戦略を使用して、クロスプラットフォームのウェブアプリケーションを作成します。このアプリはあらゆる場所で動作し、ネイティブアプリと同じユーザー使い勝手の利点をもたらすいくつかの機能を提供します。この一連のガイドでは、PWA について知っておく必要があるすべてを教えます。 +- [XML の構文解析とシリアライズ](/ja/docs/Parsing_and_serializing_XML) + - : ウェブプラットフォーム上での XML の構文解析やシリアライズには複数の方法があり、それぞれ長所と短所があります。 + +## パフォーマンス + +- [最適化とパフォーマンス](/ja/docs/Web/Performance) - : 現代的なウェブアプリやウェブサイトを構築する時に重要なのは、コンテンツをすばやく効率的に作ることです。強力なデスクトップシステムでも、比較的スペックの低い小型端末でも十分に動作するような作り方を学びましょう。 -- [XML のパースとシリアライズ](/ja/docs/Parsing_and_serializing_XML) - - : ウェブプラットフォーム上での XML のパースやシリアライズには複数の方法があり、それぞれ長所と短所があります。 + +## モバイルウェブ開発 + +- [モバイルウェブ開発](/ja/docs/Learn/CSS/CSS_layout/Responsive_Design) + - : この記事では、モバイル端末でもしっかりと動作するウェブサイトを設計するのに必要な主な技術の一部についての概要を示しています。 + +## フォント + +- [可変フォントガイド](/ja/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) + - : デザインに可変フォントを使用する方法を見つけましょう。 - [Web Open Font Format (WOFF)](/ja/docs/Web/Guide/WOFF) - : WOFF (Web Open Font Format) はウェブ上で誰もが使えるフリーのフォントファイルフォーマットです。 -- [Unicode Bidirectional Text Algorithm (BiDi)](/ja/docs/Web/Guide/Unicode_Bidrectional_Text_Algorithm) - - : Unicode® BiDi アルゴリズムは Unicode 文章の標準の一つで、ブラウザーが Unicode の文章をレンダリングするにあたってどのように文字を整理すべきかを定めています。このガイドではこのアルゴリズムの概要を説明し、また、特に適切に多言語対応させたい時に、どういう風に制作コンテンツに適用すべきかを説明しています。 -- [FormData オブジェクトの使用](/ja/docs/Web/Guide/Using_FormData_Objects) - - : [`FormData`](/ja/DOM/XMLHttpRequest/FormData) オブジェクトは、`XMLHttpRequest` を使用して送信するためのキーと値のペアのセットを収集可能にします。本来はフォームデータの送信に使用することを想定していましたが、キーのついたデータを伝送するためにフォームとは独立して使用することもできます。伝送されるデータは、フォームのエンコードタイプが "multipart/form-data" に設定されている場合に、`submit()` メソッドで送信する際に使用するデータと同じ形式です。 -- [ユーザ入力とコントロール](/ja/docs/Web/Guide/User_input_methods) - - : 現代的なウェブでのユーザー入力は、単純なマウスとキーボードだけでは語れません。例えばタッチスクリーンなどを考慮する必要があります。この記事では、オープンなウェブアプリがユーザーの入力に対応したり操作を設計したりするにあたっての推奨事項を、よくある質問や、現実的な例、背景にある技術についてのより詳しく知りたい人向けの情報とともに紹介しています。 -- [用語集](/ja/docs/Glossary) - - : ウェブやインターネットに関連する多数の専門用語の定義。 -## 関連情報 +## ユーザーインターフェイス開発 -- [ウェブ技術リファレンス](/ja/docs/Web/Reference) +- [ユーザー入力とコントロール](/ja/docs/Learn/Forms/User_input_methods) + - : 現代的なウェブでのユーザー入力は、単純なマウスとキーボードだけでは語れません。例えばタッチスクリーンなどを考慮する必要があります。この記事では、オープンなウェブアプリがユーザーの入力に対応したり操作を設計したりするにあたっての推奨事項を、よくある質問や、現実的な例、背景にある技術についてのより詳しく知りたい人向けの情報とともに紹介しています。 From e0aac9cee8d4ba17972aa1fc0f97c03bb1462124 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 30 Jul 2024 00:14:55 +0900 Subject: [PATCH 37/57] =?UTF-8?q?2024/07/24=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/guide/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/ja/web/guide/index.md b/files/ja/web/guide/index.md index 0a9fd134838175..6b3e29c9b706c6 100644 --- a/files/ja/web/guide/index.md +++ b/files/ja/web/guide/index.md @@ -45,7 +45,7 @@ MDN ドキュメントには多くのガイドがあります。この記事は - : [`FormData`](/ja/docs/Web/API/FormData) オブジェクトは、{{domxref("Window/fetch", "fetch()")}} を使用して送信するためのキーと値のペアのセットを収集可能にします。本来はフォームデータの送信に使用することを想定していましたが、キーのついたデータを伝送するためにフォームとは独立して使用することもできます。伝送されるデータは、フォームのエンコードタイプが "multipart/form-data" に設定されている場合に、`submit()` メソッドで送信する際に使用するデータと同じ形式です。 - [プログレッシブウェブアプリ](/ja/docs/Web/Progressive_web_apps#core_pwa_guides) - : プログレッシブウェブアプリ (PWA) は、現行のウェブ API と従来のプログレッシブエンハンスメント戦略を使用して、クロスプラットフォームのウェブアプリケーションを作成します。このアプリはあらゆる場所で動作し、ネイティブアプリと同じユーザー使い勝手の利点をもたらすいくつかの機能を提供します。この一連のガイドでは、PWA について知っておく必要があるすべてを教えます。 -- [XML の構文解析とシリアライズ](/ja/docs/Parsing_and_serializing_XML) +- [XML の構文解析とシリアライズ](/ja/docs/Web/XML/Parsing_and_serializing_XML) - : ウェブプラットフォーム上での XML の構文解析やシリアライズには複数の方法があり、それぞれ長所と短所があります。 ## パフォーマンス @@ -62,7 +62,7 @@ MDN ドキュメントには多くのガイドがあります。この記事は - [可変フォントガイド](/ja/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) - : デザインに可変フォントを使用する方法を見つけましょう。 -- [Web Open Font Format (WOFF)](/ja/docs/Web/Guide/WOFF) +- [Web Open Font Format (WOFF)](/ja/docs/Web/CSS/CSS_fonts/WOFF) - : WOFF (Web Open Font Format) はウェブ上で誰もが使えるフリーのフォントファイルフォーマットです。 ## ユーザーインターフェイス開発 From 54aa5923738226caa666acebbc10202f3d918d58 Mon Sep 17 00:00:00 2001 From: RoXoM Date: Sat, 3 Aug 2024 11:07:52 +0800 Subject: [PATCH 38/57] [zh-cn]: create the translation of `CookieChangeEvent` interface (#19845) Co-authored-by: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Co-authored-by: A1lo --- .../api/cookiechangeevent/changed/index.md | 4 +- .../api/cookiechangeevent/deleted/index.md | 4 +- .../zh-cn/web/api/cookiechangeevent/index.md | 59 +++++++++++++++++++ 3 files changed, 65 insertions(+), 2 deletions(-) create mode 100644 files/zh-cn/web/api/cookiechangeevent/index.md diff --git a/files/zh-cn/web/api/cookiechangeevent/changed/index.md b/files/zh-cn/web/api/cookiechangeevent/changed/index.md index 157b8db93f47d2..0ad0460188140d 100644 --- a/files/zh-cn/web/api/cookiechangeevent/changed/index.md +++ b/files/zh-cn/web/api/cookiechangeevent/changed/index.md @@ -2,13 +2,15 @@ title: CookieChangeEvent：changed 属性 slug: Web/API/CookieChangeEvent/changed l10n: - sourceCommit: 08f7d7ef89c04b824fa246e6fd35d47aebef7b51 + sourceCommit: de4bd74771b88bb6352c1136b608811edf24ffda --- {{securecontext_header}}{{APIRef("Cookie Store API")}} {{domxref("CookieChangeEvent")}} 接口的 **`changed`** 只读属性返回包含已被修改的 cookie 的数组。 +请注意，这将排除那些创建的、过期时间在过去的 cookie，因为这些 cookie 会被立即删除。 + ## 值 包含被修改的 cookie 对象的数组。每个对象包含以下属性： diff --git a/files/zh-cn/web/api/cookiechangeevent/deleted/index.md b/files/zh-cn/web/api/cookiechangeevent/deleted/index.md index 3cd1cf7bbd9ca9..baead6add71a7a 100644 --- a/files/zh-cn/web/api/cookiechangeevent/deleted/index.md +++ b/files/zh-cn/web/api/cookiechangeevent/deleted/index.md @@ -2,13 +2,15 @@ title: CookieChangeEvent：deleted 属性 slug: Web/API/CookieChangeEvent/deleted l10n: - sourceCommit: 08f7d7ef89c04b824fa246e6fd35d47aebef7b51 + sourceCommit: de4bd74771b88bb6352c1136b608811edf24ffda --- {{securecontext_header}}{{APIRef("Cookie Store API")}} {{domxref("CookieChangeEvent")}} 接口的 **`deleted`** 只读属性返回已被给定 `CookieChangeEvent` 实例删除的 cookie 数组。 +请注意，这将包括那些创建的、过期时间在过去的 cookie，因为这些 cookie 会被立即删除。 + ## 值 包含已删除 cookie 对象的数组。每个对象包含以下属性： diff --git a/files/zh-cn/web/api/cookiechangeevent/index.md b/files/zh-cn/web/api/cookiechangeevent/index.md new file mode 100644 index 00000000000000..968cb820167067 --- /dev/null +++ b/files/zh-cn/web/api/cookiechangeevent/index.md @@ -0,0 +1,59 @@ +--- +title: CookieChangeEvent +slug: Web/API/CookieChangeEvent +l10n: + sourceCommit: de4bd74771b88bb6352c1136b608811edf24ffda +--- + +{{securecontext_header}}{{APIRef("Cookie Store API")}} + +{{domxref("Cookie Store API", "Cookie 存储 API", "", "nocode")}} 的 **`CookieChangeEvent`** 接口是发生任何 cookie 更改时在 {{domxref("CookieStore")}} 上触发的 {{domxref("CookieStore/change_event", "change")}} 事件的事件类型。 + +> [!NOTE] +> cookie 被新插入的具有相同名称、域和路径的另一个 cookie 替换时，并且不会触发更改事件。 + +{{InheritanceDiagram}} + +## 构造函数 + +- {{domxref("CookieChangeEvent.CookieChangeEvent", "CookieChangeEvent()")}} + - : 创建一个新的 `CookieChangeEvent`。 + +## 实例属性 + +_该接口同样继承来自 {{domxref("Event")}} 的属性。_ + +- {{domxref("CookieChangeEvent.changed")}} {{ReadOnlyInline}} + - : 列出所有新创建的 cookie 的数组。请注意，这将排除那些创建的、过期时间在过去的 cookie，因为这些 cookie 会被立即删除。 +- {{domxref("CookieChangeEvent.deleted")}} {{ReadOnlyInline}} + - : 列出所有已删除的 cookie 的数组，无论是因为它们过期还是因为它们被显式删除。请注意，这将包括那些创建的、过期时间在过去的 cookie。 + +## 实例方法 + +_该接口同样继承来自 {{domxref("Event")}} 的方法。_ + +## 示例 + +在此示例中，当设置 cookie 时，事件监听器会将事件记录到控制台。`CookieChangeEvent` 对象的 {{domxref("CookieChangeEvent.changed","changed")}} 属性包含刚刚设置的 cookie 的对象。 + +```js +cookieStore.addEventListener("change", (event) => { + console.log(event); +}); + +const one_day = 24 * 60 * 60 * 1000; +cookieStore.set({ + name: "cookie1", + value: "cookie1-value", + expires: Date.now() + one_day, + domain: "example.com", +}); +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} From 5ab731dcc415d146f3922ee72c6a5808178921df Mon Sep 17 00:00:00 2001 From: A1lo Date: Sat, 3 Aug 2024 11:13:24 +0800 Subject: [PATCH 39/57] chore(docs): convert the noteblock to GFM syntax (#22901) --- docs/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index b6af32bae66d06..c12fe7e224f27a 100644 --- a/docs/README.md +++ b/docs/README.md @@ -11,7 +11,8 @@ For guidelines relating to specific locales, we have locale-specific docs in sub - [Japanese translation guide / 日本語翻訳ガイド](ja/README.md) - [Korean translation guide / 한국 번역 지침](ko/README.md) -> **Note:** If you want to add a guide to document some specific guidelines for your locale and it does not already appear here, you are welcome to add one, or [talk to the locale teams](https://github.com/mdn/translated-content/blob/main/PEERS_GUIDELINES.md#review-teams) about it. +> [!NOTE] +> If you want to add a guide to document some specific guidelines for your locale and it does not already appear here, you are welcome to add one, or [talk to the locale teams](https://github.com/mdn/translated-content/blob/main/PEERS_GUIDELINES.md#review-teams) about it. ## Do not copy all front matter properties from English pages From 7e01073425f40ef2e5d9a0bf9f40b1257be1bb61 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 4 Aug 2024 10:05:35 +0800 Subject: [PATCH 40/57] zh-CN: create Glossary/Aspect_ratio (#22612) Co-authored-by: 720 <71604450+T34-active@users.noreply.github.com> Co-authored-by: A1lo --- files/zh-cn/glossary/aspect_ratio/index.md | 50 ++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 files/zh-cn/glossary/aspect_ratio/index.md diff --git a/files/zh-cn/glossary/aspect_ratio/index.md b/files/zh-cn/glossary/aspect_ratio/index.md new file mode 100644 index 00000000000000..72c6b6e0ecefab --- /dev/null +++ b/files/zh-cn/glossary/aspect_ratio/index.md @@ -0,0 +1,50 @@ +--- +title: 纵横比 +slug: Glossary/Aspect_ratio +l10n: + sourceCommit: 1197521ff42256b9d298144330cfd5b6e0d98c33 +--- + +{{GlossarySidebar}} + +**纵横比**是元素或{{glossary("viewport", "视口")}}的宽度和高度之间的比例关系，通常用比例或两个数字表示。 + +拥有纵横比，无论是像图片和视频这样的固有纵横比，还是外部设置的，都能保持元素的预期比例。你还可以查询元素或视口的纵横比，这对于开发灵活的组件和布局非常有用。 + +在 CSS 中，{{cssxref("ratio")}} 数据类型写作 `width / height`（例如，正方形的 `1 / 1`，宽屏的 `16 / 9`），或者是一个数字，此时该数字表示宽度，高度为 `1`。 + +```css +.wideBox { + aspect-ratio: 5 / 2; +} +.tallBox { + aspect-ratio: 0.25; +} +``` + +在 SVG 中，纵横比由四个值的 [`viewBox`](/zh-CN/docs/Web/SVG/Attribute/viewBox) 属性定义。前两个值是 SVG 可以具有的最小 X 和 Y 原点坐标，后两个值是宽度和高度，用于设置 SVG 的纵横比。 + +```svg + +``` + +在 JavaScript API 中，查询纵横比返回一个双精度浮点数，表示宽度除以高度的商。你还可以使用 JavaScript 设置元素的纵横比。例如，使用 {{domxref("MediaStreamTrack")}} 或 {{domxref("MediaTrackSettings")}} 字典的 [`aspectRatio`](/zh-CN/docs/Web/API/MediaTrackSettings/aspectRatio) 属性为 1920x1080 视频设置纵横比约束，计算为 16/9，或 1920/1080，即 `1.7777777778`： + +```js +const constraints = { + width: 1920, + height: 1080, + aspectRatio: 1.777777778, +}; + +myTrack.applyConstraints(constraints); +``` + +## 参见 + +- CSS {{cssxref("aspect-ratio")}} 属性 +- [理解纵横比](/zh-CN/docs/Web/CSS/CSS_box_sizing/Understanding_aspect-ratio)教程 +- [CSS 盒子大小设置](/zh-CN/docs/Web/CSS/CSS_box_sizing)模块 +- 相关术语： + - {{glossary("intrinsic size", "固有尺寸")}} +- CSS {{cssxref("min-content")}}、{{cssxref("max-content")}} 和 {{cssxref("fit-content")}} 属性值 From 9e355041adcc9973bd519d68e662838f51febab1 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Sun, 4 Aug 2024 05:38:06 +0100 Subject: [PATCH 41/57] Markdownlint auto-cleanup for ja (#22896) * ja: auto-fix Markdownlint issues * Update files/ja/web/css/-moz-force-broken-image-icon/index.md Co-authored-by: Hoarfroster * Update files/ja/web/html/attributes/placeholder/index.md Co-authored-by: Hoarfroster --------- Co-authored-by: Masahiro FUJIMOTO Co-authored-by: Hoarfroster --- files/ja/web/css/-moz-force-broken-image-icon/index.md | 3 +-- files/ja/web/html/attributes/placeholder/index.md | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/files/ja/web/css/-moz-force-broken-image-icon/index.md b/files/ja/web/css/-moz-force-broken-image-icon/index.md index 94d749e3d8cfc6..1fede271030a75 100644 --- a/files/ja/web/css/-moz-force-broken-image-icon/index.md +++ b/files/ja/web/css/-moz-force-broken-image-icon/index.md @@ -51,8 +51,7 @@ img { {{EmbedLiveSample('Examples','125','125')}} -> [!NOTE] -> `-moz-force-broken-image-icon` の値に `1` を指定した場合、その画像に width と height を明示的に指定しない限り、壊れた画像アイコンは表示されず、 `alt` 属性も非表示になります。 +> **メモ:** `-moz-force-broken-image-icon` の値に `1` を指定した場合、その画像に width と height を明示的に指定しない限り、壊れた画像アイコンは表示されず、 `alt` 属性も非表示になります。 ## メモ diff --git a/files/ja/web/html/attributes/placeholder/index.md b/files/ja/web/html/attributes/placeholder/index.md index 914265deafbec0..e74cf737c2303c 100644 --- a/files/ja/web/html/attributes/placeholder/index.md +++ b/files/ja/web/html/attributes/placeholder/index.md @@ -13,8 +13,7 @@ l10n: `placeholder` 属性は、入力の種類 `{{HTMLElement("input/text", "text")}}`、`{{HTMLElement("input/search", "search")}}`、`{{HTMLElement("input/url", "url")}}`、`{{HTMLElement("input/tel", "tel")}}`、`{{HTMLElement("input/email", "email")}}`、`{{HTMLElement("input/password", "password")}}` で用いることができます。`{{HTMLElement("textarea")}}` 要素でも用いることができます。以下の[例](#例)では、入力フィールドで期待する形式を示すために `placeholder` 属性を用いています。 -> [!NOTE] -> `placeholder` 属性にはラインフィード (LF) やキャリッジリターン (CR) を含めることはできません。これらが含まれる場合は、プレースホルダーテキストはクリップされます。 +> **メモ:** `placeholder` 属性にはラインフィード (LF) やキャリッジリターン (CR) を含めることはできません。これらが含まれる場合は、プレースホルダーテキストはクリップされます。 ## アクセシビリティの懸念 From 4bc3f033d48ae5d51e94e9ec93386f0a632dce9e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 25 Jun 2024 00:41:59 +0900 Subject: [PATCH 42/57] =?UTF-8?q?2024/04/17=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../understanding_wcag/operable/index.md | 466 ++++++++++++++++-- 1 file changed, 427 insertions(+), 39 deletions(-) diff --git a/files/ja/web/accessibility/understanding_wcag/operable/index.md b/files/ja/web/accessibility/understanding_wcag/operable/index.md index ed73ab45a496d8..56f6078683cbeb 100644 --- a/files/ja/web/accessibility/understanding_wcag/operable/index.md +++ b/files/ja/web/accessibility/understanding_wcag/operable/index.md @@ -1,6 +1,8 @@ --- title: 操作可能 slug: Web/Accessibility/Understanding_WCAG/Operable +l10n: + sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc --- {{AccessibilitySidebar}} @@ -14,12 +16,77 @@ slug: Web/Accessibility/Understanding_WCAG/Operable このガイドラインは、キーボード制御に頼るユーザーがコアウェブサイト機能にアクセスできるように、他の手段（例えば、マウス）に加えてキーボードを介してそれらを利用可能にする必要性をカバーする。 -| 達成基準 | 基準への準拠方法 | 実用的なリソース | -| ------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| 2.1.1 キーボード (A) | キーボードを使用して行えない場合（例えば、フリーハンド描画）を除き、全ての機能はキーボード制御を使用してアクセス可能であるべきです。 可能な場合は組み込みのコントロールを使用するべきで（例えば、フォームコントロール間のタブ移動）、必要な場合にのみカスタム機能を組み込むべきです。 | [UI コントロール](/ja/docs/Learn/Accessibility/HTML#ui_コントロール)と[キーボードアクセシビリティを呼び戻すように盛り込む](/ja/docs/Learn/Accessibility/HTML#キーボードアクセシビリティを呼び戻すように盛り込む)を参照してください。 | -| 2.1.2 キーボードを閉じ込めない (A) | キーボードを使用してある機能のセクションに入るときは、キーボード**のみ**を使用してそのセクションから再び出ることができるべきです。 例えば、フォーカスのあるボタンの上で Enter / Return を押してオプションウィンドウを開いたら、キーボードを使ってそのウィンドウを再び閉じてメインコンテンツに戻ることができるべきです。キーボードユーザーをアプリの特定のセクションに閉じ込めないようにするために、これは非常に重要です。 | | -| 2.1.3 キーボード — 全機能 (AAA) | これは、基準 2.1.1 を超えるさらなるステップです。 AAA 準拠を達成するために、全ての機能はキーボードコントロールを使用してアクセス可能であるべきです — 例外なく。 | [UI コントロール](/ja/docs/Learn/Accessibility/HTML#ui_コントロール)と[キーボードアクセシビリティを呼び戻すように盛り込む](/ja/docs/Learn/Accessibility/HTML#キーボードアクセシビリティを呼び戻すように盛り込む)を参照してください。 | -| 2.1.4 文字キーショートカット (A) [2.1 で追加](https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1)（英語） | 単一文字キーショートカットが存在する場合は、少なくとも次の 1 つが当てはまります。 単一文字キーショートカットは、オフにする、再マップする、または関連するユーザーインターフェイス・コンポーネントにフォーカスがあるときにのみアクティブにすることができます。 | [文字キーショートカットを理解する](https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts.html)（英語） | +
    前提条件：前提条件: 主要な HTML、CSS、と JavaScript 言語
    目的：目的: 端末／コマンドラインとは何か、学ぶべき基本的なコマンドは何か、新しいコマンドラインツールをインストールする方法を理解します。
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    達成基準基準への準拠方法実用的なリソース
    2.1.1 キーボード (A) + キーボードを使用して行えないもの（例えば、フリーハンド描画）を除き、全ての機能はキーボード制御を使用してアクセス可能であるべきです。 + 可能な限り組み込みのコントロールを使用するべきで（例えば、フォームコントロール間のタブ移動）、必要な場合にのみカスタム機能を組み込むべきです。 + + UI コントロールとキーボードアクセシビリティを呼び戻すように盛り込むを参照してください。 +
    2.1.2 キーボードを閉じ込めない (A) +

    + キーボードを使用してある機能のセクションに入るときは、キーボード*のみ*を使用してそのセクションから再び出ることができるべきです。 例えば、フォーカスのあるボタンの上で Enter / Return を押してオプションウィンドウを開いたら、キーボードを使ってそのウィンドウを再び閉じてメインコンテンツに戻ることができるようにすべきです。 +

    +

    + キーボードユーザーをアプリの特定のセクションに閉じ込めないようにするために、これは非常に重要です。 +

    +
    2.1.3 キーボード — 全機能 (AAA) + これは、基準 2.1.1 を超えるさらなる段階です。 AAA 準拠を達成するためには、全ての機能はキーボード操作を使用してアクセス可能であるべきです。例外はありません。 + + UI コントロールとキーボードアクセシビリティを呼び戻すように盛り込むを参照してください。 +
    + 2.1.4 文字キーショートカット (A) + 2.1 で追加（英語） + + 単一文字キーショートカットが存在する場合は、単一文字キーショートカットをオフにするか、再マップするか、関連するユーザーインターフェイス・コンポーネントにフォーカスがあるときにのみアクティブにするか、いずれか一つ以上ができるようにします。 + + 文字キーショートカットを理解する（英語） +
    > **メモ:** [ガイドライン 2.1: キーボードアクセス可能: キーボードから全ての機能を利用可能にする](https://www.w3.org/TR/WCAG21/#keyboard-accessible)（英語）に関する WCAG の説明も参照してください。 @@ -27,14 +94,82 @@ slug: Web/Accessibility/Understanding_WCAG/Operable このガイドラインでは、機能に制限時間があるかもしれない状況について説明します。 例えば、セキュリティ上の理由から、購入を制限時間内に完了する必要がある場合があります。 -| 達成基準 | 基準への準拠方法 | 実用的なリソース | -| ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | -| 2.2.1 タイミングは調整可能 (A) | 制限時間付きの機能の場合（例えば、ホテルやフライトの予約を完了するには制限時間があることが多い）、ユーザーには、制限時間の調整、延長、または無効化を許可するコントロールを与えるべきです。これに対する例外は、20 時間を超える制限時間のある活動、リアルタイムイベント（例えば、ライブマルチプレイヤーゲーム）、および制限時間が必要で、無効にされた場合に無効になるその他の活動です。 | | -| 2.2.2 一時停止、停止、非表示 (A) | 自動的に開始され、5 秒以上続き、他のコンテンツと一緒に表示されるコンテンツを移動や点滅させるには、一時停止、停止、または非表示にするためのコントロールを提供するべきです。 これは、体験に不可欠なコンテンツの移動や点滅には適用されません。 例としては、テキストのスクロールと動画があります。自動的に開始され、他のコンテンツと一緒に表示される自動更新情報の場合は、一時停止、停止、または非表示にするため、あるいは更新頻度を制御するためのコントロールを提供するべきです。 これは、体験に不可欠なコンテンツの自動更新には当てはまりません。 例としては、回転木馬や回転アナウンスがあります。 | | -| 2.2.3 制限時間なし (AAA) | これは基準 2.2.1 に基づいており、AAA 適合に合格したいコンテンツには制限時間がないことを述べています。 | | -| 2.2.4 中断を抑止する (AAA) | アラートやインタースティシャル広告などによる中断には、緊急アラートでない限り、それらを抑制または延期するための機能を用意するべきです。 | | -| 2.2.5 再認証 (AAA) | ウェブアプリの使用中に認証セッションが期限切れになった場合、ユーザーはデータを失うことなく再認証して使用を続けることができます。 | | -| 2.2.6 タイムアウト (AAA) [2.1 で追加](https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1)（英語） | タイムアウトした場合（ユーザーの非活動状態が原因で）、プロセスの開始時にユーザーに警告するので、タイムアウトが存在していても驚くことはありません（または、20 時間の非活動状態の後にのみタイムアウトするようにします）。 | [タイムアウトを理解する](https://www.w3.org/WAI/WCAG21/Understanding/timeouts.html)（英語） | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    達成基準基準への準拠方法実用的なリソース
    2.2.1 タイミングは調整可能 (A) +

    + 制限時間付きの機能の場合（例えば、ホテルやフライトの予約を完了するには制限時間があることが多い）、ユーザーには、制限時間の調整、延長、または無効化を許可するコントロールを与えるべきです。 +

    +

    + これに対する例外は、20 時間を超える制限時間のある活動、リアルタイムイベント（例えば、ライブマルチプレイヤーゲーム）、および制限時間が必要で、無効にされた場合に意味を失うその他の活動です。 +

    +
    2.2.2 一時停止、停止、非表示 (A) +

    + 自動的に開始され、5 秒以上続き、他のコンテンツと一緒に表示されるコンテンツを移動や点滅させるには、一時停止、停止、または非表示にするためのコントロールを提供するべきです。 これは、体験に不可欠なコンテンツの移動や点滅には適用されません。 例としては、テキストのスクロールと動画があります。 +

    +

    + 自動的に開始され、他のコンテンツと一緒に表示される自動更新情報の場合は、一時停止、停止、または非表示にするため、あるいは更新頻度を制御するためのコントロールを提供するべきです。 これは、体験に不可欠なコンテンツの自動更新には当てはまりません。 例としては、回転木馬や回転アナウンスがあります。 +

    +
    2.2.3 制限時間なし (AAA) + これは基準 2.2.1 に基づいており、AAA 適合に合格したいコンテンツには制限時間がないことを述べています。 +
    2.2.4 中断を抑止する (AAA) + アラートやインタースティシャル広告などによる中断には、緊急アラートでない限り、それらを抑制または延期するための機能を用意するべきです。 +
    2.2.5 再認証 (AAA) + ウェブアプリの使用中に認証セッションが期限切れになった場合、ユーザーはデータを失うことなく再認証して使用を続けることができます。 +
    + 2.2.6 タイムアウト (AAA) + 2.1 で追加（英語） + +

    + タイムアウトした場合（ユーザーの非活動状態が原因で）、プロセスの開始時にユーザーに警告するので、タイムアウトが存在していても驚くことはありません（または、20 時間の非活動状態の後にのみタイムアウトするようにします）。 +

    +     		+ タイムアウトを理解する（英語） +
    > **メモ:** [ガイドライン 2.2: 十分な時間: コンテンツを読んで使用するのに十分な時間をユーザーに提供する](https://www.w3.org/TR/WCAG21/#enough-time)（英語）に関する WCAG の説明も参照してください。 @@ -42,11 +177,32 @@ slug: Web/Accessibility/Understanding_WCAG/Operable これは、変更しないとてんかんなどの症状のあるユーザーに発作を起こす可能性がある、または前庭障碍などの症状のあるユーザーに身体的反応（めまいなど）を引き起こす可能性があるコンテンツを意味します。 -| 達成基準 | 基準への準拠方法 | 実用的なリソース | -| ----------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -| 2.3.1 3 回の閃光、またはしきい値を下回る (A) | コンテンツに 1 秒間に 3 回以上の閃光を放つアスペクトが含まれていない、または閃光を放つコンテンツが許容できる[閃光および赤色閃光のしきい値](http://www.w3.org/TR/WCAG20/#general-thresholddef)（英語）を下回っている。 | | -| 2.3.2 3 回の閃光 (AAA) | コンテンツには、1 秒間に 3 回以上の閃光を放つアスペクトは含まれていません。 | | -| 2.3.3 インタラクションによるアニメーション (AAA) [2.1 で追加](https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1)（英語） | ユーザーがインタラクションによるアニメーションを無効にできるようにする（アニメーションが必須でない限り）。 | [インタラクションによるアニメーションを理解する](https://www.w3.org/TR/WCAG21/#animation-from-interactions)（英語） | + + + + + + + + + + + + + + + + + + + + + + + + + +
    達成基準基準への準拠方法実用的なリソース
    2.3.1 点滅は 3 回、またはしきい値未満にする (A)コンテンツには、1 秒間に 3 回以上点滅する局面がないか、または点滅するコンテンツが受け入れられる点滅および赤色点滅のしきい値を下回るようにする。
    2.3.2 点滅は 3 回 (AAA)コンテンツには、1 秒間に 3 回以上点滅する局面がないようにする。
    2.3.3 操作によるアニメーション (AAA) 2.1 で追加（英語）ユーザーが操作によるアニメーションを無効にできるようにする（アニメーションが必須でない限り）。操作によるアニメーションを理解する（英語）
    > **メモ:** [ガイドライン 2.3: 発作と身体的反応: 発作や身体的反応を引き起こすことが知られている方法でコンテンツをデザインしないでください](https://www.w3.org/TR/WCAG21/#seizures-and-physical-reactions)（英語）に関する WCAG の説明も参照してください。 @@ -54,18 +210,204 @@ slug: Web/Accessibility/Understanding_WCAG/Operable このガイドラインの下での適合基準は、ユーザーが自分自身を指向し、サイトの現在のページや他のページで探しているコンテンツと機能を見つけることが期待できる方法に関連しています。 -| 達成基準 | 基準への準拠方法 | 実用的なリソース | -| ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| 2.4.1 ブロックのバイパス (A) | 繰り返される機能（会社のロゴやナビゲーションなど）を通り過ぎて、ユーザーがページにあるメインコンテンツや機能に直接スキップできるようにするメカニズムを提供するべきです。 これはしばしば、スキップリンク（"skip links"）を使用して達成されます — メインコンテンツにリンクする CSS によって隠されたリンクはページのソースのトップに置かれます。見出しと意味論のコンテナの適切な構造（例えば、{{htmlelement("section")}}、{{htmlelement("aside")}} など）がナビゲートするために提供されている場合は、追加のスキップリンクは必要ありません。 | スキップリンクのセクションを追加する必要があります。 | -| 2.4.2 ページタイトルを含める (A) | 各ウェブページには有益な {{htmlelement("title")}} を含めるべきです。 そのコンテンツは、ページのコンテンツや目的を説明しています。 | [タイトルの追加](/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title)を参照してください。 | -| 2.4.3 論理的なフォーカスの順序 (A) | フォーカス可能なページ機能（例えば、リンク、ボタン、フォーム入力）の「タブ順序」は論理的に意味があり、そのページはまだ非晴眼者でもキーボードのユーザーでも使用可能であることを意味します。 | コントロールへのタブ移動に関する一般的なアドバイスについては、[UI コントロール](/ja/docs/Learn/Accessibility/HTML#ui_コントロール)を参照してください。 要素を独特なレイアウトに配置する必要がある場合は、ソースの順序が適切であることを確認してから、[配置](/ja/docs/Learn/CSS/CSS_layout/Positioning)などの CSS 機能を使用してレイアウトを扱うことをお勧めします。 | -| 2.4.4 リンクの目的（コンテキストにそった）（A） | リンクの目的や行き先は、リンクテキストから、またはその周囲（例えば、周囲のテキスト）から決定することができます。 例外は、リンクの目的が全てのユーザーにとってあいまいな場合です（これに関する有用な説明については、[一般的にユーザーにとってあいまい](https://www.w3.org/TR/WCAG20/#ambiguouslinkdef)（英語）を参照してください）。 | [意味の通るテキストラベル](/ja/docs/Learn/Accessibility/HTML#意味の通るテキストラベル)を参照してください。 また、同じテキストの複数のコピーが異なる場所にリンクされている場合は最小限に抑えるべきです。 これはスクリーンリーダーのユーザーにとって問題となる可能性があり、リンクの一覧がコンテキストから外れて表示されることがよくあります — 全てが「ここをクリック」、「ここをクリック」、「ここをクリック」とラベル付けされたいくつかのリンクは混乱を招くでしょう。 | -| 2.4.5 複数のナビゲーションメカニズム (AA) | ウェブサイト上のページを見つけるために少なくとも二つの一般的なナビゲーションメカニズム、例えば、ナビゲーションメニュー、パンくずリスト、サイト検索、サイトマップ、関連リンクのリストなどを提供するべきです。これに対する唯一の例外は、ページがプロセスの 1 ステップである場合で、論理的には前後のステップへのリンクのみを持つべきです。 | これらのメカニズムのほとんどは、単純な HTML 機能を使用して作成できます。 例えば、[検索フィールド](/ja/docs/Learn/HTML/Forms/The_native_form_widgets#Search_field)、[ナビゲーションメニューの作成](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#アクティブラーニング_ナビゲーションメニューの作成)、[ボタンとしてのリンクのスタイリング](/ja/docs/Learn/CSS/Styling_text/Styling_links#Styling_links_as_buttons)を参照してください。 | -| 2.4.6 見出しとラベル (AA) | 見出し（例えば、{{htmlelement("h2")}}）および {{htmlelement("label")}} 要素は、それらが説明していると思われるコンテンツおよびフォーム要素の目的を明確に説明しています。 | [UI コントロール](/ja/docs/Learn/Accessibility/HTML#ui_コントロール)、[意味の通るテキストラベル](/ja/docs/Learn/Accessibility/HTML#意味の通るテキストラベル)、[見出しと段落の基本](/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_Headings_and_Paragraphs)、[\