From 8dba1bffc690b6a6fff95c1dd7c265b4ddef5ed4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 13 Aug 2021 17:24:28 +0900 Subject: Body ミックスインを廃止し、 Response インターフェイスへ統合 (#1898) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - orphaned にあった Body ミックスインを廃止 - Body ミックスインのメンバーを Response インターフェイスへ移動 - 関連する記事を 2021/08/04 時点の英語版に同期 --- files/ja/web/api/fetch_api/index.html | 89 +++++++-------- files/ja/web/api/request/index.html | 2 +- files/ja/web/api/response/arraybuffer/index.html | 95 ++++++++++++++++ files/ja/web/api/response/blob/index.html | 65 +++++++++++ files/ja/web/api/response/body/index.html | 80 +++++++++++++ files/ja/web/api/response/bodyused/index.html | 67 +++++++++++ files/ja/web/api/response/formdata/index.html | 58 ++++++++++ files/ja/web/api/response/index.html | 139 ++++++++++++----------- files/ja/web/api/response/json/index.html | 78 +++++++++++++ files/ja/web/api/response/text/index.html | 74 ++++++++++++ 10 files changed, 626 insertions(+), 121 deletions(-) create mode 100644 files/ja/web/api/response/arraybuffer/index.html create mode 100644 files/ja/web/api/response/blob/index.html create mode 100644 files/ja/web/api/response/body/index.html create mode 100644 files/ja/web/api/response/bodyused/index.html create mode 100644 files/ja/web/api/response/formdata/index.html create mode 100644 files/ja/web/api/response/json/index.html create mode 100644 files/ja/web/api/response/text/index.html (limited to 'files/ja/web/api') diff --git a/files/ja/web/api/fetch_api/index.html b/files/ja/web/api/fetch_api/index.html index 7f1f35da9b..2eaad2cd9d 100644 --- a/files/ja/web/api/fetch_api/index.html +++ b/files/ja/web/api/fetch_api/index.html @@ -3,7 +3,6 @@ title: Fetch API slug: Web/API/Fetch_API tags: - API - - Experimental - Fetch - Landing - Reference @@ -14,101 +13,89 @@ translation_of: Web/API/Fetch_API ---
{{DefaultAPISidebar("Fetch API")}}
-

Fetch API には (ネットワーク越しの通信を含む) リソース取得のためのインターフェイスが定義されています。{{domxref("XMLHttpRequest")}} と似たものではありますが、より強力で柔軟な操作が可能です。

+

Fetch API は (ネットワーク越しの通信を含む) リソース取得のためのインターフェイスを提供しています。 {{DOMxRef("XMLHttpRequest")}} と似たものではありますが、より強力で柔軟な操作が可能です。

-

概念と利用方法

+

{{AvailableInWorkers}}

-

Fetch では {{domxref("Request")}} と {{domxref("Response")}} が一般的な形で定義されています。またネットワークリクエストに関連する様々なものも定義されています。これらは service worker や Cache API といったリクエストとレスポンスを扱う API や、独自のリクエストを発生させる場面でも利用できるようになるでしょう。

+

概念と利用方法

-

また CORS や HTTP オリジンヘッダーの振る舞いといった関連した概念についても定義されています。この定義は、現行の分散している個別の定義を置き換えるものです。

+

Fetch は {{DOMxRef("Request")}} と {{DOMxRef("Response")}} オブジェクト (およびネットワークリクエストに関わるその他のもの) の汎用的な定義が提供されています。これにより、サービスワーカー、キャッシュ API、リクエストやレスポンスを処理または変更するその他の類似のもの、またはプログラム的にレスポンスを生成する (つまり、コンピュータプログラムまたはパーソナルプログラミング命令を使用する) 必要があるあらゆる種類の利用法など、将来的に必要とされるあらゆる場所で使用できるようになります。

-

リソースを取得するためのリクエストは、 {{domxref("GlobalFetch.fetch")}} メソッドを呼ぶことで作成できます。このメソッドは {{domxref("Window")}} や {{domxref("WorkerGlobalScope")}} といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。

+

また CORS や HTTP の Origin ヘッダーの振る舞いといった関連した概念についても定義されています。この定義は、現行の分散している個別の定義を置き換えるものです。

-

fetch() メソッドは必須の引数を1つ取り、取得したいリソースのパスを指定します。成功か失敗かに関わらず、リクエストに対する {{domxref("Response")}} に解決できる {{domxref("Promise")}} を返します。第2引数は任意で、 init オプションオブジェクトを渡すことができます。（{{domxref("Request")}} をご覧ください）。

+

リソースを取得するためのリクエストは、 {{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}} メソッドを呼ぶことで作成できます。このメソッドは {{DOMxRef("Window")}} や {{DOMxRef("WorkerGlobalScope")}} といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。

-

{{domxref("Response")}} を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります（{{domxref("Body")}} をご覧ください）。

+

fetch() メソッドは必須の引数を 1 つ取り、取得したいリソースのパスを指定します。成功か失敗かに関わらず、リクエストに対する {{DOMxRef("Response")}} に解決できる {{JSxRef("Promise")}} を返します。第 2 引数は任意で、 init オプションオブジェクトを渡すことができます。({{DOMxRef("Request")}} を参照してください。)

-

{{domxref("Request.Request","Request()")}} および {{domxref("Response.Response","Response()")}} を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、{{domxref("FetchEvent.respondWith")}} のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。

+

{{DOMxRef("Response")}} を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります。

-

jQueryとの違い

+

{{DOMxRef("Request.Request","Request()")}} および {{DOMxRef("Response.Response","Response()")}} を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、{{DOMxRef("FetchEvent.respondWith")}} のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。

-

fetch は主に3つの点で jQuery.ajax() と異なります。

+

jQueryとの違い

+ +

fetch は主に 3 つの点で jQuery.ajax() と異なります。

-

注: Fetch API の詳しい利用方法は Using Fetch を参照してください。また Fetch basic concepts では、Fetch API の基本概念が解説されています。

+

注: Fetch API の詳しい利用方法は Fetch の使用を参照してください。また Fetch の基本概念では、Fetch API の基本概念が解説されています。

-

フェッチを中止する

+

フェッチの中止

-

ブラウザーは Fetch や XHR などの操作を完了前に中止させることができる {{domxref("AbortController")}} および {{domxref("AbortSignal")}} インターフェイス（つまり Abort API）に実験的に対応し始めています。詳しくはインターフェイスのページを参照してください。

+

ブラウザーは Fetch や XHR などの操作を完了前に中止させることができる {{DOMxRef("AbortController")}} および {{DOMxRef("AbortSignal")}} インターフェイス (つまり Abort API) に実験的に対応し始めています。詳しくはインターフェイスのページを参照してください。

-

Fetch インターフェイス

+

Fetch インターフェイス

-
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
+
{{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}
fetch() メソッドはリソース取得のために使用されます。
-
{{domxref("Headers")}}
+
{{DOMxRef("Headers")}}
リクエストとレスポンスのヘッダーを表現しています。ヘッダー情報への問い合わせや、結果による振る舞いの選択が可能です。
-
{{domxref("Request")}}
+
{{DOMxRef("Request")}}
リソースのリクエストを表します。
-
{{domxref("Response")}}
+
{{DOMxRef("Response")}}
リクエストに対するレスポンスを表します。
-

Fetch ミックスイン

- -
-
{{domxref("Body")}}
-
レスポンスとリクエストの本体に関係するメソッドが定義されています。これらを利用することで、コンテントタイプ自身と、コンテントタイプごとの処理を定めることが可能になります。
-
- -

仕様書

+

仕様書

- + + + - - + +
仕様書 状態 備考
{{SpecName('Fetch')}}{{Spec2('Fetch')}}{{SpecName("Fetch")}}{{Spec2("Fetch")}} 初回定義
-

ブラウザーの互換性

- - +

ブラウザーの互換性

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

-

関連情報

+

関連情報

diff --git a/files/ja/web/api/request/index.html b/files/ja/web/api/request/index.html index 3eb39c4f7a..b7d8f9f250 100644 --- a/files/ja/web/api/request/index.html +++ b/files/ja/web/api/request/index.html @@ -60,7 +60,7 @@ browser-compat: api.Request
{{domxref("Request.arrayBuffer()")}}
-
リクエスト本体を表す {{domxref("ArrayBuffer")}} で解決するプロミスを返します。
+
リクエスト本体を表す {{jsxref("ArrayBuffer")}} で解決するプロミスを返します。
{{domxref("Request.blob()")}}
リクエスト本体を表す {{domxref("Blob")}} で解決するプロミスを返します。
{{domxref("Request.clone()")}}
diff --git a/files/ja/web/api/response/arraybuffer/index.html b/files/ja/web/api/response/arraybuffer/index.html new file mode 100644 index 0000000000..444a450415 --- /dev/null +++ b/files/ja/web/api/response/arraybuffer/index.html @@ -0,0 +1,95 @@ +--- +title: Response.arrayBuffer() +slug: Web/API/Response/arrayBuffer +tags: + - API + - ArrayBuffer + - Fetch + - Method + - Reference + - Response +translation_of: Web/API/Response/arrayBuffer +original_slug: Web/API/Body/arrayBuffer +browser-compat: api.Response.arrayBuffer +--- +
{{APIRef("Fetch")}}
+ +

arrayBuffer() は {{domxref("Response")}} インターフェイスのメソッドで、リクエストの本文を読み取り、 {{jsxref("ArrayBuffer")}} で解決されるプロミスを返します。

+ +

構文

+ +
response.arrayBuffer().then(function(buffer) {
+  // buffer を使用した何らかの処理
+});
+ +

引数

+ +

なし。

+ +

返値

+ +

{{jsxref("ArrayBuffer")}} で解決されるプロミス。

+ +

例

+ +

音楽の演奏

+ +

fetch array buffer のライブでは、Play ボタンを配置して、押下されると getData() 関数が実行されるようになっています。 再生する前に音声ファイル全体をダウンロードすることに注意してください。ダウンロード中に演奏を開始したい (つまりストリーム再生したい) 場合は、次のように {{domxref("HTMLAudioElement")}} を使いましょう。

+ +
new Audio("music.ogg").play();
+
+ +

getData() 関数内では、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して OGG 音声トラックを読み取ります。 また、{{domxref("BaseAudioContext/createBufferSource", "AudioContext.createBufferSource")}} を使用して、音声バッファーソースを作成します。 読み取りが成功したら、arrayBuffer() を使用してレスポンスから {{jsxref("ArrayBuffer")}} を読み取り、 {{domxref("BaseAudioContext/decodeAudioData", "AudioContext.decodeAudioData()")}} を使用して音声データをデコードし、デコードされたデータを音声バッファーソースのバッファー（source.buffer）として設定し、それから {{domxref("BaseAudioContext/destination", "AudioContext.destination")}} にソースを接続します。

+ +

getData() の実行が完了すると、start(0) で音声ソースの再生を開始し、それから再生中に再度再生ボタンをクリックできないようにするために（これはしばしばエラーの原因になります）ボタンを無効化しています。

+ +
function getData() {
+  source = audioCtx.createBufferSource();
+
+  var myRequest = new Request('viper.ogg');
+
+  fetch(myRequest).then(function(response) {
+    return response.arrayBuffer();
+  }).then(function(buffer) {
+    audioCtx.decodeAudioData(buffer, function(decodedData) {
+      source.buffer = decodedData;
+      source.connect(audioCtx.destination);
+    });
+  });
+};
+
+// wire up buttons to stop and play audio
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+}
+ +

ファイルを読む

+ +

{{domxref("Response.Response","Response()")}} コンストラクターは、 {{domxref("File")}} と {{domxref("Blob")}} を受け入れるため、 {{domxref("File")}} を他の形式に読み込むために使用することができます。

+ +
function readFile(file) {
+  return new Response(file).arrayBuffer();
+}
+
+ +
<input type="file" onchange="readFile(this.files[0])">
+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/response/blob/index.html b/files/ja/web/api/response/blob/index.html new file mode 100644 index 0000000000..4709a8d364 --- /dev/null +++ b/files/ja/web/api/response/blob/index.html @@ -0,0 +1,65 @@ +--- +title: Response.blob() +slug: Web/API/Response/blob +tags: + - API + - Blob + - Fetch + - Method + - Reference + - Response +browser-compat: api.Response.blob +translation_of: Web/API/Response/blob +original_slug: Web/API/Body/blob +--- +
{{APIRef("Fetch")}}
+ +

blob() は {{domxref("Response")}} インターフェイスのメソッドで、 {{domxref("Response")}} ストリームを取得して完全に読み込みます。 {{domxref("Blob")}} で解決するプロミスを返します。

+ +

構文

+ +
response.blob().then(function(myBlob) {
+  // do something with myBlob
+});
+ +

引数

+ +

なし。

+ +
注: {{domxref("Response")}} の {{domxref("Response.type")}} が "opaque" の場合、結果の {{domxref("Blob")}} の {{domxref("Blob.size")}} は 0、{{domxref("Blob.type")}} は空文字列 "" になり、{{domxref("URL.createObjectURL")}} のようなメソッドでは役に立たなくなります。
+ +

返値

+ +

{{domxref("Blob")}} で解決するプロミスです。

+ +

例

+ +

fetch request の例 (fetch request をライブで実行) では、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して JPG を読み取ります。読み取りが成功したら、blob() を使用してレスポンスから {{domxref("Blob")}} を読み取り、それを {{domxref("URL.createObjectURL")}} を使用してオブジェクト URL に入れ、その URL を {{htmlelement("img")}} 要素のソースとして設定して画像を表示します。

+ +
var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest)
+.then(response => response.blob())
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+
+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/response/body/index.html b/files/ja/web/api/response/body/index.html new file mode 100644 index 0000000000..8d78608350 --- /dev/null +++ b/files/ja/web/api/response/body/index.html @@ -0,0 +1,80 @@ +--- +title: Response.body +slug: Web/API/Response/body +tags: + - API + - Fetch + - Property + - Reference + - Streams + - Response +browser-compat: api.Response.body +translation_of: Web/API/Response/body +original_slug: Web/API/Body/body +--- +
{{APIRef("Fetch")}}
+ +

