DataTransfer.effectAllowed - Web API

DataTransfer.effectAllowed
==========================

**`DataTransfer.effectAllowed`** プロパティは、ドラッグ操作で許可される効果を指定します。**コピー**操作は、ドラッグされるデータを現在の位置からドロップ位置にコピーすることを示すために使用されます。**移動**操作は、ドラッグされるデータを移動することを示すために使用され、**リンク**操作は、ソース位置とドロップ位置の間に何らかの形の関係または接続を作成することを示すために使用されます。

このプロパティは、 `dragstart` イベントで設定して、ドラッグソースのドラッグ効果を設定する必要があります。 `dragenter` および `dragover` のイベントハンドラー内では、このプロパティは `dragstart` イベントで割り当てられた値に設定されるため、 `effectAllowed` を使用してどの効果が許可されているかを決定することができます。

イベント `dragstart` 以外のイベントで `effectAllowed` に値を代入しても何の効果もありません。

値
-

文字列で、許可されているドラッグ操作を表します。可能な値は以下の通りです。

`none`

アイテムをドロップすることができません。

`copy`

ソースアイテムのコピーを新しい場所に作成することができます。

copyLink

コピーやリンク操作が許可されています。

copyMove

コピーや移動操作が許可されています。

link

ソースから新しい場所へのリンクを確立することができます。

linkMove

リンクや移動の操作が許可されています。

move

アイテムを新しい場所に移動することができます。

all

すべての操作が許可されています。

uninitialized

効果が設定されていない場合の既定値で、 all と同等です。

`effectAllowed` に他の値を代入しても効果はなく、古い値が保持されます。

Internet Explorer では、値を小文字に変更します。従って、 `linkMove` は `linkmove` になります。

例
-

### effectAllowed の設定

この例では、 `dragstart` ハンドラーの中で `effectAllowed` を `"move"` に設定しています。

#### HTML

```html
<div>
  <p id="source" draggable="true">
    この要素を選択し、ドロップゾーンにドラッグしてから放すと要素を移動します。
  </p>
</div>
<div id="target">ドロップゾーン</div>
<pre id="output"></pre>
<button id="reset">Reset</button>
```

#### CSS

```css
div {
  margin: 0em;
  padding: 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}

#output {
  height: 100px;
  overflow: scroll;
}
```

#### JavaScript

```js
function dragstartHandler(ev) {
  log(`dragstart: effectAllowed = ${ev.dataTransfer.effectAllowed}`);

  // この要素の ID をドラッグのデータに追加し、ドロップハンドラーがどの要素を
  // ツリーに追加すればよいかを知ることができるようにします。
  ev.dataTransfer.setData("text", ev.target.id);
  ev.dataTransfer.effectAllowed = "move";
}

function dropHandler(ev) {
  log(`drop: effectAllowed = ${ev.dataTransfer.effectAllowed}`);

  ev.preventDefault();
  // ターゲットの ID を取得し、移動した要素をターゲットの DOM に追加します。
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

function dragoverHandler(ev) {
  log(`dragover: effectAllowed = ${ev.dataTransfer.effectAllowed}`);
  ev.preventDefault();
}

const source = document.querySelector("#source");
const target = document.querySelector("#target");

source.addEventListener("dragstart", dragstartHandler);
target.addEventListener("dragover", dragoverHandler);
target.addEventListener("drop", dropHandler);

function log(message) {
  const output = document.querySelector("#output");
  output.textContent = `${output.textContent}\n${message}`;
  output.scrollTop = output.scrollHeight;
}

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransfer-effectallowed-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ドラッグ＆ドロップ
* ドラッグ操作
* 推奨されるドラッグ型
* 複数の項目のドラッグ＆ドロップ
* DataTransfer test - Paste or Drag


DataTransfer.items - Web API

DataTransfer.items
==================

`DataTransfer` インターフェイスの `items` プロパティは読み取り専用で、ドラッグ操作でのデータ転送項目のリストです。リストには操作中の項目ごとに 1 つの項目が含まれており、操作に項目がなかった場合はリストは空になります。

値
-

ドラッグ操作でドラッグされる項目を表す `DataTransferItem` オブジェクトを含む `DataTransferItemList` オブジェクトで、ドラッグされるオブジェクトごとに 1 つのリスト項目があります。ドラッグ操作にデータがない場合、リストは空になります。

例
-

### ドラッグされた項目の記録

この例では、`items` を使って、ドラッグした項目の情報を記録します。

#### HTML

```html
<ul>
  <li id="source1" draggable="true">
    項目 1 をドロップゾーンにドラッグしてください
  </li>
  <li id="source2" draggable="true">
    項目 2 をドロップゾーンにドラッグしてください
  </li>
</ul>
<div id="target">ドロップゾーン</div>

<pre id="output"></pre>
<button id="reset">リセット</button>
```

#### CSS

```css
div {
  margin: 0em;
  padding: 2em;
}

#target {
  border: 1px solid black;
}

#output {
  height: 100px;
  overflow: scroll;
}
```

#### JavaScript

```js
function dragstartHandler(ev) {
  log(`dragstart: target.id = ${ev.target.id}`);
  // この要素の ID をドラッグの内容に追加し、ドロップハンドラーがどの
  // 要素をツリーに追加すればよいかを知ることができるようにします。
  ev.dataTransfer.setData("text/plain", ev.target.id);
  ev.dataTransfer.effectAllowed = "move";
}

function dropHandler(ev) {
  ev.preventDefault();
  // ターゲットの ID を取得し、移動した要素をターゲットの DOM に追加します
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
  // 各項目の "kind" と "type" を表示する
  if (ev.dataTransfer.items != null) {
    for (const item of ev.dataTransfer.items) {
      log(`kind = ${item.kind}, type = ${item.type}`);
    }
  }
}

function dragoverHandler(ev) {
  ev.preventDefault();
  // dropEffect を move に設定する
  ev.dataTransfer.dropEffect = "move";
}

const source1 = document.querySelector("#source1");
const source2 = document.querySelector("#source2");
const target = document.querySelector("#target");

source1.addEventListener("dragstart", dragstartHandler);
source2.addEventListener("dragstart", dragstartHandler);
target.addEventListener("dragover", dragoverHandler);
target.addEventListener("drop", dropHandler);

function log(message) {
  const output = document.querySelector("#output");
  output.textContent = `${output.textContent}\n${message}`;
  output.scrollTop = output.scrollHeight;
}

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransfer-items-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ドラッグ＆ドロップ
* ドラッグ操作
* 推奨されるドラッグ型
* 複数の項目のドラッグ＆ドロップ
* DataTransfer test - Paste or Drag


DataTransfer() - Web API

DataTransfer()
==============

**`DataTransfer`** のコンストラクターは、新しい `DataTransfer` オブジェクトのインスタンスを作成します。

構文
--

```js
new DataTransfer();
```

### 引数

なし。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransfer-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


DataTransfer.addElement() - Web API

DataTransfer.addElement()
=========================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`DataTransfer.addElement()`** メソッドは、与えられた要素にドラッグソースを設定します。この要素は `drag` と `dragend` イベントが発生する要素となり、既定のターゲット（ドラッグされたノード）とはなりません。

**メモ:** このメソッドは Firefox 固有です。

構文
--

```js
addElement(element);
```

### 引数

`element`

ドラッグソースとして設定する `Element` です。

### 返値

なし (`undefined`)。

例
-

この例では、`addElement()` メソッドの使用例を示します。

```js
function change\_drag\_node(event, node) {
  const dt = event.dataTransfer;
  dt.addElement(node);
}
```

仕様書
---

このメソッドは、ウェブ標準では定義されていません。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ドラッグ＆ドロップ
* ドラッグ操作
* 推奨されるドラッグ型
* 複数の項目のドラッグ＆ドロップ
* DataTransfer test - Paste or Drag


DataTransfer.types - Web API

DataTransfer.types
==================

**`DataTransfer.types`** は読み取り専用プロパティで、 `dragstart` イベントで設定されたドラッグデータ形式の（文字列の）配列を返します。形式の順序は、ドラッグ操作に含まれるデータの順序と同じです。

形式は、データの型や形式を示す Unicode 文字列で、一般的には MIME タイプで指定されます。 MIME タイプでないいくつかの値も、レガシーな理由から特殊なケースに入れられます（たとえば "`text`" など）。

値
-

ドラッグ操作で使用されるデータ形式の配列。各形式は文字列です。ドラッグ操作にデータが含まれていない場合、このリストは空になります。ドラッグ操作にファイルが含まれている場合は、その型の 1 つが文字列 `Files` になります。

例
-

この例では、`types` と `items` プロパティを使用しています。

```js
<!DOCTYPE html>
<html lang=en>
<title>DataTransfer.{types,items} プロパティの例</title>
<meta content="width=device-width">
<style>
  div {
    margin: 0em;
    padding: 2em;
  }
  #target {
    border: 1px solid black;
  }
</style>
<script>
function dragstart\_handler(ev) {
 console.log("dragStart: target.id = " + ev.target.id);
 // ドラッグ内容にこの要素の ID を追加し、ドロップハンドラーがどの要素を
 // ツリーに追加すればよいかを知ることができるようにします。
 ev.dataTransfer.setData("text/plain", ev.target.id);
 ev.dataTransfer.effectAllowed = "move";
}

function drop\_handler(ev) {
 console.log("drop: target.id = " + ev.target.id);
 ev.preventDefault();
 // ターゲットの ID を取得し、移動した要素をターゲットの DOM に追加します。
 const data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
 // それぞれの形式を表示する
 if (ev.dataTransfer.types != null) {
   for (let i=0; i < ev.dataTransfer.types.length; i++) {
     console.log("... types[" + i + "] = " + ev.dataTransfer.types[i]);
   }
 }
 // それぞれの項目の "kind" と "type" を表示する
 if (ev.dataTransfer.items != null) {
   for (let i=0; i < ev.dataTransfer.items.length; i++) {
     console.log("... items[" + i + "].kind = " + ev.dataTransfer.items[i].kind + " ; type = " + ev.dataTransfer.items[i].type);
   }
 }
}

function dragover\_handler(ev) {
 console.log("dragOver");
 ev.preventDefault();
 // dropEffect を move に設定する
 ev.dataTransfer.dropEffect = "move"
}
</script>
<body>
<h1>Examples of <code>DataTransfer</code>.{<code>types</code>, <code>items</code>} properties</h1>
 <ul>
   <li id="i1" ondragstart="dragstart\_handler(event);" draggable="true">項目 1 をドロップゾーンへドラッグしてください</li>
   <li id="i2" ondragstart="dragstart\_handler(event);" draggable="true">項目 2 をドロップゾーンへドラッグしてください</li>
 </ul>
 <div id="target" ondrop="drop\_handler(event);" ondragover="dragover\_handler(event);">ドロップゾーン</div>
</body>
</html>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransfer-types-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ドラッグ＆ドロップ
* ドラッグ操作
* 推奨されるドラッグ型
* 複数の項目のドラッグ＆ドロップ
* DataTransfer test - Paste or Drag


DataTransfer.clearData() - Web API

DataTransfer.clearData()
========================

**`DataTransfer.clearData()`** メソッドは、ドラッグ操作の `ドラッグデータ`の中で指定された型のものを削除します。指定された型のデータが存在しない場合、このメソッドは何もしません。

このメソッドが引数なしで呼び出された場合、またはフォーマットが空文字列であった場合、すべての型のデータが削除されます。

このメソッドはドラッグ操作からファイルを削除*しない*ので、ドラッグに含まれるファイルがある場合、 `"Files"` 型の項目がオブジェクトの `DataTransfer.types` の一覧に残る可能性があります。

**メモ:** このメソッドは、 `dragstart` イベントのハンドラーでのみ使用できます。ドラッグ操作のデータストアが書き込み可能なのはその時だけだからです。

構文
--

```js
clearData();
clearData(format);
```

### 引数

`format` 省略可

削除するデータの型を指定する文字列。この引数が空の文字列であったり、指定されていない場合は、すべての型のデータが削除されます。

### 返値

なし (`undefined`)。

例
-

この例では、 `DataTransfer` オブジェクトの `getData()`、`setData()`、`clearData()` メソッドを使用しています。

### HTML

```html
<span class="tweaked" id="source" draggable="true">
  この要素を選択し、ドロップゾーンにドラッグした後、選択を解除して要素を移動してください。
</span>
<span class="tweaked" id="target">ドロップゾーン</span>
<div>状態: <span id="status">ドラッグで開始</span></div>
<div>データ: <span id="data">未初期化</span></div>
```

### CSS

```css
span.tweaked {
  display: inline-block;
  margin: 1em 0;
  padding: 1em 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}
```

### JavaScript

```js
window.addEventListener("DOMContentLoaded", function () {
  // HTML 要素を選択する
  const draggable = document.getElementById("source");
  const droppable = document.getElementById("target");
  const status = document.getElementById("status");
  const data = document.getElementById("data");
  let dropped = false;

  // イベントハンドラーを登録する
  draggable.addEventListener("dragstart", dragStartHandler);
  draggable.addEventListener("dragend", dragEndHandler);
  droppable.addEventListener("dragover", dragOverHandler);
  droppable.addEventListener("dragleave", dragLeaveHandler);
  droppable.addEventListener("drop", dropHandler);

  function dragStartHandler(event) {
    status.textContent = "ドラッグ中";

    // ドラッグが開始されたことを示すように、ターゲット要素の境界線を変更する
    event.currentTarget.style.border = "1px dashed blue";

    // 既存のクリップボードをクリアすることから始めます。
    // 特定のタイプを指定していないので、これはすべてのタイプに影響します。

    event.dataTransfer.clearData();

    // ドラッグのフォーマットとデータを設定する（データにはイベントターゲットの id を使用する）
    event.dataTransfer.setData("text/plain", event.target.id);

    data.textContent = event.dataTransfer.getData("text/plain");
  }

  function dragEndHandler(event) {
    if (!dropped) {
      status.textContent = "ドラッグのキャンセル";
    }

    data.textContent = event.dataTransfer.getData("text/plain") || "empty";

    // ドラッグ中ではないことを示すために境界線を変更する
    event.currentTarget.style.border = "1px solid black";

    if (dropped) {
      // すべてのイベントリスナーを削除
      draggable.removeEventListener("dragstart", dragStartHandler);
      draggable.removeEventListener("dragend", dragEndHandler);
      droppable.removeEventListener("dragover", dragOverHandler);
      droppable.removeEventListener("dragleave", dragLeaveHandler);
      droppable.removeEventListener("drop", dropHandler);
    }
  }

  function dragOverHandler(event) {
    status.textContent = "ドロップ可能";

    event.preventDefault();
  }

  function dragLeaveHandler(event) {
    status.textContent = "ドラッグ中（ドロップは可能）";

    event.preventDefault();
  }

  function dropHandler(event) {
    dropped = true;

    status.textContent = "ドロップしました。";

    event.preventDefault();

    // イベント形式に連動したデータを取得する « text »
    const _data = event.dataTransfer.getData("text/plain");
    const element = document.getElementById(_data);

    // イベントのターゲット要素にドラッグソース要素を追加する
    event.target.appendChild(element);

    // CSS スタイルと表示テキストを変更する
    element.style.cssText =
      "border: 1px solid black;display: block; color: red";
    element.textContent = "ドロップゾーンに入りました!";
  }
});
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransfer-cleardata-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ドラッグ＆ドロップ
* ドラッグ操作
* 推奨されるドラッグ型
* 複数の項目のドラッグ＆ドロップ
* DataTransfer test - Paste or Drag


