recursal/MDN huggingface dataset:
Attr
====

**`Attr`** インターフェイスは要素の属性の一つをオブジェクトとして表します。多くの場合、属性値を直接文字列として取得しますが（例: `Element.getAttribute()`）、一部の関数（例: `Element.getAttributeNode()`）や反復処理の場面では `Attr` のインスタンスを返します。

EventTarget

Node

Attr
`Attr` 型のオブジェクトの核となる考え方は、**名前**と**値**の関連付けです。属性は**名前空間**の一部であることもあり、この場合、名前空間を識別する URI と、名前空間の省略形である接頭辞も持っています。

最終的に名前空間接頭辞を無視した場合は**ローカル**とみなされ、名前空間の接頭辞がある場合はそれを含み、コロン (`:`) でローカル名との間を区切った場合は**修飾されている**とみなされます。名前空間の外にある属性、名前空間の中にあって接頭辞が定義されていない属性、名前空間の中にあって接頭辞が定義されている属性の 3 つの場合があります。

| 属性 | 名前空間名 | 名前空間接頭辞 | 属性のローカル名 | 属性の修飾名 |
| --- | --- | --- | --- | --- |
| `myAttr` | *なし* | *なし* | `myAttr` | `myAttr` |
| `myAttr` | `mynamespace` | *なし* | `myAttr` | `myAttr` |
| `myAttr` | `mynamespace` | `myns` | `myAttr` | `myns:myAttr` |

**メモ:** このインターフェイスは、SVG、HTML、MathML のいずれかの要素である `Element` のツリー表現に存在する属性のみを表します。例えば `<table>` 要素に対する `HTMLTableElement` のような、その要素に関連付けられたインターフェイスの*プロパティ*を表すことはありません。（属性とそれがどのようにプロパティに*反映*されるかについての詳細はこの記事を参照してください。）

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

*このインターフェイスには親インターフェイスである `Node` および `EventTarget` から継承したプロパティもあります。*

`localName` 読取専用 

文字列で、属性の修飾名のローカル部分を表します。

`name` 読取専用 

属性の*修飾名*です。この属性が名前空間内にない場合は、`localName` プロパティと同じになります。

`namespaceURI` 読取専用 

文字列で、この属性の名前空間の URI を表します。名前空間がない場合は `null` となります。

`ownerElement` 読取専用 

この属性が所属する `Element` です。

`prefix` 読取専用 

文字列で、この属性の名前空間接頭辞を表します。接頭辞のない名前空間や名前空間が指定されていない場合は `null` となります。

`specified` 読取専用  
非推奨

このプロパティは常に `true` を返します。

`value`

この属性の値です。文字列で、このプロパティで設定したり取得したりすることができます。

インスタンスメソッド
----------

*このインターフェイスに固有のメソッドはありませんが、親インターフェイスである `Node` および `EventTarget` から継承したメソッドがあります。*

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-attr |

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

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

関連情報
----

* 他のノード: `CDATASection`, `CharacterData`, `Comment`, `Document`, `Element`, `ProcessingInstruction`, `Text`
ChannelMergerNode
=================

`ChannelMergerNode` インターフェイスは、反対の機能の `ChannelSplitterNode` と組み合わせて使用されることが多く、さまざまなモノラル入力を単一の出力に再結合します。 各入力は、出力のチャンネルを埋めるために使用されます。 これは各チャンネルに別々にアクセスするのに便利です、つまり 各チャンネルでゲインを別々に制御する必要がある場合にミキシングするのに有効です。

![](/ja/docs/Web/API/ChannelMergerNode/webaudiomerger.png)

もし `ChannelMergerNode` の出力が 1 つであるが、マージするチャンネルと同じ数の入力がある場合、入力数はそのコンストラクターおよび `AudioContext.createChannelMerger()` の呼び出しの引数で指定されただけの数になります。値が指定されていない場合は、既定の `6` になります。

`ChannelMergerNode` を使用すると、レンダリングハードウェアが処理できるよりも多くのチャンネルで出力を作成することが可能です。その場合、シグナルが`AudioContext.listener` オブジェクトに送信されると、余分なチャンネルは無視されます。

EventTarget

AudioNode

ChannelMergerNode

|  |  |
| --- | --- |
| 入力数 | 可変。既定値は `6` です。 |
| 出力数 | `1` |
| チャンネルカウントモード | `"explicit"` |
| チャンネルカウント | `2` (既定のカウントモードでは使用されません) |
| チャンネル判別 | `"speakers"` |

