recursal/MDN huggingface dataset:
Web Serial API
==============

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

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

**Web Serial API** は、ウェブサイトがシリアルデバイスからデータを受信したり、シリアルデバイスにデータを送信したりする方法を提供します。対象は、シリアルポートで接続されたデバイスのことも、シリアルポートとして振る舞う USB や Bluetooth のデバイスのこともあります。

概念と使用方法
-------

Web Serial API は、ウェブサイトがユーザーのコンピューターに接続された周辺機器とやり取りをできるようにする API セットの一つです。`WebUSB API` でアクセス可能な USB デバイスや、`WebHID API` でアクセス可能な入力デバイスではなく、オペレーティングシステムによりシリアル通信の API でアクセスすることが要求されるデバイスへの接続を可能にします。

シリアルデバイスの例として、3D プリンターや、BBC micro:bit board などのマイクロコントローラーがあります。

インターフェイス
--------

`Serial`

ウェブページがシリアルポートを検出し、接続するためのプロパティやメソッドを提供します。

`SerialPort`

ホストデバイスのシリアルポートへのアクセスを提供します。

例
-

以下の例で、Web Serial API が提供する機能のうちいくつかを示します。

### 利用可能なポートを調べる

この例では、利用可能なポートを調べ、ユーザーが他のポートへのアクセスを許可できるようにする方法を示します。

`connect` および `disconnect` イベントは、デバイスが接続された時や切断された時にサイトが反応できるようにします。`getPorts()` メソッドを呼ぶことで、接続されたポートが既にサイトからのアクセスが許可されたものかどうかを調べることができます。

接続されたポートの中にサイトからアクセスできるものが無い場合、ユーザーが有効化するのを待つ必要があります。この例では、このためにボタンの `click` イベントハンドラーを用います。`requestPort()` に USB ベンダー ID を入れたフィルターを渡し、ユーザーに提示するデバイスのリストを特定の製造元によって作られた USB デバイスのみに絞り込んでいます。


```js
navigator.serial.addEventListener("connect", (e) => {
  // `e.target` に接続する、すなわち利用可能なポートのリストに加えます。
});

navigator.serial.addEventListener("disconnect", (e) => {
  // `e.target` を利用可能なポートのリストから外します。
});

navigator.serial.getPorts().then((ports) => {
  // ページの読み込み時、`ports` を用いて利用可能なポートのリストを初期化します。
});

button.addEventListener("click", () => {
  const usbVendorId = 0xabcd;
  navigator.serial
    .requestPort({ filters: [{ usbVendorId }] })
    .then((port) => {
      // `port` に接続する、すなわち利用可能なポートのリストに加えます。
    })
    .catch((e) => {
      // ユーザーがポートを選択しませんでした。
    });
});
```

### ポートからデータを受信する

この例は、ポートからデータを受信する方法を示します。外側のループは致命的なエラーが発生して `SerialPort.readable` が `null` になるまで新しい `reader` を生成し続けることで、致命的でないエラーを処理します。


```js
while (port.readable) {
  const reader = port.readable.getReader();
  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        // |reader| がキャンセルされました。
        break;
      }
      // |value| について何かをする
    }
  } catch (error) {
    // |error| を処理する
  } finally {
    reader.releaseLock();
  }
}
```

仕様書
---

| Specification |
| --- |
| Web Serial API # serial-interface |

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

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

関連情報
----

* シリアルポートとの読み書き
* Getting started with the Web Serial API
キャンバス API
=========

**キャンバス API** (Canvas API) は JavaScript と HTML の `<canvas>` 要素によってグラフィックを描く方法を提供します。他にも、アニメーション、ゲームのグラフィック、データの可視化、写真加工、リアルタイム動画処理などに使用することができます。

キャンバス API は全体的に 2D グラフィックを対象としています。 WebGL API は、こちらも `<canvas>` 要素を使用して、ハードウェアで高速化された 2D および 3D グラフィックを描きます。

基本的な例
-----

この単純な例は、キャンバス上に緑の四角形を描きます。

### HTML