IDBCursorWithValue.value - Web API

IDBCursorWithValue.value
========================

`IDBCursorWithValue` インターフェイスの読み取り専用プロパティ **`value`** は、それが何であっても、現在のカーソルの値を返します。

**注:** この機能は Web Worker 内で利用可能です

値
-

現在のカーソルの値です。

例
-

この例では、トランザクションを作成し、オブジェクトストアを取得し、カーソルを用いてオブジェクトストア内の全レコードを走査します。それぞれの繰り返しで、カーソルの値を `cursor.value` で記録します。

カーソルを用いる場合、キーでデータを選択する必要は無く、単に全部取得できます。また、ループ中のそれぞれの繰り返しにおいて、カーソルオブジェクトが現在指しているレコードのデータを `cursor.value.foo` で取得できます。動く例全体は、IDBCursor example を参照してください。(動く例を見る)

```js
function displayData() {
  const transaction = db.transaction(["rushAlbumList"], "readonly");
  const objectStore = transaction.objectStore("rushAlbumList");

  objectStore.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.albumTitle}, ${cursor.value.year}`;
      list.appendChild(listItem);

      console.log(cursor.value);
      cursor.continue();
    } else {
      console.log("全エントリーを表示しました。");
    }
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbcursorwithvalue-value① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キーの範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)


MediaRecorder.audioBitsPerSecond - Web API

MediaRecorder.audioBitsPerSecond
================================

**`audioBitsPerSecond`** は `MediaRecorder` インターフェイスの読み取り専用のプロパティで、使用されている音声エンコーディングのビットレートを返します。

これは、コンストラクターで指定されたビットレート（提供された場合）と異なる場合があります。

値
-

数値 (unsigned long) です。

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-audiobitspersecond |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


MediaRecorder.start() - Web API

MediaRecorder.start()
=====================

`MediaRecorder` の **`start()`** メソッドは MediaStream 収録 API の一部であり、1 つ以上の `Blob` オブジェクトへのメディアの収録を開始します。

メディアの全期間を単一の `Blob` に（または `requestData()` を呼び出すまで）収録することも、一度に収録するミリ秒数を指定することもできます。 その後、その量のメディアが収録されるたびに、収録されたメディアに対応できるようにイベントが配信され、その間に、メディアの次のスライスを収録するための新しい `Blob` が作成されます。

`MediaRecorder` の `state` が `inactive` であると仮定すると、`start()` は `state` を `recording` に設定してから、入力ストリームからメディアのキャプチャを開始します。 タイムスライス期間が経過するか、ソースメディアが終了するまで、`Blob` が作成され、そこにデータが収集されます。 `Blob` がその時点まで満たされるたびに（タイムスライス期間または、スライス期間が指定されていない場合はメディアの終わり）、`dataavailable` イベントが収録されたデータとともに `MediaRecorder` に送られます。 ソースがまだ再生中の場合は、新しい `Blob` が作成され、そこに収録が続きます。

ソースストリームが終了すると、`state` は `inactive` に設定され、データ収集は停止します。 最後の `dataavailable` イベントが `MediaRecorder` に送られ、その後に `stop` イベントが続きます。

**メモ:** ブラウザーが収録を開始または収録を続行できない場合は、`DOMError` イベントを発生させ、続いて収集した `Blob` を含む `dataavailable` イベントと `stop` イベントを発生*させよう*とします。

構文
--

```js
start()
start(timeslice)
```

### 引数

`timeslice` 省略可

各 `Blob` に収録するミリ秒数。 この引数が含まれていない場合は、`requestData()` メソッドが呼び出されて `Blob` が取得され、メディアの収録を継続する新しい `Blob` の作成のきっかけがない限り、メディア期間全体が単一の `Blob` に収録されます。

### 返値

なし (`undefined`)。

### 例外

すぐに検出できるエラーは DOM 例外としてスローされます。 他のすべてのエラーは、`MediaRecorder` オブジェクトに送られた `error` イベントを通じて報告されます。 `onerror` イベントハンドラーを実装することで、これらのエラーに対応することができます。

`InvalidModificationError` `DOMException`

収録中のストリームのトラック数が変更された場合に発生します。メディアの収録中にトラックを追加したり削除したりすることはできません。

`InvalidStateError` `DOMException`

`MediaRecorder` が `inactive` 状態ではない場合に発生します。すでに収録中の場合は、メディアの収録を開始することはできません。 `state` プロパティを参照してください。

`NotSupportedError` `DOMException`

収録しようとしているメディアストリームが非アクティブであるか、ストリームの 1 つ以上のトラックが現在の設定を使用して収録できない形式である場合に発生します。

`SecurityError` `DOMException`

`MediaStream` が収録を禁止するように設定されている場合に発生します。 これは、例えば、ユーザーが入力機器を使用する許可を拒否したときに `getUserMedia()` を使用して取得されたソースの場合などです。この例外は、収録開始後にソースメディアのセキュリティオプションが変更された場合にも `error` イベントとして配信される可能性があります。

`UnknownError` `DOMException`

収録処理中に何か他の問題が発生した場合に発生します。

例
-

```js
record.onclick = () => {
  mediaRecorder.start();
  console.log("収録を開始しました。");
};
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-start |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（GitHub のソース）。（英語）
* simpl.info の MediaStream 収録のデモ、Sam Dutton 著。（英語）
* `getUserMedia()`


MediaRecorder: error イベント - Web API

MediaRecorder: error イベント
=========================

`MediaRecorder` インターフェイスの **`error`** イベントは、エラーが発生したときに発生します。 例えば、記録が許可されていない、またはサポートされていないコーデックを使用して試みられたなどです。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用sるうか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("event", (event) => {});

onevent = (event) => {};
```

イベント型
-----

`MediaRecorderErrorEvent` です。 `Event` を継承しています。

イベントプロパティ
---------

*親インターフェイスである `Event` からプロパティを継承しています*。

`error` 読取専用

`DOMException` で、発生したエラーに関する情報を保持しています。

### 値

レコーダーのライフタイム中にエラーが発生したときに呼び出される関数です。発生する可能性のある他の一般的なエラーに加えて、 MediaStream 収録 API を使用する際に特に以下のエラーが発生する可能性があります。どれが発生したか判断するには、 `MediaRecorderErrorEvent.error.name` の値を調べてみてください。

`InvalidStateError`

非アクティブなレコーダーの停止または一時停止、アクティブなレコーダーの開始または再開、あるいは間違った状態での `MediaRecorder` の操作が試みられました。この例外は、削除されたソースに対してリクエストが行われた場合にも発生します。

`SecurityError`

`MediaStream` が、収録を許可しないように設定されています。例えば、`getUserMedia()` を使用して取得したソースで、ユーザーが入力機器を使用する許可を拒否している場合などに該当する可能性があります。

`NotSupportedError`

ユーザーの端末で対応していない MIME タイプを使用して `MediaRecorder` をインスタンス化しようとしました。リクエストされたコンテナー、コーデック、プロファイル、そして他にも情報が無効な場合があります。

`InvalidModificationError`

収録中のストリームのトラック数が変更されました。メディアの記録中にトラックを追加したり削除したりすることはできません。

`UnknownError`

 セキュリティに関連しない、他に分類できないエラーが発生しました。
 収録が停止し、`MediaRecorder` の `state` は `inactive` となり、最後に残りの受信データで `dataavailable` イベントが `MediaRecorder` に送られ、最後に `stop` イベントが送出されました。

これらのエラーは `MediaRecorder` メソッドを呼び出すことによって直接的に発生することもあれば、録画中に発生する問題によって間接的に発生することもあります。

例
-

`addEventListener` を使って `error` イベントを監視します。

```js
async function record() {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const recorder = new MediaRecorder(stream);
  recorder.addEventListener("error", (event) => {
    console.error(`error recording stream: ${event.error.name}`);
  });
  recorder.start();
}

record();
```

上と同じですが、 onerror イベントハンドラープロパティを使用します。

```js
async function record() {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const recorder = new MediaRecorder(stream);
  recorder.onerror = (event) => {
    console.error(`error recording stream: ${event.error.name}`);
  };
  recorder.start();
}

record();
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-onerror |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* MediaStream 収録 API の使用


MediaRecorder.mimeType - Web API

MediaRecorder.mimeType
======================

**`mimeType`** は読み取り専用のプロパティで、 `MediaRecorder` オブジェクトを作成する際に指定された MIME メディア種別、または指定されていない場合は、ブラウザーによって選ばれたメディア種別を返すものです。これは、記録されたデータのすべてをディスクに書き込んだ結果のファイル形式です。

指定されたコンテナーで、すべてのコーデックが対応しているわけではないことに注意してください。指定されたメディアコンテナーで対応していないコーデックを使ってメディアを書き込んだ場合、そのファイルを再生しようとすると、確実に動作しないことがあります（まったく動作しないわけではありません）。ブラウザー間でのコンテナーとコーデックの対応については、メディア種別と形式ガイド を参照してください。

**メモ:** 「MIME タイプ」という用語は、公式には歴史的なものと見なされています。これらの文字列は、正式には**メディア種別**と呼ばれるようになりました。
 MDN Web Docs のコンテンツでは、この用語を互換的に使用しています。

### 値

記録されたメディアの形式を記述する MIME メディア種別（文字列）。この文字列は、メディアレコーダが使用するコーデックとコーデック構成の詳細を示す [`codecs` 引数] (/ja/docs/Web/Media/Formats/codecs\_parameter)を含んでいてもかまいません。

メディア種別の文字列は、インターネット番号割当機構（IANA）によって標準化されています。定義されているメディア種別の文字列の公式な一覧は、IANA サイトの記事 Media Types を参照してください。メディア種別について、またそれらがウェブコンテンツやウェブブラウザーでどのように使用されているかについてはメディア種別も参照してください。

例
-

```js
if (navigator.mediaDevices) {
  console.log("getUserMedia supported.");

  const constraints = { audio: true, video: true };
  const chunks = [];

  navigator.mediaDevices
    .getUserMedia(constraints)
    .then((stream) => {
      const options = {
        audioBitsPerSecond: 128000,
        videoBitsPerSecond: 2500000,
        mimeType: "video/mp4",
      };
      const mediaRecorder = new MediaRecorder(stream, options);
      m = mediaRecorder;

      m.mimeType; // would return 'video/mp4'
      // …
    })
    .catch((error) => {
      console.error(error.message);
    });
}
```

14 行目を以下に変更すると、 `MediaRecorder` は動画に AVC Constrained Baseline Profile Level 4、音声に AAC-LC (Low Complexity) を使用しようとします。これは、モバイルやその他リソースに制約のある状況での使用に有益なものです。

```js
mimeType: 'video/mp4; codecs="avc1.424028, mp4a.40.2"';
```

この設定がユーザーエージェントに受け入れられると仮定すると、後で `m.mimeType` が返す値は `video/mp4; codecs="avc1.424028, mp4a.40.2"` となるでしょう。

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-mimetype |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* MediaStream 収録 API の使用
* 一般的なメディア形式を入力する際の "codecs" 引数 (en-US)
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（Github のソース）。（英語）
* simpl.info の MediaStream Recording のデモ、Sam Dutton 著。（英語）
* `MediaDevices.getUserMedia()`


MediaRecorder: dataavailable イベント - Web API

MediaRecorder: dataavailable イベント
=================================

`dataavailable` イベントは、`MediaRecorder` がメディアデータをアプリで使用するために引き渡すときに発生します。 データはデータを含む `Blob` オブジェクトで提供されます。 これは次の 4 つの状況で発生します。

* メディアストリームが終了すると、`ondataavailable` ハンドラーにまだ引き渡されていないメディアデータはすべて単一の `Blob` で渡されます。
* `MediaRecorder.stop()` を呼び出すと、収録を開始してから、または最後に `dataavailable` イベントが発生してからキャプチャされたすべてのメディアデータが `Blob` で引き渡されます。 この後、キャプチャは終了します。
* `MediaRecorder.requestData()` を呼び出すと、収録を開始してから、または最後に `dataavailable` イベントが発生してからキャプチャされたすべてのメディアデータが引き渡されます。 その後、新しい `Blob` が作成され、メディアのキャプチャがその blob に対して続行されます。
* `timeslice` プロパティをメディアキャプチャを開始した `MediaRecorder.start()` メソッドに渡した場合は、`timeslice` ミリ秒ごとに `dataavailable` イベントが発生します。 つまり、各 blob は特定の期間を持つことになります（最後の blob を除いてで、最後のイベント以降に残っているものは何でもということになるので、これはもっと短いかもしれません）。 そのため、メソッド呼び出しが次のようになっていれば — `recorder.start(1000);` — `dataavailable` イベントはメディアキャプチャの毎秒後に発生し、イベントハンドラーは一秒の長さのメディアデータの blob で毎秒呼ばれるでしょう。 `timeslice` を `MediaRecorder.stop()` および `MediaRecorder.requestData()` と共に使用して、複数の同じ長さの blob と他の短い blob を生成することもできます。

**メモ:** メディアデータを含む `Blob` は、`dataavailable` イベントの `data` プロパティで利用できます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("dataavailable", (event) => {});

ondataavailable = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

```js
const chunks = [];