コンストラクター
--------

`ChannelMergerNode()` (en-US)

新しい `ChannelMergerNode` オブジェクトインスタンスを生成します。

プロパティ
-----

*特有のプロパティはありません。 親である `AudioNode` からプロパティを継承しています。*

メソッド
----

*特有のメソッドはありません。 親である `AudioNode` からメソッドを継承しています。*

例
-

コード零については `BaseAudioContext.createChannelMerger()` を参照してください。

仕様書
---

| Specification |
| --- |
| Web Audio API # ChannelMergerNode |

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

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

関連情報
----

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

**`PictureInPictureWindow`** インターフェイスは、プログラムにより 浮動動画ウィンドウの **`width`**、**`height`**、**`resize` イベント**を取得できるオブジェクトを表します。

このインターフェイスを持つオブジェクトは、 `HTMLVideoElement.requestPictureInPicture()` のプロミスの返値を使用して取得します。

EventTarget

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

*`PictureInPictureWindow` インターフェイスはプロパティを継承していません。*

`PictureInPictureWindow.width` 読取専用 

浮動動画ウィンドウの幅を指定します。

`PictureInPictureWindow.height` 読取専用 

浮動動画ウィンドウの高さを指定します。

インスタンスメソッド
----------

*`PictureInPictureWindow` インターフェイスはメソッドを継承していません。*

イベント
----

*`PictureInPictureWindow` インターフェイスはイベントを継承していません。*

`resize`

浮動動画ウィンドウのサイズ変更時に `PictureInPictureWindow` に送られます。

例
-

`<button>` と `<video>` が指定されており、ボタンをクリックすると動画がピクチャインピクチャモードになります。次に、浮動動画ウィンドウの寸法をコンソールに出力するイベントを取り付けます。


```js
const button = document.querySelector("button");
const video = document.querySelector("video");

function printPipWindowDimensions(evt) {
  const pipWindow = evt.target;
  console.log(
    `浮動動画ウィンドウの大きさ: ${pipWindow.width}x${pipWindow.height}px`,
  );
  // 表示例:
  // 浮動動画ウィンドウの大きさ: 640x360px
}

button.onclick = () => {
  video.requestPictureInPicture().then((pictureInPictureWindow) => {
    pictureInPictureWindow.onresize = printPipWindowDimensions;
  });
};
```

仕様書
---

| Specification |
| --- |
| Picture-in-Picture # interface-picture-in-picture-window |

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

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

関連情報
----

* `Picture-in-Picture API`
HTMLQuoteElement
================

**`HTMLQuoteElement`** インターフェイスは、（通常の `HTMLElement` インターフェイスから継承されるもの以外に）引用要素を操作するための特別なプロパティやメソッドを提供します。例えば `<blockquote>` や `<q>` ですが、`<cite>` 要素は含みません。

EventTarget

Node

Element

HTMLElement

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

*親である `HTMLElement` から継承したプロパティがあります。*

`HTMLQuoteElement.cite`

文字列で、HTML の `cite` 属性を反映し、引用元の URL を表します。

インスタンスメソッド
----------

