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 時点の英語版に同期 --- .../orphaned/web/api/body/arraybuffer/index.html | 109 --------------------- files/ja/orphaned/web/api/body/blob/index.html | 80 --------------- files/ja/orphaned/web/api/body/body/index.html | 95 ------------------ files/ja/orphaned/web/api/body/bodyused/index.html | 82 ---------------- files/ja/orphaned/web/api/body/formdata/index.html | 73 -------------- files/ja/orphaned/web/api/body/index.html | 96 ------------------ files/ja/orphaned/web/api/body/json/index.html | 92 ----------------- files/ja/orphaned/web/api/body/text/index.html | 89 ----------------- 8 files changed, 716 deletions(-) delete mode 100644 files/ja/orphaned/web/api/body/arraybuffer/index.html delete mode 100644 files/ja/orphaned/web/api/body/blob/index.html delete mode 100644 files/ja/orphaned/web/api/body/body/index.html delete mode 100644 files/ja/orphaned/web/api/body/bodyused/index.html delete mode 100644 files/ja/orphaned/web/api/body/formdata/index.html delete mode 100644 files/ja/orphaned/web/api/body/index.html delete mode 100644 files/ja/orphaned/web/api/body/json/index.html delete mode 100644 files/ja/orphaned/web/api/body/text/index.html (limited to 'files/ja/orphaned') diff --git a/files/ja/orphaned/web/api/body/arraybuffer/index.html b/files/ja/orphaned/web/api/body/arraybuffer/index.html deleted file mode 100644 index ca11540bb0..0000000000 --- a/files/ja/orphaned/web/api/body/arraybuffer/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Body.arrayBuffer() -slug: orphaned/Web/API/Body/arrayBuffer -tags: - - API - - ArrayBuffer - - BODY - - Experimental - - Fetch - - Method - - Reference -translation_of: Web/API/Body/arrayBuffer -original_slug: Web/API/Body/arrayBuffer ---- -
{{APIRef("Fetch")}}
- -

{{domxref("Body")}} ミックスインの arrayBuffer() メソッドは、{{domxref("Response")}} ストリームを取得して、完全に読み取ります。 {{jsxref("ArrayBuffer")}} で解決される promise を返します。

- -

構文

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

パラメーター

- -

なし。

- -

戻り値

- -

{{jsxref("ArrayBuffer")}} で解決される promise。

- -

例

- -

音楽の演奏

- -

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

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

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

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('Fetch','#dom-body-arraybuffer','arrayBuffer()')}}{{Spec2('Fetch')}}
- -

ブラウザーの互換性

- - - -

{{Compat("api.Body.arrayBuffer")}}

- -

関連情報

- - diff --git a/files/ja/orphaned/web/api/body/blob/index.html b/files/ja/orphaned/web/api/body/blob/index.html deleted file mode 100644 index c19d7b7ab5..0000000000 --- a/files/ja/orphaned/web/api/body/blob/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Body.blob() -slug: orphaned/Web/API/Body/blob -tags: - - API - - BODY - - Blob - - Experimental - - Fetch - - Method - - Reference -translation_of: Web/API/Body/blob -original_slug: Web/API/Body/blob ---- -
{{APIRef("Fetch")}}
- -

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

- -

構文

- -
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")}} で解決する promise。

- -

例

- -

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;
-});
-
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('Fetch','#dom-body-blob','blob()')}}{{Spec2('Fetch')}}
- -

ブラウザーの互換性

- - - -

{{Compat("api.Body.blob")}}

- -

関連情報

- - diff --git a/files/ja/orphaned/web/api/body/body/index.html b/files/ja/orphaned/web/api/body/body/index.html deleted file mode 100644 index 2b5cf02536..0000000000 --- a/files/ja/orphaned/web/api/body/body/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Body.body -slug: orphaned/Web/API/Body/body -tags: - - API - - BODY - - Experimental - - Fetch - - Property - - Reference - - Streams -translation_of: Web/API/Body/body -original_slug: Web/API/Body/body ---- -
{{APIRef("Fetch")}}{{seecompattable}}
- -