mediaRecorder.onstop = (e) => {
  console.log("MediaRecorder.stop() 呼び出し後に利用可能なデータ。");

  const audio = document.createElement("audio");
  audio.controls = true;
  const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
  const audioURL = window.URL.createObjectURL(blob);
  audio.src = audioURL;
  console.log("レコーダー停止");
};

mediaRecorder.ondataavailable = (e) => {
  chunks.push(e.data);
};
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-ondataavailable |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（GitHub のソース）。（英語）
* simpl.info の MediaStream 収録のデモ、Sam Dutton 著。（英語）
* `Navigator.getUserMedia`


MediaRecorder.stop() - Web API

MediaRecorder.stop()
====================

**`MediaRecorder.stop()`** メソッド（MediaStream 収録 API の一部）は、メディアキャプチャを停止するために使用します。

`stop()` メソッドを呼び出すと、 UA は次の手順を実行するタスクをキューに入れます。

1. `MediaRecorder.state` が "inactive" の場合は、DOM の `InvalidState` エラーを発生させてこれらの手順を終了します。 `MediaRecorder.state` が "inactive" でない場合は、次の手順に進みます。
2. `MediaRecorder.state` を "inactive" に設定してメディアのキャプチャを停止します。
3. 収集されたデータの Blob を含む `dataavailable` イベントを発生させます。
4. `stop` イベントを発生させます。
構文
--

```js
stop()
```

### 引数

なし。

### 返値

なし (`undefined`)。

### エラー

`MediaRecorder` オブジェクトの `MediaRecorder.state` が "inactive" のときに `stop()` メソッドが呼び出されると、`InvalidState` エラーが発生します — メディアキャプチャが既に停止している場合は停止しても意味がありません。

例
-

```js
stop.onclick = () => {
  mediaRecorder.stop();
  console.log("レコーダー停止、データ使用可能");
};
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-stop |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（GitHub のソース）。（英語）
* simpl.info の MediaStream 収録のデモ、Sam Dutton 著。（英語）
* `Navigator.getUserMedia`


MediaRecorder.requestData() - Web API

MediaRecorder.requestData()
===========================

**`MediaRecorder.requestData()`** メソッド（MediaStream 収録 API の一部）は、 `dataavailable` イベントを発生させるために使用します。これは、このメソッドを呼び出した時点での、キャプチャされたメディアの `Blob` オブジェクトを含みます。その後、これを入手して操作することができます。

`requestData()` メソッドを呼び出すと、ブラウザーは次の手順を実行するタスクをキューに入れます。

1. `MediaRecorder.state` が "inactive" であった場合は、DOM の `InvalidState` エラーを発生させ、これらの手順を終了します。 `MediaRecorder.state` が "inactive" でなかった場合は、次の手順に進みます。
2. `dataavailable` イベントを発生させます。これは現在キャプチャされているデータの `Blob` を含む （Blob はイベントの `data` 属性で利用可能です）。
3. 新しい Blob を作成し、その後にキャプチャしたデータをそこに配置します。
構文
--

```js
requestData()
```

### 引数

なし。

### 返値

なし (`undefined`)。

### エラー

`MediaRecorder` オブジェクトの `MediaRecorder.state` が `"recording"` でないときに `requestData()` メソッドが呼び出されると、`InvalidState` エラーが発生します — 記録が行われていないと、メディアをキャプチャできません。

例
-

```js
captureMedia.onclick = () => {
  mediaRecorder.requestData();
  // これまでのデータのスナップショットを
  // 使用可能にする ondataavailable が発生し、
  // それから、キャプチャは新しい Blob で続行されます
};
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-requestdata |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（GitHub のソース）。（英語）
* simpl.info の MediaStream 収録のデモ、Sam Dutton 著。（英語）
* `Navigator.getUserMedia`


MediaRecorder.stream - Web API

MediaRecorder.stream
====================

**`MediaRecorder.stream`** は読み取り専用プロパティで、 `MediaRecorder` を作成したときに `MediaRecorder()` コンストラクターに渡したストリームを返します。

値
-

最初に `MediaRecorder` を作成したとき `MediaRecorde()` コンストラクターに渡した `MediaStream` です。

例
-

```js
if (navigator.getUserMedia) {
  console.log("getUserMediaがサポートされています。");
  navigator.getUserMedia(
    // 制約 - このアプリに必要なのは音声のみ
    {
      audio: true,
    },

    // 成功コールバック
    (stream) => {
      const mediaRecorder = new MediaRecorder(stream);

      const myStream = mediaRecorder.stream;
      console.log(myStream);
    },
  );
}
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-stream |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + ウェブオーディオ API 可視化デモ、Chris Mills 著（GitHub のソース）。（英語）
* simpl.info の MediaStream Recording のデモ、Sam Dutton 著。（英語）
* `Navigator.getUserMedia`


MediaRecorder: resume イベント - Web API

MediaRecorder: resume イベント
==========================

`resume` イベントは、`MediaRecorder.resume()` メソッドを呼び出した結果としてスローされます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用sるうか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("resume", (event) => {});

onresume = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

```js
pause.onclick = () => {
  if (MediaRecorder.state === "recording") {
    mediaRecorder.pause();
    // 記録を一時停止
  } else if (MediaRecorder.state === "paused") {
    mediaRecorder.resume();
    // 記録を再開
  }
};

mediaRecorder.onpause = () => {
  // 記録の一時停止に
  // 応答して何かをする
};

mediaRecorder.onresume = () => {
  // 記録の再開に
  // 応答して何かをする
};
```

インスタンスプロパティ
-----------

なし。

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-onresume |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（GitHub のソース）。（英語）
* simpl.info の MediaStream 収録のデモ、Sam Dutton 著。（英語）
* `Navigator.getUserMedia`


MediaRecorder() - Web API

MediaRecorder()
===============

**`MediaRecorder()`** コンストラクターは、新しい `MediaRecorder` オブジェクトを作成します。これが指定された `MediaStream` を記録します。

オブジェクトは、オプションとして、特定のメディアコンテナー（ファイル形式）を使用して記録するように構成することができ、さらに、`codecs` 引数 (en-US) を指定して、使用するコーデックとコーデック構成を正確に指定することができます。

構文
--

```js
new MediaRecorder(stream)
new MediaRecorder(stream, options)
```

### 引数

`stream`

記録される `MediaStream`。 このソースメディアは、`navigator.mediaDevices.getUserMedia()` を使用して作成したストリーム、または `<audio>`、`<video>`、`<canvas>` 要素から取得できます。

`options` 省略可

以下のプロパティを含むことができる辞書オブジェクト。

`mimeType`

 生成されるメディアの形式を指定する MIME タイプです。コンテナー形式を指定することもできますし（ブラウザーは音声と映像のために好ましいコーデックを選択します）、 `codecs`引数 (en-US)や `profiles` 引数を使って、どのコーデックを使い、どう設定するのかという詳細情報を提供することもできます。
 アプリケーションは `mimeType` が user agent で対応しているかどうかを事前に調べることができます。そのためには `MediaRecorder.isTypeSupported()` を呼び出す必要があります。

`audioBitsPerSecond`

メディアの音声コンポーネントに選択したビットレート。

`videoBitsPerSecond`

メディアの映像コンポーネントに選択したビットレート。

`bitsPerSecond`

メディアの音声コンポーネントおよび映像コンポーネントに選択したビットレート。 上記の 2 つのプロパティの代わりにこれを指定することができます。 これを上記のプロパティのいずれかと一緒に指定している場合、これは指定していないものに使用されます。

**メモ:** 映像や音声にビット/秒の値を指定していない場合、映像が採用している既定値は 2.5Mbps ですが、音声の既定値はサンプルレートとチャネル数に応じて決まります。

**メモ:** 映像の解像度やフレームレートなどの設定は `getUserMedia()` を呼び出す際に制約として指定され、ここでの MediaRecorder API では指定されません。

### 例外

`NotSupportedError` `DOMException`

指定された MIME タイプにユーザーエージェントが対応していない場合に発生します。

例
-

この例では、音声のビットレートを 128 K ビット/秒に設定し、映像のビットレートを 2.5 M ビット/秒に設定して、指定したストリーム用のメディアレコーダーを作成する方法を示します。 記録したメディアデータは MP4 ラッパーに保存されます（従って、メディアデータのチャンクを集めてディスクに保存すると、それらは MP4 ファイルになります）。

```js
if (navigator.mediaDevices.getUserMedia) {
  const constraints = { audio: true, video: true };
  const chunks = [];

  const onSuccess = (stream) => {
    const options = {
      audioBitsPerSecond: 128000,
      videoBitsPerSecond: 2500000,
      mimeType: "video/mp4",
    };
    const mediaRecorder = new MediaRecorder(stream, options);
    m = mediaRecorder;

    // …
  };
}
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-mediarecorder |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（Github のソース）。（英語）
* simpl.info の MediaStream Recording のデモ、Sam Dutton 著。（英語）
* `MediaDevices.getUserMedia`


MediaRecorder.pause() - Web API

MediaRecorder.pause()
=====================

**`MediaRecorder.pause()`** メソッド（MediaStream 収録 API の一部）は、メディアストリームの記録を一時停止するために使用します。

`MediaRecorder` オブジェクトの `pause()` メソッドが呼び出されると、ブラウザーは次の手順を実行するタスクをキューに入れます。

1. `MediaRecorder.state` が "inactive" の場合は、DOM の `InvalidState` エラーを発生させてこれらの手順を終了します。 そうでない場合は、次の手順に進みます。
2. `MediaRecorder.state` を "paused" に設定します。
3. 現在の `Blob` へのデータ収集を停止しますが、後で記録を再開できるように使用可能な状態にしておきます。
4. `pause` イベントを発生させます。
構文
--

```js
pause()
```

### 引数

なし。

### 返値

なし (`undefined`)。

### 例外

`InvalidStateError` `DOMException`

`MediaRecorder` は現在 `"inactive"` です。 アクティブでない場合は記録を一時停止できません。 一時停止している間に `pause()` を呼び出しても、何もしません。

例
-

```js
pause.onclick = () => {
  mediaRecorder.pause();
  console.log("recording paused");
};
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-pause |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* MediaStream Recording API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（GitHub のソース）。（英語）
* simpl.info の MediaStream Recording のデモ、Sam Dutton 著。（英語）
* `MediaDevices.getUserMedia`


MediaRecorder.isTypeSupported() - Web API

MediaRecorder.isTypeSupported()
===============================

**`MediaRecorder.isTypeSupported()`** は静的メソッドで、指定された MIME タイプがこのユーザーエージェントが収録できるものであれば `true` となる論理値を返します。

構文
--

```js
isTypeSupported(mimeType)
```

### 引数

`mimeType`

チェックする MIME タイプ。

### 返値

この `MediaRecorder` の実装が指定された MIME タイプの `Blob` オブジェクトを収録できる場合は `true` になります。 収録および符号化プロセスをサポートするのに十分なリソースがない場合、収録が失敗する可能性はまだあります。 値が `false` の場合、ユーザーエージェントは指定された形式を収録することができません。

例
-

```js
const types = [
  "video/webm",
  "audio/webm",
  "video/webm;codecs=vp8",
  "video/webm;codecs=daala",
  "video/webm;codecs=h264",
  "audio/webm;codecs=opus",
  "video/mpeg",
];

for (const type of types) {
  console.log(
    `${type} に対応している? ${
 MediaRecorder.isTypeSupported(type) ? "たぶん!" : "いいえ :("
 }`,
  );
}
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-istypesupported |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* MediaStream 収録 API
* MediaStream 収録 API の使用
* ウェブ上のメディア種別や形式のガイド
* よくあるメディア種別の "codecs" 引数 (en-US)
* `MediaStreamTrack`
* `MediaStream`
* `MediaCapabilities` (en-US)


MediaRecorder: pause イベント - Web API

MediaRecorder: pause イベント
=========================

`pause` イベントは、`MediaRecorder.pause()` メソッドを呼び出した結果として発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用sるうか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("pause", (event) => {});

onpause = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

```js
pause.onclick = () => {
  if (mediaRecorder.state === "recording") {
    mediaRecorder.pause();
    // 記録を一時停止
  } else if (mediaRecorder.state === "paused") {
    mediaRecorder.resume();
    // 記録を再開
  }
};

mediaRecorder.onpause = () => {
  // 記録の一時停止に
  // 応答して何かをする
};

mediaRecorder.onresume = () => {
  // 記録の再開に
  // 応答して何かをする
};
```

インスタンスプロパティ
-----------

なし。

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-onpause |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（GitHub のソース）。（英語）
* simpl.info の MediaStream 収録のデモ、Sam Dutton 著。（英語）
* `Navigator.getUserMedia`


MediaRecorder.videoBitsPerSecond - Web API

MediaRecorder.videoBitsPerSecond
================================

**videoBitsPerSecond`** は `MediaRecorder` インターフェイスの読み取り専用プロパティは、使用されている動画エンコーディングのビットレートを返します。

これは、コンストラクタで指定されたビットレートが提供された場合、そのビットレートとは異なる形になる可能性があります。

値
-

数値 (unsigned long) です。

例
-

```js
// TBD
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-videobitspersecond |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


MediaRecorder: stop イベント - Web API

MediaRecorder: stop イベント
========================

`stop` イベントは、`MediaRecorder.stop()` メソッドを呼び出した結果として、またはキャプチャしているメディアストリームが終了したときに発生します。 いずれの場合も、`stop` イベントの前に `dataavailable` イベントがあり、それまでにキャプチャされた `Blob` をアプリで使用できるようにします。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("stop", (event) => {});

onstop = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