*固有のメソッドはありません。親である `HTMLElement` から継承したメソッドがあります。*

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlquoteelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<blockquote>` および `<q>`、ただし `<cite>` は含みません
USBInTransferResult
===================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

WebUSB API の `USBInTransferResult` インターフェイスは、`USBDevice` インターフェイスの `transferIn()` および `controlTransferIn()` メソッドを呼び出した結果を提供します。これは、USB デバイスから USB ホストへのデータ転送の要求の結果を表します。

コンストラクター
--------

`USBInTransferResult()` 
Experimental

指定の `status` および `data` フィールドを持つ新しい `USBInTransferResult` オブジェクトを生成します。

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

`USBInTransferResult.data` 読取専用  
Experimental

あれば、USB デバイスから受信したデータが格納された `DataView` オブジェクトを返します。

`USBInTransferResult.status` 読取専用  
Experimental

転送要求の状態を返します。以下のいずれかです。

* `"ok"` — 転送は成功しました。
* `"stall"` — デバイスはエンドポイントでストール状態を発生させ、エラーを示しました。コントロールエンドポイントでのストールをクリアする必要はありません。バルクエンドポイントやインタラプトエンドポイントでのストールは、次の `transferIn()` の呼び出しの前に `clearHalt()` を呼び出してクリアする必要があります。
* `"babble"` — デバイスは想定より多くのデータで応答しました。

仕様書
---

| Specification |
| --- |
| WebUSB API # usbintransferresult |

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

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

**`MediaTrackSupportedConstraints`** 辞書はユーザーエージェントまたはブラウザーが `MediaStreamTrack` オブジェクトの実装で認識する制約可能なプロパティのリストを確立するものです。 `MediaTrackSupportedConstraints` に適合するオブジェクトは `MediaDevices.getSupportedConstraints()` によって返されます。

WebIDLのインターフェイス定義はこのように動作するため、制約が要求されたが対応していない場合、エラーは発生しません。代わりに、指定された制約が適用され、認識されない制約が要求から取り除かれます。これは混乱をもたらすことがあり、エラーのデバッグが困難になるので、制約を黙って無視することと制約を受け入れることの違いを知る必要がある場合は、制約を確立しようとする前に、必ず `getSupportedConstraints()` を使用してこの情報を取り出してください。

実際の制約セットは `MediaTrackConstraints` (en-US) 辞書をベースにしたオブジェクトで表現されます。

制約がどのように動作するかについての詳細を知りたい場合は、能力、制約、設定を読んでください。

プロパティ
-----

オブジェクトは以下のプロパティの組み合わせであり、必ずしも全てのプロパティが含まれるわけではありません。

`autoGainControl`

論理値で、値が `true` ならば、現在の環境で `autoGainControl` (en-US) 制約に対応しています。

`width`

論理値で、値が `true` ならば、現在の環境で `width` (en-US) 制約に対応しています。

`height`

論理値で、値が `true` ならば、現在の環境で `height` (en-US) 制約に対応しています。

`aspectRatio`

論理値で、値が `true` ならば、現在の環境で `aspectRatio` (en-US) 制約に対応しています。

`frameRate`

論理値で、値が `true` ならば、現在の環境で `frameRate` (en-US) 制約に対応しています。

`facingMode`

論理値で、値が `true` ならば、現在の環境で `facingMode` (en-US) 制約に対応しています。

`resizeMode`

論理値で、値が `true` ならば、現在の環境で `resizeMode` (en-US) 制約に対応しています。

`volume`

論理値で、値が `true` ならば、現在の環境で `volume` (en-US) 制約に対応しています。

`sampleRate`

論理値で、値が `true` ならば、現在の環境で `sampleRate` (en-US) 制約に対応しています。

`sampleSize`

論理値で、値が `true` ならば、現在の環境で `sampleSize` (en-US) 制約に対応しています。

`echoCancellation`

論理値で、値が `true` ならば、現在の環境で `echoCancellation` (en-US) 制約に対応しています。

`latency`

論理値で、値が `true` ならば、現在の環境で `latency` (en-US) 制約に対応しています。

`noiseSuppression`

論理値で、値が `true` ならば、現在の環境で `noiseSuppression` (en-US) 制約に対応しています。

`channelCount`

論理値で、値が `true` ならば、現在の環境で `channelCount` (en-US) 制約に対応しています。

`deviceId`

論理値で、値が `true` ならば、現在の環境で `deviceId` (en-US) 制約に対応しています。

`groupId`

論理値で、値が `true` ならば、現在の環境で `groupId` (en-US) 制約に対応しています。

### 画面共有トラックに固有のプロパティ

ユーザーの画面内コンテンツから映像ソースを含むトラックには、映像トラックで利用可能なプロパティに加え、以下のプロパティを入れることができます。

`displaySurface` (en-US)

論理値で、値が `true` ならば、現在の環境で `displaySurface` (en-US) 制約に対応しています。

`logicalSurface` (en-US)

論理値で、値が `true` ならば、現在の環境で `logicalSurface` (en-US) 制約に対応しています。

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

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

関連情報
----

* メディアキャプチャとストリーム API
* 能力、制約、設定
* 画面キャプチャ API
* 画面キャプチャ API の使用
* `MediaTrackConstraints` (en-US)
* `MediaDevices.getUserMedia()`
* `MediaStreamTrack.getConstraints()` (en-US)
* `MediaStreamTrack.applyConstraints()` (en-US)
* `MediaStreamTrack.getSettings()` (en-US)
TextEncoder
===========

**`TextEncoder`** はコードポイントのストリームを入力として受け取り、 UTF-8 のバイトストリームを出力します。

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

コンストラクター
--------

`TextEncoder()`

新たに生成した `TextEncoder` を返します。これは、 UTF-8 エンコーディングのバイトストリームを生成します。

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

*`TextEncoder` インターフェイスは、何もプロパティを継承していません。*

`TextEncoder.prototype.encoding` 読取専用 

常に `utf-8` を返します。

インスタンスメソッド
----------

*`TextEncoder` インターフェイスは、何もメソッドを継承していません。*

`TextEncoder.encode()`

入力として文字列を取り、 UTF-8 でエンコードされたテキストを含む `Uint8Array` を返します。

`TextEncoder.encodeInto()`

エンコードする文字列と、 UTF-8 でエンコードされたテキストをが入る宛先の `Uint8Array` を取り、エンコーディングの進捗を示す辞書オブジェクトを返します。これは `encode()` よりも新しく、より性能が高くなる可能性があります。

例
-


```js
const encoder = new TextEncoder();
const view = encoder.encode("€");
console.log(view); // Uint8Array(3) [226, 130, 172]
```

仕様書
---

| Specification |
| --- |
| Encoding Standard # interface-textencoder |

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

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

関連情報
----

* 逆の操作を表す `TextDecoder` インターフェイス。
* Node.js supports global export from v11.0.0
GamepadEvent
============

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

GamepadEvent はゲームパッド API のインターフェイスで、システムに接続されているゲームパッドへの参照が含まれています。これは、ゲームパッドイベント `gamepadconnected` と `gamepaddisconnected` が応答として発生するものです。

Event

GamepadEventコンストラクター
--------

`GamepadEvent()`

新しい `GamepadEvent` オブジェクトを返します。

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

`GamepadEvent.gamepad` 読取専用 

発生したイベントの関連するゲームパッドデータへのアクセスを提供する `Gamepad` オブジェクトを返します。

例
-

ゲームパッドプロパティは、起動された `gamepadconnected` イベントで呼び出されます。


```js
window.addEventListener("gamepadconnected", (e) => {
  console.log(
    "Gamepad connected at index %d: %s. %d buttons, %d axes.",
    e.gamepad.index,
    e.gamepad.id,
    e.gamepad.buttons.length,
    e.gamepad.axes.length,
  );
});
```


また `gamepaddisconnected` イベントでも呼び出されます。


```js
window.addEventListener("gamepaddisconnected", (e) => {
  console.log(
    "Gamepad disconnected from index %d: %s",
    e.gamepad.index,
    e.gamepad.id,
  );
});
```

仕様書
---

| Specification |
| --- |
| Gamepad # gamepadevent-interface |

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

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

関連情報
----

ゲームパッド API の使用
Client
======

**`Client`** インターフェイスは、`Worker` や `SharedWorker` などの実行可能なコンテキストを表します。`Window` クライアントは、より具体的な `WindowClient` によって表されます。`Client`/`WindowClient` オブジェクトは `Clients.matchAll()` や `Clients.get()` などのメソッドから取得できます。

メソッド
----

`Client.postMessage()`

メッセージをクライアントに送信します。

プロパティ
-----

`Client.id` 読取専用 

文字列としてのクライアントの汎用一意識別子。

`Client.type` 読取専用 

文字列としてのクライアントの種類。`"window"`、`"worker"`、`"sharedworker"` のいずれかです。

`Client.url` 読取専用 

文字列としてのクライアントの URL。

仕様
--

| Specification |
| --- |
| Service Workers # client-interface |

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

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

関連情報
----

* サービスワーカーの使用
* Is ServiceWorker ready?（英語）
* プロミス
PerformanceNavigation
=====================

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

古い **`PerformanceNavigation`** インターフェイスは、現在のドキュメントへのナビゲーションがどのように行われたかに関する情報を表します。

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


この型のオブジェクトは、`Performance.navigation` 読み取り専用属性を呼び出すことによって取得できます。

プロパティ
-----

*`PerformanceNavigation` インターフェイスはプロパティを継承していません。*

`PerformanceNavigation.type` 読取専用  
非推奨

`unsigned short` で、このページへのナビゲーションがどのように行われたかを示します。取りうる値は次のとおりです。

`TYPE_NAVIGATE` (0)

リンク、ブックマーク、フォーム送信、またはスクリプトを使用するか、アドレスバーに URL を入力してページにアクセスしました。

`TYPE_RELOAD` (1)

このページには、[再読み込み] ボタンをクリックするか、`Location.reload()` メソッドを介してアクセスしました。

`TYPE_BACK_FORWARD` (2)

このページには履歴をたどってアクセスしました。

`TYPE_RESERVED` (255)

その他の方法で。


`PerformanceNavigation.redirectCount` 読取専用  
非推奨

`unsigned short` で、ページに到達する前に行われたリダイレクトの数を表します。

メソッド
----

*`Performance` インターフェイスはメソッドを継承していません。*

非推奨 `PerformanceNavigation.toJSON()` (en-US)

`PerformanceNavigation` オブジェクトを表す json オブジェクトを返す jsonizer です。

仕様書
---

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

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

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

関連情報
----

* この型のオブジェクトへのアクセスを許可する `Performance`
* `PerformanceNavigationTiming` (ナビゲーションタイミングレベル 2 の一部) 
Experimental
MessageChannel
==============

Channel Messaging API の **`MessageChannel`** インターフェースは、新しいメッセージチャンネルを作成し、2 つの `MessagePort` プロパティを通して、その間でデータを送信できます。

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

プロパティ
-----

`MessageChannel.port1` 読取専用 

チャンネルの port1 を返します。

`MessageChannel.port2` 読取専用 

チャンネルの port2 を返します。

コンストラクタ
-------

`MessageChannel()`

2 つの新しい `MessagePort` オブジェクトを持つ 新しい `MessageChannel` オブジェクトを返します。

例
-

次のコードブロックでは、`MessageChannel.MessageChannel` コンストラクタを使用して作成された新しいチャンネルを知ることができます。`<iframe>` が読み込まれると、`MessagePort.postMessage` にメッセージを添えて `MessageChannel.port2` を `<iframe>` へ渡します。すると、`handleMessage` ハンドラが `<iframe>` から返送されたメッセージに (`MessagePort.onmessage` を使用して) 返答し、これを段落に挿入します。


```js
var channel = new MessageChannel();
var para = document.querySelector("p");