{{domxref("Body")}} ミックスインの body 読み取り専用プロパティは、ボディコンテンツの {{domxref("ReadableStream")}} を公開するために使用する単純なゲッターです。

- -

構文

- -
var stream = 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));
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('Fetch','#dom-body-body','body')}}{{Spec2('Fetch')}}
- -

ブラウザーの互換性

- - - -

{{Compat("api.Body.body")}}

- -

関連情報

- - diff --git a/files/ja/orphaned/web/api/body/bodyused/index.html b/files/ja/orphaned/web/api/body/bodyused/index.html deleted file mode 100644 index 6a785cbf9a..0000000000 --- a/files/ja/orphaned/web/api/body/bodyused/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Body.bodyUsed -slug: orphaned/Web/API/Body/bodyUsed -tags: - - API - - BODY - - Experimental - - Fetch - - Property - - Reference - - bodyUsed -translation_of: Web/API/Body/bodyUsed -original_slug: Web/API/Body/bodyUsed ---- -
{{APIRef("Fetch")}}
- -

{{domxref("Body")}} ミックスインの bodyUsed 読み取り専用プロパティは、ボディが既に読み取られたかどうかを示す {{jsxref("Boolean")}} 値を含みます。

- -

構文

- -
var myBodyUsed = response.bodyUsed;
- -

値

- -

{{jsxref("Boolean")}} 値。

- -

例

- -

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

- -

response.blob() の呼び出し前後に、response.bodyUsed をコンソールに記録していることに注目してください。 その時点でボディが読み取られたかによるため、これは呼び出し前では 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') }}

- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('Fetch','#dom-body-bodyused','bodyUsed')}}{{Spec2('Fetch')}}
- -

ブラウザーの互換性

- - - -

{{Compat("api.Body.bodyUsed")}}

- -

関連情報

- - diff --git a/files/ja/orphaned/web/api/body/formdata/index.html b/files/ja/orphaned/web/api/body/formdata/index.html deleted file mode 100644 index 922fd2986d..0000000000 --- a/files/ja/orphaned/web/api/body/formdata/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Body.formData() -slug: orphaned/Web/API/Body/formData -tags: - - API - - BODY - - Experimenal - - Fetch - - Fetch API - - FormData - - Method - - NeedsExample - - Reference -translation_of: Web/API/Body/formData -original_slug: Web/API/Body/formData ---- -
{{APIRef("Fetch")}}
- -

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

- -
-

注: これは主に service worker に関連しています。 ユーザーがフォームを送信し、service worker がリクエストをインターセプトした場合を考えてみましょう。 例えば、key-value マップを取得するために formData() を呼び出し、いくつかのフィールドを修正した後、フォームをサーバ側に送信できます（またはローカルで使用できます）。

-
- -

構文

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

パラメーター

- -

なし。

- -

戻り値

- -

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

- -

例

- -

TBD.

- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('Fetch','#dom-body-formdata','formData()')}}{{Spec2('Fetch')}}
- -

ブラウザーの互換性

- - - -

{{Compat("api.Body.formData")}}

- -

関連情報

- - diff --git a/files/ja/orphaned/web/api/body/index.html b/files/ja/orphaned/web/api/body/index.html deleted file mode 100644 index 01ff7c7dea..0000000000 --- a/files/ja/orphaned/web/api/body/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Body -slug: orphaned/Web/API/Body -tags: - - API - - BODY - - Experimental - - Fetch - - Fetch API - - Interface - - Reference - - request -translation_of: Web/API/Body -original_slug: Web/API/Body ---- -
{{ APIRef("Fetch") }}
- -

Fetch API の Body {{glossary("mixin","ミックスイン")}}は、リクエスト/レスポンスのボディを表し、そのコンテンツタイプが何であるかとその処理方法を宣言できます。

- -

Body は {{domxref("Request")}} と {{domxref("Response")}} の両方で実装されます。 これにより、これらのオブジェクトに、関連するボディ（ストリーム）と使用済みフラグ（初期は未設定）、MIME タイプ（初期は空のバイトシーケンス）が提供されます。（訳注：コンテンツタイプ（MIME タイプ）は、{{domxref("Headers")}} の "Content-Type" にあります。 でも、例を見てもわかる通り、普通はリクエストの時点で決定しているので、これを調べてはいません。）