body は {{domxref("Response")}} インターフェイスの読み取り専用プロパティで、本文コンテンツの {{domxref("ReadableStream")}} です。

+ +

構文

+ +
response.body;
+ +

値

+ +

{{domxref("ReadableStream")}} です。

+ +

例

+ +

単純なストリームポンプの例では、画像を読み取り、response.body を使用してレスポンスのストリームを公開し、{{domxref("ReadableStream.getReader()", "ReadableStream.getReader()")}} を使用してリーダーを作成し、そのストリームのチャンクを2番目のカスタム読み取り可能なストリームのキューに入れます — 画像の同一コピーを効果的に作成します。

+ +
const image = document.getElementById('target');
+
+// 元の画像をフェッチ
+fetch('./tortoise.png')
+// その body を ReadableStream として取得
+.then(response => response.body)
+.then(body => {
+  const reader = body.getReader();
+
+  return new ReadableStream({
+    start(controller) {
+      return pump();
+
+      function pump() {
+        return reader.read().then(({ done, value }) => {
+          // データを消費する必要がなくなったら、ストリームを閉じます
+          if (done) {
+            controller.close();
+            return;
+          }
+
+          // 次のデータチャンクを対象のストリームのキューに入れます
+          controller.enqueue(value);
+          return pump();
+        });
+      }
+    }
+  })
+})
+.then(stream => new Response(stream))
+.then(response => response.blob())
+.then(blob => URL.createObjectURL(blob))
+.then(url => console.log(image.src = url))
+.catch(err => console.error(err));
+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/response/bodyused/index.html b/files/ja/web/api/response/bodyused/index.html new file mode 100644 index 0000000000..75c0ca3d1d --- /dev/null +++ b/files/ja/web/api/response/bodyused/index.html @@ -0,0 +1,67 @@ +--- +title: Response.bodyUsed +slug: Web/API/Response/bodyUsed +tags: + - API + - Fetch + - Property + - Reference + - bodyUsed + - Response +translation_of: Web/API/Response/bodyUsed +original_slug: Web/API/Body/bodyUsed +browser-compat: api.Response.bodyUsed +--- +
{{APIRef("Fetch")}}
+ +

bodyUsed は {{domxref("Response")}} インターフェイスの読み取り専用プロパティで、本文が読取済みであるかどうかを示す論理値です。

+ +

構文

+ +
response.bodyUsed;
+ +

値

+ +

論理値。

+ +

例

+ +

Fetch リクエストの例（Fetch リクエストをライブで実行）では、 {{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して JPG を読み取ります。読み取りが成功したら、blob() を使用してレスポンスから {{domxref("Blob")}} を読み取り、{{domxref("URL.createObjectURL")}} を使用してオブジェクト URL に格納し、その URL を {{htmlelement("img")}} 要素のソースとして設定して画像を表示します。

+ +

response.bodyUsed を response.blob() の呼び出し前後にコンソールに記録していることに注目してください。 その時点で本文が読み取られたかによるため、これは呼び出し前では false を返し、その後では true を返します。

+ +

HTML コンテンツ

+ +
<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png">
+
+ +

JS コンテンツ

+ +
var myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg').then(function(response) {
+    console.log(response.bodyUsed);
+    var res = response.blob();
+    console.log(response.bodyUsed);
+    return res;
+}).then(function(response) {
+    var objectURL = URL.createObjectURL(response);
+    myImage.src = objectURL;
+});
+ +

{{ EmbedLiveSample('Example', '100%', '250px') }}

+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/response/formdata/index.html b/files/ja/web/api/response/formdata/index.html new file mode 100644 index 0000000000..00e18dd12d --- /dev/null +++ b/files/ja/web/api/response/formdata/index.html @@ -0,0 +1,58 @@ +--- +title: Response.formData() +slug: Web/API/Response/formData +tags: + - API + - Fetch + - Fetch API + - FormData + - Method + - NeedsExample + - Reference + - Response +translation_of: Web/API/Response/formData +original_slug: Web/API/Body/formData +browser-compat: api.Response.formData +--- +
{{APIRef("Fetch")}}
+ +

formData() は {{domxref("Response")}} インターフェイスのメソッドで、 {{domxref("Response")}} のストリームを取得して完全に読み取ります。 {{domxref("FormData")}} オブジェクトで解決されるプロミスを返します。

+ +
+

メモ: これは主にサービスワーカーに関連しています。 ユーザーがフォームを送信し、サービスワーカーがリクエストに介入した場合を考えてみましょう。 例えば、キーと値のマップを取得するために formData() を呼び出し、一部のフィールドを修正した後、フォームをサーバー側に送信 (またはローカルで使用) することができます。

+
+ +

構文

+ +
response.formData()
+.then(function(formdata) {
+  // formdata を使った何らかの処理
+});
+ +

引数

+ +

なし。

+ +

返値

+ +

{{domxref("FormData")}} オブジェクトで解決される {{jsxref("Promise")}}。

+ +

例

+ +

TBD.

+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/response/index.html b/files/ja/web/api/response/index.html index 3884020535..3fb9af40df 100644 --- a/files/ja/web/api/response/index.html +++ b/files/ja/web/api/response/index.html @@ -9,120 +9,121 @@ tags: - Interface - Reference - Response +browser-compat: api.Response translation_of: Web/API/Response ---
{{APIRef("Fetch API")}}
-

Fetch API の Response インターフェイスは、リクエストのレスポンスを表します。

+

Response は Fetch API のインターフェイスで、リクエストのレスポンスを表します。

-

{{domxref("Response.Response()")}} コンストラクタを使い、新しい Response オブジェクトを作ることができます。しかし、ServiceWorker の {{domxref("Fetchevent.respondWith")}} や {{domxref("GlobalFetch.fetch()")}} などのように、他のAPIからResponseオブジェクトが返されるのをより頻繁に目にするでしょう。

+

Response オブジェクトは {{domxref("Response.Response()")}} コンストラクターを用いて生成することができますが、他の API 操作の結果として返される Response オブジェクトに出会う可能性が高いでしょう。例えば、サービスワーカーの {{domxref("Fetchevent.respondWith")}} や、単純な {{domxref("WindowOrWorkerGlobalScope.fetch()")}} などです。

-

コンストラクタ

+

コンストラクター

{{domxref("Response.Response","Response()")}}
新しい Response オブジェクトを返します。
-

プロパティ

+

プロパティ

+
{{domxref("Response.body")}} {{readonlyInline}}
+
本文のコンテンツの {{domxref("ReadableStream")}} です。
+
{{domxref("Response.bodyUsed")}} {{readonlyInline}}
+
本文がレスポンスで使用されたかどうかを定義する論理値が格納されます。
{{domxref("Response.headers")}} {{readonlyinline}}
-
レスポンスに関連した {{domxref("Headers")}} オブジェクトを含む。
+
レスポンスに関連した {{domxref("Headers")}} オブジェクトが入ります。
{{domxref("Response.ok")}} {{readonlyinline}}
-
レスポンスが成功（200-299 の範囲のステータス）したか否かを通知する boolean 値を含む。
+
レスポンスが成功 (200–299 の範囲のステータス) したか否かを通知する論理値が入ります。
{{domxref("Response.redirected")}} {{ReadOnlyInline}}
-
レスポンスがリダイレクトの結果であるかどうかを示します。 つまり、その URL リストには複数のエントリーがあります。
+
レスポンスがリダイレクトの結果である (つまり、その URL リストには複数のエントリーがある) かどうかを示します。
{{domxref("Response.status")}} {{readonlyinline}}
-
HTTPステータスコードを返す。(例：200 成功)
+
このレスポンスのステータスコードを返します (成功ならば 200 になります)。
{{domxref("Response.statusText")}} {{readonlyinline}}
-
ステータスコードに対応したステータスメッセージを含む（たとえば、200 で OK）。
+
ステータスコードに対応したステータスメッセージが入ります (たとえば 200 ならば OK)。
+
{{domxref("Response.trailers")}}
+
{{jsxref("Promise")}} であり、 {{domxref("Headers")}} オブジェクトを返します。これは {{domxref("Response.headers")}} にある HTTP の {{HTTPHeader("Trailer")}} ヘッダーの値です。
{{domxref("Response.type")}} {{readonlyinline}}
-
レスポンスのタイプを示す。(例：basic,cors)
+
レスポンスの種類です。 (例えば basic, cors)
{{domxref("Response.url")}} {{readonlyinline}}
-
レスポンスのURLを返す。
-
{{domxref("Response.useFinalURL")}}
-
レスポンスの最後の URL かどうかを通知する boolean 値を含む。
+
レスポンスのURLを返します。
-

Response は {{domxref("Body")}} を実装しているため、次のプロパティも使用可能です:

- -
-
{{domxref("Body.body")}} {{readonlyInline}}
-
コンテンツのボディを示す {{domxref("ReadableStream")}} の単純なゲッターです。
-
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
-
レスポンスで body が既に使用されているかどうかを示す {{domxref("Boolean")}} 値を保持する。
-
- -

メソッド

+

メソッド

+
{{domxref("Response.arrayBuffer()")}}
+
レスポンスの本文を表す {{jsxref("ArrayBuffer")}} で解決するプロミスを返します。
+
{{domxref("Response.blob()")}}
+
レスポンスの本文を表す {{domxref("Blob")}} で解決するプロミスを返します。
{{domxref("Response.clone()")}}
-
Response オブジェクトのクローンを生成する。
+
Response オブジェクトの複製を生成します。
{{domxref("Response.error()")}}
-
ネットワークエラーに関連した新しい Response オブジェクトを返す。
+
ネットワークエラーに関連した新しい Response オブジェクトを返します。
+
{{domxref("Response.formData()")}}
+
レスポンスの本文を表す {{domxref("FormData")}} で解決するプロミスを返します。
+
{{domxref("Response.json()")}}
+
レスポンスの本文のテキストを {{jsxref("JSON")}} として解釈した結果で解決するプロミスを返します。
+
{{domxref("Response.redirect()")}}
-
異なる URL で新しい response を生成する
+
異なる URL で新しい response を生成します。
+
{{domxref("Response.text()")}}
+
レスポンスの本文のテキスト表現で解決するプロミスを返します。
-