var ifr = document.querySelector("iframe");
var otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage("Hello from the main page!", "\*", [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}
```


完全に動作する例は、Github 上の channel messaging basic demo を参照してください (実際のデモも実行できます)。

仕様
--

| Specification |
| --- |
| HTML Standard # message-channels |

ブラウザの実装状況
---------

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

関連情報
----

* Using channel messaging
OTPCredential
=============

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

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

WebOTP API の **`OTPCredential`** インターフェイスは、新しいワンタイムパスワードを取得したときに返す属性を持ちます。

Credential

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

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

`OTPCredential.code` 
Experimental

ワンタイムパスワードです。

### イベントハンドラー

なし

インスタンスメソッド
----------

なし

例
-

以下のコードは、SMS の受信時にブラウザーの許可手続きを起動します。許可が得られると、`Promise` が `OTPCredential` オブジェクトで解決します。このコードをシンプルなデモの一部として見る


```js
navigator.credentials
  .get({
    otp: { transport: ["sms"] },
    signal: ac.signal,
  })
  .then((otp) => {
    input.value = otp.code;
    if (form) form.submit();
  })
  .catch((err) => {
    console.error(err);
  });
```

仕様書
---

| Specification |
| --- |
| WebOTP API # OTPCredential |

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

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

このセクションには、Scalable Vector Graphics (SVG) イベントリファレンスのドキュメントが含まれています。

このセクションにおいて
-----------

| 項目 | 説明 |
| --- | --- |
| **onabort** | 要素が完全に読み込まれる前にページの読み込みが停止したときに発生します。 |
| **onerror** | 要素が正しく読み込まれなかったり、スクリプトが正しく実行されなかったりすると発生します。 |
| **onload** | ブラウザが要素とそのすべての子孫を完全に解析したときに発生します。 |
| **onresize** | ドキュメントビューのサイズが変更されているときに発生します。 |
| **onscroll** | ドキュメントビューが x 軸、y 軸、または両方の軸に沿って移動されているときに発生します。 |
| **onunload** | ドキュメントがウィンドウまたはフレームから削除されたときに発生します。 |
| **onzoom** | ドキュメントのズームレベルまたは**currentScale**プロパティが変更されたときに発生します。 |
createImageBitmap()
===================

**`createImageBitmap()`** メソッドは、指定されたソースからビットマップを作成し、オプションでそのソースの一部のみを切り抜きます。このメソッドは、ウィンドウとワーカーの両方のグローバルスコープに存在します。このメソッドは、さまざまな画像ソースを受け付け、 `ImageBitmap` に解決する `Promise` を返します。

構文
--


```js
createImageBitmap(image)
createImageBitmap(image, options)
createImageBitmap(image, sx, sy, sw, sh)
createImageBitmap(image, sx, sy, sw, sh, options)
```

### 引数

`image`

画像ソースで、以下のうちの何れかです。

* `HTMLImageElement`
* `SVGImageElement` (en-US)
* `HTMLVideoElement`
* `HTMLCanvasElement`
* `Blob`
* `ImageData`
* `ImageBitmap`
* `OffscreenCanvas` (en-US)

`sx`

`ImageBitmap` が抽出される矩形の参照点の x 座標。

`sy`

`ImageBitmap` が抽出される矩形の参照点の y 座標。

`sw`

`ImageBitmap` が抽出される矩形の幅。この値は負の値にすることができます。

`sh`

`ImageBitmap` が抽出される矩形の高さ。この値は負の値にすることができます。

`options` 省略可

画像の抽出のためのオプションを設定するオブジェクト。利用可能なオプションは以下の通りです。

`imageOrientation`

画像をそのまま表示するか、垂直方向に反転させて表示するかを指定します。`none` （既定値）または `flipY` のいずれかを指定します。

`premultiplyAlpha`

ビットマップのカラーチャンネルをアルファチャンネルで前置増幅するかどうかを指定します。 `none`、`premultiply`、`default` （既定値）のいずれかです。

`colorSpaceConversion`

画像を色空間変換でデコードするかどうかを指定します。 `none` または `default` （既定値）のいずれかを指定します。値 `default` は、実装固有の動作を使用することを示します。

`resizeWidth`

出力幅を示す long 整数です。

`resizeHeight`

出力の高さを示す long 整数です。

`resizeQuality`

出力する寸法に合わせて入力のサイズを変更するために使用するアルゴリズムを指定します。`pixelated`、`low` （既定値）`medium`、`high`のいずれかです、


### 返値

指定された矩形のビットマップデータを保持する `ImageBitmap` オブジェクトに解決する `Promise` を返します。

例
-

### スプライトシートからのスプライト作成

この例では、スプライトシートをロードし、個々のスプライトを抽出し、各スプライトをキャンバスにレンダリングします。スプライトシートとは、複数の小さな画像を含む画像で、それぞれを個別にレンダリングできるようにしたいものです。


```js
const canvas = document.getElementById("myCanvas"),
  ctx = canvas.getContext("2d"),
  image = new Image();

// スプライトシートがロードされるのを待ちます
image.onload = () => {
  Promise.all([
    // スプライトシートから2つのスプライトを切り取ります
    createImageBitmap(image, 0, 0, 32, 32),
    createImageBitmap(image, 32, 0, 32, 32),
  ]).then((sprites) => {
    // 各スプライトをキャンバスに描きます
    ctx.drawImage(sprites[0], 0, 0);
    ctx.drawImage(sprites[1], 32, 32);
  });
};

// 画像ファイルからスプライトシートを読み込みます
image.src = "sprites.png";
```

仕様書
---

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

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

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

関連情報
----

* `CanvasRenderingContext2D.drawImage()`
* `ImageData`
WebGLShader
===========

**WebGLShader** は WebGL API の一部で、頂点シェーダーとフラグメントシェーダーを表します。 `WebGLProgram` は両方の種類のシェーダーが必要です。

WebGLObject

WebGLShader解説
--

**WebGLShader** を作成するには `WebGLRenderingContext.createShader` を使用し、それから `WebGLRenderingContext.shaderSource()` を使用して GLSL ソースコードを結び付け、最後に `WebGLRenderingContext.compileShader()` を呼び出してシェーダーを完成させコンパイルします。この時点では **WebGLShader** はまだ使用可能な形になっておらず、 `WebGLProgram` に関連付ける必要があります。


```js
function createShader(gl, sourceCode, type) {
  // gl.VERTEX\_SHADER または gl.FRAGMENT\_SHADER のどちらかをコンパイル
  const shader = gl.createShader(type);
  gl.shaderSource(shader, sourceCode);
  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE\_STATUS)) {
    const info = gl.getShaderInfoLog(shader);
    throw `WebGL プログラムをコンパイルできませんでした。\n\n${info}`;
  }
  return shader;
}
```


シェーダーの取り付けについては `WebGLProgram` を参照してください。

例
-

### 頂点シェーダーの作成

シェーダーのソースコード文字列の書き込みのアクセスには、他にも多くの戦略があることに注意してください。これらの例は説明のためのものです。


```js
const vertexShaderSource =
  "attribute vec4 position;\n" +
  "void main() {\n" +
  " gl\_Position = position;\n" +
  "}\n";