```html
<canvas id="canvas"></canvas>
```

### JavaScript

`Document.getElementById()` メソッドで、 HTML の `<canvas>` 要素への参照を取得します。次に、 `HTMLCanvasElement.getContext()` メソッドで要素のコンテキストを取得します。 — ここに描画されたものが表示されます。

実際の描画は `CanvasRenderingContext2D` インターフェイスを用いて行われます。 `fillStyle` プロパティは四角形を緑にします。 `fillRect()` メソッドはこれを左上から (10, 10) の位置で、幅 150 単位、高さ 100 単位の寸法を与えます。


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);
```

### 結果

リファレンス
------

* `HTMLCanvasElement`
* `CanvasRenderingContext2D`
* `CanvasGradient`
* `CanvasImageSource` (en-US)
* `CanvasPattern`
* `ImageBitmap`
* `ImageData`
* `TextMetrics` (en-US)
* `OffscreenCanvas` (en-US) 
Experimental
* `Path2D` (en-US) 
Experimental
* `ImageBitmapRenderingContext` (en-US) 
Experimental

**メモ:** `WebGLRenderingContext` に関するインターフェイスは、WebGL に掲載しています。

**メモ:** `OffscreenCanvas` (en-US) はウェブワーカーでも利用できます。

`CanvasCaptureMediaStreamTrack` (en-US) は関連するインターフェイスです。

ガイドとチュートリアル
-----------

Canvas チュートリアル

キャンバス API の基本的な使いかたと高度な機能の両方をカバーする網羅的なチュートリアル。

HTML5 Canvas Deep Dive

キャンバス API および WebGL の実践的な書籍規模の入門です。

Canvas Handbook

キャンバス API の手軽なリファレンス。

デモ: 簡単な ray-caster

キャンバスを用いたレイトレーシングアニメーションのデモです。

キャンバスを使用した動画の操作 (en-US)

`<video>` と `<canvas>` を組み合わせて、動画データをリアルタイムに操作します。

ライブラリー
------

キャンバス API はとても強力ですが、簡単に利用できるとは限りません。以下に挙げたライブラリーは、キャンバスベースのプロジェクトの作成をより速くより手軽にできるようにします。

* EaselJS: ゲームやアート作品、その他の高度なグラフィック操作を容易にする、オープンソースのキャンバスライブラリー
* Fabric.js: SVG のパース機能を持つ、オープンソースのキャンバスライブラリー
* heatmap.js: キャンバスベースのデータヒートマップを生成するためのオープンソースライブラリー
* JavaScript InfoVis Toolkit: 対話的なデータの可視化を実現
* Konva.js: デスクトップおよびモバイルアプリケーション向けの 2D キャンバスライブラリー
* p5.js: アーティスト、デザイナー、教育者、初心者のためのフル機能を持ったキャンバス描画機能
* Paper.js: HTML5 キャンバス上で動作する、オープンソースのベクターグラフィック向けスクリプトフレームワーク
* Phaser: ブラウザーゲームを強力にするキャンバスと WebGL の軽量、フリーで楽しいオープンソースフレームワーク
* Pts.js: キャンバスと SVG の創造的なコーディングや視覚化のためのライブラリー
* Rekapi: キャンバス用のアニメーションキーフレーム API
* Scrawl-canvas: 2D キャンバス要素を作成したり操作したりするためのオープンソースの JavaScript ライブラリーです。
* ZIM: 便利でキャンバス上のコンポーネントとコーディングの創造性の制御を提供し、アクセシビリティと数百のカラフルなチュートリアルがあります。

**メモ:** WebGL を使用する 2D および 3D のライブラリーについては WebGL API を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-canvas-element |

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

Mozilla アプリケーションは `<canvas>` の対応を Gecko 1.8 (Firefox 1.5) から始めました。この要素はもともと Apple が OS X Dashboard や Safari のために導入したものでした。 Internet Explorer は `<canvas>` をバージョン 9 から対応しており、それ以前のバージョンの IE では、ページに効率的に `<canvas>` の対応を追加するために Google の Explorer Canvas プロジェクトによるスクリプトを利用することができます。 Google Chrome や Opera 9 も `<canvas>` に対応しています。

関連情報
----

* WebGL
HTMLDivElement
==============

**`HTMLDivElement`** インターフェイスは、（継承によって利用できる通常の `HTMLElement` インターフェイスの他に） `<div>` 要素を操作するための特別なプロパティを提供します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLDivElement.align` 
非推奨