```js
mediaRecorder.onstop = (e) => {
  console.log("MediaRecorder.stop() 呼び出し後に利用可能なデータ。");

  const audio = document.createElement("audio");
  audio.controls = true;
  const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
  const audioURL = window.URL.createObjectURL(blob);
  audio.src = audioURL;
  console.log("レコーダー停止");
};

mediaRecorder.ondataavailable = (e) => {
  chunks.push(e.data);
};
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-onstop |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（GitHub のソース）。（英語）
* simpl.info の MediaStream 収録のデモ、Sam Dutton 著。（英語）
* `Navigator.getUserMedia`


MediaRecorder.resume() - Web API

MediaRecorder.resume()
======================

**`MediaRecorder.resume()`** メソッド（MediaStream 収録 API の一部）は、以前に一時停止していたメディアの記録を再開するために使用します。

`resume()` メソッドを呼び出すと、ブラウザーは次の手順を実行するタスクをキューに入れます。

1. `MediaRecorder.state` が "inactive" の場合は、DOM の `InvalidState` エラーを発生させてこれらの手順を終了します。 `MediaRecorder.state` が "inactive" でない場合は、次の手順に進みます。
2. `MediaRecorder.state` を "recording" に設定します。
3. 現在の `Blob` へのデータ収集を続けます。
4. `resume` イベントを発生させます。
構文
--

```js
resume()
```

### 引数

なし。

### 返値

なし (`undefined`)。

### エラー

`MediaRecorder` オブジェクトの `MediaRecorder.state` が "inactive" のときに `resume()` メソッドが呼び出されると、`InvalidState` エラーが発生します — まだ一時停止していない場合、記録を再開できませんし、`MediaRecorder.state` がすでに `"recording"` の場合、`resume()` は効果がありません。

例
-

```js
pause.onclick = () => {
  if (MediaRecorder.state === "recording") {
    mediaRecorder.pause();
    // 記録を一時停止
  } else if (MediaRecorder.state === "paused") {
    mediaRecorder.resume();
    // 記録を再開
  }
};
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-resume |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（Github のソース）。（英語）
* simpl.info の MediaStream 収録のデモ、Sam Dutton 著。（英語）
* `Navigator.getUserMedia`


MediaRecorder: start イベント - Web API

MediaRecorder: start イベント
=========================

`start` イベントは、`MediaRecorder.start()` メソッドを呼び出した結果として発生します。 この時点で、データは `Blob` に集められ始めます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用sるうか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("start", (event) => {});

onstart = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

```js
record.onclick = () => {
  mediaRecorder.start();
  console.log("レコーダーが起動しました");
};

mediaRecorder.onstart = () => {
  // 記録の開始に
  // 応答して何かをする
};
```

インスタンスプロパティ
-----------

なし。

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-onstart |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（GitHub のソース）。（英語）
* simpl.info の MediaStream 収録のデモ、Sam Dutton 著。（英語）
* `Navigator.getUserMedia`


MediaRecorder.state - Web API

MediaRecorder.state
===================

**`MediaRecorder.state`** は読み取り専用プロパティで、現在の `MediaRecorder` オブジェクトの現在の状態を返します。

値
-

以下のいずれかの値を含む文字列です。

`inactive`

収録は行われていません — まだ開始されていないか、開始されてから停止されました。

`recording`

収録が開始され、UA がデータをキャプチャしています。

`paused`

収録は開始され、その後一時停止されましたが、まだ停止または再開されていません。

例
-

```js
record.onclick = () => {
  mediaRecorder.start();
  console.log(mediaRecorder.state);
  // Will return "recording"
  console.log("recorder started");
};
```

使用書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-state |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（GitHub のソース）。（英語）
* simpl.info の MediaStream Recording のデモ、Sam Dutton 著。（英語）
* `MediaDevices.getUserMedia`


FormData: FormData() コンストラクター - Web API

FormData: FormData() コンストラクター
=============================

**`FormData()`** コンストラクターは、新しい `FormData` オブジェクトを生成します。

**メモ:** このメソッドはウェブワーカーで使用できます。

構文
--

```js
new FormData()
new FormData(form)
new FormData(form, submitter)
```

### 引数

`form` 省略可

HTML の `<form>` 要素です。指定された場合、`FormData` オブジェクトは、その各要素の name プロパティをキーに、それらの送信される値を値として使い、フォームの現在のキーと値が設定されます。ファイルからの入力内容は、エンコードもされます。

`submitter` 省略可

`form` のメンバーである送信ボタンです。もし `submitter` に `name` 属性があるか、`<input type="image">` であった場合、このデータは `FormData` オブジェクトに含まれます（例えば `btnName=btnValue`）。

### 例外

`TypeError`

指定した `submitter` が送信ボタンでない場合に発生します。

`NotFoundError` `DOMException`

指定した `submitter` が `form` のメンバーでない場合に発生します。`submitter` はフォーム要素の子孫であるか、フォームを参照する `form` 属性がなければなりません。

例
-

### 空の FormData の作成

次の行は、空の `FormData` オブジェクトを生成します。

```js
const formData = new FormData();
```

`append()` を使って、これにキーと値のペアを追加することができます。

```js
formData.append("username", "Chris");
```

### HTML フォーム要素からの事前入力

オプションで `form` と `submitter` を指定すると、`FormData` オブジェクトを作成する際に、指定したフォームの値を事前入力することができます。

**メモ:** FormData オブジェクトに含まれるのは、正常なフォームコントロールのみです。つまり、名前を持ち、無効状態でないものです。

#### HTML

```html
<form id="form">
  <input type="text" name="text1" value="foo" />
  <input type="text" name="text2" value="bar" />
  <input type="text" name="text2" value="baz" />
  <input type="checkbox" name="check" checked disabled />
  <button name="intent" value="save">Save</button>
  <button name="intent" value="saveAsCopy">Save As Copy</button>
</form>

<output id="output"></output>
```

```
form {
  display: none;
}

output {
  display: block;
  white-space: pre-wrap;
}
```

#### JavaScript

```js
const form = document.getElementById("form");
const submitter = document.querySelector("button[value=save]");
const formData = new FormData(form, submitter);

const output = document.getElementById("output");

for (const [key, value] of formData) {
  output.textContent += `${key}: ${value}\n`;
}
```

#### 結果

簡潔にするため、`<form>` 要素は非表示にしています。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* FormData オブジェクトの使用
* `<form>`


FormData: delete() メソッド - Web API

FormData: delete() メソッド
=======================

**`delete()`** は `FormData` インターフェイスのメソッドで、`FormData` オブジェクトからキーとその値を削除します。

**メモ:** このメソッドはウェブワーカーで使用できます。

構文
--

```js
delete(name)
```

### 引数

`name`

削除したいキーの名前です。

### 返値

なし (`undefined`)。

例
-

`delete()` を使用すると、キーとその値を削除することができます。

```js
formData.delete("username");
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-delete |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* FormData オブジェクトの使用
* `<form>`


FormData: keys() メソッド - Web API

FormData: keys() メソッド
=====================

**`FormData.keys()`** メソッドは、この `FormData` に含まれるすべてのキーを走査するイテレーターを返します。キーは文字列です。

**メモ:** このメソッドはウェブワーカーで使用できます。

構文
--

```js
keys()
```

### 引数

なし。

### 返値

この `FormData` のキーのイテレーターです。

例
-

```js
const formData = new FormData();
formData.append("key1", "value1");
formData.append("key2", "value2");

// キーを表示
for (const key of formData.keys()) {
  console.log(key);
}
```

結果は次のとおりです。
```

key1
key2
```

仕様書
---

#### No specification found

No specification data found for `api.FormData.keys`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* FormData オブジェクトの使用
* `<form>`


FormData: set() メソッド - Web API

FormData: set() メソッド
====================

**`set()`** は `FormData` インターフェイスのメソッドで、`FormData` オブジェクト内の既存のキーに値を追加したり、存在しないキーと値の組を追加したりします。

`set()` と `append()` の違いは、指定されたキーが既に存在した場合、`set()` は既存のすべての値を新しい値で上書きすることです。 一方、`append()` は、既存の値のセットの末尾に新しい値を追加します。

**メモ:** このメソッドはウェブワーカーで使用できます。

構文
--

```js
set(name, value)
set(name, value, filename)
```

### 引数

`name`

`value` にあるデータのフィールド名です。

`value`

フィールドの値です。文字列または `Blob`（`File` などのサブクラスを含む）です。これらの何れでもないものが指定された場合、値は文字列に変換されます。

`filename` 省略可

第 2 引数に `Blob` または `File` を渡した場合に、サーバーに報告されるファイル名（文字列）です。`Blob` オブジェクトの既定のファイル名は "blob" です。`File` オブジェクトの既定値は、ファイルのファイル名です。

**メモ:** `FormData` オブジェクトに追加するデータとして `Blob` を指定した場合、"Content-Disposition" ヘッダーでサーバーに報告されるファイル名はブラウザーによって異なることがあります。

### 返値

なし (`undefined`)。

例
-

```js
formData.set("username", "Chris");
```

値が `Blob`（または `File`）である場合、その名前を `filename` で指定することができます。

```js
formData.set("userpic", myFileInput.files[0], "chris.jpg");
```

この値が文字列または `Blob` でない場合、`set()` は自動的にそれを文字列に変換します。

```js
formData.set("name", 72);
formData.get("name"); // "72"
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-set |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* FormData オブジェクトの使用
* `<form>`


FormData: entries() メソッド - Web API

FormData: entries() メソッド
========================

**`FormData.entries()`** メソッドは、この `FormData` に含まれているすべてのキー/値のペアを走査するイテレーターを返します。それぞれのペアのキーは文字列オブジェクトで、値は文字列または `Blob` のどちらかです。

**メモ:** このメソッドはウェブワーカーで使用できます。

構文
--

```js
entries()
```

### 引数

なし。

### 返値

`FormData` のキー/値のペアのイテレーターです。

例
-

```js
formData.append("key1", "value1");
formData.append("key2", "value2");

// キー/値のペアを表示
for (const pair of formData.entries()) {
  console.log(`${pair[0]}, ${pair[1]}`);
}
```

結果は次のとおりです。
```

key1, value1
key2, value2
```

仕様書
---

#### No specification found

No specification data found for `api.FormData.entries`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* FormData オブジェクトの使用
* `<form>`


FormData: get() メソッド - Web API

FormData: get() メソッド
====================

**`get()`** は `FormData` インターフェイスのメソッドで、`FormData` オブジェクトの中から、指定されたキーに関連付けられた最初の値を返します。。複数の値を期待し、すべてが欲しい場合は、代わりに `getAll()` メソッドを使用してください。

**メモ:** このメソッドはウェブワーカーで使用できます。

構文
--

```js
get(name)
```

### 引数

`name`

取得したいキーの名前を表す文字列です。

### 返値

指定された `name` に一致するキーの値です。見つからなければ `null` です。

例
-

2 つの `username` 値を `FormData` に、`append()` を使って追加した場合、

```js
formData.append("username", "Chris");
formData.append("username", "Bob");
```

次の `get()` メソッドは最初の `username` 値のみを返します。

```js
formData.get("username"); // "Chris" を返す
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-get |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* FormData オブジェクトの使用
* `<form>`


FormData: has() メソッド - Web API

FormData: has() メソッド
====================

**`has()`** は `FormData` インターフェイスのメソッドで、`FormData` オブジェクトに指定されたキーがあるかどうかを返します。

**メモ:** このメソッドはウェブワーカーで使用できます。

構文
--

```js
has(name)
```

### 引数

`name`

検査を行うキーの名前を表す文字列です。

### 返値

`FormData` に `name` と一致するキーがあれば `true` です。そうでなければ `false` です。

例
-

以下のスニペットは、`FormData` オブジェクトの `username` の値を `append()` で追加する前と後で `username` が存在するかどうかテストした結果を示します。

```js
formData.has("username"); // false を返す
formData.append("username", "Chris");
formData.has("username"); // true を返す
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-has |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* FormData オブジェクトの使用
* `<form>`


FormData: getAll() メソッド - Web API

FormData: getAll() メソッド
=======================

**`getAll()`** は `FormData` インターフェイスのメソッドで、`FormData` オブジェクト内から指定されたキーに関連付けられたすべての値を返します。

**メモ:** このメソッドはウェブワーカーで使用できます。

構文
--

```js
getAll(name)
```

### 引数

`name`

取得したいキーの名前を表す文字列です。

### 返値

キーが指定した `name` と一致する値の配列です。そうでない場合は、空のリストです。

例
-

`FormData` に、`append()` を用いて `username` の値を 2 つ追加したとします。

```js
formData.append("username", "Chris");
formData.append("username", "Bob");
```

以下の `getAll()` メソッドは、配列で `username` の値を両方とも返します。

```js
formData.getAll("username"); // Returns ["Chris", "Bob"]
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-getall |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* FormData オブジェクトの使用
* `<form>`


FormData: values() メソッド - Web API

FormData: values() メソッド
=======================

**`FormData.values()`** メソッドは、この `FormData` に含まれるすべての値を走査するイテレーターを返します。値は文字列または `Blob` オブジェクトです。

**メモ:** このメソッドはウェブワーカーで使用できます。

構文
--

```js
values()
```

### 引数

なし。

### 返値

この `FormData` の値のイテレーターです。

例
-

```js
const formData = new FormData();
formData.append("key1", "value1");
formData.append("key2", "value2");

// 値を表示
for (const value of formData.values()) {
  console.log(value);
}
```

結果は次のとおりです。
```

value1
value2
```

仕様書
---

#### No specification found

No specification data found for `api.FormData.values`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* FormData オブジェクトの使用
* `<form>`


FormData: append() メソッド - Web API

FormData: append() メソッド
=======================

**`append()`** は `FormData` インターフェイスのメソッドで、`FormData` オブジェクト内の既存のキーに新しい値を追加します。キーがまだ存在しない場合は追加します。

`set()` と `append()` の違いは、指定されたキーが既に存在する場合、`set()` は既存のすべての値を新しい値で上書きすることです。 一方、`append()` は、既存の値のセットの最後に新しい値を追加します。

**メモ:** このメソッドはウェブワーカーで使用できます。

構文
--

```js
append(name, value)
append(name, value, filename)
```

### 引数

`name`

`value` にあるデータのフィールド名です。

`value`

フィールドの値です。文字列または `Blob`（`File` などのサブクラスを含む）です。これらの何れでもないものが指定された場合、値は文字列に変換されます。

`filename` 省略可

第 2 引数に `Blob` または `File` を渡した場合に、サーバーに報告されるファイル名（文字列）です。`Blob` オブジェクトの既定のファイル名は "blob" です。`File` オブジェクトの既定値は、ファイルのファイル名です。

**メモ:** `FormData` オブジェクトに追加するデータとして `Blob` を指定した場合、"Content-Disposition" ヘッダーでサーバーに報告されるファイル名はブラウザーによって異なることがあります。

### 返値

なし (`undefined`)。

例
-

```js
formData.append("username", "Chris");
```

値が `Blob` （または `File`）である場合、`filename` 引数でそのファイル名を指定します。

```js
formData.append("userpic", myFileInput.files[0], "chris.jpg");
```

通常のフォームデータと同様に、同じ名前の複数の値を追加することができます。

```js
formData.append("userpic", myFileInput.files[0], "chris1.jpg");
formData.append("userpic", myFileInput.files[1], "chris2.jpg");
```

値が文字列でも `Blob` でもない場合、`append()` は自動的に文字列に変換します。

```js
formData.append("name", true);
formData.append("name", 72);
formData.getAll("name"); // ["true", "72"]
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-append |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* FormData オブジェクトの使用
* `<form>`