// 上の例の createShader 関数を使う
const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX\_SHADER);
```

### フラグメントシェーダーの作成


```js
const fragmentShaderSource =
  "void main() {\n" + " gl\_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" + "}\n";

// 上の例の createShader 関数を使う
const fragmentShader = createShader(
  gl,
  fragmentShaderSource,
  gl.FRAGMENT\_SHADER,
);
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.8 |

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

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

関連情報
----

* `WebGLProgram`
* `WebGLRenderingContext.attachShader()`
* `WebGLRenderingContext.bindAttribLocation()` (en-US)
* `WebGLRenderingContext.compileShader()`
* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.deleteProgram()` (en-US)
* `WebGLRenderingContext.deleteShader()` (en-US)
* `WebGLRenderingContext.detachShader()` (en-US)
* `WebGLRenderingContext.getAttachedShaders()` (en-US)
* `WebGLRenderingContext.getProgramParameter()` (en-US)
* `WebGLRenderingContext.getProgramInfoLog()` (en-US)
* `WebGLRenderingContext.getShaderParameter()`
* `WebGLRenderingContext.getShaderPrecisionFormat()` (en-US)
* `WebGLRenderingContext.getShaderInfoLog()`
* `WebGLRenderingContext.getShaderSource()` (en-US)
* `WebGLRenderingContext.isProgram()` (en-US)
* `WebGLRenderingContext.isShader()` (en-US)
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.shaderSource()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()` (en-US)
HashChangeEvent
===============