文字列で、列挙型のプロパティを表し、要素のコンテンツが周囲のコンテキストに対して整列していることを示します。指定可能な値は `"left"`, `"right"`, `"justify"`, `"center"` です。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmldivelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<div>`
BarcodeDetector
===============

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

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

**`BarcodeDetector`** はバーコード検出 API のインターフェイスで、画像内から線形および二次元バーコードを検出できるようにします。

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

`BarcodeDetector.BarcodeDetector()`

`BarcodeDetector` オブジェクトを作成して返します。オプションで `barcodeDetectorOptions` を指定します。

メソッド
----

`detect()`

`Promise` で、以下のプロパティを持つ `detectedBarcode` オブジェクトの配列で履行されます。

* `boundingBox`: `DOMRectReadOnly` で、画像内にある検出されたバーコードの範囲を表す矩形の寸法を返します。
* `cornerPoints`: 検出されたバーコードの四隅の点の、画像に対する X および Y 座標で、左上から時計回りに算出されます。画像内の遠近感の歪みにより、正方形にならない場合があります。
* `format`: 検出されたバーコードの形式。（形式の完全な一覧についてはバーコード検出 API 概要ページを参照してください。）
* `rawValue`: バーコードデータをデコードした文字列です。

`getSupportedFormats()`

`Promise` を返します。これは対応しているバーコード形式の種類の配列 (`Array`) で履行されます。

例
-

### 検出器の生成

この例では、対応している形式を指定して新しいバーコード検出器オブジェクトを作成し、ブラウザーの互換性をテストしています。


```js
// 新しい検出器の生成
var barcodeDetector = new BarcodeDetector({
  formats: ["code\_39", "codabar", "ean\_13"],
});

// 互換性のチェック
if (barcodeDetector) {
  console.log("Barcode Detector に対応しています。");
} else {
  console.log("Barcode Detector はこのブラウザーでは対応していません。");
}
```

### 対応している形式の取得

以下の例では、静的メソッドの `getSupportFormat()` を呼び出して、結果をコンソールへ出力します。


```js
// check supported types
BarcodeDetector.getSupportedFormats().then((supportedFormats) => {
  supportedFormats.forEach((format) => console.log(format));
});
```

### バーコードの検出

この例では、 `detect()` メソッドを使用して、与えられた画像内のバーコードを検出しています。これらは繰り返し処理され、バーコードのデータはコンソールに記録されます。


```js
barcodeDetector
  .detect(imageEl)
  .then((barcodes) => {
    barcodes.forEach((barcode) => console.log(barcode.rawData));
  })
  .catch((err) => {
    console.log(err);
  });
```

仕様書
---

| Specification |
| --- |
| Accelerated Shape Detection in Images # barcode-detection-api |

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

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

関連情報
----

* barcodefaq.com: A website with information about different barcodes and examples of the different types.
* Accelerated Shape Detection in Images
RelativeOrientationSensor
=========================

Sensor APIs の **`RelativeOrientationSensor`** インターフェイスは、地球の参照用座標系は考慮せず、デバイスの物理的な向きを表します。

このセンサーを使用するには、ユーザーが Permissions API により `'accelerometer'` および `'gyroscope'` デバイスセンサーを使用する許可を与える必要があります。さらに、この機能はサーバーで設定された Permissions Policy でブロックされる可能性があります。

EventTarget

Sensor

OrientationSensor

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

`RelativeOrientationSensor()`

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

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

*固有のプロパティはありません。祖先の `OrientationSensor` および `Sensor` からプロパティを継承します。*

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

*固有のメソッドはありません。祖先の `OrientationSensor` および `Sensor` からメソッドを継承します。*

イベント
----

*固有のイベントはありません。祖先の `Sensor` からイベントを継承します。*

例
-

### 基本的な例

以下の例は、だいたい Intel の Orientation Phone demo をもとにしており、1 秒に 60 回の周期を設定して `RelativeOrientationSensor` のインスタンスを生成しています。

**メモ:** もとにした Intel のデモでは `AbsoluteOrientationSensor` を用いています。測定ごとに、`OrientationSensor.quaternion` を用いて電話の視覚的なモデルを回転しています。


```js
const options = { frequency: 60, referenceFrame: "device" };
const sensor = new RelativeOrientationSensor(options);