AudioBuffer() - Web API

AudioBuffer()
=============

**`AudioBuffer`** はウェブオーディオ API のコンストラクターで、新しい `AudioBuffer` オブジェクトを生成します。

構文
--

```js
new AudioBuffer(options);
```

### 引数

`options`

オプションは次の通りです。

* `length`: オーディオバッファーのサイズ（サンプルフレーム単位）。特定の秒数の音声に使用する `length` を決定するには、`numSeconds * sampleRate` を使用してください。
* `numberOfChannels`: バッファーのチャンネル数です。既定値は 1 で、すべてのユーザーエージェントは最低でも 32 チャンネルを対応する必要があります。
* サンプリングレート `sampleRate`: バッファーのサンプリングレート（単位: Hz）。既定では、このオブジェクトを作成する際に使用した `context` のサンプリングレートになります。ユーザーエージェントは 8,000 Hz から 96,000 Hz までのサンプリングレートに対応する必要があります（ただし、この範囲外でもかまいません）。
* `channelCount`: ノードへの任意の入力にアップミキシング・ダウンミキシング接続する際に使用するチャンネル数を決めるための整数を表します。
 （詳しくは `AudioNode.channelCount` を参照してください。）その使い方や正確な定義は `channelCountMode` の値に依存します。
* `channelCountMode`: ノードの入力と出力の間でチャンネルを一致させる方法を記述する列挙型の値を表します。（既定値を含む詳細は `AudioNode.channelCountMode` を参照してください。）
* `channelInterpretation`: チャンネルの意味を記述した列挙型の値を表します。この解釈により、音声の[アップミキシングとダウンミキシング](/ja/docs/Web/API/Web\_Audio\_API/Basic\_concepts\_behind\_Web\_Audio\_API#up-mixing\_ and\_down-mixing)がどのように行われるかが定義されることになります。
 指定可能な値は `"speakers"` または `"discrete"` です。（既定値を含むより詳細な情報については `AudioNode.channelCountMode` を参照してください。）

#### 非推奨の引数

`context`
非推奨

`AudioContext` への参照です。この引数は仕様書から削除されました。

### 返値

新しい `AudioBuffer` オブジェクトのインスタンスです。

### 例外

`NotSupportedError` `DOMException`

1 つ以上のオプションが負の値であるか、あるいは無効な値である場合（例えば `numberOfChannels` がサポートされているよりも大きい、あるいは `sampleRate` が公称範囲外であるなど）に発生します。

`RangeError` `DOMException`

バッファーを割り当てるのに十分なメモリーがない場合に発生します。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiobuffer-audiobuffer |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


AudioBuffer.length - Web API

AudioBuffer.length
==================

**`length`** は `AudioBuffer` インターフェイスのプロパティで、バッファーに格納された PCM データの長さをサンプルフレーム数で表す整数を返します。

値
-

整数です。

例
-

```js
// ステレオ
var channels = 2;

// AudioContext のサンプルレートで 2 秒間の空のステレオバッファーを生成する
var frameCount = audioCtx.sampleRate \* 2.0;
var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);

button.onclick = function () {
  // バッファーにホワイトノイズを書き込む
  // 単なる -1.0 から 1.0 の間の乱数の値である
  for (var channel = 0; channel < channels; channel++) {
    // 実際のデータの配列を得る
    var nowBuffering = myArrayBuffer.getChannelData(channel);
    for (var i = 0; i < frameCount; i++) {
      // Math.random() は [0; 1.0] である
      // 音声は [-1.0; 1.0] である必要がある
      nowBuffering[i] = Math.random() \* 2 - 1;
    }
  }

  console.log(myArrayBuffer.length);
};
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiobuffer-length |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブオーディオ API の使用


AudioBuffer.numberOfChannels - Web API

AudioBuffer.numberOfChannels
============================

`numberOfChannels` は `AudioBuffer` インターフェイスのプロパティで、バッファーに格納された PCM データのチャンネルの数を整数で返します。

値
-

整数です。

例
-

```js
// ステレオ
var channels = 2;

// AudioContext のサンプルレートで2秒間の空のステレオバッファを生成する
var frameCount = audioCtx.sampleRate \* 2.0;
var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);

button.onclick = function () {
  // バッファにホワイトノイズを書き込む;
  // 単なる -1.0 から 1.0 の間の乱数の値である
  for (var channel = 0; channel < channels; channel++) {
    // 実際のデータの配列を得る
    var nowBuffering = myArrayBuffer.getChannelData(channel);
    for (var i = 0; i < frameCount; i++) {
      // Math.random() は [0; 1.0] である
      // 音声は [-1.0; 1.0] である必要がある
      nowBuffering[i] = Math.random() \* 2 - 1;
    }
  }

  console.log(myArrayBuffer.numberOfChannels);
};
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiobuffer-numberofchannels |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブオーディオ API の使用


AudioBuffer.duration - Web API

AudioBuffer.duration
====================

**`duration`** は `AudioBuffer` インターフェイスのプロパティで、バッファーに格納された PCM データの再生時間を秒数で表す double 値を返します。

値
-

double 値です。

例
-

```js
// ステレオ
var channels = 2;

// AudioContext のサンプルレートで 2 秒間の空のステレオバッファを生成する
var frameCount = audioCtx.sampleRate \* 2.0;
var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);

button.onclick = function () {
  // バッファにホワイトノイズを書き込む
  // 単なる -1.0 から 1.0 の間の乱数の値である
  for (var channel = 0; channel < channels; channel++) {
    // 実際のデータの配列を得る
    var nowBuffering = myArrayBuffer.getChannelData(channel);
    for (var i = 0; i < frameCount; i++) {
      // Math.random() は [0; 1.0] である
      // 音声は [-1.0; 1.0] である必要がある
      nowBuffering[i] = Math.random() \* 2 - 1;
    }
  }

  console.log(myArrayBuffer.duration);
};
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiobuffer-duration |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブオーディオ API の使用


AudioBuffer.sampleRate - Web API

AudioBuffer.sampleRate
======================

**`sampleRate`** は `AudioBuffer` インターフェイスのプロパティで、バッファーに格納された PCM データの 1 秒あたりのサンプル数を、サンプルレートとして float で返します。

値
-

バッファーデータの現在のサンプルレートを示す浮動小数点値で、サンプル/秒単位です。

例
-

```js
// ステレオ
var channels = 2;

// AudioContext のサンプルレートで 2 秒間の空のステレオバッファを生成する
var frameCount = audioCtx.sampleRate \* 2.0;
var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);

button.onclick = function () {
  // バッファにホワイトノイズを書き込む;
  // 単なる -1.0 から 1.0 の間の乱数の値である
  for (var channel = 0; channel < channels; channel++) {
    // 実際のデータの配列を得る
    var nowBuffering = myArrayBuffer.getChannelData(channel);
    for (var i = 0; i < frameCount; i++) {
      // Math.random() は [0; 1.0] である
      // 音声は [-1.0; 1.0] である必要がある
      nowBuffering[i] = Math.random() \* 2 - 1;
    }
  }

  console.log(myArrayBuffer.sampleRate);
};
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiobuffer-samplerate |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブオーディオ API の使用


AudioBuffer.copyToChannel() - Web API

AudioBuffer.copyToChannel()
===========================

`copyToChannel()` は `AudioBuffer` インターフェイスのメソッドで、元の配列から指定の `AudioBuffer` のチャンネルへとコピーします。

構文
--

```js
copyToChannel(source, channelNumber, startInChannel);
```

### 引数

source

コピー元となるチャンネルデータの `Float32Array` です。

channelNumber

チャンネルデータのコピー先となる現在の `AudioBuffer` のチャンネル番号です。 *channelNumber* が `AudioBuffer.numberOfChannels` 以上の場合は `INDEX_SIZE_ERR` 例外が発生します。

startInChannel 省略可

オプションで、データをコピーする先のオフセット位置です。 *startInChannel* が `AudioBuffer.length` より大きければ、 `INDEX_SIZE_ERR` 例外が発生します。

例
-

```js
var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
var anotherArray = new Float32Array();
// myArrayBuffer の 2 番目のチャンネルからコピーする
myArrayBuffer.copyFromChannel(anotherArray, 1, 0);
// anotherArray から、 myArrayBuffer の 1 番目のチャンネルにコピーする。これで 2 つのチャンネルのデータは同じになる
myArrayBuffer.copyToChannel(anotherArray, 0, 0);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiobuffer-copytochannel |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブオーディオ API の使用


AudioBuffer.copyFromChannel() - Web API

AudioBuffer.copyFromChannel()
=============================

**`copyFromChannel()`** は `AudioBuffer` インターフェイスのメソッドで、 `AudioBuffer` の指定されたチャンネルから音声サンプルデータを指定された `Float32Array` へコピーします。

構文
--

```js
copyFromChannel(destination, channelNumber, startInChannel);
```

### 引数

`destination`

チャンネルのサンプルのコピー先となる `Float32Array` です。

`channelNumber`

チャンネルデータをコピーする現在の `AudioBuffer` のチャンネル数です。

`startInChannel` 省略可

オプションで、ソースチャンネルバッファー内でサンプルのコピーを始める位置のオフセットです。指定されていない場合は、既定で 0 の値（バッファーの先頭）とみなされます。

### 返値

`undefined` です。

### 例外

`indexSizeError`

入力引数のうちの一つが、受付可能な範囲の外にある場合。

* `channelNumber` の値が存在しないチャンネル番号を指定している場合（つまり、チャンネルの `numberOfChannels` 以上である場合）。
* `startInChannel` の値がソースバッファーの中に既に存在するサンプルの現在の範囲の外にある場合。つまり、現在の `length` より大きい場合。

例
-

この例では新しい音声バッファーを生成し、他のチャンネルからサンプルをコピーします。

```js
var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
var anotherArray = new Float32Array(length);
myArrayBuffer.copyFromChannel(anotherArray, 1, 0);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiobuffer-copyfromchannel |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブオーディオ API の使用


AudioBuffer.getChannelData() - Web API

AudioBuffer.getChannelData()
============================

**`getChannelData()`** は `AudioBuffer` インターフェイスのメソッドで、 channel 引数（0 が最初のチャンネル）で定義されたチャンネルに結び付けられた PCM データを `Float32Array` で返します。

構文
--

```js
getChannelData(channel);
```

### 引数

channel

channel プロパティで、データを取得する特定のチャンネルを表すインデックスです。インデックス値 0 は、最初のチャンネルを表します。もし `channel` インデックスの値が `AudioBuffer.numberOfChannels` よりも大きいか等しい場合は、`INDEX_SIZE_ERR` 例外が発生します。

### 返値

`Float32Array` です。

例
-

次の例は、 2 秒間のバッファーを生成し、ホワイトノイズを書き込み、 `AudioBufferSourceNode` で再生します。コメントは何をしているかを簡単に説明しています。コードをすぐに実行することや、ソースコードを閲覧することもできます。