- -

プロパティ

- -
-
{{domxref("Body.body")}} {{readonlyInline}}
-
ボディコンテンツの {{domxref("ReadableStream")}} を公開するために使用する単純なゲッター。
-
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
-
既にボディが読み込まれたかどうかを示す {{jsxref("Boolean")}} 値。
-
- -

メソッド

- -
-
{{domxref("Body.arrayBuffer()")}}
-
{{domxref("Response")}} ストリームを取得し、完全に読み込む。 {{jsxref("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")}}（テキスト）で解決する promise を返す。 レスポンスは常に UTF-8 でデコードする。
-
- -

例

- -

次の例では、単純なフェッチ呼び出しを使用して画像を取得し、{{htmlelement("img")}} タグで表示します。 画像をリクエストしているので、{{domxref("Body.blob","Body.blob()")}} （{{domxref("Response")}} は Body を実装しています）を実行して、レスポンスに正しい MIME タイプを与える必要があることに注意してください。

- -

HTML の内容

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

JS の内容

- -
const myImage = document.querySelector('.my-image');
-fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
-	.then(res => res.blob())
-	.then(res => {
-		const objectURL = URL.createObjectURL(res);
-		myImage.src = objectURL;
-});
- -

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

- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('Fetch','#body-mixin','Body')}}{{Spec2('Fetch')}}
- -

ブラウザーの互換性

- - - -

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

- -

関連情報

- - diff --git a/files/ja/orphaned/web/api/body/json/index.html b/files/ja/orphaned/web/api/body/json/index.html deleted file mode 100644 index 3ee9cd7c6d..0000000000 --- a/files/ja/orphaned/web/api/body/json/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Body.json() -slug: orphaned/Web/API/Body/json -tags: - - API - - BODY - - Experimental - - Fetch - - JSON - - Method - - Reference - - メソッド -translation_of: Web/API/Body/json -original_slug: Web/API/Body/json ---- -
{{APIRef("Fetch API")}}
- -

{{DOMxRef("Body")}} ミックスインの json() メソッドは、 {{DOMxRef("Response")}} ストリームを取得して、完全に読み取ります。 ボディのテキストを {{JSxRef("JSON")}} として解釈した結果で解決する promise を返します。

- -

構文

- -
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);
-    }
-  });
- -

仕様

- - - - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName("Fetch", "#dom-body-json", "Body.json()")}}{{Spec2("Fetch")}}初期定義
- -

ブラウザーの互換性

- - - -

{{Compat("api.Body.json")}}

- -

関連情報

- - diff --git a/files/ja/orphaned/web/api/body/text/index.html b/files/ja/orphaned/web/api/body/text/index.html deleted file mode 100644 index 9e66199603..0000000000 --- a/files/ja/orphaned/web/api/body/text/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Body.text() -slug: orphaned/Web/API/Body/text -tags: - - API - - BODY - - Experimental - - Fetch - - Method - - Reference - - Text -translation_of: Web/API/Body/text -original_slug: Web/API/Body/text ---- -
{{APIRef("Fetch")}}
- -

{{domxref("Body")}} ミックスインの text() メソッドは、{{domxref("Response")}} ストリームを取得し、完全に読み込みます。 {{domxref("USVString")}} オブジェクト（テキスト）で解決する promise を返します。 レスポンスは常に UTF-8 としてデコードします。

- -

構文

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

パラメーター

- -

なし。

- -

戻り値

- -

{{domxref("USVString")}} で解決する promise。

- -

例

- -

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

- -

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

- -
var myArticle = document.querySelector('article');
-var myLinks = document.querySelectorAll('ul a');
-
-for(i = 0; i <= myLinks.length-1; i++) {
-  myLinks[i].onclick = function(e) {
-    e.preventDefault();
-    var 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;
-    });
-  });
-}
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('Fetch','#dom-body-text','text()')}}{{Spec2('Fetch')}}
- -

ブラウザーの互換性

- - - -

{{Compat("api.Body.text")}}

- -

関連情報

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