sensor.addEventListener("reading", () => {
  // model は別の場所で生成した Three.js のオブジェクト
  model.quaternion.fromArray(sensor.quaternion).inverse();
});
sensor.addEventListener("error", (error) => {
  if (event.error.name === "NotReadableError") {
    console.log("センサーが利用できません。");
  }
});
sensor.start();
```

### 許可の例

向きセンサーを使用するには、複数のデバイスセンサーを使用する許可を要求する必要があります。`Permissions` インターフェイスは Promise を使用するので、許可を要求するのには `Promise.all` を使用するとよいです。


```js
const sensor = new RelativeOrientationSensor();
Promise.all([
  navigator.permissions.query({ name: "accelerometer" }),
  navigator.permissions.query({ name: "gyroscope" }),
]).then((results) => {
  if (results.every((result) => result.state === "granted")) {
    sensor.start();
    // ...
  } else {
    console.log("RelativeOrientationSensor を使用する許可がありません。");
  }
});
```

仕様書
---

| Specification |
| --- |
| Orientation Sensor # relativeorientationsensor-interface |

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

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

**`DelayNode`** は信号遅延を表します。 `AudioNode` の一種で、入力されたデータを指定された時間遅延して、出力します。

`DelayNode` の入力と出力は常に 1 つで、入力のチャンネル数と出力のチャンネル数は同じです。

![The DelayNode acts as a delay-line, here with a value of 1s.](/ja/docs/Web/API/DelayNode/webaudiodelaynode.png)

オーディオグラフに閉路がある場合、その中には最低 1 つの `DelayNode` がなければなりません。もし閉路中に `DelayNode` が存在しない場合、その閉路中のノードはミュートされます。

EventTarget

AudioNode

DelayNode

|  |  |
| --- | --- |
| 入力数 | `1` |
| 出力数 | `1` |
| チャンネルカウントモード | `"max"` |
| チャンネル数 | `2` (既定のカウントモードでは未使用) |
| チャンネルの意味 | `"speakers"` |

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

`DelayNode()` (en-US)

DelayNode オブジェクトのインスタンスを新規に作成します。別の方法として、 `BaseAudioContext.createDelay()` ファクトリーメソッドを使用することもできます。 AudioNode の作成を参照してください。

プロパティ
-----

*親である `AudioNode` からプロパティを継承しています。*

`DelayNode.delayTime` 読取専用 

a-rate の `AudioParam` で、遅延させる時間を秒単位で指定します。

メソッド
----

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

例
-

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

仕様書
---

| Specification |
| --- |
| Web Audio API # DelayNode |

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

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

関連情報
----

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

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

ServiceWorker API の **`SyncManager`** インターフェイスは同期登録を登録、及び一覧表示のインターフェイスを提供します。

プロパティ
-----

無し

メソッド
----

`SyncManager.register` (en-US)

新規の同期登録を作成し `Promise` を返します。

`SyncManager.getTags` (en-US)

SyncManager 登録の為にデベロッパーが定義した識別子リストを返します。

仕様
--

| Specification |
| --- |
| Web Background Synchronization # sync-manager-interface |

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

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

**`MediaStreamTrack`** インターフェイスは、ストリームに含まれる一つのメディアトラックを表現します。一般的に、音声や動画のトラックですが、他の種類のトラックも存在することがあります。

EventTarget

MediaStreamTrackプロパティ
-----

以下に示すプロパティに加えて、 `MediaStreamTrack` は制約可能なプロパティを持っています。これらのプロパティは、 `applyConstraints()` (en-US) によって設定でき、 `getConstraints()` (en-US) と `getSettings()` (en-US) によって取得できます。制約可能なプロパティを用いて適切に動作させるためにはどのようにすればいいかを知りたい場合は、能力と制約と設定を見てください。適切に動作させなかった場合の結果として、あなたが作成したコードは信頼できないものになります。

`MediaStreamTrack.contentHint` (en-US)

文字列で、ウェブアプリケーションが、トラックがどのような種類のコンテンツを含んでいるかについてのヒントを提供し、 API 利用者がどのように扱うべきかをガイドするために使用することがあります。

`MediaStreamTrack.enabled`

論理型で、トラックが有効の場合は `true` の値になり、メディアソースストリームを出力することができます。トラックが無効な場合は `false` の値になり、メディアソースストリームに出力されません。トラックの接続が解除された場合、この値は変更することはできますが、影響を与えることはありません。

**メモ:** 標準的な「ミュート」（消音）機能は `enabled` を `false` に設定することで実装できます。 `muted` プロパティは技術的な問題でメディアがない状態を表します。

`MediaStreamTrack.id` 読取専用 

トラックの固有識別子 (GUID) を含む文字列を返します。この識別子はブラウザーによって生成されます。

`MediaStreamTrack.kind` 読取専用 

このトラックが音声トラックの場合は `"audio"` が設定され、動画トラックの場合は `"video"` が設定される文字列を返します。ソースからの関連付けが解除された場合、この値が変更されることはありません。

`MediaStreamTrack.label` 読取専用 

ユーザーエージェントによって割り当てられた、 `"internal microphone"` のようなトラックソースを識別するラベルを含む文字列を返します。この文字列は空になることもあり、ソースが接続されていないと空になります。トラックのソースとの関連付けが解除されても、このラベルは変更されません。

`MediaStreamTrack.muted` 読取専用 

技術的な問題でこのトラックがメディアデータを提供できないかどうかを示す論理値を返します。

**メモ:** 標準的な「ミュート」（消音）機能は `enabled` を `false` に設定することで実装でき、再び `true` に設定することでメディアのミュートを解除することができます。

`MediaStreamTrack.readyState` 読取専用 

トラックの状態を表す列挙型の値を返します。この値は次のいずれかになります。

* `"live"` は入力機器が接続されており、ベストエフォートでリアルタイムなデータを提供することを表します。この状態では、 `enabled` 属性を用いることで、データの出力のオンとオフを切り替えることができます。
* `"ended"` は入力機器がこれ以上データを提供することがなく、新しいデータも一切提供されないことを示します。

`MediaStreamTrack.remote` 読取専用  
非推奨

トラックのソースが `RTCPeerConnection` の場合は `true` であり、それ以外は `false` となる論理値を返します。

メソッド
----

`MediaStreamTrack.applyConstraints()` (en-US)

`MediaStreamTrack` の制約可能なプロパティについて、理想的な値や許容される値の範囲を指定することができます。

`MediaStreamTrack.clone()` (en-US)

`MediaStreamTrack` の複製を返します。

`MediaStreamTrack.getCapabilities()` (en-US)

`MediaStreamTrack` で利用できる制約可能なプロパティの一覧を返します。

`MediaStreamTrack.getConstraints()` (en-US)

トラックに設定されている制約を含む `MediaTrackConstraints` (en-US) を返します。返値は、最後に `applyConstraints()` (en-US) を用いて設定した制約に一致します。

`MediaStreamTrack.getSettings()` (en-US)

`MediaStreamTrack` の制約可能なプロパティの値を含む `MediaTrackSettings` (en-US) オブジェクトを返します。

`MediaStreamTrack.stop()`

トラックに関連付けられたソースの再生を停止し、ソースとトラックの関連付けを解除します。トラックの状態は `ended` に設定されます。

イベント
----

これらのイベントを待ち受けするには、 `addEventListener()` を使用するか、イベントリスナーをこのインターフェイスの `onイベント名` プロパティに代入するかしてください。

`ended`

トラックの再生が終わったとき（`readyState` の値が `ended` に変化したとき）に送られます

`mute`

そのトラックが一時的にデータを提供できなくなったこと（ネットワークに異常が発生した場合など）を示すために `muted` プロパティの値が `true` になったときに `MediaStreamTrack` に送られます。

`overconstrained` 
非推奨

トラックに指定された制約により、トラックに互換性がなくなり、その結果として使用できない場合に送信されます。

`unmute`

データが再び利用可能になり、 `muted` 状態が終わったときにトラックに送信されます。

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # mediastreamtrack |

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

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

関連情報
----

* メディアキャプチャとストリーム API
* `MediaStream`
ImageBitmap
===========

**`ImageBitmap`** インターフェイスは、`<canvas>` に過度の遅延なく描画することができるビットマップ画像を表します。これは `createImageBitmap()` ファクトリーメソッドを使用して、様々なソースオブジェクトから作成することができます。`ImageBitmap` は、WebGL でレンダリングするためのテクスチャを準備するための、非同期でリソース効率の良い経路を提供します。

`ImageBitmap` は移譲可能オブジェクトです。

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

`ImageBitmap.height` 読取専用 

`unsigned long` で、`ImageData` の高さを CSS ピクセル数で表します。

`ImageBitmap.width` 読取専用 

`unsigned long` で、`ImageData` の幅を CSS ピクセル数で表します。

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

`ImageBitmap.close()`

`ImageBitmap` に関連するすべてのグラフィカルリソースを破棄します。

仕様書
---

| Specification |
| --- |
| HTML Standard # imagebitmap |

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

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

関連情報
----

* `createImageBitmap()`
* `CanvasRenderingContext2D.drawImage()`
* `WebGLRenderingContext.texImage2D()` (en-US)
* `OffscreenCanvas.transferToImageBitmap()` (en-US)
SharedWorkerGlobalScope
=======================

**`SharedWorkerGlobalScope`** オブジェクト（`SharedWorker` グローバルスコープ）は、 `self` キーワードでアクセスできます。一部の追加のグローバル関数、名前空間オブジェクト、コンストラクターは、通常はワーカーのグローバルスコープに関連付けられていませんが、利用することができ、 JavaScript リファレンスに列挙されています。ワーカーで利用できる機能の完全なリストを参照してください。

EventTarget

WorkerGlobalScope

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

*このインターフェイスは `WorkerGlobalScope`、またその親の `EventTarget` インターフェイスからプロパティを継承しています。*

`SharedWorkerGlobalScope.name` 読取専用 

`SharedWorker` が `SharedWorker()` コンストラクターを使用して作成されたときに、（オプションで）指定された名前です。これは主にデバッグのために使用されます。

`SharedWorkerGlobalScope.applicationCache` 読取専用  
非推奨

Non-standard

このプロパティはこのワーカーの `ApplicationCache` オブジェクトを返します。

### WorkerGlobalScope から継承しているインスタンスプロパティ

`WorkerGlobalScope.self`

`DedicatedWorkerGlobalScope` オブジェクト自身のオブジェクト参照を返します。

`WorkerGlobalScope.console` 読取専用 

このワーカーに関連付けられた `console` オブジェクトを返します。

`WorkerGlobalScope.location` 読取専用 

このワーカーに関連付けられた `WorkerLocation` を返します。 `WorkerLocation` は特化された location オブジェクトであり、閲覧スコープの `Location` のほぼサブセットですが、ワーカーに適合したものです。

`WorkerGlobalScope.navigator` 読取専用 

このワーカーに関連付けられた `WorkerNavigator` を返します。 `WorkerNavigator` は特化された navigator オブジェクトであり、閲覧スコープの `Navigator` のほぼサブセットですが、ワーカーに適合したものです。

`WorkerGlobalScope.performance` (en-US) 読取専用  
Non-standard

このワーカーに関連付けられた `Performance` オブジェクトを返します。これは通常の performance オブジェクトですが、利用できるプロパティやメソッドはサブセットです。

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

*このインターフェイスは `WorkerGlobalScope`、またその親の `EventTarget` インターフェイスからメソッドを継承しています。*

`SharedWorkerGlobalScope.close()`

`SharedWorkerGlobalScope` のイベントループでキューに入れられたタスクを破棄し、この特定のスコープを具体的に閉じます。

### WorkerGlobalScope から継承したもの

`WorkerGlobalScope.dump()` 
Non-standard

stdout - つまり端末にメッセージを書くことができます。これは Firefox の `window.dump` と同じですが、ワーカー用です。

`WorkerGlobalScope.importScripts()`

1 つ以上のスクリプトをワーカーのスコープにインポートします。カンマで区切っていくつでも指定することができます。例えば `importScripts('foo.js', 'bar.js');` のようにします。

### 他の場所から実装したもの

`atob()`

base-64 エンコードを使用してエンコードされている文字列をデコードします。

`btoa()`

バイナリーデータの文字列から、 base-64 でエンコードされた ASCII 文字列を作成します。

`clearInterval()`

`setInterval()` を使用して設定された繰り返し実行を取り消します。

`clearTimeout()`

`setTimeout()` を使用して設定された繰り返し実行を取り消します。

`setInterval()`

X ミリ秒ごとに関数を実行するようスケジューリングします。

`setTimeout()`

関数の実行の遅延を設定します。

イベント
----

このイベントを待ち受けするには、 `addEventListener()` を使用するか、このインターフェイスの `onイベント名` プロパティにイベントリスナーを代入するかしてください。

`connect`

新しいクライアントが接続したときに、共有ワーカーで発生します。

仕様書
---

| Specification |
| --- |
| HTML Standard # shared-workers-and-the-sharedworkerglobalscope-interface |

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

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

関連情報
----

* `SharedWorker`
* `WorkerGlobalScope`
* ウェブワーカーの使用
* ワーカーで使用できる関数
HTMLCollection
==============

**`HTMLCollection`** インターフェイスは、（文書内の順序における）要素の汎用的な集合（`arguments` のような配列風のオブジェクト）を表し、リストから選択するためのメソッドとプロパティを提供します。

**メモ:** このインターフェイスは歴史的な理由で `HTMLCollection` と呼ばれています（現代の DOM より前では、このインターフェイスを実装する集合が、アイテムとして HTML 要素しか持てませんでした）。

HTML DOM 内の `HTMLCollection` は生きて (live) います。元になった文書が変更された時点で自動的に更新されます。このため、ノードを追加、変更、削除する場合はコピーを（`Array.from` などを使用して）作成しておくといいでしょう。

**メモ:** このインターフェイスは変更不可能なリストを作成しようとするものでした。そして、既に使用されているコードの動作を保証するだけのために対応が続いていました。現代の API では、ECMAScript の配列型をラップした型を使用しているため、ECMAScript の配列のように扱うことができ、同時にその使用法に追加の意味づけを行うことができます（アイテムを読み取り専用にするなど）。

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

`HTMLCollection.length` 読取専用 

collection 内のアイテム数を返します。

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

`HTMLCollection.item()`

リスト内の指定された `index` (先頭はゼロ) 位置にある特定のノードを返します。`index` が範囲外なら `null` を返します。

これは `collection[i]` のアクセスの代替手段です（こちらは `i` が範囲外の場合は `undefined` を返します）。これは主に、 JavaScript 以外の DOM 実装で有用です。

`HTMLCollection.namedItem()`

`name` で指定した文字列に ID、または代替として name が一致するノードを返します。name とのマッチングは HTML 限定で、参照した要素が `name` 属性をサポートする場合に限って、最終手段として行われます。指定した名前のノードがない場合は `null` を返します。

これは `collection[name]` のアクセスの代替手段です（こちらは `name` が存在しない場合、 `undefined` を返します）。これは主に、 JavaScript 以外の DOM 実装で有用です。

JavaScript での使用法
----------------

`HTMLCollection` は名前とインデックスの両方で、自身のメンバーをプロパティとして直接公開します。HTML の ID は `:` や `.` を有効な文字として含むことができ、これらはプロパティとしてアクセスするために角括弧構文を使用しなければなりません。現在の `HTMLCollections` は純粋な数値の ID を認識しません。このような ID は配列へのアクセスと競合しますが、HTML5 では許容しています。

例えば、文書内に 1 つの `<form>` 要素があるものと仮定してください。その `id` は `myForm` です。


```js
let elem1, elem2;