```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var button = document.querySelector("button");
var pre = document.querySelector("pre");
var myScript = document.querySelector("script");

pre.innerHTML = myScript.innerHTML;

// ステレオ
var channels = 2;
// AudioContext のサンプルレートで 2 秒間の空のステレオバッファーを生成する
var frameCount = audioCtx.sampleRate \* 2.0;

var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);

button.onclick = function () {
  // バッファーにホワイトノイズを書き込む;
  // 単なる -1.0 から 1.0 の間の乱数の値である
  for (var channel = 0; channel < channels; channel++) {
    // 実際のデータの配列を得る
    var nowBuffering = myArrayBuffer.getChannelData(channel);
    for (var i = 0; i < frameCount; i++) {
      // Math.random() は [0; 1.0] である
      // 音声は [-1.0; 1.0] である必要がある
      nowBuffering[i] = Math.random() \* 2 - 1;
    }
  }

  // AudioBufferSourceNode を得る
  // これは AudioBuffer を再生するときに使う AudioNode である
  var source = audioCtx.createBufferSource();
  // AudioBufferSourceNode にバッファーを設定する
  source.buffer = myArrayBuffer;
  // AudioBufferSourceNode を出力先に接続すると音声が聞こえるようになる
  source.connect(audioCtx.destination);
  // 音源の再生を始める
  source.start();
};
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiobuffer-getchanneldata |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブオーディオ API の使用


PerformanceNavigation.redirectCount - Web API

PerformanceNavigation.redirectCount
===================================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

古い **`PerformanceNavigation.redirectCount`** プロパティは読み取り専用で、ページに到達する前に行われたリダイレクトの数を表す `unsigned short` を返します。

**警告:** このインターフェイスは Navigation Timing Level 2 仕様書では非推奨です。
 代わりに `PerformanceNavigationTiming` インターフェイスを使用してください。

値
-

`unsigned short` の値です。

仕様書
---

 この機能は標準化の予定がなくなりました。 Navigation Timing Level 2 仕様書で非推奨になったためです。
 代わりに `PerformanceNavigationTiming` インターフェイスを使用してください。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 所属する `PerformanceNavigation` インターフェイス


PerformanceNavigation.type - Web API

PerformanceNavigation.type
==========================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

古い **`PerformanceNavigation.type`** プロパティは読み取り専用で、このページへの移動方法を表す定数を含む `unsigned short` を返します。

**警告:** このインターフェイスは Navigation Timing Level 2 仕様書では非推奨です。代わりに `PerformanceNavigationTiming` インターフェイスを使用してください。

値
-

`unsigned short` の値です。

取りうる値は次の通りです。

| 値 | 定数名 | 意味 |
| --- | --- | --- |
| `0` | `TYPE_NAVIGATE` | リンク、ブックマーク、フォーム送信、スクリプト、またはアドレスバーに URL を入力してページにアクセスしました。 |
| `1` | `TYPE_RELOAD` | このページには、 [再読み込み] ボタンをクリックするか、`Location.reload()` メソッドを介してアクセスしました。 |
| `2` | `TYPE_BACK_FORWARD` | このページには履歴をたどってアクセスしました。 |
| `255` | `TYPE_RESERVED` | その他の方法。 |

仕様書
---

 この機能は標準化の予定がなくなりました。 Navigation Timing Level 2 仕様書で非推奨になったためです。
 代わりに `PerformanceNavigationTiming` インターフェイスを使用してください。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 所属する `PerformanceNavigation` インターフェイス


決済処理の概要 - Web API

決済処理の概要
=======

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

決済リクエスト API により、ウェブサイトやアプリで決済を簡単に処理することができます。この記事では、APIをどのように運営し、各成分がどのような働きをするのかを見ていきます。

用語
--

API を操作する詳細に入る前に、知っておいていただきたい項目があります。

払主（または販売者）

販売者（個人または組織）は、決済リクエスト API を通じて金銭の受け取りを希望するウェブサイトまたはアプリケーションを持ちます。

支払者

ウェブサイトやアプリを使用して購入する人または組織。支払者は、決済手段の要求に応じて、自分自身を認証した後、支払いを承認します。

決済手段

クレジットカードやオンライン決済サービスなど、決済を行うための手段。

決済手段提供者

指定された決済手段を用いて決済を行うために必要な技術を提供する組織。例えば、決済にクレジットカードを使用する場合、クレジットカード処理サービスは決済手段提供者となる。

決済ハンドラー

決済を処理するために、具体的な決済手段プロバイダーとのインターフェイスに必要なコードの実装です。

決済ハンドラーの中には、**販売者検証**を使用するものがあります。これは、何らかの形で販売者の身元を検証するプロセスで、通常は公開鍵などの何らかの暗号化レスポンスを形成するものを使用します。検証された販売者は、決済ハンドラーとのインターフェイスが許可されます。

決済手段識別情報
--------

決済ハンドラーは、**決済手段識別子**によって識別され ますが、これは決済ハンドラーを一意に識別する文字列です。これらは、標準化された決済ハンドラー識別子のいずれか、または決済処理サービスがそれ自体を識別し、決済を処理するために使用する URL のいずれかである可能性があります。

### 決済手段識別子の標準化

現在、登録されている標準決済手段識別子は 1 つだけです（今後、追加される可能性があります）。

`basic-card`

決済は基本カード決済の仕様で処理します。詳しくは `BasicCardRequest` を参照。***この仕様と使用する方法についての記事が必要です***。

### URL ベースの決済手段識別子

これらは具体的なサービス内容によって大きく異なり、指定された処理サービスでは、API のバージョンや通信技術などによって、複数の URL を使用することができる場合があります。

`https://apple.com/apple-pay`

決済は Apple Pay のサービスを使用します。現在、Apple Pay は Safari のみ対応しています。

`https://google.com/pay`

決済は Google Pay で処理されます。現在、Chrome および Chromium ベースのブラウザーのみ対応しています。

決済ハンドラーの機能
----------

ユーザーエージェント は、特定の種類の決済に対応する組み込みのサポートを提供する場合があります。さらに、決済ハンドラー API は、それを提供するブラウザーの中で、追加の決済手段提供者のための対応を確立するために使用することができます。いずれの場合も、決済ハンドラーは以下の責任を負います。

1. **決済が可能かどうか確認する。** 決済手段やユーザーの決済リクエストによって使用可能な条件は異なります。例えば、支払先が受け入れていないクレジットカードをユーザーが使用すると、決済ができません。
2. **決済ハンドラーが販売者検証に対応している場合、ユーザーエージェントからの販売者検証リクエストに対応する。** 詳しくは販売者検証を参照してください。
3. **ユーザーから指定された情報が、有効な取引につながるかどうかを確認する。** その結果、トランザクションを処理するために必要な情報を格納した決済手段固有のオブジェクトが生成され、返されます。
販売者検証
-----

決済ハンドラーの中には、*販売者検証*を使用するものがあります。これは、何らかの形で販売者の身元を検証するプロセスで、通常は何らかの形の暗号チャレンジを使用します。販売者が検証に成功しなかった場合、その決済ハンドラーを使用することはできません。

正確な検証技術は決済ハンドラーに依存し、販売者の検証は完全にオプションです。結局、ウェブサイトやアプリケーションが担当するのは、販売者の検証キーをフェッチしてイベントの `complete()` (en-US) メソッドに渡すことだけです。

```js
paymentRequest.onmerchantvalidation = (event) => {
  event.complete(fetchValidationData(event.validationURL));
};
```

この例では、`fetchValidationData()` は、`validationURL` で指定されたアドレスから決済ハンドラーの固有の識別情報を読み込む関数です。なぜなら、クライアントは通常、バリデーション URL そのものにアクセスしないからです。

その後、このデータ（または読み込んだデータに解決する `Promise`）を `complete()` に渡して決済ハンドラーに渡すことで、決済ハンドラーは取得したデータと対応するアルゴリズムや他のデータを使用して、販売者が決済ハンドラーを使用できることを確認できるようになります。

したがって重要なのは、ユーザーエージェントが `merchantvalidation` イベントを送ることは、ユーザーエージェント自身が決済ハンドラーを実装しない限りあり得ないということです。例えば、Safari は Apple Pay の対応を統合しているので、Apple Pay の決済ハンドラーはこれを利用して、`merchantvalidation` をクライアントに送信し、サーバーの検証データを取得するよう指示して `complete()` を呼び出し、それを決済ハンドラーに配信して、Apple Pay が販売者への支払いに使用できることを確認します。

仕様書
---

| Specification |
| --- |
| Payment Request API 1.1  |
| Payment Method Identifiers  |

関連情報
----

* 決済リクエスト API
* 決済リクエスト API の使用
* Introducing the Payment Request API for Apple Pay
* Google Pay API PaymentRequest Tutorial


決済リクエスト API の使用 - Web API

決済リクエスト API の使用
===============

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

決済リクエスト API は、ユーザーとユーザーが好む決済システムおよびプラットフォームを、商品やサービスの代金を支払いたい販売者に接続するためのブラウザーベースの仕組みを提供します。この記事は、決済リクエスト API を使用するためのガイドであり、 例や提案されたベストプラクティスを示します。

決済の基本的な考え方
----------

この節では、決済リクエスト API を使用して決済を行うための基本的な方法を詳しく説明します。

**メモ:** この節のコードスニペットは、Feature detect support デモから引用しています。

### 新しい決済リクエストオブジェクトの作成

決済リクエストは、常に新しい `PaymentRequest` オブジェクトの作成から始まります。これには `PaymentRequest()` コンストラクターを使用します。これは、2 つの必須の引数、1 つのオプションの引数を取ります。

* `methodData` — 対応している決済手段など、決済事業者に関する情報を含むオブジェクト。
* `details` — 支払総額、税金、送料など、特定の決済に関する情報を格納するオブジェクト。
* `options` （オプション） — 決済に関連する追加オプションを格納したオブジェクト。

例 えば、次のようにすれば、新しい `PaymentRequest` インスタンスを作成することができます。

```js
const request = new PaymentRequest(
  buildSupportedPaymentMethodData(),
  buildShoppingCartDetails(),
);
```

コンストラクターの内部で呼び出される関数は、必要なオブジェクト引数を返します。

```js
function buildSupportedPaymentMethodData() {
  // Example supported payment methods:
  return [{ supportedMethods: "https://example.com/pay" }];
}

function buildShoppingCartDetails() {
  // Hardcoded for demo purposes:
  return {
    id: "order-123",
    displayItems: [
      {
        label: "Example item",
        amount: { currency: "USD", value: "1.00" },
      },
    ],
    total: {
      label: "Total",
      amount: { currency: "USD", value: "1.00" },
    },
  };
}
```

### 決済プロセスの開始

`PaymentRequest` オブジェクトを作成したら、`PaymentRequest.show()` メソッドを呼び出して、決済リクエストを開始させます。これは、決済が成功した場合に `PaymentResponse` (en-US) オブジェクトで履行されるプロミスを返します。

```js
request.show().then((paymentResponse) => {
  // Here we would process the payment. For this demo, simulate immediate success:
  paymentResponse.complete("success").then(() => {
    // For demo purposes:
    introPanel.style.display = "none";
    successPanel.style.display = "block";
  });
});
```

このオブジェクトは、顧客に連絡するためのメールアドレスや、商品を郵送するための配送先など、決済が完了した後に必要な論理的手順を完了するために使用できる詳細情報に開発者がアクセスできるようにします。上のコードでは、`PaymentResponse.complete()` (en-US) メソッドを呼び出してやり取りが完了したことを示していますが、これを使用して、ユーザーインターフェイスを更新して取引が完了したことをユーザーに伝えるなど、最終ステップを実行することができます。

### 他の有用な決済リクエスト手段

他にも知っておくと有益な決済リクエストメソッドがいくつかあります。

`PaymentRequest.canMakePayment()` は、決済処理を始める前に `PaymentRequest` オブジェクトが決済可能かどうか調べるために使用できます。これは、存在するかどうかを示す論理値を履行されたプロミスを返します。例えば次のようになります。

```js
// 決済が可能かどうかを調べるためのダミー決済リクエスト
new PaymentRequest(buildSupportedPaymentMethodData(), {
  total: { label: "Stub", amount: { currency: "USD", value: "0.01" } },
})
  .canMakePayment()
  .then((result) => {
    if (result) {
      // Real payment request
      const request = new PaymentRequest(
        buildSupportedPaymentMethodData(),
        checkoutObject,
      );
      request.show().then((paymentResponse) => {
        // Here we would process the payment.
        paymentResponse.complete("success").then(() => {
          // Finish handling payment
        });
      });
    }
  });
```

必要であれば、 `PaymentRequest.abort()` で決済リクエストを中止することができます。

決済リクエスト API が利用可能かを検出
---------------------

決済リクエスト API に対応しているかどうかは、ユーザーのブラウザーが `PaymentRequest` に対応しているかどうか、つまり `if (window.PaymentRequest)` を調べることで効果的に検出することができます。

以下のスニペットでは、販売者のページでこのチェックを行い、`true` が返された場合、チェックアウトボタンを更新して古いウェブフォームの代わりに `PaymentRequest` を使用するようにしています。

```js
const checkoutButton = document.getElementById("checkout-button");
if (window.PaymentRequest) {
  let request = new PaymentRequest(
    buildSupportedPaymentMethodNames(),
    buildShoppingCartDetails(),
  );
  checkoutButton.addEventListener("click", () => {
    request
      .show()
      .then((paymentResponse) => {
        // Handle successful payment
      })
      .catch((error) => {
        // Handle cancelled or failed payment. For example, redirect to
        // the legacy web form checkout:
        window.location.href = "/legacy-web-form-checkout";
      });

    // Every click on the checkout button should use a new instance of
    // PaymentRequest object, because PaymentRequest.show() can be
    // called only once per instance.
    request = new PaymentRequest(
      buildSupportedPaymentMethodNames(),
      buildShoppingCartDetails(),
    );
  });
}
```

**メモ:** コードの全体は、Feature detect support デモを参照してください。

ユーザーが決済できるかを調べる
---------------

ユーザーが決済できるかどうかを調べることは、常に有益なことです。ここでは、関連のテクニックをいくつか紹介します。

### 決済ボタンのカスタマイズ

ユーザーが決済できるかどうかによって、決済リクエストボタンをカスタマイズするのも有益なテクニックの1つです。

以下のスニペットは、まさにこれを行うものです。ユーザーがすばやく決済できるか、または最初に決済の資格情報を追加する必要があるかによって、チェックアウトボタンのタイトルは、「W3C による高速チェックアウト」と「W3C チェックアウトのセットアップ」の間で変化します。どちらの場合も、チェックアウトボタンは `PaymentRequest.show()` を呼び出します。

```js
const checkoutButton = document.getElementById("checkout-button");
checkoutButton.innerText = "Loading…";
if (window.PaymentRequest) {
  const request = new PaymentRequest(
    buildSupportedPaymentMethodNames(),
    buildShoppingCartDetails(),
  );
  request
    .canMakePayment()
    .then((canMakeAFastPayment) => {
      checkoutButton.textContent = canMakeAFastPayment
        ? "Fast Checkout with W3C"
        : "Setup W3C Checkout";
    })
    .catch((error) => {
      // The user may have turned off the querying functionality in their
      // privacy settings. The website does not know whether they can make
      // a fast payment, so pick a generic title.
      checkoutButton.textContent = "Checkout with W3C";
    });
}
```

**メモ:** コードの全体は、Customizing the payment button デモを参照してください。

### 価格がすべて判明する前に調べる

チェックアウトフローが、すべての行とその価格が判明する前に `PaymentRequest.canMakePayment()` が `true` を返すかどうかを知る必要がある場合、ダミーデータで `PaymentRequest` をインスタンス化して `.canMakePayment()` に事前問い合わせをすることができます。`.canMakePayment()` を複数回呼び出す場合は、`PaymentRequest` コンストラクターの最初の引数に同じメソッド名とデータを格納する必要があることに留意してください。

