recursal/MDN huggingface dataset:
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()
============================

**`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
===================================

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

古い **`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
==========================

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

古い **`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` インターフェイス
決済処理の概要
=======

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (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
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 イベント
==============================

`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() メソッド
============================================

**`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() メソッド
=======================================

**`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 プロパティ
======================================

**`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() コンストラクター
=============================================================

**`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`
* 読み取り可能なストリームの使用
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()
================================

**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()
================================

**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()
================

**`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()
=================

`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()
=====================

`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