**`HashChangeEvent`** インターフェイスは、URL のフラグメント識別子が変更されたときに発生するイベントを表します。

フラグメント識別子は URL の一部で、`#` 記号からそれに続く部分です。

Event

HashChangeEventコンストラクター
--------

`HashChangeEvent()`

新しい `HashChangeEvent` オブジェクトを生成します。

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

*このインターフェイスには、親である `Event` から継承したプロパティもあります。*

`HashChangeEvent.newURL` 読取専用 

ウィンドウが移動しようとしている新しい URL。

`HashChangeEvent.oldURL` 読取専用 

ウィンドウがいた直前の URL。

インスタンスメソッド
----------

*このインターフェイスには自身のメソッドがありませんが、親である `Event` から継承したメソッドがあります。*

例
-

### 基本的な例


```js
function locationHashChanged() {
  if (location.hash === "#somecoolfeature") {
    somecoolfeature();
  }
}

window.addEventListener("hashchange", locationHashChanged);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # the-hashchangeevent-interface |

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

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

関連イベント
------

* `hashchange`
* `popstate`
PushSubscriptionOptions
=======================

Push API の **`PushSubscriptionOptions`** インターフェイスは、プッシュサブスクリプションに関連付いたオプションを表します。

`PushSubscription` で `PushSubscription.options` を呼ぶと、読み取り専用の `PushSubscriptionOptions` オブジェクトが返ります。このインターフェイスは自身のコンストラクターを持ちません。

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

`PushSubscriptionOptions.userVisibleOnly` 読取専用 

プッシュサブスクリプションがユーザーに見える効果を持つメッセージのみに使われるかどうかを表す `boolean` 値です｡

`PushSubscriptionOptions.applicationServerKey` 読取専用 

プッシュサーバーがプッシュサーバーを通じてクライアントアプリケーションにメッセージを送信するのに用いる公開鍵です。

例
-

`PushSubscription` で `PushSubscription.options` を呼ぶと、`PushSubscriptionOptions` オブジェクトが返ります。この例では、これをコンソールに出力します。


```js
navigator.serviceWorker.ready.then((reg) => {
  reg.pushManager.getSubscription().then((subscription) => {
    const options = subscription.options;
    console.log(options); // PushSubscriptionOptions オブジェクト
  });
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushsubscriptionoptions |

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

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