```js
// The page has loaded. Should the page use PaymentRequest?
// If PaymentRequest fails, should the page fallback to manual
// web form checkout?
const supportedPaymentMethods = [
  /\* supported methods \*/
];

let shouldCallPaymentRequest = true;
let fallbackToLegacyOnPaymentRequestFailure = false;
new PaymentRequest(supportedPaymentMethods, {
  total: { label: "Stub", amount: { currency: "USD", value: "0.01" } },
})
  .canMakePayment()
  .then((result) => {
    shouldCallPaymentRequest = result;
  })
  .catch((error) => {
    console.error(error);

    // The user may have turned off query ability in their privacy settings.
    // Let's use PaymentRequest by default and fallback to legacy
    // web form based checkout.
    shouldCallPaymentRequest = true;
    fallbackToLegacyOnPaymentRequestFailure = true;
  });

// User has clicked on the checkout button. We know
// what's in the cart, but we don't have a `Checkout` object.
function onCheckoutButtonClicked(lineItems) {
  callServerToRetrieveCheckoutDetails(lineItems);
}

// The server has constructed the `Checkout` object. Now we know
// all of the prices and shipping options.
function onServerCheckoutDetailsRetrieved(checkoutObject) {
  if (shouldCallPaymentRequest) {
    const request = new PaymentRequest(supportedPaymentMethods, checkoutObject);
    request
      .show()
      .then((paymentResponse) => {
        // Post the results to the server and call `paymeResponse.complete()`.
      })
      .catch((error) => {
        console.error(error);
        if (fallbackToLegacyOnPaymentRequestFailure) {
          window.location.href = "/legacy-web-form-checkout";
        } else {
          showCheckoutErrorToUser();
        }
      });
  } else {
    window.location.href = "/legacy-web-form-checkout";
  }
}
```

**メモ:** コードの全体は、Checking user can make payments before prices are known デモを参照してください。

ユーザーがアプリを持っていない場合に、決済アプリを推薦する
-----------------------------

この販売者ページでデモ決済プロバイダーの BobPay で支払うことを選択すると、`NOTSUPPORTEDERR` 例外で介入している間に、`PaymentRequest.show()` を呼び出そうとします。この決済手段に対応していない場合は、BobPay のサインアップページにリダイレクトされます。

コードは以下のような感じです。

```js
checkoutButton.addEventListener("click", () => {
  const request = new PaymentRequest(
    buildSupportedPaymentMethodData(),
    buildShoppingCartDetails(),
  );
  request
    .show()
    .then((paymentResponse) => {
      // Here we would process the payment. For this demo, simulate immediate success:
      paymentResponse.complete("success").then(() => {
        // For demo purposes:
        introPanel.style.display = "none";
        successPanel.style.display = "block";
      });
    })
    .catch((error) => {
      if (error.code === DOMException.NOT\_SUPPORTED\_ERR) {
        window.location.href = "https://bobpay.xyz/#download";
      } else {
        // Other kinds of errors; cancelled or failed payment. For demo purposes:
        introPanel.style.display = "none";
        legacyPanel.style.display = "block";
      }
    });
});
```

**メモ:** コードの全体は、Recommending a payment app when user has no apps デモを参照してください。

決済成功後の追加ユーザーインターフェイスの表示
-----------------------

販売者が API に属さない追加情報（例えば、追加の配送指示）を収集したい場合、販売者はチェックアウト後に追加の `<input type="text">` フィールドを持つページを示すことができます。

```js
request
  .show()
  .then((paymentResponse) => {
    // Process payment here.
    // Close the UI:
    paymentResponse.complete('success').then(() => {
      // Request additional shipping address details.
      const additionalDetailsContainer = document.getElementById('additional-details-container');
      additionalDetailsContainer.style.display = 'block';
      window.scrollTo(additionalDetailsContainer.getBoundingClientRect().x, 0);
  })
  .catch((error) => {
    // Handle error.
  });
```

**メモ:** コードの全体は、Show additional user interface after successful payment デモを参照してください。

トランザクションの事前承認
-------------

用途によっては（給油所での燃料の決済など）、決済の事前承認が必要な場合があります。これを行うための方法の一つとして、決済ハンドラー（決済ハンドラー APIを参照）を通じて行うことです。執筆時点では、その仕様は、決済ハンドラーが承認ステータスを返すために使用することができる `CanMakePayment` イベントを含んでいます。

販売者のコードは次のようになります。

```js
const paymentRequest = new PaymentRequest(
  [{ supportedMethods: "https://example.com/preauth" }],
  details,
);

// Send `CanMakePayment` event to the payment handler.
paymentRequest
  .canMakePayment()
  .then((res) => {
    if (res) {
      // The payment handler has pre-authorized a transaction
      // with some static amount, e.g., USD $1.00.
    } else {
      // Pre-authorization failed or payment handler not installed.
    }
  })
  .catch((err) => {
    // Unexpected error occurred.
  });
```

決済ハンドラーには、以下のコードを記載します。

```js
self.addEventListener("canmakepayment", (evt) => {
  // Pre-authorize here.
  const preAuthSuccess = true;
  evt.respondWith(preAuthSuccess);
});
```

この決済ハンドラーは、`https://example.com/preauth` のスコープでサービスワーカーの中に常駐させる必要があります。

**メモ:** コードの全体は、Pre-authorizing transactions デモを参照してください。

関連情報
----

* Google PaymentRequest Samples


IDBOpenDBRequest: upgradeneeded イベント - Web API

IDBOpenDBRequest: upgradeneeded イベント
====================================

`upgradeneeded` イベントは、現在のバージョンより高いバージョン番号でデータベースを開こうとしたとき発火します。

このイベントはキャンセルできず、バブリングしません。

構文
--

`addEventListener()` のようなメソッドでイベント名を使うか、イベントハンドラープロパティを設定します。

```js
addEventListener("upgradeneeded", (event) => {});

onupgradeneeded = (event) => {};
```

イベント型
-----

`IDBVersionChangeEvent` です。`Event` を継承します。

Event

IDBVersionChangeEventイベントプロパティ
---------

*親の `Event` インターフェイスからもプロパティを継承します。*

`IDBVersionChangeEvent.oldVersion` 読取専用

データベースの古いバージョンを返します。

`IDBVersionChangeEvent.newVersion` 読取専用

データベースの新しいバージョンを返します。

例
-

この例ではデータベースを開き、`upgradeneeded` イベントの処理としてオブジェクトストアに必要な更新を行います。

```js
// データベースを開きます
const dBOpenRequest = window.indexedDB.open("toDoList", 4);

dBOpenRequest.addEventListener("upgradeneeded", (event) => {
  const db = event.target.result;
  console.log(`バージョン ${db.version} に更新します`);

  // このデータベース用の objectStore を作ります
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // objectStore に保存するデータアイテムを定義します
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
});
```

これは同じ例ですが、`onupgradeneeded` イベントハンドラープロパティを用います。

```js
// データベースを開きます
const dBOpenRequest = window.indexedDB.open("toDoList", 4);

dBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;
  console.log(`バージョン ${db.version} に更新します`);

  // このデータベース用の objectStore を作ります
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // objectStore に保存するデータアイテムを定義します
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};
```

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* IndexedDB の使用


IDBOpenDBRequest: blocked イベント - Web API

IDBOpenDBRequest: blocked イベント
==============================

`blocked` ハンドラーは、データベースへのオープン中の接続が同じデータベースの `versionchange` トランザクションをブロックしているとき実行されます。

このイベントはキャンセルできず、バブリングしません。

構文
--

`addEventListener()` のようなメソッドでイベント名を用いるか、イベントハンドラープロパティを設定します。

```js
addEventListener("blocked", (event) => {});

onblocked = (event) => {};
```

イベント型
-----

`IDBVersionChangeEvent` です。`Event` を継承します。

Event

IDBVersionChangeEventイベントプロパティ
---------

*親の `Event` インターフェイスからもプロパティを継承します。*

`IDBVersionChangeEvent.oldVersion` 読取専用

データベースの古いバージョンを返します。

`IDBVersionChangeEvent.newVersion` 読取専用

データベースの新しいバージョンを返します。

例
-

`addEventListener()` を用いた例:

```js
// データベースを開きます
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log("データベースの作成中にエラー発生");
  };

  // このデータベース用の objectStore を作成します
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // objectStore に保存するデータアイテムを定義します
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

DBOpenRequest.onsuccess = (event) => {
  // 同じデータベースをより高いバージョンで開いてみましょう
  const req2 = indexedDB.open("toDoList", 5);

  // この場合、onblocked ハンドラーが実行されます
  req2.addEventListener("blocked", () => {
    console.log("要求がブロックされました");
  });
};
```

`onblocked` プロパティを用いた例:

```js
// データベースを開きます
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log("データベースの作成中にエラー発生");
  };

  // このデータベース用の objectStore を作成します
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // objectStore に保存するデータアイテムを定義します
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

DBOpenRequest.onsuccess = (event) => {
  // 同じデータベースをより高いバージョンで開いてみましょう
  const req2 = indexedDB.open("toDoList", 5);

  // この場合､onblocked ハンドラーが実行されます
  req2.onblocked = () => {
    console.log("要求がブロックされました");
  };
};
```

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* IndexedDB の使用


ReadableStreamBYOBReader: releaseLock() メソッド - Web API

ReadableStreamBYOBReader: releaseLock() メソッド
============================================

**`releaseLock()`** は `ReadableStreamBYOBReader` インターフェイスのメソッドで、ストリーム上のリーダーのロックを解除します。
 ロックを解除すると、リーダーはアクティブではなくなります。

ロックを解除したときに関連するストリームにエラーが発生した場合、リーダーはその後同様にエラーが発生したようになります。 そうでない場合、リーダーは閉じた状態になります。

 保留中の読み込みリクエストがある間にリーダーのロックが解除された場合、リーダーの `ReadableStreamBYOBReader.read()` メソッドによって返されるプロミスは、直ちに `TypeError` で拒否されます。
 未読のチャンクはストリームの内部キューに残り、後で新しいリーダーを取得することで読み取ることができます。

構文
--

```js
releaseLock()
```

### 引数

なし。

### 返値

なし (`undefined`)。

### 例外

`TypeError`

ソースオブジェクトが `ReadableStreamBYOBReader` ではない場合に発生します。

例
-

 簡単な例を下記に示します。
 ストリーム上にリーダーが作成されると同時にロックが作成されます。

```js
const reader = stream.getReader({ mode: "byob" });
reader.releaseLock();
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-byob-reader-release-lock② |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `ReadableStreamBYOBReader()` コンストラクター
* 読み取り可能なストリームの使用


ReadableStreamBYOBReader: cancel() メソッド - Web API

ReadableStreamBYOBReader: cancel() メソッド
=======================================

**`cancel()`** は `ReadableStreamBYOBReader` インターフェイスのメソッドで、ストリームがキャンセルされたときに解決するプロミス (`Promise`) を返します。
 このメソッドを呼び出すと、コンシューマーがストリームへの関心を失ったことを示します。

**メモ:** リーダーがアクティブな場合、 `cancel()` メソッドは、関連するストリームの場合（`ReadableStream.cancel()`）と同じように振る舞います。

構文
--

```js
cancel()
cancel(reason)
```

### 引数

`reason` 省略可

人間が読むことができるキャンセルの理由です。基盤ソースは使用しても使用しなくても構いません。

### 返値

プロミス (`Promise`)。 `reason` 引数で指定された値で満たされます。

### 例外

`TypeError`

ソースオブジェクトが `ReadableStreamBYOBReader` ではないか、ストリームに所有者がいません。

例
-

 このコード例では、ボタンが押されたときに `cancel()` メソッドを呼び出します。理由として文字列 "user choice" を渡します。
 プロミスはキャンセルが完了すると解決します。

```js
button.addEventListener("click", () => {
  reader.cancel("user choice").then(() => console.log(`cancel complete`));
});
```

このコードは、読み取り可能なバイトストリームの使用の例で実行することができます（**Cancel stream** ボタンを押してください）。

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-generic-reader-cancel② |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `ReadableStreamBYOBReader()` コンストラクター
* 読み取り可能なストリームの使用


ReadableStreamBYOBReader: closed プロパティ - Web API

ReadableStreamBYOBReader: closed プロパティ
======================================

**`closed`** は `ReadableStreamBYOBReader` インターフェイスの読み取り専用プロパティで、ストリームが閉じられた場合、またはリーダーのロックが解除された場合に履行され、ストリームがエラーの場合は拒否されるプロミスを返します。

このプロパティにより、ストリーミング処理の終わりに応答するコードを書くことができます。

### 値

`Promise` です。

例
-

下記コードは BYOBReader の閉じられたかエラーかの状態を処理するパターンを示します。

```js
const reader = stream.getReader({ mode: "byob" });
reader.closed
  .then(() => {
    // 解決 - ストリームを閉じるコード
  })
  .catch(() => {
    // 拒否 - エラーを扱うコード
  });
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-generic-reader-closed② |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `ReadableStreamBYOBReader()` コンストラクター
* 読み取り可能なストリームの使用


ReadableStreamBYOBReader: ReadableStreamBYOBReader() コンストラクター - Web API

ReadableStreamBYOBReader: ReadableStreamBYOBReader() コンストラクター
=============================================================

**`ReadableStreamBYOBReader()`** コンストラクターは、`ReadableStreamBYOBReader` オブジェクトのインスタンスを作成して返します。

**メモ:** 通常、このコンストラクターを手動で使用することはありません。 代わりに、`ReadableStream.getReader()` メソッドに `"byob"` を引数につけて使用してください。

構文
--

```js
new ReadableStreamBYOBReader(stream)
```

### 引数

`stream`

読み取られる `ReadableStream`。

### 返値

`ReadableStreamBYOBReader` オブジェクトのインスタンス。

### 例外

TypeError

指定された `stream` パラメーターが `ReadableStream` ではないか、別のリーダーによる読み取りのために既にロックされているか、そのストリームコントローラーが `ReadableByteStreamController` ではありません。

例
-

 コンストラクターが直接呼び出されることはほとんどありません。
 代わりに、表示させるように `ReadableStream.getReader()` を呼び出してください。

