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 diff --git a/files/es/web/javascript/reference/template_literals/index.md b/files/es/web/javascript/reference/template_literals/index.md index 51ff68a0e63951..60251dbff0981e 100644 --- a/files/es/web/javascript/reference/template_literals/index.md +++ b/files/es/web/javascript/reference/template_literals/index.md @@ -40,7 +40,7 @@ En caso de querer escapar una comilla o tilde invertida en una plantilla literal Los caracteres de fin de línea encontrados forman parte de la plantilla literal. -Utilizando cadenas de caracteres normales, sería necesario utilizar la siguiente sintaxes para producir cadenas de más de una línea: +Utilizando cadenas de caracteres normales, sería necesario utilizar la siguiente sintaxis para producir cadenas de más de una línea: ```js console.log("línea 1 de cadena de texto\n" + "línea 2 de cadena de texto"); diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 83f77a3af3827d..eea31b5a4c0811 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -2379,7 +2379,6 @@ /ja/docs/Security/混在コンテンツ /ja/docs/Web/Security/Mixed_content /ja/docs/Server-sent_events /ja/docs/Web/API/Server-sent_events /ja/docs/Server-sent_events/Using_server-sent_events /ja/docs/Web/API/Server-sent_events/Using_server-sent_events -/ja/docs/Setting_up_extension_development_environment /ja/docs/orphaned/Setting_up_extension_development_environment /ja/docs/The_DOM_and_JavaScript /ja/docs/Web/JavaScript/JavaScript_technologies_overview /ja/docs/The_Importance_of_Correct_HTML_Commenting /ja/docs/orphaned/The_Importance_of_Correct_HTML_Commenting /ja/docs/The_X-Frame-Options_response_header /ja/docs/Web/HTTP/Headers/X-Frame-Options diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 59a91991cf2371..6aea74f837a4da 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -30404,10 +30404,6 @@ "modified": "2019-03-24T00:06:00.366Z", "contributors": ["ethertank", "Potappo"] }, - "orphaned/Setting_up_extension_development_environment": { - "modified": "2019-03-23T23:54:13.028Z", - "contributors": ["K.Nakamura", "teoli", "Mgjbot", "Shoot"] - }, "orphaned/The_Importance_of_Correct_HTML_Commenting": { "modified": "2019-03-23T23:53:28.601Z", "contributors": ["SphinxKnight", "teoli", "Mgjbot", "Kohei"] 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 の[コールバック]() +- [コールバック]()（ウィキペディア） 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..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 @@ -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 を使用する方法について学ぶこと。 @@ -585,9 +585,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 +737,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 +764,7 @@ self.addEventListener("fetch", (e) => { ## まとめ -これで終わりです。クライアント側での保存の技術についてのこの概要を、皆さんが有用だと思ってくださったのであれば良いな、と望んでいます。 +これで終わりです。クライアント側ストレージ技術の概要が有益なものであったことを期待しています。 ## 関連情報 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 つの新しいものを追加します。 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; 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) ツールを使用して、ファイルをローカルで実行できるようになりました。 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) へのリンクを生成します。 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..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 @@ -2,12 +2,12 @@ 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 の構造を理解しやすくするために翻訳しておきます。 +> **注目:** **訳注:** 翻訳記事には `page-type` キーを設定しないでください。英語版記事に設定されたキーが使用されます。以下の記事は、MDN Web Docs の構造を理解しやすくするために翻訳しておきます。 フロントマターの `page-type` キーは MDN ページ型を記述します。 これにより、 MDN コンテンツツールはコンテンツチェックやサイドバーの整理を自動化することができます。 @@ -29,8 +29,8 @@ JavaScript や CSS など、サイトの主要な領域にはそれぞれドメ 以下のページ型は MDN の特定の技術分野に依存するものではありません。 -- `guide`: 特有の構造を持たない一般的なガイドページです。[概要ページ](#概要ページ)を参照してください。 -- `landing-page`: 他のページへのリンクが掲載されている、主にナビゲーションの補助として機能するページ。[ランディングページ](#ランディングページ)を参照してください。 +- `guide`: 特有の構造を持たない一般的なガイドページです。 +- `landing-page`: 他のページへのリンクが掲載されている、主にナビゲーションの補助として機能するページ。 - `how-to`: 主に目的志向の手引き記事として機能するページ。 - `tutorial`: 学習指向の記事の概要ページです。 - `tutorial-chapter`: 複数部構成のチュートリアルの一部であるページ。 @@ -60,7 +60,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 +139,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 +155,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 のページ型 diff --git a/files/ja/mozilla/firefox/releases/111/index.md b/files/ja/mozilla/firefox/releases/111/index.md index 5024b81360ac23..edce8229857eb1 100644 --- a/files/ja/mozilla/firefox/releases/111/index.md +++ b/files/ja/mozilla/firefox/releases/111/index.md @@ -56,7 +56,7 @@ l10n: このファイルシステムのデータはオリジンに固有です。ファイルへアクセスするために許可プロンプトは必須でなく、またサイトやオリジンがストレージを削除するとデータが消去されます。 OPFS はメインスレッドまたは worker で `navigator.storage.getDirectory()` を呼び出すことにより、{{domxref("StorageManager.getDirectory()")}} メソッドでアクセスできます。 詳しくは [Firefox bug 1785123](https://bugzil.la/1785123) をご覧ください。 -- HTTP の [`Authorization`](/ja/docs/Web/HTTP/Headers/Authorization) ヘッダーを、クロスオリジンのリダイレクトが発生する [`fetch()`](/ja/docs/Web/API/fetch) および [`XMLHttpRequest`](/ja/docs/Web/API/XMLHttpRequest) 要求から削除しました (`fetch()` のヘッダーは、[`option.headers`](/ja/docs/Web/API/fetch#headers) 引数を使用して開発者が追加できます)。 +- HTTP の [`Authorization`](/ja/docs/Web/HTTP/Headers/Authorization) ヘッダーを、クロスオリジンのリダイレクトが発生する [`fetch()`](/ja/docs/Web/API/Window/fetch) および [`XMLHttpRequest`](/ja/docs/Web/API/XMLHttpRequest) 要求から削除しました (`fetch()` のヘッダーは、[`option.headers`](/ja/docs/Web/API/Window/fetch#headers) 引数を使用して開発者が追加できます)。 詳しくは [Firefox bug 1802086](https://bugzil.la/1802086) をご覧ください。 #### DOM diff --git a/files/ja/mozilla/firefox/releases/57/index.md b/files/ja/mozilla/firefox/releases/57/index.md index 3630672d714588..c290e33e38897c 100644 --- a/files/ja/mozilla/firefox/releases/57/index.md +++ b/files/ja/mozilla/firefox/releases/57/index.md @@ -71,7 +71,7 @@ _変更なし。_ #### 新規 API - {{DOMxRef("PerformanceObserver")}} API をデフォルトで有効にしました ([Firefox バグ 1386021](https://bugzil.la/1386021))。 -- {{DOMxRef("AbortController")}} および {{DOMxRef("AbortSignal")}} インターフェイス (Abort API) を追加しました。必要に応じて、DOM リクエスト ([fetch リクエスト](/ja/docs/Web/API/fetch) など) を中止できます ([Firefox バグ 1378342](https://bugzil.la/1378342))。 +- {{DOMxRef("AbortController")}} および {{DOMxRef("AbortSignal")}} インターフェイス (Abort API) を追加しました。必要に応じて、DOM リクエスト ([fetch リクエスト](/ja/docs/Web/API/Window/fetch) など) を中止できます ([Firefox バグ 1378342](https://bugzil.la/1378342))。 - [Storage API](/ja/docs/Web/API/Storage_API) を実装して、デフォルトで有効にしました ([Firefox バグ 1399038](https://bugzil.la/1399038))。 #### DOM diff --git a/files/ja/orphaned/setting_up_extension_development_environment/index.md b/files/ja/orphaned/setting_up_extension_development_environment/index.md deleted file mode 100644 index e18e255d0a7b35..00000000000000 --- a/files/ja/orphaned/setting_up_extension_development_environment/index.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Setting up extension development environment -slug: orphaned/Setting_up_extension_development_environment ---- - -この記事では、あなたの Mozilla アプリケーションにおいて拡張機能の開発を容易にするためのノウハウを提案します。 - -### 開発用の設定 - -これらの設定はパフォーマンスの低下と引き換えにデバッグを簡単にします。 - -設定を変更するための情報は [設定ファイルの編集](https://www.mozilla.org/support/firefox/edit) を参照して下さい。これらの設定の中にはデフォルトで `about:config` にリストアップされていないものもあり、新しい (真偽値) エントリを作成しなければならない場合があるので注意して下さい。 - -これらの変更を行う前に、下記の「開発用のプロファイル」を参考にして別個の開発用プロファイルを作成してください。 - -- **javascript.options.showInConsole** = **true**。chrome ファイルでのエラーを [エラーコンソール](/ja/Error_Console) に出力します。 -- **nglayout.debug.disable_xul_cache** = **true**。XUL キャッシュを無効にして、再起動しなくてもウィンドウとダイアログの変更が反映されるようにします。これは [JAR ファイルの代わりにディレクトリを使用](#using_directories_rather_than_jars) している事が前提です。この設定が有効であっても、XUL オーバーレイに対する変更を反映させるにはオーバーレイされているドキュメントを再読み込みする必要があります。 -- **browser.dom.window\.dump.enabled** = **true**。標準コンソールへの出力をする為の dump() 文の使用を可能にします。詳しくは {{ Domxref("window.dump") }} を参照してください。特権スクリプトからならば `nsIConsoleService` を使用することも出来ます。 -- **javascript.options.strict** = **true**。エラーコンソールでの厳密な警告を有効にします。開発の際にこの設定を無効にしている人は多いので、あなた自身の拡張機能の警告に加えて彼らのコードによる警告が大量に表示されるようになるでしょうから注意が必要です。[Console2](https://addons.mozilla.org/en-US/firefox/addon/1815) を使えばそれらをフィルタリングできます。 - -### 開発のための拡張機能 - -これらの拡張機能はあなたの開発の手助けとなるでしょう。 - -- カスタムインストールで追加できる DOM Inspector -- JavaScript デバッガ [Venkman](https://addons.mozilla.org/en-US/firefox/addon/216) -- [Extension Developer's Extension](https://ted.mielczarek.org/code/mozilla/extensiondev/) -- [Console2](https://addons.mozilla.org/en-US/firefox/addon/1815) -- [Chrome List](https://addons.mozilla.org/firefox/4453) -- [Firebug](https://addons.mozilla.org/en-US/firefox/addon/1843) -- [Execute JS](https://addons.mozilla.org/de/firefox/addon/1729) -- [XPCOMViewer](http://xpcomviewer.mozdev.org), XPCOM インスペクタ - -### 開発用のプロファイル - -開発用の設定や開発用の拡張機能によるパフォーマンスの低下や、個人データの漏洩を防ぐためには、開発作業のための別個のプロファイルを作成するのがいいでしょう。 - -`-no-remote` パラメータを付けて Firefox を起動すると、別々のプロファイルを使った二つの Firefox インスタンスを起動させることが出来ます。例えば、次のコマンドを使うことで、「通常の」 Firefox がすでに起動しているかどうかに関わらず、開発用のプロファイルで Firefox を起動させることが出来ます。 (あなたの開発用プロファイルの名前が "dev" であると仮定しています) - -``` -start "" "%ProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev -``` - -既定のプロファイルで Firefox を起動させるには、通常どおり "firefox" または "firefox -P default" を実行します。 - -### コード置き場の変更 - -変更を加えるたびに拡張機能を何度も再インストールしたり、アンインストールの際に誤ってソースファイルを削除してしまうのを防ぐために、ソースファイルをプロファイルの外の任意の場所に置く事が出来ます。 - -1. 拡張機能に含まれる install.rdf から拡張機能の ID を見つける -2. プロファイルディレクトリ/extensions/ に、ファイル名をその ID にしたファイルを作成する (例: \`your_profile_directory/extensions/{46D1B3C0-DB7A-4b1a-863A-6EE6F77ECB58}\`) ( プロファイルディレクトリの場所]) -3. そのファイルの内容に install.rdf ファイルを格納するフォルダへのパスを書き込む (例: \`/full/path/to/yourExtension\` Windows ユーザーはスラッシュではなくバックスラッシュを使ってください。 例: \`\full\path\to\yourExtension\`) -4. ファイルをプロファイルの extensions フォルダに置いて、アプリケーションを再起動する - -### JAR ファイルの代わりにディレクトリを使用 - -拡張機能の chrome を JAR ファイルとディレクトリのどちらにパッケージングするかは自由ですが、ディレクトリを使った方が開発は簡単です。リリースする時のために JAR 構造を選んだとしても、chrome.manifest ファイルを編集すればディレクトリ構造で開発することが出来ます。例えばこうなっているのを - -``` -content myExtension jar:chrome/myExtension.jar!/content/ -``` - -こうします。 - -``` -content myExtension chrome/content/ -``` 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)、[\

    例

    +## 例 ### HTML @@ -45,13 +49,13 @@ img { ### 結果 -{{ EmbedLiveSample('Examples','125','125','/files/4619/broken%20image%20link.png') }} +{{EmbedLiveSample('Examples','125','125')}} > **メモ:** `-moz-force-broken-image-icon` の値に `1` を指定した場合、その画像に width と height を明示的に指定しない限り、壊れた画像アイコンは表示されず、 `alt` 属性も非表示になります。 ## メモ -- このプロパティは Geckoベースのブラウザでのみ使用できます。 +- このプロパティは Gecko ベースのブラウザーでのみ使用できます。 - このプロパティの使用は非推奨です。代わりに適切な `alt` 属性を使用してください。 ## 仕様書 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(); // このコントローラーに関連付けられたすべてのイベントハンドラーを削除 ``` - + diff --git a/files/ja/web/guide/index.md b/files/ja/web/guide/index.md index fb2bb66a8763db..6b3e29c9b706c6 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/Web/XML/Parsing_and_serializing_XML) + - : ウェブプラットフォーム上での XML の構文解析やシリアライズには複数の方法があり、それぞれ長所と短所があります。 + +## パフォーマンス + +- [最適化とパフォーマンス](/ja/docs/Web/Performance) - : 現代的なウェブアプリやウェブサイトを構築する時に重要なのは、コンテンツをすばやく効率的に作ることです。強力なデスクトップシステムでも、比較的スペックの低い小型端末でも十分に動作するような作り方を学びましょう。 -- [XML のパースとシリアライズ](/ja/docs/Parsing_and_serializing_XML) - - : ウェブプラットフォーム上での XML のパースやシリアライズには複数の方法があり、それぞれ長所と短所があります。 -- [Web Open Font Format (WOFF)](/ja/docs/Web/Guide/WOFF) + +## モバイルウェブ開発 + +- [モバイルウェブ開発](/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/CSS/CSS_fonts/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) + - : 現代的なウェブでのユーザー入力は、単純なマウスとキーボードだけでは語れません。例えばタッチスクリーンなどを考慮する必要があります。この記事では、オープンなウェブアプリがユーザーの入力に対応したり操作を設計したりするにあたっての推奨事項を、よくある質問や、現実的な例、背景にある技術についてのより詳しく知りたい人向けの情報とともに紹介しています。 diff --git a/files/ja/web/html/attributes/placeholder/index.md b/files/ja/web/html/attributes/placeholder/index.md index a8d9fea598a983..e74cf737c2303c 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}} @@ -51,4 +51,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) 擬似要素セレクター 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 プロパティについて説明します。 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)}} 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) 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")}} 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) 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) diff --git a/files/ja/web/xslt/pi_parameters/index.md b/files/ja/web/xslt/pi_parameters/index.md index 88c5065812152e..590a25e13ba35d 100644 --- a/files/ja/web/xslt/pi_parameters/index.md +++ b/files/ja/web/xslt/pi_parameters/index.md @@ -1,5 +1,5 @@ --- -title: PIパラメータ +title: PI パラメーター slug: Web/XSLT/PI_Parameters l10n: sourceCommit: 9f325923caffac2d0239773d4562303fd02ea30a @@ -9,13 +9,13 @@ l10n: ### 概要 -XSLT は実行時にパラメータをスタイルシートに渡すという概念をサポートしています。これによりしばらくの間は JavaScript で [XSLTProcessor](/ja/docs/Web/API/XSLTProcessor) を使用することが可能です。しかし、 `` 処理命令（PI）を使用するときは、パラメータを提供する方法がありませんでした。 +XSLT は実行時にパラメーターをスタイルシートに渡すという概念に対応しています。これにより当面は JavaScript で {{domxref("XSLTProcessor")}} を使用することが可能です。しかし、 `` 処理命令 (PI) を使用するときは、パラメーターを提供する方法がありませんでした。 -これを解決するために 2 つの新しい PI 、つまり `` および `` が [Firefox 2](/ja/docs/XSLT/en/Firefox_2) (詳細については[Supported versions](#supported_versions)を参照) で実装されています。どちらの PI にも、`xml-stylesheet` PI と同じ方法で「擬似属性」を含めることができます。 +これを解決するために 2 つの新しい PI 、つまり `` および `` が [Firefox 2](/ja/docs/Mozilla/Firefox/Releases/2)（詳細については[対応バージョン](#対応バージョン)を参照）で実装されています。どちらの PI にも、`xml-stylesheet` PI と同じ方法で「擬似属性」を含めることができます。 -次のドキュメントは "color" と "size" の 2 つのパラメータをスタイルシート "style.xsl" に渡します。 +次のドキュメントは "color" と "size" の 2 つのパラメーターをスタイルシート "style.xsl" に渡します。 -``` +```xml @@ -25,59 +25,59 @@ XSLT は実行時にパラメータをスタイルシートに渡すという概 ### 処理の指示 -`xslt-param` および `xslt-param-namespace` PI の属性は、[xml-stylesheet](http://www.w3.org/TR/xml-stylesheet/) で定義されている規則を使用して解析されます。認識できない属性はすべて無視する必要があります。属性の解析は、 `xml-stylesheet` の構文に従う限り、認識できない属性が存在するせいで失敗してはなりません。 +`xslt-param` および `xslt-param-namespace` PI の属性は、[xml-stylesheet](https://www.w3.org/TR/xml-stylesheet/) で定義されている規則を使用して解析されます。認識できない属性はすべて無視する必要があります。属性の解析は、 `xml-stylesheet` の構文に従う限り、認識できない属性が存在するせいで失敗してはなりません。 `xslt-param` と `xslt-param-namespace` PI の両方はドキュメントのプロローグ、つまり最初の要素タグの前になければなりません。プロローグ内のすべての PI は、`xml-stylesheet` PI の前後に発生する必要があります。 -複数の `xml-stylesheet` PI がある場合、パラメータはすべてのスタイルシートに適用され、その結果すべてのスタイルシートが XSLT 仕様に従って単一のスタイルシートにインポートされます。複数の `xml-stylesheet` XSLT PI は現在 Firefox ではサポートされていません。 +複数の `xml-stylesheet` PI がある場合、パラメーターはすべてのスタイルシートに適用され、その結果すべてのスタイルシートが XSLT 仕様に従って単一のスタイルシートにインポートされます。複数の `xml-stylesheet` XSLT PI は現在 Firefox では対応していません。 #### xslt-param `xslt-param` PI は 4 つの属性をサポートしています。 -- name - - : パラメータ名のローカル名部分。属性の構文チェックは行われませんが、有効な [NCName](http://www.w3.org/TR/REC-xml-names/#NT-NCName) でない場合は、スタイルシートのどのパラメータにも一致しません。 -- namespace - - : パラメータ名の名前空間。属性の構文チェックは行われません。 -- value - - : パラメータの文字列値を格納します。属性の値はパラメータの値として使用されます。データ型は常に最適です。 -- select - - : パラメータの [XPath](/ja/docs/XPath) 式。属性の値は XPath 式として解析されます。式を評価した結果はパラメータの値として使用されます。 +- `name` + - : パラメーター名のローカル名部分。属性の構文チェックは行われませんが、有効な [NCName](https://www.w3.org/TR/REC-xml-names/#NT-NCName) でない場合は、スタイルシートのどのパラメーターにも一致しません。 +- `namespace` + - : パラメーター名の名前空間。属性の構文チェックは行われません。 +- `value` + - : パラメーターの文字列値を格納します。属性の値はパラメーターの値として使用されます。データ型は常に最適です。 +- `select` + - : パラメーターの [XPath](/ja/docs/Web/XPath) 式。属性の値は XPath 式として解析されます。式を評価した結果はパラメーターの値として使用されます。 -**name** 属性がないか空の場合、PI は無視されます。 +`name` 属性がないか空の場合、PI は無視されます。 -**namespace** 属性がないか空の場合、null 名前空間が使用されます。 +`namespace` 属性がないか空の場合、null 名前空間が使用されます。 -スタイルシートに存在しない (またはスタイルシート内の変数である) パラメータ名を指定するのはエラーではありません。PI は単に無視されます。 +スタイルシートに存在しない (またはスタイルシート内の変数である) パラメーター名を指定するのはエラーではありません。PI は単に無視されます。 -**value** と **select** の両方が存在する場合、または **value** も **select** も存在しない場合、PI は無視されます。 +`value` と `select` の両方が存在する場合、または `value` も `select` も存在しない場合、PI は無視されます。 `value="..."` はアポストロフィと引用文字の両方を含むことができるので、厳密には `select="'...'"` と等しくないことに注意してください。 ##### 例 -パラメータ 'color' を文字列 'red' に設定します。 +パラメーター 'color' を文字列 'red' に設定します。 -``` +```xml ``` -パラメータ 'columns' を 2 に設定します。 +パラメーター 'columns' を 2 に設定します。 -``` +```xml ``` -パラメータ 'books' を null 名前空間のすべての `` 要素を含むノードセットに設定します。 +パラメーター 'books' を null 名前空間のすべての `` 要素を含むノードセットに設定します。 -``` +```xml ``` -パラメータ 'show-toc' を真偽値 `true` に設定します。 +パラメーター 'show-toc' を真偽値 `true` に設定します。 -``` - +```xml + ``` ##### select 属性コンテキスト @@ -88,7 +88,7 @@ XSLT は実行時にパラメータをスタイルシートに渡すという概 - コンテキストポジションは、スタイルシートを実行する際に使用される初期カレントノードリスト内のコンテキストノードの位置です - コンテキストサイズは、スタイルシートを実行する際に使用される初期の現在のノードリストのサイズです - 変数はありません -- 関数ライブラリは標準の XPath 関数ライブラリです。 +- 関数ライブラリーは標準の XPath 関数ライブラリーです。 - 名前空間宣言は `xslt-param-namespace` PI によって決まります。以下を参照してください **select** 属性が解析または実行に失敗した場合、PI は無視されます (特に、**value** 属性に戻ることはありません)。 @@ -102,9 +102,9 @@ XSLT は実行時にパラメータをスタイルシートに渡すという概 - namespace - : 接頭辞がマップされる名前空間 -`xslt-param-namespace` PI は、それに続くすべての xslt-params の select 属性の式に影響します。 これは、xslt-param-namespace と xslt-param PI の間にコメントや他の PI などの他のノードがある場合でも適用されます。 +`xslt-param-namespace` PI は、それに続くすべての `xslt-param` の select 属性の式に影響します。 これは、`xslt-param-namespace` と `xslt-param` PI の間にコメントや他の PI などの他のノードがある場合でも適用されます。 -複数の PI が同じプレフィックスを使用するのはエラーではなく、新しい PI はすべてプレフィックスがマップする名前空間を変更するだけです。 +複数の PI が同じ接頭辞を使用するのはエラーではなく、新しい PI はすべて接頭辞がマップする名前空間を変更するだけです。 **接頭辞**がないか、空もしくは無効な NCName と等しい場合、PI は無視されます。 @@ -112,19 +112,19 @@ XSLT は実行時にパラメータをスタイルシートに渡すという概 ##### 例 -パラメータ 'books' を 'http\://www\.example.org/myNamespace' 名前空間のすべての `` 要素を含むノードセットに設定します。 +パラメーター 'books' を 'http\://www\.example.org/myNamespace' 名前空間のすべての `` 要素を含むノードセットに設定します。 -``` +```xml ``` -### サポート対象バージョン +### 対応バージョン -Firefox 2.0.0.1 以降でサポートされています。**value** 属性は Firefox 2 ではサポートされていますが、2.0 リリースの一部の式では **select** 属性がクラッシュします。 +Firefox 2.0.0.1 以降で対応しています。**value** 属性は Firefox 2 では対応していますが、2.0 リリースの一部の式では **select** 属性がクラッシュします。 ### 可能性のある将来の開発 式に XSLT 関数を許可する必要がありますか？ `document()` は役に立ちそうですが、`generate-id()` が同じ文書に対して同じ文字列を生成しなければならない不変条件を維持するのは難しいようです。 -XSLT スタイルシートで URL パラメータをクエリするとどうなりますか？ 例えば、それらを指定された \に渡します。 +XSLT スタイルシートで URL パラメーターをクエリーするとどうなりますか？ 例えば、それらを指定された \に渡します。 diff --git a/files/ja/web/xslt/transforming_xml_with_xslt/an_overview/index.md b/files/ja/web/xslt/transforming_xml_with_xslt/an_overview/index.md index 3842a5990c8c45..a1295b024ea32e 100644 --- a/files/ja/web/xslt/transforming_xml_with_xslt/an_overview/index.md +++ b/files/ja/web/xslt/transforming_xml_with_xslt/an_overview/index.md @@ -1,15 +1,17 @@ --- -title: XSLT の概要 +title: 概要 slug: Web/XSLT/Transforming_XML_with_XSLT/An_Overview +l10n: + sourceCommit: b74462b088bf7ee06f27038728a7f6ea39630ca3 --- {{XsltSidebar}} -[« Transforming XML with XSLT](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT) +[« XSLT による XML の変換](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT) eXtensible Stylesheet Language/Transform は非常に強力な言語であり、この記事の全体的な議論はこの記事の範囲をはるかに超えていますが、基本的な概念の簡単な説明は Netscape の機能の説明の理解に役立ちます。 -- XSLT スタイルシートは XML ドキュメントです。 +- XSLT スタイルシートは XML 文書です。 - : 独自の特殊な構文を持つ CSS と異なり、XSLT スタイルシートは XML 文書であり、整形式を含むすべての XML 規則に準拠しなければなりません。したがって、変換のモデルは 1 つの XML 文書を使用して別の XML 文書を変換することです。 - XSLT スタイルシートには、標準の XSLT 見出しが含まれています。 - : XSLT スタイルシートの最も外側の要素は `` 要素でなければなりません (受け入れ可能な代替要素は `` 要素です)。この要素には少なくとも 1 つの名前空間宣言と必須のバージョン属性が含まれます。他の名前空間と 3 つのオプションの属性も含めることができます。 @@ -21,25 +23,25 @@ eXtensible Stylesheet Language/Transform は非常に強力な言語であり、 - `` - : xmlns 擬似属性は、後続の文書全体で使用するために短縮名 xsl を完全な名前空間にマップします。したがって、上記の stylesheet 要素の前に `xsl:` が付いています。xsl は従来使用されていた短縮名 (接頭辞と呼ばれます) ですが必須ではなく、別の名前を選択することも可能です。この記事の例はすべて xsl 接頭辞の使用を前提としています。 -- すべての XSLT 変換は、ドキュメントではなくツリーで実行されます。 +- すべての XSLT 変換は、文書ではなくツリーで実行されます。 - - : プロセッサと呼ばれる XSLT 変換エンジンは、ドキュメントでは直接動作しません。変換が行われる前に、プライマリ XML ドキュメントとスタイルシートドキュメントは、メモリ内のドキュメント構造の抽象的な表現を作成するパーサを介して実行する必要があります。ツリーと呼ばれるこの表現は、プロセッサによって実際に操作されるものです。ツリーは抽象データ型であり、パーサーとプロセッサに応じてさまざまな方法で実装できる概念モデルです。Netscape ではツリー構造として W3C DOM に似た構造を使用していますが、他のものも可能です。唯一の要件はツリー内のオブジェクトの配置、そのプロパティ、およびそれらの関係に関係します。 + - : プロセッサーと呼ばれる XSLT 変換エンジンは、文書では直接動作しません。変換が行われる前に、プライマリ XML 文書とスタイルシート文書は、メモリー内の文書構造の抽象的な表現を作成するパーサーを介して実行する必要があります。ツリーと呼ばれるこの表現は、プロセッサーによって実際に操作されるものです。ツリーは抽象データ型であり、パーサーとプロセッサーに応じてさまざまな方法で実装できる概念モデルです。Netscape ではツリー構造として W3C DOM に似た構造を使用していますが、他のものも可能です。唯一の要件はツリー内のオブジェクトの配置、そのプロパティ、およびそれらの関係に関係します。 ツリーはノードの階層的なフレームワークで構成されています。単一のルートノード、要素ノード、テキストノード、属性ノード、コメントノード、処理命令ノード、および名前空間ノードの 7 つの異なるタイプのノードで構成できます。 ツリーの最上部にルートノードがあります。ルートノードは XML 文書の個々の部分に対応していません。文書全体を表します。ルートノードの下には要素、コメント、処理命令などの子要素があります。これらの子要素の中にはさらに子要素がいるものもあります。そして、これはいくつかのレベルのために続けることができます。たとえば、テキストノードには子を持たないなど、ノードの種類が発生する特定の制約があります。 - プロセッサのアクションの結果もツリーです。Netscape はこのツリーを使用してブラウザウィンドウにコンテンツを表示します。 + プロセッサーのアクションの結果もツリーです。Netscape はこのツリーを使用してブラウザーウィンドウにコンテンツを表示します。 - XSLT は、高水準の宣言型言語です。 - - : 本質的に、XSLT スタイルシートはテンプレートと呼ばれる一連のルールであり、この特定のパターンに一致するノードはこの特定の方法で操作され、結果ツリーのこの特定の位置で終了することを宣言します。これがどのように達成されるかについての詳細は、プロセッサに委ねられています。スタイルシートの実行順序は保証できないため、XSLT は副作用を発生させる機能をサポートしていません。これは Lisp や Scheme のようなものです。 + - : 本質的に、XSLT スタイルシートはテンプレートと呼ばれる一連のルールであり、この特定のパターンに一致するノードはこの特定の方法で操作され、結果ツリーのこの特定の位置で終了することを宣言します。これがどのように達成されるかについての詳細は、プロセッサーに委ねられています。スタイルシートの実行順序は保証できないため、XSLT は副作用を発生させる機能をサポートしていません。これは Lisp や Scheme のようなものです。 - ツリー上の場所は、別の W3C 勧告である XPath を使用して指定されます。 - - : 変換はプロセッサがツリー上の個々のノードを特定できるかどうかに依存します。これを容易にするために、W3C は別の言語である XPath を使用することに決め、Xpath は XSLT コンテキスト外でも使用されています。その名前が示すように、XPath はプロセッサがツリーを通過して目的のノードに到達する「パス」を定義します。このパスは評価される XPath 特有の表現、一致される条件の数、ノードを関連付ける方法、および/またはツリー内の方向性の指示を含む式からなります。XSLT で最も一般的に使用される XPath の部分の詳細な説明は、参考セクションで説明します。 + - : 変換はプロセッサーがツリー上の個々のノードを特定できるかどうかに依存します。これを容易にするために、W3C は別の言語である XPath を使用することに決め、XPath は XSLT コンテキスト外でも使用されています。その名前が示すように、XPath はプロセッサーがツリーを通過して目的のノードに到達する「パス」を定義します。このパスは評価される XPath 特有の表現、一致される条件の数、ノードを関連付ける方法、および/またはツリー内の方向性の指示を含む式からなります。XSLT で最も一般的に使用される XPath の部分の詳細な説明は、参考セクションで説明します。 - テンプレートマッチングの潜在的な競合は、一連のカスケード優先ルールを使用して解決されます。 - - : 一般的に、より具体的なテンプレートルールはあまり具体的でないテンプレートルールよりも優先され、他のものは同等であるため、ドキュメントの後に表示されるテンプレートルールが先に表示されたものよりも優先されます。 + - : 一般的に、より具体的なテンプレートルールはあまり具体的でないテンプレートルールよりも優先され、他のものは同等であるため、文書の後に表示されるテンプレートルールが先に表示されたものよりも優先されます。 - スタイルシートは、処理命令を介して XML 文書に添付することができます。 - - : 特定の XML 文書を処理するためにどの XSLT スタイルシートを使用すべきかを示す最も簡単な方法は、XML 文書自体に処理命令を含めることです。 たとえば、スタイルシートが inventory.xsl と呼ばれ、xml ドキュメントと同じディレクトリにある場合、xml ドキュメントの処理命令は次のようになります。 + - : 特定の XML 文書を処理するためにどの XSLT スタイルシートを使用すべきかを示す最も簡単な方法は、XML 文書自体に処理命令を含めることです。 たとえば、スタイルシートが inventory.xsl と呼ばれ、XML 文書と同じディレクトリーにある場合、XML 文書の処理命令は次のようになります。 - `` - - : これは xml ドキュメントのプロローグセクションに配置する必要があります。 + - : これは XML 文書のプロローグセクションに配置する必要があります。 XSLT と XPath の詳細については、この記事の最後にある[参考文献](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading)を参照してください。 diff --git a/files/ja/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md b/files/ja/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md index 8d438ec907dcbd..92919744f5118b 100644 --- a/files/ja/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md +++ b/files/ja/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md @@ -1,13 +1,13 @@ --- -title: さらなる読みもの +title: 参考文献 slug: Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading l10n: - sourceCommit: e14e4830bcd43de164623aaf787fbd695be31d91 + sourceCommit: e03b13c7e157ec7b7bb02a6c7c4854b862195905 --- {{XsltSidebar}} -[« Transforming XML with XSLT](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT) +[« XSLT による XML の変換](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT) ## 印刷物 @@ -20,7 +20,7 @@ l10n: - **出版社**: Wrox; 2 edition (May 3, 2001) - **ISBN**: 0764543814 - - Michael Kay は W3C XSL ワーキンググループのメンバーであり、オープンソース XSLT プロセッサである Saxon の開発者です。彼はまた、このテーマに関する第 2 版に達した唯一の本の著者でもあります。これは XSLT ストーリーのすべての可能なベースを網羅している非常に大きな本です。うまくレイアウトされています。 + - Michael Kay は W3C XSL ワーキンググループのメンバーであり、オープンソース XSLT プロセッサーである Saxon の開発者です。彼はまた、このテーマに関する第 2 版に達した唯一の本の著者でもあります。これは XSLT ストーリーのすべての可能なベースを網羅している非常に大きな本です。うまくレイアウトされています。 @@ -62,8 +62,8 @@ l10n: ### 記事 -- [Hands-on XSL](https://www.ibm.com/developerworks/library/x-hands-on-xsl/) (Don R. Day) -- [What is XSLT?](https://www.xml.com/pub/a/2000/08/holman/index.html) (G. Ken Holman) +- [Hands-on XSL](https://developer.ibm.com/technologies/web-development/) by Don R. Day +- [What is XSLT?](https://www.xml.com/pub/a/2000/08/holman/index.html) by G. Ken Holman ### チュートリアル/例 @@ -73,8 +73,8 @@ l10n: ### その他 -- [Extensible Stylesheet Language (XSL)](http://xml.coverpages.org/xsl.html) +- [Extensible Stylesheet Language (XSL)](https://xml.coverpages.org/xsl.html) - **XSL-List** - - **Subscribe**: - - **Archives**: + - **参加**: + - **アーカイブ**: diff --git a/files/ja/web/xslt/transforming_xml_with_xslt/index.md b/files/ja/web/xslt/transforming_xml_with_xslt/index.md index e05cddb374f182..57e4b157e3b957 100644 --- a/files/ja/web/xslt/transforming_xml_with_xslt/index.md +++ b/files/ja/web/xslt/transforming_xml_with_xslt/index.md @@ -65,19 +65,19 @@ l10n: [軸](/ja/docs/Web/XPath/Axes) -- [ancestor](/ja/docs/Web/XPath/Axes/ancestor) -- [ancestor-or-self](/ja/docs/Web/XPath/Axes/ancestor-or-self) -- [attribute](/ja/docs/Web/XPath/Axes/attribute) -- [child](/ja/docs/Web/XPath/Axes/child) -- [descendant](/ja/docs/Web/XPath/Axes/descendant) -- [descendant-or-self](/ja/docs/Web/XPath/Axes/descendant-or-self) -- [following](/ja/docs/Web/XPath/Axes/following) -- [following-sibling](/ja/docs/Web/XPath/Axes/following-sibling) -- [namespace](/ja/docs/Web/XPath/Axes/namespace) _(未対応)_ -- [parent](/ja/docs/Web/XPath/Axes/parent) -- [preceding](/ja/docs/Web/XPath/Axes/preceding) -- [preceding-sibling](/ja/docs/Web/XPath/Axes/preceding-sibling) -- [self](/ja/docs/Web/XPath/Axes/self) +- [ancestor](/ja/docs/Web/XPath/Axes#ancestor) +- [ancestor-or-self](/ja/docs/Web/XPath/Axes#ancestor-or-self) +- [attribute](/ja/docs/Web/XPath/Axes#attribute) +- [child](/ja/docs/Web/XPath/Axes#child) +- [descendant](/ja/docs/Web/XPath/Axes#descendant) +- [descendant-or-self](/ja/docs/Web/XPath/Axes#descendant-or-self) +- [following](/ja/docs/Web/XPath/Axes#following) +- [following-sibling](/ja/docs/Web/XPath/Axes#following-sibling) +- [namespace](/ja/docs/Web/XPath/Axes#namespace) _(未対応)_ +- [parent](/ja/docs/Web/XPath/Axes#parent) +- [preceding](/ja/docs/Web/XPath/Axes#preceding) +- [preceding-sibling](/ja/docs/Web/XPath/Axes#preceding-sibling) +- [self](/ja/docs/Web/XPath/Axes#self) ### 関数 @@ -120,9 +120,9 @@ l10n: - [true()](/ja/docs/Web/XPath/Functions/true) _(対応済み)_ - [unparsed-entity-url()](/ja/docs/Web/XPath/Functions/unparsed-entity-url) _(not 対応済み)_ -## さらなる読み物 +## 参考文献 -[さらなる読み物](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading) +[参考文献](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading) - [書籍](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading#書籍) - [デジタル](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading#デジタル) diff --git a/files/ja/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md b/files/ja/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md index f8f96a0be31a36..cbae9ee3f14356 100644 --- a/files/ja/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md +++ b/files/ja/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md @@ -7,7 +7,7 @@ l10n: {{XsltSidebar}} -次のリストは W3C の XSLT 1.0 勧告と、XPath 勧告に適したセクションの要素、axes、関数にアルファベット順に注釈をつけたものです。XSLT プロセッサの開発は進行中です。また、機能の拡張と共にこのドキュメントも更新されます。 +次のリストは W3C の XSLT 1.0 勧告と、XPath 勧告に適したセクションの要素、axes、関数にアルファベット順に注釈をつけたものです。XSLT プロセッサーの開発は進行中です。また、機能の拡張と共にこのドキュメントも更新されます。 ### 要素 diff --git a/files/ja/webassembly/javascript_interface/compilestreaming_static/index.md b/files/ja/webassembly/javascript_interface/compilestreaming_static/index.md index b3316a8d50688a..b89d619695ac45 100644 --- a/files/ja/webassembly/javascript_interface/compilestreaming_static/index.md +++ b/files/ja/webassembly/javascript_interface/compilestreaming_static/index.md @@ -37,7 +37,7 @@ WebAssembly.compileStreaming(source) ### ストリーミングのコンパイル -次の例 (Github上のデモ [compile-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/compile-streaming.html) と、[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/compile-streaming.html)を参照してください) では、ソースから直接 .wasm モジュールをストリームして、 [`WebAssembly.Module`](/ja/docs/WebAssembly/JavaScript_interface/Module) オブジェクトにコンパイルしています。`compileStreaming()` 関数は [`Response`](/ja/docs/Web/API/Response) オブジェクトを渡すプロミスを受け取るので、直接 [`fetch()`](/ja/docs/Web/API/fetch) の呼び出し結果を渡すことができます。 +次の例 (Github上のデモ [compile-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/compile-streaming.html) と、[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/compile-streaming.html)を参照してください) では、ソースから直接 .wasm モジュールをストリームして、 [`WebAssembly.Module`](/ja/docs/WebAssembly/JavaScript_interface/Module) オブジェクトにコンパイルしています。`compileStreaming()` 関数は [`Response`](/ja/docs/Web/API/Response) オブジェクトを渡すプロミスを受け取るので、直接 [`fetch()`](/ja/docs/Web/API/Window/fetch) の呼び出し結果を渡すことができます。 ```js const importObject = { imports: { imported_func: (arg) => console.log(arg) } }; diff --git a/files/ja/webassembly/javascript_interface/index.md b/files/ja/webassembly/javascript_interface/index.md index 1827f5e81aa477..3e0d013dce6a57 100644 --- a/files/ja/webassembly/javascript_interface/index.md +++ b/files/ja/webassembly/javascript_interface/index.md @@ -43,17 +43,17 @@ slug: WebAssembly/JavaScript_interface - {{jsxref("WebAssembly.instantiateStreaming()")}} - : ソースのストリームから直接 WebAssembly モジュールをコンパイル、インスタンス化し、 `Module` と、その最初の `Instance` を返します。 - {{jsxref("WebAssembly.compile()")}} - - : {{jsxref("WebAssembly.Module")}} を用いて WebAssembly バイナリコードからコンパイルします。インスタンス化は別ステップとして分離されます。 + - : {{jsxref("WebAssembly.Module")}} を用いて WebAssembly バイナリーコードからコンパイルします。インスタンス化は別ステップとして分離されます。 - {{jsxref("WebAssembly.compileStreaming()")}} - : ソースのストリームから直接 {{jsxref("WebAssembly.Module")}} にコンパイルします。インスタンス化は別ステップとして分離されます。 - {{jsxref("WebAssembly.validate()")}} - - : WebAssembly バイナリコードの型付き配列を検証し、バイト列が有効な WebAssembly コードか (`true`) 否か (`false`) を返します。 + - : WebAssembly バイナリーコードの型付き配列を検証し、バイト列が有効な WebAssembly コードか (`true`) 否か (`false`) を返します。 ## 例 ## .wasm モジュールを読み込み、コンパイルし、インスタンス化する -次の例 (GitHub 上の [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) のデモと、[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)も参照) は、基礎となるソースから .wasm モジュールを直接ストリーミングし、コンパイルしてインスタンス化し、 `ResultObject` で履行されるプロミスを返します。 `instantiateStreaming()` 関数は [`Response`](/ja/docs/Web/API/Response) オブジェクトのプロミスを受け付けるので、 [`fetch()`](/ja/docs/Web/API/fetch) の呼び出し結果を直接渡すと、履行されたときにレスポンスを関数に渡すことができます。 +次の例 (GitHub 上の [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) のデモと、[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)も参照) は、基礎となるソースから .wasm モジュールを直接ストリーミングし、コンパイルしてインスタンス化し、 `ResultObject` で履行されるプロミスを返します。 `instantiateStreaming()` 関数は [`Response`](/ja/docs/Web/API/Response) オブジェクトのプロミスを受け付けるので、 [`fetch()`](/ja/docs/Web/API/Window/fetch) の呼び出し結果を直接渡すと、履行されたときにレスポンスを関数に渡すことができます。 ```js var importObject = { imports: { imported_func: (arg) => console.log(arg) } }; diff --git a/files/ja/webassembly/javascript_interface/instantiate_static/index.md b/files/ja/webassembly/javascript_interface/instantiate_static/index.md index 5a70f9d2a3a493..851efd35692f45 100644 --- a/files/ja/webassembly/javascript_interface/instantiate_static/index.md +++ b/files/ja/webassembly/javascript_interface/instantiate_static/index.md @@ -7,7 +7,7 @@ slug: WebAssembly/JavaScript_interface/instantiate_static **`WebAssembly.instantiate()`** 関数は WebAssembly コードをコンパイルおよびインスタンス化することができます。この関数は 2 つのオーバーロードを持ちます。 -- 第一のオーバーロードは、 [型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) または {{jsxref("ArrayBuffer")}} で表現された WebAssembly バイナリコードを受け取り、そして、コンパイルとインスタンス化の両方を 1 ステップで行います。返された `Promise` は解決時にコンパイルされた {{jsxref("WebAssembly.Module")}} と最初の {{jsxref("WebAssembly.Instance")}} を渡します。 +- 第一のオーバーロードは、 [型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) または {{jsxref("ArrayBuffer")}} で表現された WebAssembly バイナリーコードを受け取り、そして、コンパイルとインスタンス化の両方を 1 ステップで行います。返された `Promise` は解決時にコンパイルされた {{jsxref("WebAssembly.Module")}} と最初の {{jsxref("WebAssembly.Instance")}} を渡します。 - 第二のオーバーロードは、すでにコンパイルされた {{jsxref("WebAssembly.Module")}} を受け取り、解決時にその `Module` の `Instance` を渡す `Promise` を返します。このオーバーロードは、すでに `Module` がコンパイル済みの場合に有用です。 > [!WARNING] @@ -15,7 +15,7 @@ slug: WebAssembly/JavaScript_interface/instantiate_static ## 構文 -### 第一のオーバーロード — wasm バイナリコード +### 第一のオーバーロード — wasm バイナリーコード ``` Promise WebAssembly.instantiate(bufferSource, importObject); diff --git a/files/ja/webassembly/javascript_interface/instantiatestreaming_static/index.md b/files/ja/webassembly/javascript_interface/instantiatestreaming_static/index.md index f92452c803edc6..cfab99178f9b24 100644 --- a/files/ja/webassembly/javascript_interface/instantiatestreaming_static/index.md +++ b/files/ja/webassembly/javascript_interface/instantiatestreaming_static/index.md @@ -40,7 +40,7 @@ WebAssembly.instantiateStreaming(source, importObject) ### ストリーミングのインスタンス化 -次の例 (Github上のデモ [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) と、[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)を参照してください) では、ソースから .wasm モジュールを直接コンパイルしてインスタンス化しています。このプロミスは `ResultObject` で履行されます。 `instantiateStreaming()` 関数は [`Response`](/ja/docs/Web/API/Response) オブジェクトに解決するプロミスを受け取るので、直接 [`fetch()`](/ja/docs/Web/API/fetch) の呼び出し結果を渡すことができます。 +次の例 (Github上のデモ [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) と、[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)を参照してください) では、ソースから .wasm モジュールを直接コンパイルしてインスタンス化しています。このプロミスは `ResultObject` で履行されます。 `instantiateStreaming()` 関数は [`Response`](/ja/docs/Web/API/Response) オブジェクトに解決するプロミスを受け取るので、直接 [`fetch()`](/ja/docs/Web/API/Window/fetch) の呼び出し結果を渡すことができます。 ```js const importObject = { imports: { imported_func: (arg) => console.log(arg) } }; @@ -53,7 +53,7 @@ WebAssembly.instantiateStreaming(fetch("simple.wasm"), importObject).then( 最後に `ResultObject` が持つ instance メンバーにアクセスして、エクスポートされた関数を実行しています。 > [!NOTE] -> これを動作するようにするには、サーバが `.wasm` ファイルを `application/wasm` の MIME タイプで返す必要があります。 +> これを動作するようにするには、サーバーが `.wasm` ファイルを `application/wasm` の MIME タイプで返す必要があります。 ## 仕様書 diff --git a/files/ja/webassembly/javascript_interface/memory/index.md b/files/ja/webassembly/javascript_interface/memory/index.md index 7657f7db50256c..364af6cd274c05 100644 --- a/files/ja/webassembly/javascript_interface/memory/index.md +++ b/files/ja/webassembly/javascript_interface/memory/index.md @@ -34,7 +34,7 @@ JavaScript または WebAssembly コードから生成されたメモリーは J var memory = new WebAssembly.Memory({ initial: 10, maximum: 100 }); ``` -次の例では (GitHub 上の [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html) および[実行例](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)も参照)、 memory.wasm バイトコードを {{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用して読み込みんでインスタンス化し、その上の行で生成されたメモリにインポートします。それから、メモリにいくつかの値を格納し、関数をエクスポートして使用し、いくつかの値を合計します。 +次の例では (GitHub 上の [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html) および[実行例](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)も参照)、 memory.wasm バイトコードを {{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用して読み込みんでインスタンス化し、その上の行で生成されたメモリーにインポートします。それから、メモリーにいくつかの値を格納し、関数をエクスポートして使用し、いくつかの値を合計します。 ```js WebAssembly.instantiateStreaming(fetch("memory.wasm"), { @@ -49,7 +49,7 @@ WebAssembly.instantiateStreaming(fetch("memory.wasm"), { }); ``` -WebAssembly.Memory オブジェクトを取得する 2 つ目の方法は、 WebAssembly モジュールによってエクスポートされることです。このメモリは WebAssembly インスタンスの `exports` プロパティで (メモリーが WebAssembly モジュール内でエクスポートされた後に) アクセスできます。次のスニペットは、 WebAssembly からエクスポートされたメモリを `memory`という名前でインポートし、メモリーの最初の要素を Uint32Array として解釈して表示しています。 +WebAssembly.Memory オブジェクトを取得する 2 つ目の方法は、 WebAssembly モジュールによってエクスポートされることです。このメモリーは WebAssembly インスタンスの `exports` プロパティで (メモリーが WebAssembly モジュール内でエクスポートされた後に) アクセスできます。次のスニペットは、 WebAssembly からエクスポートされたメモリーを `memory`という名前でインポートし、メモリーの最初の要素を Uint32Array として解釈して表示しています。 ```js WebAssembly.instantiateStreaming(fetch("memory.wasm")).then((obj) => { diff --git a/files/ja/webassembly/javascript_interface/module/exports_static/index.md b/files/ja/webassembly/javascript_interface/module/exports_static/index.md index f67fa18e7dea45..1da2f7e5dd783c 100644 --- a/files/ja/webassembly/javascript_interface/module/exports_static/index.md +++ b/files/ja/webassembly/javascript_interface/module/exports_static/index.md @@ -40,7 +40,7 @@ WebAssembly.compileStreaming(fetch("simple.wasm")).then((mod) => ); ``` -ワーカー ([`wasm_worker.js`](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/wasm_worker.js) を参照) 内で、モジュールで使用するためにインポートオブジェクトを定義して、そのあとにメインスレッドからモジュールを受け取るためのイベントハンドラをセットアップします。モジュールを受け取ったとき、{{jsxref("WebAssembly.Instantiate()")}} メソッドを使用してインスタンスを生成し、その内部でエクスポートされた関数を実行します。そのあとに `WebAssembly.Module.exports` を使用してモジュール上の利用可能なエクスポートの情報を返す方法を示します。 +ワーカー ([`wasm_worker.js`](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/wasm_worker.js) を参照) 内で、モジュールで使用するためにインポートオブジェクトを定義して、そのあとにメインスレッドからモジュールを受け取るためのイベントハンドラーをセットアップします。モジュールを受け取ったとき、{{jsxref("WebAssembly.Instantiate()")}} メソッドを使用してインスタンスを生成し、その内部でエクスポートされた関数を実行します。そのあとに `WebAssembly.Module.exports` を使用してモジュール上の利用可能なエクスポートの情報を返す方法を示します。 ```js var importObject = { diff --git a/files/ja/webassembly/loading_and_running/index.md b/files/ja/webassembly/loading_and_running/index.md index b8543b26e1e342..daab150e2f5edd 100644 --- a/files/ja/webassembly/loading_and_running/index.md +++ b/files/ja/webassembly/loading_and_running/index.md @@ -23,7 +23,7 @@ WebAssembly は `