// document.forms は HTMLCollection

elem1 = document.forms[0];
elem2 = document.forms.item(0);

alert(elem1 === elem2); // 表示: "true"

elem1 = document.forms.myForm;
elem2 = document.forms.namedItem("myForm");

alert(elem1 === elem2); // 表示: "true"

elem1 = document.forms["named.item.with.periods"];
```

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-htmlcollection |

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

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

関連情報
----

* `NodeList`
* `HTMLFormControlsCollection`, `HTMLOptionsCollection`
CSSImportRule
=============

**`CSSImportRule`** は `@import` アットルールを表します。

CSSRule

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

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

`CSSImportRule.href` 読取専用 

`@import` ルールで指定された URL を返します。

`CSSImportRule.layerName` 読取専用 

`@import` ルールで宣言されたカスケードレイヤーの名前を返します。レイヤーが無名の場合は空文字列、ルールが何も宣言していない場合は `null` を返します。

`CSSImportRule.media`

関連づけられたスタイルシートの `media` 属性の値を返します。

`CSSImportRule.styleSheet` 読取専用 

関連づけられたスタイルシートを返します。

`CSSImportRule.supportsText` 読取専用  
Experimental

`@import` ルールで指定した supports の条件を返します。

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

*祖先である `CSSRule` から継承したメソッドがあります。*

例
-

この文書には単一のスタイルシートが記述されており、そのスタイルシートには単一の `@import` ルールだけが含まれています。したがって、 CSS ルールのリストの最初の項目は `CSSImportRule` になります。


```css
@import url("style.css") screen;
```



```js
const myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]); // CSSImportRule インスタンスオブジェクト
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-cssimportrule-interface |

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

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