```js
const reader = stream.getReader({ mode: "byob" });
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-byob-reader-constructor① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `ReadableStreamBYOBReader`
* 読み取り可能なストリームの使用


ReadableStreamBYOBReader: read() メソッド - Web API

ReadableStreamBYOBReader: read() メソッド
=====================================

**`read()`** は `ReadableStreamBYOBReader` インターフェイスのメソッドで、ユーザーが提供したバッファー上のビューに、関連付けられた読み取り可能なバイトストリームからデータを読み込むために使用します。
 データに対するリクエストは、データを説明しているものがあれば、ストリームの内部キューから満たされます。
 ストリームキューが空の場合、リクエストは、基盤のバイトソースからのゼロコピー移譲として供給されるかもしれません。

 このメソッドは、渡されたデータを読み込むバッファーに対するビューを引数として取り、プロミス (`Promise`) を返します。
 このプロミスは、データが利用できるようになったとき、またはストリームが取り消される可能性があるときに `value` と `done` のプロパティを持つオブジェクトで履行されます。
 ストリームがエラーになった場合、プロミスは関連するエラーオブジェクトと共に拒否されます。

 データのチャンクが渡された場合、 `value` プロパティには新しいビューが格納されます。
 これは `read()` メソッドに渡された元の `view` と同じバッファー/バッキングメモリ（および同じ型）上のビューになります。
 プロミスが履行されると、メソッドに渡された元の `view` は切り離され、使えなくなることに注意してください。
 ストリームが取り消された可能性がある場合、プロミスは `value: undefined` で履行されます。
 この場合、 `view` のバッキングメモリー領域は破棄され、呼び出し側には返されません（ビューのバッファー内の前回読み込んだデータはすべて失われます）。

`done` プロパティは、さらなるデータが期待されるかどうかを示します。
 この値は、ストリームが閉じられたり取り消されたり可能性がある場合は `true` に設定され、そうでない場合は `false` に設定されます。

構文
--

```js
read(view)
```

### 引数

`view`

読み込み先のビュー。

### 返値

プロミス (`Promise`) で、ストリームの状態に応じた結果で履行または拒否されます。

取りうる値は次の通りです。

* チャンクが利用でき、ストリームがまだアクティブであれば、プロミスは次の形のオブジェクトで履行されます。

```js
{ value: theChunk, done: false }
```

`theChunk` は新しいデータを格納するビューです。
 これは `read()` メソッドに渡された `view` と同じ型で、同じバッキングメモリー上のビューです。
 元の `view` は切り離されて使えなくなりました。
* ストリームが閉じられた場合、プロミスは（`theChunk` を上記と同じプロパティを持つ）形式のオブジェクトで履行されます。

```js
{ value: theChunk, done: true }
```

* If the stream is cancelled, the promise fulfills with an object of the form:

```js
{ value: undefined, done: true }
```

In this case the backing memory is discarded.
* If the stream throws an error, the promise rejects with the relevant error.
### 例外

`TypeError`

元のオブジェクトが `ReadableStreamBYOBReader` ではないか、ストリームにオーナーがいないか、ビューがオブジェクトでないか、切り離されているか、ビューの長さが 0 であるか、（待機中の読み取りリクエストがある場合に） `ReadableStreamBYOBReader.releaseLock()` が呼び出された場合。

例
-

以下の例は、読み取り可能なバイトストリームの使用から取ったものです。

 まず、ストリーム上で `ReadableStream.getReader()` を使用してリーダーを作成します。 options 引数に `mode: "byob"` を指定します。
 `ArrayBuffer` も作成する必要があります。これはビューの「バッキングメモリー」で、ここに書き込むことになります。

```js
const reader = stream.getReader({ mode: "byob" });
let buffer = new ArrayBuffer(4000);
```

 リーダーを使用する関数を下記に示します。
 これは `read()` メソッドを再帰的に呼び出して、データをバッファーに読み込みます。
 このメソッドは `Uint8Array` 型付き配列を取ります。これは、元の配列バッファーでまだ書き込まれていない部分のビューです。
 ビューの引数は、前回呼び出された際に受け取ったデータから計算され、元の配列バッファーへのオフセットを定義します。

```js
readStream(reader);

function readStream(reader) {
  let bytesReceived = 0;
  let offset = 0;

  while (offset < buffer.byteLength) {
    // read() returns a promise that fulfills when a value has been received
    reader
      .read(new Uint8Array(buffer, offset, buffer.byteLength - offset))
      .then(function processBytes({ done, value }) {
        // Result objects contain two properties:
        // done - true if the stream has already given all its data.
        // value - some data. 'undefined' if the reader is canceled.

        if (done) {
          // There is no more data in the stream
          return;
        }

        buffer = value.buffer;
        offset += value.byteLength;
        bytesReceived += value.byteLength;

        // Read some more, and call this function again
        // Note that here we create a new view over the original buffer.
        return reader
          .read(new Uint8Array(buffer, offset, buffer.byteLength - offset))
          .then(processBytes);
      });
  }
}
```

ストリームにデータがなくなると、`read()` メソッドは `done` プロパティを `true` に設定したオブジェクトで履行され、関数を返します。

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-byob-reader-read③ |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `ReadableStreamBYOBReader()` コンストラクター
* 読み取り可能なストリームの使用


CSSTransformComponent.is2D - Web API

CSSTransformComponent.is2D
==========================

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`is2D`** は `CSSTransformComponent` インターフェイスの読み取り専用プロパティで、この座標変換が 2D と 3D のどちらかであるかを示します。

値
-

論理値です。true はこの座標変換が 2D 変換であることを示し、false は 3D 変換であることを示します。

例
-

To Do

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-csstransformcomponent-is2d |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


CSSTransformComponent.toString() - Web API

CSSTransformComponent.toString()
================================

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`toString()`** は `CSSTransformComponent` インターフェイスのメソッドで、文字列化子であり、 CSS 座標変換関数を返します。

構文
--

```js
toString()
```

### 引数

なし。

### 返値

CSS の`座標変換関数`の形の文字列です。

これは `is2D` の値を使用して、 2D または 3D 座標変換のどちらかを返します。例えば、コンポーネントが `CSSRotate` (en-US) を表し、 `is2D` が false の場合、返す文字列は CSS 座標変換の `rotate3D()` 関数の形式を取ります。true の場合、返される文字列は 2 次元の `rotate3D()` 関数の形になります。

例
-

To Do

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # CSSTransformComponent-stringification-behavior |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


CSSTransformComponent.toMatrix() - Web API

CSSTransformComponent.toMatrix()
================================

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`toMatrix()`** は `CSSTransformComponent` インターフェイスのメソッドで、 `DOMMatrix` オブジェクトを返します。

すべての座標変換関数は、数学的には 4x4 の変換行列として表すことができます。これについては、 Understanding the CSS Transforms matrix で詳しく説明しています。

**メモ:** `is2D` プロパティは、どのような変換を行うか、すなわちどのような種類の行列が返されるかに影響します。CSS の 2D と 3D の変換は、その歴史的な理由から異なる形になっています。2D と 3D の変換についての簡単な説明は Using CSS transforms に記載されています。

構文
--

```js
toMatrix()
```

### 引数

なし。

### 返値

`DOMMatrix` オブジェクトです。

### 例外

`TypeError`

行列の生成に関わる長さが px と互換性のない単位である場合（例えば、相対的な長さやパーセンテージなど）、発生します。

例
-

To Do

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-csstransformcomponent-tomatrix |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Clipboard.read() - Web API

Clipboard.read()
================

**`read()`** は `Clipboard` インターフェイスのメソッドで、クリップボードの内容のコピーを要求し、返されたプロミス (`Promise`) が解決されるとそのデータを取得できます。 `readText()` とは異なり、 `read()` メソッドは画像など任意のデータを取得することができます。

クリップボードから読み込みを行うためには、まず `"clipboard-read"` 権限を取得する必要があります。

**メモ:** 非同期のクリップボード API と権限 API は、ほとんどのブラウザーでは組み込み途中の状態です。そのため、権限などが公式仕様とは異なっていることがよくあります。これらのメソッドを使う前に互換性一覧表を確認してください。

構文
--

```js
read();
```

### 引数

なし。

### 返値

クリップボードの内容を保持する `ClipboardItem` の配列に解決されるプロミス (`Promise`)。クリップボードへのアクセスが許可されない場合、このプロミスは拒否されます。

例
-

### 画像データの読み取り

この例では `read()` を使用して、画像データをクリップボードから読み取ります。

左側の蝶の画像をコンテキストメニューの「画像のコピー」でコピーし、右側の空の枠内をクリックしてみてください。

この例では、クリップボードの読み取りを確認または許可して、画像データを取得し、空のフレームに画像データを表示します。

**メモ:** 現時点では、Firefoxは `read()` を実装していますが、 `"clipboard-read"` 権限を認識しないため、権限 API を使ってアクセス管理をしようとしてもうまくいきません。

#### HTML

```html
<img id="source" src="butterfly.jpg" alt="A butterfly" />
<img id="destination" />
```

#### CSS

```css
img {
  height: 100px;
  width: 100px;
  margin: 0 1rem;
  border: 1px solid black;
}
```

#### JavaScript

```js
const destinationImage = document.querySelector("#destination");
destinationImage.addEventListener("click", pasteImage);

async function pasteImage() {
  try {
    const permission = await navigator.permissions.query({
      name: "clipboard-read",
    });
    if (permission.state === "denied") {
      throw new Error("Not allowed to read clipboard.");
    }
    const clipboardContents = await navigator.clipboard.read();
    for (const item of clipboardContents) {
      if (!item.types.includes("image/png")) {
        throw new Error("Clipboard contains non-image data.");
      }
      const blob = await item.getType("image/png");
      destinationImage.src = URL.createObjectURL(blob);
    }
  } catch (error) {
    console.error(error.message);
  }
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Clipboard API and events # dom-clipboard-read |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* クリップボード API
* Async Clipboard API demo on Glitch
* Image support for Async Clipboard article


Clipboard.write() - Web API

Clipboard.write()
=================

`Clipboard` の **`write()`** メソッドは、画像などの任意のデータをクリップボードに書き込みます。切り取りやコピーの機能を実装するのに利用することができます。

権限 API の `"clipboard-write"` 権限は、ページがアクティブなタブにあるときに自動的に付与されます。

**メモ:** 非同期クリップボード API に対するブラウザーの対応は、まだ実装の途上にあります。詳しくは、互換性一覧表とクリップボードの可用性 を必ずチェックしてください。

構文
--

```js
write(data);
```

### 引数

`data`

クリップボードに書き込むデータを含む `ClipboardItem` オブジェクトの配列です。

### 返値

クリップボードにデータが書き込まれたときに解決される`Promise`。クリップボードアクセスを完了できない場合、プロミスは拒否される。

例
-

この関数は、クリップボードの現在の内容を指定された文字列に置き換えます。

```js
function setClipboard(text) {
  const type = "text/plain";
  const blob = new Blob([text], { type });
  const data = [new ClipboardItem({ [type]: blob })];

  navigator.clipboard.write(data).then(
    () => {
      /\* success \*/
    },
    () => {
      /\* failure \*/
    },
  );
}
```

このコードでは、まず新しい `Blob` オブジェクトを作成します。このオブジェクトは、クリップボードに送信される `ClipboardItem` オブジェクトを構築するために必要です。 `Blob` のコンストラクターはコピーしたいコンテンツとそのタイプを受け取ります。この `Blob` オブジェクトは、例えば`Canvas` (en-US)など多くのソースから派生させることができます。

 次に、クリップボードに送信するために Blob が配置される新しい `ClipboardItem` オブジェクトを作成します。
 domxref("ClipboardItem")}} コンストラクターに渡されるオブジェクトのキーはコンテンツの種類を、値はコンテンツを表します。次に `write()` が呼ばれ、履行関数とエラー関数の両方が指定されます。

### キャンバスの内容をクリップボードにコピーする例

```js
function copyCanvasContentsToClipboard(canvas, onDone, onError) {
  canvas.toBlob((blob) => {
    let data = [new ClipboardItem({ [blob.type]: blob })];

    navigator.clipboard.write(data).then(
      () => {
        onDone();
      },
      (err) => {
        onError(err);
      },
    );
  });
}
```

**メモ:** 一度に渡すことができるクリップボードの項目は 1 つだけです。

仕様書
---

| Specification |
| --- |
| Clipboard API and events # dom-clipboard-write |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* クリップボード API
* Async Clipboard API demo on Glitch
* Image support for Async Clipboard article


Clipboard.writeText() - Web API

Clipboard.writeText()
=====================

`Clipboard` インターフェイスの **`writeText()`**
 メソッドは、指定されたテキスト文字列をシステムのクリップボードの書き込みます。テキストは `read()` または `readText()` を使って読み戻すことができます。

権限 API の `"clipboard-write"` 権限は、ページがアクティブなタブにあるときに自動的に付与されます。

構文
--

```js
writeText(newClipText);
```

### 引数

`newClipText`

クリップボードに書き込む文字列。

### 返値

クリップボードの内容が更新されると解決されるプロミス (`Promise`)。呼び出し元がクリップボードへの書き込み権限を持っていない場合、このプロミスは拒否されます。

例
-

この例では、クリップボードの内容を "<empty clipboard>" という文字列に設定します。

```js
navigator.clipboard.writeText("<empty clipboard>").then(
  () => {
    /\* clipboard successfully set \*/
  },
  () => {
    /\* clipboard write failed \*/
  },
);
```

仕様書
---

| Specification |
| --- |
| Clipboard API and events # dom-clipboard-writetext |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* クリップボード API
* Async Clipboard API demo on Glitch
* Image support for Async Clipboard article


Clipboard.readText() - Web API

Clipboard.readText()
====================

**`Clipboard`** インターフェイスの **`readText()`** メソッドは、システムクリップボードのテキストの内容のコピーに解決されるプロミス (`Promise`) を返します。

クリップボードからデータを読み込むには、権限 API の `"clipboard-read"` 権限を得る必要があります。

構文
--

```js
readText();
```

### 引数

なし。

### 返値

クリップボードのテキストの内容を持つ文字列に解決される、プロミス (`Promise`) オブジェクト。クリップボードが空であったり、テキストがないか、クリップボードの内容を表す `DataTransfer` オブジェクトがテキストの表現を持たない場合は、空文字列を返します。

テキストでない内容をクリップボードから読むためには、代わりに `read()` メソッドを使ってください。クリップボードへのテキストの書き込みには、`writeText()` を使ってください。

例
-

この使用例は、クリップボードからテキストの内容を取得し、ある要素の内容にその取得されたテキストを設定します。

```js
navigator.clipboard
  .readText()
  .then((clipText) => (document.getElementById("outbox").innerText = clipText));
```

仕様書
---

| Specification |
| --- |
| Clipboard API and events # dom-clipboard-readtext |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* クリップボード API
* Async Clipboard API demo on Glitch
* Image support for Async Clipboard article
* `Clipboard.writeText()`
* `Clipboard.write()`