Response　は {{domxref("Body")}}　を実装しているため、次のメソッドも使用可能です:

-
-
{{domxref("Body.arrayBuffer()")}}
-
{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、{{domxref("ArrayBuffer")}} で解決する promise を返す。
-
{{domxref("Body.blob()")}}
-
{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、 {{domxref("Blob")}} で解決する promise を返す。
-
{{domxref("Body.formData()")}}
-
{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、 {{domxref("FormData")}} オブジェクトで解決する promise を返す。
-
{{domxref("Body.json()")}}
-
{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、 {{jsxref("JSON")}} オブジェクトで解決する promise を返す。
-
{{domxref("Body.text()")}}
-
{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、{{domxref("USVString")}} （text）で解決する promise を返す。
-
+

例

+ +

画像のフェッチ

-

例

+

basic fetch example (run example live) では image を取得するために単純な fetch() を使用し、それを {{htmlelement("img")}} タグの中に入れて表示しています。fetch() はプロミスを返し、これはこのリソースフェッチ捜査に関連付けられた Response オブジェクトで解決します。

-

basic fetch example (run example live) では image を取得するために単純な fetch() を使用し、それを {{htmlelement("img")}} タグの中に入れて表示しています。fetch() はプロミスを返し、then の引数として Response オブジェクトを渡します。image をリクエストするとき、レスポンスに正しい MIME タイプを設定するために、{{domxref("Body.blob")}}（{{domxref("Response")}} は body を実装しています）を実行する必要があることに注意してください。

+

画像をリクエストするとき、レスポンスに正しい MIME タイプを設定するために、{{domxref("Response.blob")}} を実行する必要があることに注意してください。

-
var myImage = document.querySelector('.my-image');
-fetch('flowers.jpg').then(function(response) {
-  return response.blob();
-}).then(function(blob) {
-  var objectURL = URL.createObjectURL(blob);
-  myImage.src = objectURL;
+
const image = document.querySelector('.my-image');
+fetch('flowers.jpg')
+.then(response => response.blob())
+.then(blob => {
+  const objectURL = URL.createObjectURL(blob);
+  image.src = objectURL;
 });

 
-
カスタム Response オブジェクトを生成するために、{{domxref("Response.Response()")}} コンストラクタを使用することもできます：

+
{{domxref("Response.Response()")}} コンストラクターを使用して、独自の Response オブジェクトを生成することもできます。

+
+
const response = new Response();

+
+
Ajax 呼び出し

 
-
var myResponse = new Response();

+
ここで JSON 文字列を生成する PHP のプログラムファイルを呼び出し、結果として JSON の値を表示します。簡単なエラーハンドリングも含んでいます。

 
-
仕様

+
// Function to do an Ajax call
+const doAjax = async () => {
+  const response = await fetch('Ajax.php'); // Generate the Response object
+  if (response.ok) {
+    const jsonValue = await response.json(); // Get JSON value from the response body
+    return Promise.resolve(jsonValue);
+  } else {
+    return Promise.reject('*** PHP file not found');
+  }
+}
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様状態コメント
{{SpecName('Fetch','#response-class','Response')}}{{Spec2('Fetch')}}Initial definition

+// Call the function and output value or error message to console
+doAjax().then(console.log).catch(console.log);
+

 
-
ブラウザー実装状況

+
仕様書

 
+{{Specifications}}
 
+
ブラウザーの互換性

 
-
{{Compat("api.Response")}}

+
{{Compat}}

 
-
関連項目

+
関連情報

 
 
diff --git a/files/ja/web/api/response/json/index.html b/files/ja/web/api/response/json/index.html
new file mode 100644
index 0000000000..f59b3f4313
--- /dev/null
+++ b/files/ja/web/api/response/json/index.html
@@ -0,0 +1,78 @@
+---
+title: Response.json()
+slug: Web/API/Response/json
+tags:
+  - API
+  - Fetch
+  - JSON
+  - Method
+  - Reference
+  - メソッド
+  - Response
+translation_of: Web/API/Response/json
+original_slug: Web/API/Body/json
+browser-compat: api.Response.json
+---
+
{{APIRef("Fetch API")}}

+
+
json() は {{DOMxRef("Response")}} インターフェイスのメソッドで、 {{DOMxRef("Response")}} のストリームを取得して完全に読み取ります。本文のテキストを {{JSxRef("JSON")}} として解釈した結果で解決するプロミスを返します。

+
+
なお、このメソッドは json() という名前であるにもかかわらず、結果は JSON ではありません。入力として JSON を取って解釈し、 JavaScript のオブジェクトを生成します。

+
+
構文

+
+
response.json().then(data => {
+  // data を使用した処理を実行する
+});

+
+
引数

+
+
なし。

+
+
返値

+
+
JavaScript オブジェクトに解決される {{jsxref("Promise")}}。 このオブジェクトは、オブジェクト、配列、文字列、数値など、JSON で表現できるものであれば何でもなります。

+
+
例

+
+
fetch json の例（fetch json をライブで実行）では、 {{DOMxRef("Request.Request", "Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して .json ファイルを読み取ります。読み取りに成功したら、json() を使用してデータを読み取り、解析し、結果のオブジェクトから期待通りに値を読み出し、それらの値をリスト項目に追加して商品データとして表示します。

+
+
const myList = document.querySelector('ul');
+const myRequest = new Request('products.json');
+
+fetch(myRequest)
+  .then(response => response.json())
+  .then(data => {
+    for (const product of data.products) {
+      let listItem = document.createElement('li');
+      listItem.appendChild(
+        document.createElement('strong')
+      ).textContent = product.Name;
+      listItem.append(
+        ` can be found in ${
+          product.Location
+        }. Cost: `
+      );
+      listItem.appendChild(
+        document.createElement('strong')
+      ).textContent = `£${product.Price}`;
+      myList.appendChild(listItem);
+    }
+  })
+  .catch(console.error);

+
+
仕様書

+
+{{Specifications}}
+
+
ブラウザーの互換性

+
+
{{Compat}}

+
+
関連情報

+
+
diff --git a/files/ja/web/api/response/text/index.html b/files/ja/web/api/response/text/index.html
new file mode 100644
index 0000000000..26aafdcfe7
--- /dev/null
+++ b/files/ja/web/api/response/text/index.html
@@ -0,0 +1,74 @@
+---
+title: Response.text()
+slug: Web/API/Response/text
+tags:
+  - API
+  - Fetch
+  - Method
+  - Reference
+  - Text
+  - Response
+translation_of: Web/API/Response/text
+original_slug: Web/API/Body/text
+browser-compat: api.Response.text
+---
+
{{APIRef("Fetch")}}

+
+
text() は {{domxref("Response")}} インターフェイスのメソッドで、 {{domxref("Response")}} ストリームを取得して完全に読み込みます。 {{jsxref("String")}} で解決するプロミスを返します。 レスポンスは常に UTF-8 としてデコードされます。

+
+
構文

+
+
response.text().then(function (text) {
+  // text レスポンスを使用して何か実行する。
+});

+
+
引数

+
+
なし。

+
+
返値

+
+
{{jsxref("String")}} で解決するプロミスです。

+
+
例

+
+
fetch text の例（fetch text をライブで実行）には、{{htmlelement("article")}} 要素と 3 つのリンク（myLinks 配列に格納されています）があります。 最初に、リンクのすべてをループし、それぞれのリンクに、その 1 つをクリックしたとき、 getData() 関数がリンクの data-page 識別子を引数として実行されるように、onclick イベントハンドラーを設定します。

+
+
getData() が実行されると、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して特定の .txt ファイルをフェッチします。 フェッチが成功したら、text() を使用してレスポンスから {{domxref("USVString")}} (テキスト) オブジェクトを読み取り、{{htmlelement("article")}} 要素の {{domxref("Element.innerHTML","innerHTML")}} にテキストオブジェクトの値を設定します。

+
+
let myArticle = document.querySelector('article');
+let myLinks = document.querySelectorAll('ul a');
+
+for(let i = 0; i <= myLinks.length-1; i++) {
+  myLinks[i].onclick = function(e) {
+    e.preventDefault();
+    let linkData = e.target.getAttribute('data-page');
+    getData(linkData);
+  }
+};
+
+function getData(pageId) {
+  console.log(pageId);
+  var myRequest = new Request(pageId + '.txt');
+  fetch(myRequest).then(function(response) {
+    return response.text().then(function(text) {
+      myArticle.innerHTML = text;
+    });
+  });
+}

+
+
仕様書

+
+{{Specifications}}
+
+
ブラウザーの互換性

+
+
{{Compat}}

+
+
関連情報

+
+
-- 
cgit v1.2.3-54-g00ecf


From 0de94c30d64dcb04c8766f9617430f31ec765c8d Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Fri, 13 Aug 2021 18:03:38 +0900
Subject: ChildNode ミックスインを廃止 (#1907)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ChildNode ミックスインを廃止し、メンバーの記事を Element インターフェイスに移管
---
 files/ja/_redirects.txt                            |   3 -
 files/ja/_wikihistory.json                         |  36 ++---
 .../orphaned/web/api/childnode/before/index.html   | 145 ---------------------
 files/ja/orphaned/web/api/childnode/index.html     |  90 -------------
 .../web/api/childnode/replacewith/index.html       | 120 -----------------
 files/ja/web/api/element/before/index.html         |  91 +++++++++++++
 files/ja/web/api/element/replacewith/index.html    |  73 +++++++++++
 7 files changed, 178 insertions(+), 380 deletions(-)
 delete mode 100644 files/ja/orphaned/web/api/childnode/before/index.html
 delete mode 100644 files/ja/orphaned/web/api/childnode/index.html
 delete mode 100644 files/ja/orphaned/web/api/childnode/replacewith/index.html
 create mode 100644 files/ja/web/api/element/before/index.html
 create mode 100644 files/ja/web/api/element/replacewith/index.html

(limited to 'files/ja/web/api')

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 909a5c7b7a..4c7234a383 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -3187,9 +3187,6 @@
 /ja/docs/Web/API/CanvasRenderingContext2D.drawFocusIfNeeded	/ja/docs/Web/API/CanvasRenderingContext2D/drawFocusIfNeeded
 /ja/docs/Web/API/CanvasRenderingContext2D.removeHitRegion	/ja/docs/Web/API/CanvasRenderingContext2D/removeHitRegion
 /ja/docs/Web/API/Canvas_API/Drawing_graphics_with_canvas	/ja/docs/Web/API/Canvas_API/Tutorial
-/ja/docs/Web/API/ChildNode	/ja/docs/orphaned/Web/API/ChildNode
-/ja/docs/Web/API/ChildNode/before	/ja/docs/orphaned/Web/API/ChildNode/before
-/ja/docs/Web/API/ChildNode/replaceWith	/ja/docs/orphaned/Web/API/ChildNode/replaceWith
 /ja/docs/Web/API/Console.error	/ja/docs/Web/API/Console/error
 /ja/docs/Web/API/Coordinates	/ja/docs/Web/API/GeolocationCoordinates
 /ja/docs/Web/API/DOMLocator	/ja/docs/orphaned/Web/API/DOMLocator
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index 2f71d0a613..1be588167d 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -13613,6 +13613,13 @@
       "Okome"
     ]
   },
+  "Web/API/Element/before": {
+    "modified": "2020-10-17T03:58:22.731Z",
+    "contributors": [
+      "Potappo",
+      "Shirasu"
+    ]
+  },
   "Web/API/Element/blur_event": {
     "modified": "2020-10-15T21:58:39.988Z",
     "contributors": [
@@ -14142,6 +14149,13 @@
       "Mgjbot"
     ]
   },
+  "Web/API/Element/replaceWith": {
+    "modified": "2020-10-17T04:41:48.425Z",
+    "contributors": [
+      "Potappo",
+      "Shirasu"
+    ]
+  },
   "Web/API/Element/requestFullScreen": {
     "modified": "2019-06-03T03:04:44.040Z",
     "contributors": [
@@ -50796,28 +50810,6 @@
       "shinnn"
     ]
   },
-  "orphaned/Web/API/ChildNode": {
-    "modified": "2020-11-23T03:36:42.854Z",
-    "contributors": [
-      "segayuu",
-      "Marsf",
-      "momoi"
-    ]
-  },
-  "orphaned/Web/API/ChildNode/before": {
-    "modified": "2020-10-17T03:58:22.731Z",
-    "contributors": [
-      "Potappo",
-      "Shirasu"
-    ]
-  },
-  "orphaned/Web/API/ChildNode/replaceWith": {
-    "modified": "2020-10-17T04:41:48.425Z",
-    "contributors": [
-      "Potappo",
-      "Shirasu"
-    ]
-  },
   "orphaned/Web/API/DOMLocator": {
     "modified": "2020-08-13T09:34:48.574Z",
     "contributors": [
diff --git a/files/ja/orphaned/web/api/childnode/before/index.html b/files/ja/orphaned/web/api/childnode/before/index.html
deleted file mode 100644
index b0b091392e..0000000000
--- a/files/ja/orphaned/web/api/childnode/before/index.html
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: ChildNode.before()
-slug: orphaned/Web/API/ChildNode/before
-tags:
-  - API
-  - DOM
-  - Method
-  - Node
-  - Reference
-translation_of: Web/API/ChildNode/before
-original_slug: Web/API/ChildNode/before
----
-
{{APIRef("DOM")}}

-
-
ChildNode.before() は ChildNode の親の子リストの、ChildNode の直前に、 {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。

-
-
構文

-
-
[Throws, Unscopable]
-void ChildNode.before((Node or DOMString)... nodes);
-

-
-
パラメーター

-
-

- 
nodes

- 
{{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを挿入します。

-

-
-
例外

-
-
    
- 
  • {{domxref("HierarchyRequestError")}}: ノードは階層の指定の位置には挿入できません。
    • 
-

-
-
例

-
-
要素の挿入

-
-
var parent = document.createElement("div");
-var child = document.createElement("p");
-parent.appendChild(child);
-var span = document.createElement("span");
-
-child.before(span);
-
-console.log(parent.outerHTML);
-// "<div><span></span><p></p></div>"
-

-
-
テキストの挿入

-
-
var parent = document.createElement("div");
-var child = document.createElement("p");
-parent.appendChild(child);
-
-child.before("Text");
-
-console.log(parent.outerHTML);
-// "<div>Text<p></p></div>"

-
-
要素とテキストの挿入

-
-
var parent = document.createElement("div");
-var child = document.createElement("p");
-parent.appendChild(child);
-var span = document.createElement("span");
-
-child.before(span, "Text");
-
-console.log(parent.outerHTML);
-// "<div><span></span>Text<p></p></div>"

-
-
ChildNode.before() はスコーピングに非対応

-
-
before() メソッドは with 文でのスコーピングに対応していません。詳細は {{jsxref("Symbol.unscopables")}} をご覧ください。

-
-
with(node) {
-  before("foo");
-}
-// ReferenceError: before is not defined 

-
-
ポリフィル

-
-
以下のポリフィルで、 Internet Explorer 9 以降でも before() メソッドが利用できます。

-
-
// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('before')) {
-      return;
-    }
-    Object.defineProperty(item, 'before', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function before() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.parentNode.insertBefore(docFrag, this);
-      }
-    });
-  });
-})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

-
-
仕様

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書策定状況コメント
{{SpecName('DOM WHATWG', '#dom-childnode-before', 'ChildNode.before()')}}{{Spec2('DOM WHATWG')}}初期定義

-
-
ブラウザー実装状況

-
-
-
-
{{Compat("api.ChildNode.before")}}

-
-
関連情報

-
-
    
- 
  • {{domxref("ChildNode")}} と {{domxref("ParentNode")}}
    • 
- 
  • {{domxref("ChildNode.after()")}}
    • 
- 
  • {{domxref("ParentNode.append()")}}
    • 
- 
  • {{domxref("Node.appendChild()")}}
    • 
- 
  • {{domxref("Node.insertBefore()")}}
    • 
- 
  • {{domxref("Element.insertAdjacentElement()")}}
    • 
- 
  • {{domxref("NodeList")}}
    • 
-

diff --git a/files/ja/orphaned/web/api/childnode/index.html b/files/ja/orphaned/web/api/childnode/index.html
deleted file mode 100644
index a1208b5aa0..0000000000
--- a/files/ja/orphaned/web/api/childnode/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: ChildNode
-slug: orphaned/Web/API/ChildNode
-tags:
-  - API
-  - DOM
-  - Experimental
-  - Interface
-  - Node
-translation_of: Web/API/ChildNode
-original_slug: Web/API/ChildNode
----
-
{{APIRef("DOM")}}

-
-
ChildNode ミックスインは親を持つことができる {{domxref("Node")}} オブジェクトに共通のメソッド・プロパティが含まれています。これは、{{domxref("Element")}}、{{domxref("DocumentType")}}、{{domxref("CharacterData")}} オブジェクトによって実装されています。

-
-
プロパティ

-
-
継承された、または固有のプロパティはありません。

-
-
メソッド

-
-
継承されたメソッドはありません。

-
-

- 
{{domxref("ChildNode.remove()")}} {{experimental_inline}}

- 
この ChildNodeを、その親の children から削除します。

- 
{{domxref("ChildNode.before()")}} {{experimental_inline}}

- 
{{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを、この ChildNode の親の children の、ChildNode の直前に挿入します。{{domxref("DOMString")}} オブジェクトは、{{domxref("Text")}} ノードと等価なノードとして挿入されます。

- 
{{domxref("ChildNode.after()")}} {{experimental_inline}}

- 
{{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを、この ChildNode の親の children の、ChildNode の直後に挿入します。{{domxref("DOMString")}} オブジェクトは、{{domxref("Text")}} ノードと等価なノードとして挿入されます。

- 
{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}

- 
ChildNode の親の children 内に含まれるこの ChildNode を {{domxref("Node")}} または {{domxref("DOMString")}} のセットと置き換えます。{{domxref("DOMString")}} オブジェクトは、{{domxref("Text")}} ノードと等価なノードとして挿入されます。

-

-
-
仕様

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状況コメント
{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}{{Spec2('DOM WHATWG')}}ElementTraversal インターフェースは {{domxref("ParentNode")}} と ChildNode に分割されました。 previousElementSibling と nextElementSibling は後者で定義されています。

-    {{domxref("CharacterData")}} と {{domxref("DocumentType")}} は新しいインターフェースが実装されています。

-    remove(), before(), after() および replaceWith() メソッドが追加されました。
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}ElementTraversal 基本インターフェースにこのプロパティの初期定義が追加され、{{domxref("Element")}} で使われます。

-
-
互換コード

-
-
外部サイト (github): childNode.js

-
-
ブラウザの実装状況

-
-
{{Compat("api.ChildNode")}}

-
-
関連項目

-
-
    
- 
  • {{domxref("ParentNode")}} インターフェース
    • 
- 
  • 
-  
    {{domxref("ParentNode")}} インターフェースを実装したオブジェクト型
    
-
-  
      
-   
    • 
-    
      {{domxref("CharacterData")}}
      
-   
      • 
-   
    • 
-    
      {{domxref("Element")}}
      
-   
      • 
-   
    • 
-    
      {{domxref("DocumentType")}}
      
-   
      • 
-  
    
- 
    • 
- 
  • 
-  
    The {{domxref("NonDocumentTypeChildNode")}} interface
    
- 
    • 
-

diff --git a/files/ja/orphaned/web/api/childnode/replacewith/index.html b/files/ja/orphaned/web/api/childnode/replacewith/index.html
deleted file mode 100644
index 28896c90fd..0000000000
--- a/files/ja/orphaned/web/api/childnode/replacewith/index.html
+++ /dev/null
@@ -1,120 +0,0 @@
----
-title: ChildNode.replaceWith()
-slug: orphaned/Web/API/ChildNode/replaceWith
-tags:
-  - API
-  - DOM
-  - Method
-  - Node
-  - Reference
-translation_of: Web/API/ChildNode/replaceWith
-original_slug: Web/API/ChildNode/replaceWith
----
-
{{APIRef("DOM")}}

-
-
ChildNode.replaceWith() は親の子リストの ChildNode を、 {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットに置換します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。

-
-
構文

-
-
[Throws, Unscopable]
-void ChildNode.replaceWith((Node or DOMString)... nodes);
-

-
-
パラメーター

-
-

- 
nodes

- 
{{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットで置換します。

-

-
-
例外

-
-
    
- 
  • {{domxref("HierarchyRequestError")}}: ノードは階層の指定の位置には挿入できません。
    • 
-

-
-
例

-
-
replaceWith() の使用

-
-
var parent = document.createElement("div");
-var child = document.createElement("p");
-parent.appendChild(child);
-var span = document.createElement("span");
-
-child.replaceWith(span);
-
-console.log(parent.outerHTML);
-// "<div><span></span></div>"
-

-
-
ChildNode.replaceWith() はスコーピングに非対応

-
-
replaceWith() メソッドは with 文でのスコーピングに対応していません。詳細は {{jsxref("Symbol.unscopables")}} をご覧ください。

-
-
with(node) {
-  replaceWith("foo");
-}
-// ReferenceError: replaceWith is not defined 

-
-
ポリフィル

-
-
以下のポリフィルで、 Internet Explorer 9 以降でも replaceWith() メソッドが利用できます。

-
-
function ReplaceWithPolyfill() {
-  'use-strict'; // For safari, and IE > 10
-  var parent = this.parentNode, i = arguments.length, currentNode;
-  if (!parent) return;
-  if (!i) // if there are no arguments
-    parent.removeChild(this);
-  while (i--) { // i-- decrements i and returns the value of i before the decrement
-    currentNode = arguments[i];
-    if (typeof currentNode !== 'object'){
-      currentNode = this.ownerDocument.createTextNode(currentNode);
-    } else if (currentNode.parentNode){
-      currentNode.parentNode.removeChild(currentNode);
-    }
-    // the value of "i" below is after the decrement
-    if (!i) // if currentNode is the first argument (currentNode === arguments[0])
-      parent.replaceChild(currentNode, this);
-    else // if currentNode isn't the first
-      parent.insertBefore(currentNode, this.nextSibling);
-  }
-}
-if (!Element.prototype.replaceWith)
-    Element.prototype.replaceWith = ReplaceWithPolyfill;
-if (!CharacterData.prototype.replaceWith)
-    CharacterData.prototype.replaceWith = ReplaceWithPolyfill;
-if (!DocumentType.prototype.replaceWith)
-    DocumentType.prototype.replaceWith = ReplaceWithPolyfill;

-
-
仕様

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書策定状況コメント
{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}{{Spec2('DOM WHATWG')}}初期定義

-
-
ブラウザー実装状況

-
-
-
-
{{Compat("api.ChildNode.replaceWith")}}

-
-
関連情報

-
-
    
- 
  • {{domxref("ChildNode")}} と {{domxref("ParentNode")}}
    • 
- 
  • {{domxref("Node.replaceChild()")}}
    • 
- 
  • {{domxref("NodeList")}}
    • 
-

diff --git a/files/ja/web/api/element/before/index.html b/files/ja/web/api/element/before/index.html
new file mode 100644
index 0000000000..652f38c95f
--- /dev/null
+++ b/files/ja/web/api/element/before/index.html
@@ -0,0 +1,91 @@
+---
+title: Element.before()
+slug: Web/API/Element/before
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - Reference
+browser-compat: api.Element.before
+translation_of: Web/API/Element/before
+original_slug: Web/API/ChildNode/before
+---
+
{{APIRef("DOM")}}

+
+
Element.before() は一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを、この Element の親の子リストの中、この Element の直前に挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。

+
+
構文

+
+
before(... nodes)

+
+
引数

+
+

+	
nodes

+	
挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。

+

+
+
例外

+
+
    
+	
  • {{domxref("HierarchyRequestError")}}: 階層の指定の位置にノードを挿入できない。
    • 
+

+
+
例

+
+
要素の挿入

+
+
let container = document.createElement("div");
+let p = document.createElement("p");
+container.appendChild(p);
+let span = document.createElement("span");
+
+p.before(span);
+
+console.log(container.outerHTML);
+// "<div><span></span><p></p></div>"
+

+
+
テキストの挿入

+
+
let container = document.createElement("div");
+let p = document.createElement("p");
+container.appendChild(p);
+
+p.before("Text");
+
+console.log(container.outerHTML);
+// "<div>Text<p></p></div>"

+
+
要素とテキストの挿入

+
+
let container = document.createElement("div");
+let p = document.createElement("p");
+container.appendChild(p);
+let span = document.createElement("span");
+
+p.before(span, "Text");
+
+console.log(container.outerHTML);
+// "<div><span></span>Text<p></p></div>"

+
+
+
仕様書

+
+{{Specifications}}
+
+
ブラウザーの互換性

+
+
{{Compat}}

+
+
関連情報

+
+
    
+  
  • {{domxref("Element.after()")}}
    • 
+  
  • {{domxref("Element.append()")}}
    • 
+  
  • {{domxref("Node.appendChild()")}}
    • 
+  
  • {{domxref("Node.insertBefore()")}}
    • 
+  
  • {{domxref("Element.insertAdjacentElement()")}}
    • 
+  
  • {{domxref("NodeList")}}
    • 
+

diff --git a/files/ja/web/api/element/replacewith/index.html b/files/ja/web/api/element/replacewith/index.html
new file mode 100644
index 0000000000..ad9420f041
--- /dev/null
+++ b/files/ja/web/api/element/replacewith/index.html
@@ -0,0 +1,73 @@
+---
+title: Element.replaceWith()
+slug: Web/API/Element/replaceWith
+tags:
+  - API
+  - DOM
+  - Method
+  - Element
+  - Reference
+browser-compat: api.Element.replaceWith
+translation_of: Web/API/Element/replaceWith
+original_slug: Web/API/ChildNode/replaceWith
+---
+
{{APIRef("DOM")}}

+
+
Element.replaceWith() メソッドは、この Element を親の子リストの中で一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトに置換します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。

+
+
構文

+
+
replaceWith(...nodes)

+
+
引数

+
+

+	
nodes

+	
一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトで置換します。

+

+
+
例外

+
+
    
+	
  • {{domxref("HierarchyRequestError")}}: 階層の指定の位置にはノードを挿入できません。
    • 
+

+
+
例

+
+
replaceWith() の使用

+
+
const div = document.createElement("div");
+const p = document.createElement("p");
+div.appendChild(p);
+const span = document.createElement("span");
+
+p.replaceWith(span);
+
+console.log(div.outerHTML);
+// "<div><span></span></div>"
+

+
+
replaceWith() はスコーピングに非対応

+
+
replaceWith() メソッドは with 文でのスコーピングに対応していません。詳細は {{jsxref("Symbol.unscopables")}} をご覧ください。

+
+
with(node) {
+  replaceWith("foo");
+}
+// ReferenceError: replaceWith is not defined 

+
+
仕様書

+
+
{{Specifications}}
+
+

+
ブラウザーの互換性

+
+
{{Compat}}

+
+
関連情報

+
+
    
+  
  • {{domxref("Node.replaceChild()")}}
    • 
+  
  • {{domxref("NodeList")}}
    • 
+

-- 
cgit v1.2.3-54-g00ecf


From 4543f7c8d94578285f14b27ca96165ffae9c7de9 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sat, 14 Aug 2021 03:42:07 +0900
Subject: conflicting/Web/API/XRInputSource 以下のファイルを元の場所に移動
 (#1856)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 英語版で元の位置に戻されていたので、日本語版でも元の位置に戻した。
- https://github.com/mdn/translated-content/issues/1831 の一環
---
 files/ja/_redirects.txt                            |   2 -
 files/ja/_wikihistory.json                         |  24 ++---
 .../web/api/xrinputsource/handedness/index.html    |  86 -----------------
 .../web/api/xrinputsource/targetraymode/index.html | 103 ---------------------
 files/ja/web/api/xrhandedness/index.html           |  85 +++++++++++++++++
 files/ja/web/api/xrtargetraymode/index.html        | 102 ++++++++++++++++++++
 6 files changed, 199 insertions(+), 203 deletions(-)
 delete mode 100644 files/ja/conflicting/web/api/xrinputsource/handedness/index.html
 delete mode 100644 files/ja/conflicting/web/api/xrinputsource/targetraymode/index.html
 create mode 100644 files/ja/web/api/xrhandedness/index.html
 create mode 100644 files/ja/web/api/xrtargetraymode/index.html

(limited to 'files/ja/web/api')

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 31d22be5bf..55fc6851b7 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -3465,13 +3465,11 @@
 /ja/docs/Web/API/WindowTimers/setTimeout	/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
 /ja/docs/Web/API/WorkerGlobalScope/caches	/ja/docs/Web/API/WindowOrWorkerGlobalScope/caches
 /ja/docs/Web/API/XMLHttpRequest/openRequest	/ja/docs/orphaned/Web/API/XMLHttpRequest/openRequest
-/ja/docs/Web/API/XRHandedness	/ja/docs/conflicting/Web/API/XRInputSource/handedness
 /ja/docs/Web/API/XRReferenceSpaceEventInit	/ja/docs/conflicting/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent
 /ja/docs/Web/API/XRReferenceSpaceEventInit/referenceSpace	/ja/docs/conflicting/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent_0f733d39fd3094010931f093b9045686
 /ja/docs/Web/API/XRReferenceSpaceEventInit/transform	/ja/docs/conflicting/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent_7dfb381c892055a0c91980d537a86c6b
 /ja/docs/Web/API/XRReferenceSpaceType	/ja/docs/Web/API/XRSession/requestReferenceSpace
 /ja/docs/Web/API/XRSessionMode	/ja/docs/orphaned/Web/API/XRSessionMode
-/ja/docs/Web/API/XRTargetRayMode	/ja/docs/conflicting/Web/API/XRInputSource/targetRayMode
 /ja/docs/Web/API/console.dir	/ja/docs/Web/API/Console/dir
 /ja/docs/Web/API/console.log	/ja/docs/Web/API/Console/log
 /ja/docs/Web/API/console.time	/ja/docs/Web/API/Console/time
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index 6ac7dfd206..8ea65b85c6 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -25974,6 +25974,12 @@
       "Wind1808"
     ]
   },
+  "Web/API/XRHandedness": {
+    "modified": "2020-12-06T13:23:10.937Z",
+    "contributors": [
+      "Wind1808"
+    ]
+  },
   "Web/API/XRInputSource": {
     "modified": "2020-12-06T11:35:46.714Z",
     "contributors": [
@@ -26094,6 +26100,12 @@
       "Wind1808"
     ]
   },
+  "Web/API/XRTargetRayMode": {
+    "modified": "2020-12-08T09:23:22.538Z",
+    "contributors": [
+      "Wind1808"
+    ]
+  },
   "Web/API/XSLTProcessor": {
     "modified": "2020-10-15T21:59:36.911Z",
     "contributors": [
@@ -48483,18 +48495,6 @@
       "ethertank"
     ]
   },
-  "conflicting/Web/API/XRInputSource/handedness": {
-    "modified": "2020-12-06T13:23:10.937Z",
-    "contributors": [
-      "Wind1808"
-    ]
-  },
-  "conflicting/Web/API/XRInputSource/targetRayMode": {
-    "modified": "2020-12-08T09:23:22.538Z",
-    "contributors": [
-      "Wind1808"
-    ]
-  },
   "conflicting/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent": {
     "modified": "2020-11-08T02:10:47.628Z",
     "contributors": [
diff --git a/files/ja/conflicting/web/api/xrinputsource/handedness/index.html b/files/ja/conflicting/web/api/xrinputsource/handedness/index.html
deleted file mode 100644
index ea3db01eec..0000000000
--- a/files/ja/conflicting/web/api/xrinputsource/handedness/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: XRHandedness
-slug: conflicting/Web/API/XRInputSource/handedness
-tags:
-  - API
-  - AR
-  - Enum
-  - Enumerated Type
-  - Handedness
-  - Reference
-  - Type
-  - VR
-  - WebXR
-  - WebXR Device API
-  - XRHandedness
-  - hand
-  - left
-  - right
-translation_of: Web/API/XRHandedness
-original_slug: Web/API/XRHandedness
----
-
{{APIRef("WebXR")}}

-
-
WebXR の XRHandedness 列挙型は、使用している XR 入力デバイスに接続された特定の入力コントローラーを操作するために使用しているユーザーの手を識別する値を提供します。 XRHandedness は、{{domxref("XRInputSource")}} の {{domxref("XRInputSource.handedness", "handedness")}} プロパティの値として使用されます。

-
-
値

-
-

- 
none

- 
入力コントローラーは、ユーザーのいずれの手にも関連付けられていません。

- 
left

- 
入力コントローラーは、ユーザーの左手に握られているか、着用されているか、取り付けられています。

- 
right

- 
入力コントローラーは、ユーザーの右手に握られているか、着用されているか、取り付けられています。

-

-
-
例

-
-
handedness の重要な使用方法の1つは、コントローラーがどちらの手にあるかを判別して、仮想空間でその手（またはその手が制御しているデバイス）の表現を描画できるようにすることです。

-
-
function updateInputSources(session, frame, refSpace) {
-  for (let source of session.inputSources) {
-    if (source.gripSpace) {
-      let gripPose = frame.getPose(source.gripSpace, refSpace);
-
-      if (gripPose) {
-        myRenderHandObject(gripPose, inputSource.handedness);
-      }
-    }
-  }
-}
-

-
-
この関数は、すべてのアニメーションフレーム（または必要な滑らかさの程度とパフォーマンスの制約に応じて定期的に）で呼ばれ、入力ソースのリストをスキャンして、null ではない {{domxref("XRInputSource.gripSpace", "gripSpace")}} を持つものを探します。 gripSpace が存在する場合、それは入力ソースが何らかのハンドヘルドデバイスであることを意味するため、可能であれば視覚的にレンダリングする必要があります。

-
-
gripSpace が null 以外の場合、この関数は、現在の参照空間に変換された gripSpace のポーズを取得します。 それが有効であると仮定すると、myRenderHandObject() と呼ばれる関数が、グリップのポーズと handedness の値を使用して呼び出されます。 これらの値が手元にあれば（しゃれは意図していません）、myRenderHandObject() は、正しい手のために配置および形成された適切なモデルを描画できます。

-
-
仕様

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様状態コメント
{{SpecName('WebXR','#enumdef-xrhandedness','XRHandedness')}}{{Spec2('WebXR')}}初期定義

-
-
ブラウザーの互換性

-
-
{{Compat("api.XRHandedness")}}

-
-
関連情報

-
-
diff --git a/files/ja/conflicting/web/api/xrinputsource/targetraymode/index.html b/files/ja/conflicting/web/api/xrinputsource/targetraymode/index.html
deleted file mode 100644
index e787a3e7be..0000000000
--- a/files/ja/conflicting/web/api/xrinputsource/targetraymode/index.html
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: XRTargetRayMode
-slug: conflicting/Web/API/XRInputSource/targetRayMode
-tags:
-  - 3D
-  - API
-  - AR
-  - Enum
-  - Enumerated Type
-  - Input
-  - Reality
-  - Reference
-  - Type
-  - VR
-  - Virtual
-  - WebXR
-  - WebXR API
-  - WebXR Device API
-  - XR
-  - XRTargetRayMode
-  - augmented
-  - source
-  - target
-translation_of: Web/API/XRTargetRayMode
-original_slug: Web/API/XRTargetRayMode
----
-
{{APIRef("WebXR")}}

-
-
WebXR Device API の XRTargetRayMode 列挙型は、入力コントローラーのターゲティング光線を生成する方法を記述します。 ターゲティングは、視線追跡システムを使用してターゲットを見るか、ハンドコントローラー、グローブ、またはモーショントラッキングシステムを使用してターゲットを指すか、画面上で指やマウスを使用してターゲットをタップまたはクリックすることによって行うことができます。

-
-
通常、ターゲット光線は、ターゲティングシステムのソースから、ユーザーが見ている方向または指している方向にターゲット光線に沿って描画されます。 光線の終点を示す方法と同様に、光線のスタイルは一般的にあなた次第です。 ターゲットとなる点またはオブジェクトは、図形を描画するか、ターゲットとなる表面またはオブジェクトを強調表示することによって示される場合があります。

-
-

-

-
ハンドコントローラーから放出されるターゲット光線。

-ハンドコントローラーから放出されるターゲット光線を示すスクリーンショット

-

-
-
ターゲット光線は、単純な線（理想的には距離とともにフェードする）から、上のスクリーンショットに示されているサイエンスフィクションの「フェイザー」スタイルなどのアニメーション効果まで、何でもかまいません。

-
-
値

-
-

- 
gaze（視線）

- 
ユーザーは、ユーザーが見ている方向を検出する視線追跡システム（または視線入力）を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。

- 
screen（画面）

- 
ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力デバイスをタップして示します。

- 
tracked-pointer（追跡ポインター）

- 
ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルドデバイスまたはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手（または手の中のオブジェクト）からターゲット方向に伸びます。 方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。

-

-
-
例

-
-
このコードの断片は、フレームごとに1回呼び出される関数の一部を示しています。 null 以外の {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。

-
-
このような入力ごとに、この例では、{{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が tracked-pointer である入力を探します。 これは、入力が実際には、視線入力デバイス、画面タップ、またはマウスクリックではなく、ターゲティングデバイスを表すことを目的としていることを示しています。 追跡ポインターの場合、関数 myRenderTargetRayAsBeam() が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。

-
-
コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。

-
-
function updateInputSources(session, frame, refSpace) {
-  for (let source of session.getInputSources()) {
-    let targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace);
-
-    if (targetRayPose) {
-      if (source.targetRayMode == "tracked-pointer") {
-        myRenderTargetRayAsBeam(targetRayPose);
-      }
-    }
-
-    /* ... */
-  }
-}
-

-
-
詳細とより完全な例については、入力と入力ソースの記事を参照してください。

-
-
仕様

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様状態コメント
{{SpecName('WebXR','#enumdef-xrtargetraymode','XRTargetRayMode')}}{{Spec2('WebXR')}}初期定義

-
-
ブラウザーの互換性

-
-
{{Compat("api.XRTargetRayMode")}}

-
-
関連情報

-
-
diff --git a/files/ja/web/api/xrhandedness/index.html b/files/ja/web/api/xrhandedness/index.html
new file mode 100644
index 0000000000..c66cb6f7c6
--- /dev/null
+++ b/files/ja/web/api/xrhandedness/index.html
@@ -0,0 +1,85 @@
+---
+title: XRHandedness
+slug: Web/API/XRHandedness
+tags:
+  - API
+  - AR
+  - Enum
+  - Enumerated Type
+  - Handedness
+  - Reference
+  - Type
+  - VR
+  - WebXR
+  - WebXR Device API
+  - XRHandedness
+  - hand
+  - left
+  - right
+translation_of: Web/API/XRHandedness
+---
+
{{APIRef("WebXR")}}

+
+
WebXR の XRHandedness 列挙型は、使用している XR 入力デバイスに接続された特定の入力コントローラーを操作するために使用しているユーザーの手を識別する値を提供します。 XRHandedness は、{{domxref("XRInputSource")}} の {{domxref("XRInputSource.handedness", "handedness")}} プロパティの値として使用されます。

+
+
値

+
+

+ 
none

+ 
入力コントローラーは、ユーザーのいずれの手にも関連付けられていません。

+ 
left

+ 
入力コントローラーは、ユーザーの左手に握られているか、着用されているか、取り付けられています。

+ 
right

+ 
入力コントローラーは、ユーザーの右手に握られているか、着用されているか、取り付けられています。

+

+
+
例

+
+
handedness の重要な使用方法の1つは、コントローラーがどちらの手にあるかを判別して、仮想空間でその手（またはその手が制御しているデバイス）の表現を描画できるようにすることです。

+
+
function updateInputSources(session, frame, refSpace) {
+  for (let source of session.inputSources) {
+    if (source.gripSpace) {
+      let gripPose = frame.getPose(source.gripSpace, refSpace);
+
+      if (gripPose) {
+        myRenderHandObject(gripPose, inputSource.handedness);
+      }
+    }
+  }
+}
+

+
+
この関数は、すべてのアニメーションフレーム（または必要な滑らかさの程度とパフォーマンスの制約に応じて定期的に）で呼ばれ、入力ソースのリストをスキャンして、null ではない {{domxref("XRInputSource.gripSpace", "gripSpace")}} を持つものを探します。 gripSpace が存在する場合、それは入力ソースが何らかのハンドヘルドデバイスであることを意味するため、可能であれば視覚的にレンダリングする必要があります。

+
+
gripSpace が null 以外の場合、この関数は、現在の参照空間に変換された gripSpace のポーズを取得します。 それが有効であると仮定すると、myRenderHandObject() と呼ばれる関数が、グリップのポーズと handedness の値を使用して呼び出されます。 これらの値が手元にあれば（しゃれは意図していません）、myRenderHandObject() は、正しい手のために配置および形成された適切なモデルを描画できます。

+
+
仕様

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様状態コメント
{{SpecName('WebXR','#enumdef-xrhandedness','XRHandedness')}}{{Spec2('WebXR')}}初期定義

+
+
ブラウザーの互換性

+
+
{{Compat("api.XRHandedness")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/api/xrtargetraymode/index.html b/files/ja/web/api/xrtargetraymode/index.html
new file mode 100644
index 0000000000..7c9848eca4
--- /dev/null
+++ b/files/ja/web/api/xrtargetraymode/index.html
@@ -0,0 +1,102 @@
+---
+title: XRTargetRayMode
+slug: Web/API/XRTargetRayMode
+tags:
+  - 3D
+  - API
+  - AR
+  - Enum
+  - Enumerated Type
+  - Input
+  - Reality
+  - Reference
+  - Type
+  - VR
+  - Virtual
+  - WebXR
+  - WebXR API
+  - WebXR Device API
+  - XR
+  - XRTargetRayMode
+  - augmented
+  - source
+  - target
+translation_of: Web/API/XRTargetRayMode
+---
+
{{APIRef("WebXR")}}

+
+
WebXR Device API の XRTargetRayMode 列挙型は、入力コントローラーのターゲティング光線を生成する方法を記述します。 ターゲティングは、視線追跡システムを使用してターゲットを見るか、ハンドコントローラー、グローブ、またはモーショントラッキングシステムを使用してターゲットを指すか、画面上で指やマウスを使用してターゲットをタップまたはクリックすることによって行うことができます。

+
+
通常、ターゲット光線は、ターゲティングシステムのソースから、ユーザーが見ている方向または指している方向にターゲット光線に沿って描画されます。 光線の終点を示す方法と同様に、光線のスタイルは一般的にあなた次第です。 ターゲットとなる点またはオブジェクトは、図形を描画するか、ターゲットとなる表面またはオブジェクトを強調表示することによって示される場合があります。

+
+

+

+
ハンドコントローラーから放出されるターゲット光線。

+ハンドコントローラーから放出されるターゲット光線を示すスクリーンショット

+

+
+
ターゲット光線は、単純な線（理想的には距離とともにフェードする）から、上のスクリーンショットに示されているサイエンスフィクションの「フェイザー」スタイルなどのアニメーション効果まで、何でもかまいません。

+
+
値

+
+

+ 
gaze（視線）

+ 
ユーザーは、ユーザーが見ている方向を検出する視線追跡システム（または視線入力）を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。

+ 
screen（画面）

+ 
ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力デバイスをタップして示します。

+ 
tracked-pointer（追跡ポインター）

+ 
ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルドデバイスまたはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手（または手の中のオブジェクト）からターゲット方向に伸びます。 方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。

+

+
+
例

+
+
このコードの断片は、フレームごとに1回呼び出される関数の一部を示しています。 null 以外の {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。

+
+
このような入力ごとに、この例では、{{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が tracked-pointer である入力を探します。 これは、入力が実際には、視線入力デバイス、画面タップ、またはマウスクリックではなく、ターゲティングデバイスを表すことを目的としていることを示しています。 追跡ポインターの場合、関数 myRenderTargetRayAsBeam() が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。

+
+
コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。

+
+
function updateInputSources(session, frame, refSpace) {
+  for (let source of session.getInputSources()) {
+    let targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace);
+
+    if (targetRayPose) {
+      if (source.targetRayMode == "tracked-pointer") {
+        myRenderTargetRayAsBeam(targetRayPose);
+      }
+    }
+
+    /* ... */
+  }
+}
+

+
+
詳細とより完全な例については、入力と入力ソースの記事を参照してください。

+
+
仕様

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様状態コメント
{{SpecName('WebXR','#enumdef-xrtargetraymode','XRTargetRayMode')}}{{Spec2('WebXR')}}初期定義

+
+
ブラウザーの互換性

+
+
{{Compat("api.XRTargetRayMode")}}

+
+
関連情報

+
+
-- 
cgit v1.2.3-54-g00ecf


From 964fd2ab882af4a09c92363c1c675d5d2918a79d Mon Sep 17 00:00:00 2001
From: MDN 
Date: Sat, 14 Aug 2021 00:43:17 +0000
Subject: [CRON] sync translated content

---
 files/ja/_redirects.txt                            |   2 +
 files/ja/_wikihistory.json                         |  24 ++---
 .../web/api/xrinputsource/handedness/index.html    |  86 +++++++++++++++++
 .../web/api/xrinputsource/targetraymode/index.html | 103 +++++++++++++++++++++
 files/ja/web/api/xrhandedness/index.html           |  85 -----------------
 files/ja/web/api/xrtargetraymode/index.html        | 102 --------------------
 6 files changed, 203 insertions(+), 199 deletions(-)
 create mode 100644 files/ja/conflicting/web/api/xrinputsource/handedness/index.html
 create mode 100644 files/ja/conflicting/web/api/xrinputsource/targetraymode/index.html
 delete mode 100644 files/ja/web/api/xrhandedness/index.html
 delete mode 100644 files/ja/web/api/xrtargetraymode/index.html

(limited to 'files/ja/web/api')

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 8ab903d28b..f93dba235d 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -3462,11 +3462,13 @@
 /ja/docs/Web/API/WindowTimers/setTimeout	/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
 /ja/docs/Web/API/WorkerGlobalScope/caches	/ja/docs/Web/API/WindowOrWorkerGlobalScope/caches
 /ja/docs/Web/API/XMLHttpRequest/openRequest	/ja/docs/orphaned/Web/API/XMLHttpRequest/openRequest
+/ja/docs/Web/API/XRHandedness	/ja/docs/conflicting/Web/API/XRInputSource/handedness
 /ja/docs/Web/API/XRReferenceSpaceEventInit	/ja/docs/conflicting/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent
 /ja/docs/Web/API/XRReferenceSpaceEventInit/referenceSpace	/ja/docs/conflicting/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent_0f733d39fd3094010931f093b9045686
 /ja/docs/Web/API/XRReferenceSpaceEventInit/transform	/ja/docs/conflicting/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent_7dfb381c892055a0c91980d537a86c6b
 /ja/docs/Web/API/XRReferenceSpaceType	/ja/docs/Web/API/XRSession/requestReferenceSpace
 /ja/docs/Web/API/XRSessionMode	/ja/docs/orphaned/Web/API/XRSessionMode
+/ja/docs/Web/API/XRTargetRayMode	/ja/docs/conflicting/Web/API/XRInputSource/targetRayMode
 /ja/docs/Web/API/console.dir	/ja/docs/Web/API/Console/dir
 /ja/docs/Web/API/console.log	/ja/docs/Web/API/Console/log
 /ja/docs/Web/API/console.time	/ja/docs/Web/API/Console/time
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index 55233bef27..704868c28d 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -25974,12 +25974,6 @@
       "Wind1808"
     ]
   },
-  "Web/API/XRHandedness": {
-    "modified": "2020-12-06T13:23:10.937Z",
-    "contributors": [
-      "Wind1808"
-    ]
-  },
   "Web/API/XRInputSource": {
     "modified": "2020-12-06T11:35:46.714Z",
     "contributors": [
@@ -26100,12 +26094,6 @@
       "Wind1808"
     ]
   },
-  "Web/API/XRTargetRayMode": {
-    "modified": "2020-12-08T09:23:22.538Z",
-    "contributors": [
-      "Wind1808"
-    ]
-  },
   "Web/API/XSLTProcessor": {
     "modified": "2020-10-15T21:59:36.911Z",
     "contributors": [
@@ -48495,6 +48483,18 @@
       "ethertank"
     ]
   },
+  "conflicting/Web/API/XRInputSource/handedness": {
+    "modified": "2020-12-06T13:23:10.937Z",
+    "contributors": [
+      "Wind1808"
+    ]
+  },
+  "conflicting/Web/API/XRInputSource/targetRayMode": {
+    "modified": "2020-12-08T09:23:22.538Z",
+    "contributors": [
+      "Wind1808"
+    ]
+  },
   "conflicting/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent": {
     "modified": "2020-11-08T02:10:47.628Z",
     "contributors": [
diff --git a/files/ja/conflicting/web/api/xrinputsource/handedness/index.html b/files/ja/conflicting/web/api/xrinputsource/handedness/index.html
new file mode 100644
index 0000000000..ea3db01eec
--- /dev/null
+++ b/files/ja/conflicting/web/api/xrinputsource/handedness/index.html
@@ -0,0 +1,86 @@
+---
+title: XRHandedness
+slug: conflicting/Web/API/XRInputSource/handedness
+tags:
+  - API
+  - AR
+  - Enum
+  - Enumerated Type
+  - Handedness
+  - Reference
+  - Type
+  - VR
+  - WebXR
+  - WebXR Device API
+  - XRHandedness
+  - hand
+  - left
+  - right
+translation_of: Web/API/XRHandedness
+original_slug: Web/API/XRHandedness
+---
+
{{APIRef("WebXR")}}

+
+
WebXR の XRHandedness 列挙型は、使用している XR 入力デバイスに接続された特定の入力コントローラーを操作するために使用しているユーザーの手を識別する値を提供します。 XRHandedness は、{{domxref("XRInputSource")}} の {{domxref("XRInputSource.handedness", "handedness")}} プロパティの値として使用されます。

+
+
値

+
+

+ 
none

+ 
入力コントローラーは、ユーザーのいずれの手にも関連付けられていません。

+ 
left

+ 
入力コントローラーは、ユーザーの左手に握られているか、着用されているか、取り付けられています。

+ 
right

+ 
入力コントローラーは、ユーザーの右手に握られているか、着用されているか、取り付けられています。

+

+
+
例

+
+
handedness の重要な使用方法の1つは、コントローラーがどちらの手にあるかを判別して、仮想空間でその手（またはその手が制御しているデバイス）の表現を描画できるようにすることです。

+
+
function updateInputSources(session, frame, refSpace) {
+  for (let source of session.inputSources) {
+    if (source.gripSpace) {
+      let gripPose = frame.getPose(source.gripSpace, refSpace);
+
+      if (gripPose) {
+        myRenderHandObject(gripPose, inputSource.handedness);
+      }
+    }
+  }
+}
+

+
+
この関数は、すべてのアニメーションフレーム（または必要な滑らかさの程度とパフォーマンスの制約に応じて定期的に）で呼ばれ、入力ソースのリストをスキャンして、null ではない {{domxref("XRInputSource.gripSpace", "gripSpace")}} を持つものを探します。 gripSpace が存在する場合、それは入力ソースが何らかのハンドヘルドデバイスであることを意味するため、可能であれば視覚的にレンダリングする必要があります。

+
+
gripSpace が null 以外の場合、この関数は、現在の参照空間に変換された gripSpace のポーズを取得します。 それが有効であると仮定すると、myRenderHandObject() と呼ばれる関数が、グリップのポーズと handedness の値を使用して呼び出されます。 これらの値が手元にあれば（しゃれは意図していません）、myRenderHandObject() は、正しい手のために配置および形成された適切なモデルを描画できます。

+
+
仕様

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様状態コメント
{{SpecName('WebXR','#enumdef-xrhandedness','XRHandedness')}}{{Spec2('WebXR')}}初期定義

+
+
ブラウザーの互換性

+
+
{{Compat("api.XRHandedness")}}

+
+
関連情報

+
+
diff --git a/files/ja/conflicting/web/api/xrinputsource/targetraymode/index.html b/files/ja/conflicting/web/api/xrinputsource/targetraymode/index.html
new file mode 100644
index 0000000000..e787a3e7be
--- /dev/null
+++ b/files/ja/conflicting/web/api/xrinputsource/targetraymode/index.html
@@ -0,0 +1,103 @@
+---
+title: XRTargetRayMode
+slug: conflicting/Web/API/XRInputSource/targetRayMode
+tags:
+  - 3D
+  - API
+  - AR
+  - Enum
+  - Enumerated Type
+  - Input
+  - Reality
+  - Reference
+  - Type
+  - VR
+  - Virtual
+  - WebXR
+  - WebXR API
+  - WebXR Device API
+  - XR
+  - XRTargetRayMode
+  - augmented
+  - source
+  - target
+translation_of: Web/API/XRTargetRayMode
+original_slug: Web/API/XRTargetRayMode
+---
+
{{APIRef("WebXR")}}

+
+
WebXR Device API の XRTargetRayMode 列挙型は、入力コントローラーのターゲティング光線を生成する方法を記述します。 ターゲティングは、視線追跡システムを使用してターゲットを見るか、ハンドコントローラー、グローブ、またはモーショントラッキングシステムを使用してターゲットを指すか、画面上で指やマウスを使用してターゲットをタップまたはクリックすることによって行うことができます。

+
+
通常、ターゲット光線は、ターゲティングシステムのソースから、ユーザーが見ている方向または指している方向にターゲット光線に沿って描画されます。 光線の終点を示す方法と同様に、光線のスタイルは一般的にあなた次第です。 ターゲットとなる点またはオブジェクトは、図形を描画するか、ターゲットとなる表面またはオブジェクトを強調表示することによって示される場合があります。

+
+

+

+
ハンドコントローラーから放出されるターゲット光線。

+ハンドコントローラーから放出されるターゲット光線を示すスクリーンショット

+

+
+
ターゲット光線は、単純な線（理想的には距離とともにフェードする）から、上のスクリーンショットに示されているサイエンスフィクションの「フェイザー」スタイルなどのアニメーション効果まで、何でもかまいません。

+
+
値

+
+

+ 
gaze（視線）

+ 
ユーザーは、ユーザーが見ている方向を検出する視線追跡システム（または視線入力）を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。

+ 
screen（画面）

+ 
ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力デバイスをタップして示します。

+ 
tracked-pointer（追跡ポインター）

+ 
ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルドデバイスまたはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手（または手の中のオブジェクト）からターゲット方向に伸びます。 方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。

+

+
+
例

+
+
このコードの断片は、フレームごとに1回呼び出される関数の一部を示しています。 null 以外の {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。

+
+
このような入力ごとに、この例では、{{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が tracked-pointer である入力を探します。 これは、入力が実際には、視線入力デバイス、画面タップ、またはマウスクリックではなく、ターゲティングデバイスを表すことを目的としていることを示しています。 追跡ポインターの場合、関数 myRenderTargetRayAsBeam() が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。

+
+
コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。

+
+
function updateInputSources(session, frame, refSpace) {
+  for (let source of session.getInputSources()) {
+    let targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace);
+
+    if (targetRayPose) {
+      if (source.targetRayMode == "tracked-pointer") {
+        myRenderTargetRayAsBeam(targetRayPose);
+      }
+    }
+
+    /* ... */
+  }
+}
+

+
+
詳細とより完全な例については、入力と入力ソースの記事を参照してください。

+
+
仕様

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様状態コメント
{{SpecName('WebXR','#enumdef-xrtargetraymode','XRTargetRayMode')}}{{Spec2('WebXR')}}初期定義

+
+
ブラウザーの互換性

+
+
{{Compat("api.XRTargetRayMode")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/api/xrhandedness/index.html b/files/ja/web/api/xrhandedness/index.html
deleted file mode 100644
index c66cb6f7c6..0000000000
--- a/files/ja/web/api/xrhandedness/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: XRHandedness
-slug: Web/API/XRHandedness
-tags:
-  - API
-  - AR
-  - Enum
-  - Enumerated Type
-  - Handedness
-  - Reference
-  - Type
-  - VR
-  - WebXR
-  - WebXR Device API
-  - XRHandedness
-  - hand
-  - left
-  - right
-translation_of: Web/API/XRHandedness
----
-
{{APIRef("WebXR")}}

-
-
WebXR の XRHandedness 列挙型は、使用している XR 入力デバイスに接続された特定の入力コントローラーを操作するために使用しているユーザーの手を識別する値を提供します。 XRHandedness は、{{domxref("XRInputSource")}} の {{domxref("XRInputSource.handedness", "handedness")}} プロパティの値として使用されます。

-
-
値

-
-

- 
none

- 
入力コントローラーは、ユーザーのいずれの手にも関連付けられていません。

- 
left

- 
入力コントローラーは、ユーザーの左手に握られているか、着用されているか、取り付けられています。

- 
right

- 
入力コントローラーは、ユーザーの右手に握られているか、着用されているか、取り付けられています。

-

-
-
例

-
-
handedness の重要な使用方法の1つは、コントローラーがどちらの手にあるかを判別して、仮想空間でその手（またはその手が制御しているデバイス）の表現を描画できるようにすることです。

-
-
function updateInputSources(session, frame, refSpace) {
-  for (let source of session.inputSources) {
-    if (source.gripSpace) {
-      let gripPose = frame.getPose(source.gripSpace, refSpace);
-
-      if (gripPose) {
-        myRenderHandObject(gripPose, inputSource.handedness);
-      }
-    }
-  }
-}
-

-
-
この関数は、すべてのアニメーションフレーム（または必要な滑らかさの程度とパフォーマンスの制約に応じて定期的に）で呼ばれ、入力ソースのリストをスキャンして、null ではない {{domxref("XRInputSource.gripSpace", "gripSpace")}} を持つものを探します。 gripSpace が存在する場合、それは入力ソースが何らかのハンドヘルドデバイスであることを意味するため、可能であれば視覚的にレンダリングする必要があります。

-
-
gripSpace が null 以外の場合、この関数は、現在の参照空間に変換された gripSpace のポーズを取得します。 それが有効であると仮定すると、myRenderHandObject() と呼ばれる関数が、グリップのポーズと handedness の値を使用して呼び出されます。 これらの値が手元にあれば（しゃれは意図していません）、myRenderHandObject() は、正しい手のために配置および形成された適切なモデルを描画できます。

-
-
仕様

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様状態コメント
{{SpecName('WebXR','#enumdef-xrhandedness','XRHandedness')}}{{Spec2('WebXR')}}初期定義

-
-
ブラウザーの互換性

-
-
{{Compat("api.XRHandedness")}}

-
-
関連情報

-
-
diff --git a/files/ja/web/api/xrtargetraymode/index.html b/files/ja/web/api/xrtargetraymode/index.html
deleted file mode 100644
index 7c9848eca4..0000000000
--- a/files/ja/web/api/xrtargetraymode/index.html
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: XRTargetRayMode
-slug: Web/API/XRTargetRayMode
-tags:
-  - 3D
-  - API
-  - AR
-  - Enum
-  - Enumerated Type
-  - Input
-  - Reality
-  - Reference
-  - Type
-  - VR
-  - Virtual
-  - WebXR
-  - WebXR API
-  - WebXR Device API
-  - XR
-  - XRTargetRayMode
-  - augmented
-  - source
-  - target
-translation_of: Web/API/XRTargetRayMode
----
-
{{APIRef("WebXR")}}

-
-
WebXR Device API の XRTargetRayMode 列挙型は、入力コントローラーのターゲティング光線を生成する方法を記述します。 ターゲティングは、視線追跡システムを使用してターゲットを見るか、ハンドコントローラー、グローブ、またはモーショントラッキングシステムを使用してターゲットを指すか、画面上で指やマウスを使用してターゲットをタップまたはクリックすることによって行うことができます。

-
-
通常、ターゲット光線は、ターゲティングシステムのソースから、ユーザーが見ている方向または指している方向にターゲット光線に沿って描画されます。 光線の終点を示す方法と同様に、光線のスタイルは一般的にあなた次第です。 ターゲットとなる点またはオブジェクトは、図形を描画するか、ターゲットとなる表面またはオブジェクトを強調表示することによって示される場合があります。

-
-

-

-
ハンドコントローラーから放出されるターゲット光線。

-ハンドコントローラーから放出されるターゲット光線を示すスクリーンショット

-

-
-
ターゲット光線は、単純な線（理想的には距離とともにフェードする）から、上のスクリーンショットに示されているサイエンスフィクションの「フェイザー」スタイルなどのアニメーション効果まで、何でもかまいません。

-
-
値

-
-

- 
gaze（視線）

- 
ユーザーは、ユーザーが見ている方向を検出する視線追跡システム（または視線入力）を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。

- 
screen（画面）

- 
ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力デバイスをタップして示します。

- 
tracked-pointer（追跡ポインター）

- 
ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルドデバイスまたはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手（または手の中のオブジェクト）からターゲット方向に伸びます。 方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。

-

-
-
例

-
-
このコードの断片は、フレームごとに1回呼び出される関数の一部を示しています。 null 以外の {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。

-
-
このような入力ごとに、この例では、{{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が tracked-pointer である入力を探します。 これは、入力が実際には、視線入力デバイス、画面タップ、またはマウスクリックではなく、ターゲティングデバイスを表すことを目的としていることを示しています。 追跡ポインターの場合、関数 myRenderTargetRayAsBeam() が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。

-
-
コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。

-
-
function updateInputSources(session, frame, refSpace) {
-  for (let source of session.getInputSources()) {
-    let targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace);
-
-    if (targetRayPose) {
-      if (source.targetRayMode == "tracked-pointer") {
-        myRenderTargetRayAsBeam(targetRayPose);
-      }
-    }
-
-    /* ... */
-  }
-}
-

-
-
詳細とより完全な例については、入力と入力ソースの記事を参照してください。

-
-
仕様

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様状態コメント
{{SpecName('WebXR','#enumdef-xrtargetraymode','XRTargetRayMode')}}{{Spec2('WebXR')}}初期定義

-
-
ブラウザーの互換性

-
-
{{Compat("api.XRTargetRayMode")}}

-
-
関連情報

-
-
-- 
cgit v1.2.3-54-g00ecf


From cfcd3aed381ed1924961f13ebbbeb171a1c9be8a Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sun, 15 Aug 2021 14:25:28 +0900
Subject: Web/API/Push_API を更新 (#1963)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 2021/06/22 時点の英語版に同期
---
 files/ja/web/api/push_api/index.html | 59 +++++++++++-------------------------
 1 file changed, 18 insertions(+), 41 deletions(-)

(limited to 'files/ja/web/api')

diff --git a/files/ja/web/api/push_api/index.html b/files/ja/web/api/push_api/index.html
index 15c7aa781c..295bb675dd 100644
--- a/files/ja/web/api/push_api/index.html
+++ b/files/ja/web/api/push_api/index.html
@@ -12,66 +12,49 @@ tags:
   - プッシュ通知
 translation_of: Web/API/Push_API
 ---
-
{{DefaultAPISidebar("Push API")}}

+
{{ApiRef("Push API")}}

 
-
Push API (プッシュ通知 API) は、ウェブアプリケーションがサーバーからメッセージ (プッシュ通知) を受信できるようにします。ウェブアプリケーションがフォアグランド状態かどうか、読み込まれているかどうかに関わらず利用できます。開発者は、オプトインしたユーザーへ非同期の通知と更新を届けることができ、タイムリーな新着コンテンツによってユーザーの関心を得られるでしょう。

+
Push API は、ウェブアプリケーションがサーバーからメッセージ (プッシュ通知) を受信できるようにします。ウェブアプリケーションがフォアグランド状態かどうか、読み込まれているかどうかに関わらず利用できます。開発者は、オプトインしたユーザーへ非同期の通知と更新を届けることができ、タイムリーな新着コンテンツによってユーザーの関心を得られるでしょう。

 
-
プッシュ通知の概念と使い方

+
プッシュ通知の概念と使い方

 
 

-
PushManager への加入を実装する場合、アプリで CSRF/XSRF 問題を起こさないように保護することが非常に重要です。詳しくは以下の記事を参照してください。

+
PushManager へのサブスクリプションを実装する場合、アプリで CSRF/XSRF 問題を起こさないように保護することが非常に重要です。詳しくは以下の記事を参照してください。

 
 
 

 
-
アプリがプッシュ通知メッセージを受信するために、アプリでサービスワーカーが動作している必要があります。サービスワーカーが動作している時に、 {{domxref("PushManager.subscribe()")}} を利用してプッシュ通知に加入することができます。

-
-
これはボタンのクリックなどといったユーザーの操作への応答として行います。例えば以下のようにします。

-
-
btn.addEventListener('click', function() {
-  serviceWorkerRegistration.pushManager.subscribe(options)
-  .then(function(pushSubscription) {
-    // handle subscription
-  });
-})

-
-
これは単なるベストプラクティスではありません — ユーザーが同意していない通知によってユーザーにスパムを送るべきではありません — が、ブラウザーはユーザーの操作への応答以外で起動される通知を明確に許可しなくなってきています。例えば Firefox は、すでにこれをバージョン72で行っています。

+
アプリがプッシュ通知メッセージを受信するために、アプリでサービスワーカーが動作している必要があります。サービスワーカーが動作している時に、 {{domxref("PushManager.subscribe()")}} を利用してプッシュ通知に加入することができます。

 
 
返値の {{domxref("PushSubscription")}} には、プッシュ通知メッセージの配信に必要な情報であるエンドポイントとデータ送信用の暗号キーがすべて含まれています。

 
 
プッシュ通知メッセージを受信すると、そのメッセージを扱うためのサービスワーカーが起動します。これは、 {{domxref("ServiceWorkerGlobalScope.onpush")}} イベントハンドラーへ配信されます。これにより、例えば ({{domxref("ServiceWorkerRegistration.showNotification()")}} を使用して) 受信した通知を表示するなど、アプリケーションがプッシュ通知の受信に応じた動作ができます。

 
-
各サブスクリプションは、サービスワーカーに対して固有です。サブスクリプションのエンドポイントは、固有の capability URL です。サブスクリプションのエンドポイント URL はアプリケーションにメッセージを送るために不可欠な情報です。エンドポイント URL は秘密にしておく必要があります。さもないと、他のアプリケーションがあなたのアプリケーションにプッシュ通知メッセージを送ることができてしまいます。

+
各サブスクリプションは、サービスワーカーに対して固有です。サブスクリプションのエンドポイントは、固有の capability URL です。サブスクリプションのエンドポイント URL はアプリケーションにメッセージを送るために不可欠な情報です。エンドポイント URL は秘密にしておく必要があります。さもないと、他のアプリケーションがあなたのアプリケーションにプッシュ通知メッセージを送ることができてしまいます。

 
 
プッシュ通知メッセージの配信のためにサービスワーカーを動作させると、特にバッテリーなどのリソースを消費します。これを扱う方式はブラウザーごとに異なっており、現在標準となる仕組みはありません。 Firefox も Chrome も通知を生成するプッシュ通知メッセージの数に制限を設けていません。 Firefox は通知を表示しないアプリケーションに送信されるプッシュ通知メッセージの数に制限 (クォータ) を設けていますが、 Chrome には制限がありません。この制限数は、ウェブサイトを訪れるたびに更新されます。

 
-

-
メモ: Gecko 44 以降では、通知の表示中に別のプッシュ通知メッセージが発行された場合、アプリケーションごとのプッシュ通知メッセージ数の上限は、3秒経つまで加算されません。これは、大量のプッシュ通知メッセージを受け取り、そのすべてが表示される通知を生成するわけではない場合に有効です。

-

-
-

-
メモ: Chrome バージョン 52 より前のバージョンでは、プッシュ通知メッセージの配信のために Google Cloud Messaging にプロジェクトを作成する必要があり、そのプロジェクト番号と紐付いた API キーをプッシュ通知の配信に利用していました。また、このサービスを利用するには、アプリマニフェストに特別な値を設定する必要があります。

-

-
-
インターフェイス

+
インターフェイス

 
 

  
{{domxref("PushEvent")}}

- 
{{domxref("ServiceWorker")}} のグローバルスコープ に送られるプッシュアクションを表します。これは、アプリケーションから {{domxref("PushSubscription")}} へ送られる情報を含んでいます。

+ 
{{domxref("ServiceWorker")}} のグローバルスコープ に送られるプッシュアクションを表します。これは、アプリケーションから {{domxref("PushSubscription")}} へ送られる情報を含んでいます。

  
{{domxref("PushManager")}}

- 
プッシュ通知のリクエスト URL といった、サードパーティのサーバーからプッシュ通知を受け取るための手段を提供します。このインターフェイスは、非推奨になった {{domxref("PushRegistrationManager")}} インターフェイスの機能を置き換えるものです。

+ 
プッシュ通知のリクエスト URL といった、サードパーティのサーバーからプッシュ通知を受け取るための手段を提供します。

  
{{domxref("PushMessageData")}}

  
サーバーから送られたプッシュ情報にアクセスする手段を提供し、受信したデータを操作するメソッドを含みます。

  
{{domxref("PushSubscription")}}

  
サブスクリプションのエンドポイント URL を提供し、プッシュサービスから購読を解除できるようにします。

+ 
{{domxref("PushSubscriptionOptions")}}

+ 
プッシュサブスクリプションに関連付けられたオプションを表します。

 

 
-
サービスワーカーへの追加機能

+
サービスワーカーへの追加機能

 
-
以下の Service Worker API への追加機能は、 Push API 仕様に含まれています。これらは、プッシュ通知メッセージを使用するためのエントリーポイントを提供するため、および、プッシュとサブスクリプション変更イベントの監視と応答のための追加です。

+
以下の Service Worker API への追加機能は、 Push API 仕様に含まれています。これらは、プッシュ通知メッセージを使用するためのエントリーポイントを提供するため、および、プッシュとサブスクリプション変更イベントの監視と応答のための追加です。

 
 

  
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}

@@ -82,11 +65,11 @@ translation_of: Web/API/Push_API
  
{{Event("pushsubscriptionchange")}} イベントが発生する度に発動するイベントハンドラです。例えば、プッシュサブスクリプションが無効になったり、無効になりつつある時 (即ち、プッシュサーバーが有効期限を設定している場合) です。

 

 
-
例

+
例

 
 
Mozilla の ServiceWorker Cookbook は便利なプッシュ通知の例をたくさん揃えています。

 
-
仕様書

+
仕様書

 
 
@@ -105,23 +88,17 @@ translation_of: Web/API/Push_API
  

  
 

 
-
ブラウザーの互換性

+
ブラウザーの互換性

 
-

 
PushEvent

 
-

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

 
 
PushMessageData

 
-

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

-

-

-

 
-
関連情報

+
関連情報