**`CSSGroupingRule`** は CSS オブジェクトモデルのインターフェイスで、内部に他のルールを持つあらゆる CSS のアットルールを表します。

CSSRule

CSSGroupingRuleプロパティ
-----

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

`CSSGroupingRule.cssRules`読取専用 

`CSSRuleList` で、このメディアルールの CSS ルールを返します。

メソッド
----

*このインターフェイスには `CSSRule` から継承したメソッドもあります。*

`CSSGroupingRule.deleteRule`

このスタイルシートからルールを削除します。

`CSSGroupingRule.insertRule`

現在のスタイルシートに新しいスタイルルールを挿入します。

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-cssgroupingrule-interface |

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

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

関連情報
----

* 動的なスタイル情報の使用
MIDIOutput
==========

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

Web MIDI API の **`MIDIOutput`** インターフェイスは、出力デバイスのキューにメッセージを追加するメソッドと、メッセージのキューをクリアするメソッドを提供します。

EventTarget

MIDIPort

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

*このインターフェイスは固有のプロパティを実装していませんが、`MIDIPort` からプロパティを継承しています。*

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

*このインターフェイスは `MIDIPort` からもメソッドを継承します。*

`MIDIoutput.send()`

MIDI ポートに送信するメッセージをキューに追加します。

`MIDIOutput.clear()`

キュー上の送信待ち中のデータをすべてクリアします。

例
-

以下の例は、真ん中のドをすぐに MIDI チャンネル 1 に送信します。


```js
function sendMiddleC(midiAccess, portID) {
  const noteOnMessage = [0x90, 60, 0x7f]; // ノートオン、真ん中のド、フルベロシティー
  const output = midiAccess.outputs.get(portID);
  output.send(noteOnMessage); // メッセージを送信する
}
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # MIDIOutput |

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

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