recursal/MDN huggingface dataset:
ServiceWorker
=============

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

**`ServiceWorker`** はサービスワーカー API のインターフェイスで、サービスワーカーへの参照を提供します。複数の閲覧コンテキスト（ページ、ワーカー、など）を、同じサービスワーカーに一意の `ServiceWorker` オブジェクトによって関連付けることができます。

`ServiceWorker` オブジェクトは `ServiceWorkerRegistration.active` プロパティと、 `ServiceWorkerContainer.controller` プロパティ — これはアクティブ化されたサービスワーカーであり、ページを制御するものです（サービスワーカーが正常に登録されたら、制御されたページは再読み込みされます） — のから利用可能です。

`ServiceWorker` インターフェイスへは、 `install` や `activate` 、そして `fetch` を含む機能的なイベントといった一連のライフサイクルイベントが送られます。`ServiceWorker` オブジェクトは、ライフサイクルに関係する状態 (`ServiceWorker.state`) を持っています。

EventTarget

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

*`ServiceWorker` インターフェイスは、親となる `EventTarget` からプロパティを継承しています。*

`ServiceWorker.scriptURL` 読取専用 

`ServiceWorkerRegistration` の一部と定義されている、`ServiceWorker` のスクリプト URL がシリアライズされたもの返します。この URL はその `ServiceWorker` を登録している文書と同一オリジン上でなければなりません。

`ServiceWorker.state` 読取専用 

この サービスワーカーの状態を返します。`parsed`、`installing`、`installed`、`activating`、`activated`、`redundant` のいずれかの値を返します。

メソッド
----

*`ServiceWorker` インターフェイスは、親となる `EventTarget` からメソッドを継承しています。*

`ServiceWorker.postMessage()`

メッセージをこのサービスワーカーへ送信します。このメッセージは、あらゆる構造化クローン可能な JavaScript オブジェクトにすることができます。このメッセージは、サービスワーカーのグローバルスコープの `message` イベントを使用して送信されます。

イベント
----

`statechange`

`ServiceWorker.state` が変化したときに発生します。

`error`

`ServiceWorker` オブジェクトの内部でエラーが発生したときに発行されます。

例
-

このコードスニペットは、サービスワーカーの登録イベントサンプル（ライブデモ）に掲載されています。このコードは、`ServiceWorker.state` の変化を待ち受け、その値を返しています。


```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("service-worker.js", {
      scope: "./",
    })
    .then((registration) => {
      let serviceWorker;
      if (registration.installing) {
        serviceWorker = registration.installing;
        document.querySelector("#kind").textContent = "installing";
      } else if (registration.waiting) {
        serviceWorker = registration.waiting;
        document.querySelector("#kind").textContent = "waiting";
      } else if (registration.active) {
        serviceWorker = registration.active;
        document.querySelector("#kind").textContent = "active";
      }
      if (serviceWorker) {
        // logState(serviceWorker.state);
        serviceWorker.addEventListener("statechange", (e) => {
          // logState(e.target.state);
        });
      }
    })
    .catch((error) => {
      // 登録時に何か問題が発生した。service-worker.js ファイルが利用できないか、
      // 構文エラーが含まれている可能性がある。
    });
} else {
  // 現在のブラウザーはサービスワーカーに対応していない。
  // おそらく、古すぎるか、安全なコンテキストにない。
}
```

仕様書
---

| Specification |
| --- |
| Service Workers # serviceworker-interface |

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

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

関連
--

* The Offline Cookbook(service workers)
* サービスワーカーの使用
* Service worker basic code example
* Is ServiceWorker ready?
* `Promise`
* ウェブワーカーの使用
CSS オブジェクトモデル (CSSOM)
=====================

**CSS オブジェクトモデル**は CSS を JavaScript から操作するための API の集合です。これは DOM にとても良く似ていますが、 HTML ではなく CSS のためのものです。これにより CSS スタイルを動的に読んだり変更したりすることができます。

CSS の値は型を使わずに表現しますので、 `String` オブジェクトを使用します。

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

* `AnimationEvent`
* `CaretPosition`
* `CSS`
* `CSSCharsetRule`
* `CSSConditionRule`
* `CSSCounterStyleRule` (en-US)
* `CSSFontFaceRule`
* `CSSFontFeatureValuesMap`
* `CSSFontFeatureValuesRule` (en-US)
* `CSSGroupingRule`
* `CSSImportRule`
* `CSSKeyframeRule`
* `CSSKeyframesRule`
* `CSSMarginRule`
* `CSSMediaRule`
* `CSSNamespaceRule`
* `CSSPageRule`
* `CSSRule`
* `CSSRuleList`
* `CSSStyleDeclaration`
* `CSSStyleSheet`
* `CSSStyleRule`
* `CSSSupportsRule`
* `CSSVariablesMap`
* `CSSViewportRule`
* `FontFace`
* `FontFaceSet`
* `FontFaceSetLoadEvent`
* `GetStyleUtils`
* `MediaList`
* `MediaQueryList`
* `MediaQueryListEvent` (en-US)
* `Screen`
* `StyleSheet`
* `StyleSheetList`
* `TransitionEvent`

他にも CSSOM に関する仕様書で拡張されているインターフェイスがあります。 `Document`, `Window`, `Element`, `HTMLElement`, `HTMLImageElement`, `Range`, `MouseEvent`, `SVGElement` です。

### CSS 型付きオブジェクトモデル 
Experimental

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

* `CSSImageValue` 
Experimental
* `CSSKeywordValue` 
Experimental
* `CSSMathInvert` (en-US) 
Experimental
* `CSSMathMax` (en-US) 
Experimental
* `CSSMathMin` (en-US) 
Experimental
* `CSSMathNegate` (en-US) 
Experimental
* `CSSMathProduct` (en-US) 
Experimental
* `CSSMathSum` (en-US) 
Experimental
* `CSSMathValue` (en-US) 
Experimental
* `CSSMatrixComponent` (en-US) 
Experimental
* `CSSNumericArray` (en-US) 
Experimental
* `CSSNumericValue` 
Experimental
* `CSSPerspective` (en-US) 
Experimental
* `CSSPositionValue` (en-US) 
Experimental
* `CSSRotate` (en-US) 
Experimental
* `CSSScale` (en-US) 
Experimental
* `CSSSkew` 
Experimental
* `CSSSkewX` (en-US) 
Experimental
* `CSSSkewY` (en-US) 
Experimental
* `CSSStyleValue` 
Experimental
* `CSSTransformComponent` 
Experimental
* `CSSTransformValue` 
Experimental
* `CSSTranslate` (en-US) 
Experimental
* `CSSUnitValue` (en-US) 
Experimental
* `CSSUnparsedValue` 
Experimental
* `CSSVariableReferenceValue` 
Experimental
* `StylePropertyMap` 
Experimental
* `StylePropertyMapReadOnly` 
Experimental
### 廃止された CSSOM インターフェイス 
非推奨

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

* `CSSPrimitiveValue` (en-US) 
非推奨
* `CSSValue` 
非推奨
* `CSSValueList` (en-US) 
非推奨
チュートリアル
-------

* 要素の寸法の決定 (これは DHTML/Ajax 時代に作られたのでいくらか更新が必要です)。
* 画面の向きの管理
仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM)  |
| CSSOM View Module  |
| CSS Typed OM Level 1  |

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

この機能のすべてはさまざまなブラウザーで何年かけて少しずつ追加されてきました。これは簡単なページにまとめることができないとても複雑なプロセスでした。利用できるかについてはそれぞれのインターフェイスを参照してください。

関連情報
----

* Document Object Model (DOM)
* Houdini
GamepadButton
=============

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

**`GamepadButton`** インターフェイスは、ゲームパッドなどのコントローラーの各ボタンを定義します。このインターフェイスによって、コントローラー上で使用できるボタンの状態を確認することができます。

`GamepadButton` オブジェクトは、`Gamepad` インターフェイスの `buttons` プロパティから取得できます。

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

`GamepadButton.pressed` 読取専用 

論理値で、ボタンが押されているかどうかを示します。ボタンが押されている場合は `true`、押されていない場合は `false` になります。

`GamepadButton.touched` 読取専用 

論理値で、ボタンが現在タッチされている (`true`) か、タッチされていない (`false`) かを示します。

`GamepadButton.value` 読取専用 

多くのモダンなゲームパッドにあるトリガーなどのアナログボタンの現在の状態を示す浮動小数点数です。この値は 0.0 から 1.0 までの値に正規化されており、0.0 はボタンが押されていない状態で、1.0 はボタンが完全に押されている状態を示します。

例
-

以下の例では、各ボタンの値は `GamepadButton` オブジェクトの配列に格納されます。使用するプロパティはこのオブジェクトの `GamepadButton.value` または `GamepadButton.pressed` プロパティのどちらかであり、どちらを使用すればよいかはボタンの種類に依存します。この例ではどちらにも対応しています。


```js
function gameLoop() {
  const gp = navigator.getGamepads()[0];

  if (gp.buttons[0].value > 0 || gp.buttons[0].pressed) {
    b--;
  } else if (gp.buttons[1].value > 0 || gp.buttons[1].pressed) {
    a++;
  } else if (gp.buttons[2].value > 0 || gp.buttons[2].pressed) {
    b++;
  } else if (gp.buttons[3].value > 0 || gp.buttons[3].pressed) {
    a--;
  }

  ball.style.left = `${a \* 2}px`; // ball is a UI widget
  ball.style.top = `${b \* 2}px`;

  requestAnimationFrame(gameLoop);
}
```

仕様書
---

| Specification |
| --- |
| Gamepad # gamepadbutton-interface |

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

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

関連情報
----

* ゲームパッド API の使用
SyncEvent
=========

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

**`SyncEvent`** インターフェイスは、 ServiceWorker の `ServiceWorkerGlobalScope` でディスパッチされる同期アクションを表します。

このインターフェイスは `ExtendableEvent` インターフェイスを継承しています。

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

`SyncEvent.SyncEvent()`

新規の `SyncEvent` オブジェクトを作成します。

プロパティ
-----

*祖先である `Event`*. からプロパティを継承します。

`SyncEvent.tag` 読取専用 

この `SyncEvent` の開発者定義の識別子を返します。

`SyncEvent.lastChance` 読取専用 

ユーザーエージェントが現在の試行の後に同期の試行をこれ以上行わない場合に `true` を返します。

関数
--

*親である* *`ExtendableEvent`* から関数を継承します。

無し。

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

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

**`FileSystemFileEntry`** はファイルとディレクトリー項目 API のインターフェイスで、ファイルシステム内のファイルを表します。このファイルの属性を記述するプロパティと、そのファイルを読み出すために使用する `File` オブジェクトを生成する `file()` メソッドを提供します。

FileSystemEntry

(en-US)

FileSystemFileEntryプロパティ
-----

*親インターフェイス `FileSystemEntry` (en-US) のプロパティを継承していますが、このインターフェイスに固有のプロパティはありません。*

メソッド
----

`file()`

ファイルの読み込みに使用できる新しい `File` オブジェクトを生成します。

仕様書
---

| Specification |
| --- |
| File and Directory Entries API # api-fileentry |

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

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

関連情報
----

* ファイルとディレクトリー項目 API
* ファイルとディレクトリー項目 API の紹介
ExtendableCookieChangeEvent
===========================

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

「Cookie Store API」の **`ExtendableCookieChangeEvent`** インターフェイスは、Cookie が何か変更された時 `ServiceWorkerRegistration.oncookiechange()` に渡されるイベント型です。Cookie の変更イベントは、Cookie と種類 (`"changed"` または `"deleted"`) からなります。

`ExtendableCookieChangeEvent` を発生させる Cookie の変更は、以下のものがあります。

* Cookie が新規作成され、すぐには削除されません。この場合の `type` は `"changed"` です。
* Cookie が新規作成され、すぐに削除されます。この場合の `type` は `"deleted"` です。
* Cookie が削除されます。この場合の `type` は `"deleted"` です。

**メモ:** 同じ名前・ドメイン・パスの他の Cookie が挿入されることにより置き換えられる Cookie は無視され、変更イベントを発生させません。

Event

ExtendableEvent

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

`ExtendableCookieChangeEvent()`

新しい `ExtendableCookieChangeEvent` を生成します。

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

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

`ExtendableCookieChangeEvent.changed` 読取専用 

変更された Cookie が格納された配列を返します。

`ExtendableCookieChangeEvent.deleted` 読取専用 

削除された Cookie が格納された配列を返します。

例
-

以下の例では、`CookieStoreManager.getSubscriptions()` を用いて現在ある購読のリストを取得します。(サービスワーカーでは、イベントを監視するには購読が必要です) `CookieStoreManager.unsubscribe()` を用いて既存の購読を解除し、`CookieStoreManager.subscribe()` を用いて名前が `'COOKIE_NAME'` である Cookie を購読します。この Cookie が変更されると、イベントリスナーがイベントをコンソールに記録します。これは、変化が起きた Cookie が格納された `changed` プロパティまたは `deleted` プロパティを持つ `ExtendableCookieChangeEvent` オブジェクトです。


```js
self.addEventListener("activate", (event) => {
  event.waitUntil(async () => {
    const subscriptions = await self.registration.cookies.getSubscriptions();
    await self.registration.cookies.unsubscribe(subscriptions);

    await self.registration.cookies.subscribe([
      {
        name: "COOKIE\_NAME",
      },
    ]);
  });
});

self.addEventListener("cookiechange", (event) => {
  console.log(event);
});
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # ExtendableCookieChangeEvent |

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

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

**`WebGLProgram`** は WebGL API の一部で、 は、頂点シェーダーとフラグメントシェーダー（どちらも GLSL で書かれています）の 2 つのコンパイル済み `WebGLShader` の組み合わせです。

WebGLObject

WebGLProgram
`WebGLProgram` を作成するには、 GL コンテキストの `createProgram()` 関数を呼び出します。 `attachShader()` を使用してシェーダープログラムを割り当てた後、使用可能なプログラムにリンクします。以下のコードに示します。


```js
const program = gl.createProgram();

// 既存のシェーダーを取り付ける
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

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


上の例の `vertexShader` と `fragmentShader` の作成については `WebGLShader` を参照してください。

例
-

### プログラムの使用

プログラムを使って実際に作業を行うには、 GPU にプログラムを使用するように指示し、適切なデータと設定オプションをバインドし、最後に画面に何かを描画します。


```js
// プログラムを使用
gl.useProgram(program);

// 既存の属性データをバインド
gl.bindBuffer(gl.ARRAY\_BUFFER, buffer);
gl.enableVertexAttribArray(attributeLocation);
gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);

// 単一の三角形を描画
gl.drawArrays(gl.TRIANGLES, 0, 3);
```

### プログラムの削除

プログラムのリンクにエラーがあった場合、または既存のプログラムを削除したい場合は、 `WebGLRenderingContext.deleteProgram()` (en-US) を実行するだけです。これにより、リンクされたプログラムのメモリが解放されます。


```js
gl.deleteProgram(program);
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.6 |

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

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

関連情報
----

* `WebGLShader`
* `WebGLRenderingContext.attachShader()`
* `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)
USBEndpoint
===========

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 の `USBEndpoint` インターフェイスは、USB デバイスが提供するエンドポイントの情報を提供します。エンドポイントは、デバイスに送信またはデバイスから受信する単方向のデータストリームを表します。

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

`USBEndpoint()` 
Experimental

渡された `USBAlternateInterface` の指定のエンドポイント番号と転送方向のエンドポイントの情報が格納される新しい `USBEndpoint` オブジェクトを生成します。

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

`USBEndpoint.endpointNumber` 
Experimental

このエンドポイントの「エンドポイント番号」を返します。これは、このエンドポイントを定義しているエンドポイントディスクリプターの `bEndpointAddress` フィールドから取り出した 1 から 15 までの値です。この値は、`USBDevice` のメソッドを呼ぶ際にエンドポイントを特定するのに用います。

`USBEndpoint.direction` 
Experimental

このエンドポイントがデータを転送する方向を返します。以下のいずれかです。

* `"in"` — データはデバイスからホストに転送されます。
* `"out"` — データはホストからデバイスに転送されます。

`USBEndpoint.type` 
Experimental

エンドポイントの種類を返します。以下のいずれかです。

* `"bulk"` — 大きいペイロード向けの信頼性があるデータ転送を提供します。バルクエンドポイントで送信されるデータは、転送されるかエラーを発生させることが保証されますが、他のデータトラフィックに割り込まれる可能性があります。
* `"interrupt"` — 小さいペイロード向けの信頼性があるデータ転送を提供します。インタラプトエンドポイントで送信されるデータは、転送されるかエラーを発生させることが保証され、さらに転送用に専用のバス時間が与えられます。
* `"isochronous"` — 定期的に転送する必要があるペイロード向けの信頼性がないデータ転送を提供します。専用のバス時間が与えられますが、締切を過ぎるとデータは破棄されます。

`USBEndpoint.packetSize` 
Experimental

このエンドポイントで送信されるデータが分割されるパケットのサイズを返します。

例
-

開発者はデバイスのエンドポイントの完全な配置を事前に知っていることもありますが、実行時に検出しなければならない場合もあります。たとえば、USB シリアルデバイスはバルク入力と出力のエンドポイントを提供しなければなりませんが、それらのエンドポイント番号はデバイスが提供する他のインターフェイスによって変わるでしょう。

このコードは、まず USB CDC インターフェイスクラスを実装しているインターフェイスを探し、続いて種類と方向を用いて候補となるエンドポイントを特定することにより、正しいエンドポイントを特定します。


```js
let inEndpoint = undefined;
let outEndpoint = undefined;

for (const { alternates } of device.configuration.interfaces) {
  // オルタネイトインターフェイスを複数持たないデバイスのみに対応します。
  const alternate = alternates[0];

  // USB CDC クラスを実装しているインターフェイスを特定します。
  const USB\_CDC\_CLASS = 10;
  if (alternate.interfaceClass !== USB\_CDC\_CLASS) {
    continue;
  }

  for (const endpoint of alternate.endpoints) {
    // バルク転送のエンドポイントを特定します。
    if (endpoint.type !== "bulk") {
      continue;
    }

    if (endpoint.direction === "in") {
      inEndpoint = endpoint.endpointNumber;
    } else if (endpoint.direction === "out") {
      outEndpoint = endpoint.endpointNumber;
    }
  }
}
```

仕様書
---

| Specification |
| --- |
| WebUSB API # usbendpoint-interface |

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

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

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

**`WakeLockSentinel`** は画面起動ロック API のインターフェイスで、基礎となるプラットフォームの起動ロックへのハンドルを提供し、手動で解放および再取得することができます。起動ロックを表す `Object` は `navigator.wakelock.request()` メソッドを介して返されます。

取得した `WakeLockSentinel` は `release()` メソッドによって手動で解放するか、プラットフォームの起動ロックによって自動的に解放することが可能です。これは、文書が非アクティブになったり、見えなくなったりした場合、端末の電力が低下した場合、ユーザーが省電力モードをオンにした場合に発生する可能性があります。与えられた起動ロック種別のすべての `WakeLockSentinel` インスタンスを解放すると、基盤となるプラットフォームの起動ロックが解放されます。

EventTarget

WakeLockSentinelプロパティ
-----

*このインターフェイスは以下のプロパティを提供しています。*

`released` 読取専用 

論理値で、 `WakeLockSentinel` が解放されたかどうかを示します。

`type` 読取専用 

 文字列で、取得した現在の `WakeLockSentinel` の種別を示します。
 返値は次の通りです。


* `'screen'`: 画面の起動ロックです。端末の画面が暗くなったりロックされたりすることを防ぎます。

イベント
----

`release`

`release()` メソッドが呼び出されるか、起動ロックがユーザーエージェントによって解放されると発行されます。

メソッド
----

`release()`

`WakeLockSentinel` の解放を行い、解放に成功したら解決する `Promise` を返します。

例
-

この例では、 `WakeLockSentinel` を要求する非同期関数を作成します。取得した後は、適切な UI への反映を行うために使用することができる `release` イベントを待ちます。見張り (sentinel) は適切な操作で取得したり解放したりすることができます。


```js
// 起動ロックの参照を作成
let wakeLock = null;

// 起動ロックを要求するための非同期関数を作成
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request("screen");

    // release イベントを待ち受け
    wakeLock.addEventListener("release", () => {
      // 起動ロックが解放されたら、それに合わせて UI を変更する
    });
  } catch (err) {
    // 起動ロックに失敗した場合 - ふつうはバッテリーなどシステム関連
  }
};

wakeLockOnButton.addEventListener("click", () => {
  requestWakeLock();
});

wakeLockOffButton.addEventListener("click", () => {
  if (wakeLock !== null) {
    wakeLock.release().then(() => {
      wakeLock = null;
    });
  }
});
```

仕様書
---

| Specification |
| --- |
| Screen Wake Lock API # the-wakelocksentinel-interface |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
WebSocket API (WebSockets)
==========================

**WebSocket API** は、ユーザーのブラウザーとサーバー間で対話的な通信セッションを開くことができる先進技術です。この API によって、サーバーにメッセージを送信したり、応答をサーバーにポーリングすることなく、イベント駆動型のレスポンスを受信したりすることができます。

**メモ:** WebSocket のコネクションは機能的にどこか標準 Unix スタイルのソケットに似ていますが、関連はありません。

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

`WebSocket`

WebSocket サーバーに接続し、その接続を通じてデータを送受信するための主要インターフェイス

`CloseEvent`

接続が閉じた時に WebSocket オブジェクトによって送信されるイベントです。

`MessageEvent`

サーバーからメッセージを受信した時に WebSocket オブジェクトによって送信されるイベント

ガイド
---

* WebSocket クライアントアプリケーションの記述
* WebSocket サーバーの記述
* WebSocket サーバーを C# で書く
* WebSocket サーバーを Java で書く
* WebSocket サーバーを JavaScript (Deno) で書く
ツール
---

* AsyncAPI: WebSocket のようなプロトコルに基づいたイベントドリブン型アーキテクチャを記述するための仕様です。 OpenAPI 仕様で REST API を記述するのと同じように、 WebSocket ベースの API を記述するために使用することができます。 WebSocket で AsyncAPI の利用を検討すべき理由と利用する方法を紹介します。
* HumbleNet: ブラウザーで動作するクロスプラットフォームのネットワークライブラリです。ブラウザー間の違いを抽象化する WebSocket や WebRTC の C ラッパー、ゲームやその他のアプリで複数ユーザーのネットワーク機能を作成するものから成ります。
* µWebSockets: C++11 および Node.js で書かれた可用性の高い WebSocket サーバーとクライアントの実装です。
* Socket.IO: 長いポーリングと WebSocket ベースのサードバーティ―の Node.js 用転送プロトコルです。
* SocketCluster: スケーラビリティに焦点を当てた Node.js 用の pub/sub WebSocket フレームワークです。
* WebSocket-Node: Node.js 用の WebSocket サーバー API 実装です。
* Total.js: Node.js 用の ウェブアプリケーションフレームワーク(使用例: WebSocket chat)
* Faye: Node.js 用の WebSocket (双方向接続) と EventSource (片方向接続) サーバーおよびクライアント
* SignalR: SignalR は単一のコードだけで、もし WebSockets が使用可能な場合、基盤として WebSockets を使用し、そうでない場合はほかの代替技術にフォールバックします。
* Caddy: WebSocket として任意のコマンド (stdin/stdout) を中継することができるウェブサーバーです。
* ws: Node.js のための有名な WebSocket クライアント＆サーバーライブラリです。
* jsonrpc-bidirectional: 非同期の RPC で、単一の接続を用いて、サーバー上にエクスポートされた機能と、同時にクライアント上のものがあります (クライアントがサーバーを呼び出すことができ、サーバーもクライアントを呼び出すことができます)。
* cowboy: Cowboy は高速で最新の HTTP サーバーで、 Erlang/OTP のためのものであり、 WebSocket に対応しています。
* ZeroMQ: ZeroMQ は、インプロセス、IPC、TCP、UDP、TIPC、マルチキャスト、WebSocket でメッセージを伝送する組み込み可能なネットワーキングライブラリーです。
* WebSocket King: WebSocket サーバーの開発、テスト、作業を支援するクライアントツールです。
* PHP WebSocket Server: WebSocket の wss:// または ws:// および通常ソケットの ssl://, tcp:// を介して接続を処理するために PHP で書かれたサーバーです。
* Channels: WebSocket（および長時間動作する非同期接続を必要とする他のプロトコル）の対応を追加する Django ライブラリーです。
* Flask-SocketIO: Flask アプリケーションに、クライアントとサーバー間の低遅延な双方向通信を提供します。
* Gorilla WebSocket: Gorilla WebSocket は、WebSocket プロトコルの Go による実装です。
関連トピック
------

* AJAX
* JavaScript
仕様書
---

| Specification |
| --- |
| WebSockets Standard # the-websocket-interface |

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

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

関連情報
----

* RFC 6455 — The WebSocket Protocol
* WebSocket API Specification
* サーバー送信イベント
HIDInputReportEvent
===================

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

`WebHID API` の **`HIDInputReportEvent`** インターフェイスは、割り当てられた HID デバイスのいずれかから Input レポートを受信した時、`HIDDevice.inputreport_event` に渡されます。

Event

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

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

`HIDInputReportEvent.data` 読取専用  
Experimental

Input レポートから読み取ったデータが入った `DataView` です。HID インターフェイスがレポート ID を用いている場合、`reportId` は含まれません。

`HIDInputReportEvent.device` 読取専用  
Experimental

この Input レポートを送信した HID インターフェイスを表す `HIDDevice` のインスタンスです。

`HIDInputReportEvent.reportId` 読取専用  
Experimental

レポートを識別する 1 バイトの接頭辞、もしくは HID インターフェイスがレポート ID を用いていない場合 0 です。

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

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

例
-

この例では、アプリケーションが Joy-Con Right デバイスでどのボタンが押されたかを検出するために `inputReport` を監視します。記事 Connecting to uncommon HID devices で、他の例や動くデモを見ることができます。


```js
device.addEventListener("inputreport", (event) => {
  const { data, device, reportId } = event;

  // Joy-Con Right デバイスで、かつ特定のレポート ID のイベントのみを扱います。
  if (device.productId !== 0x2007 && reportId !== 0x3f) return;

  const value = data.getUint8(0);
  if (value === 0) return;

  const someButtons = { 1: "A", 2: "X", 4: "B", 8: "Y" };
  console.log(`ユーザーがボタン ${someButtons[value]} を押しました。`);
});
```

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hidinputreportevent |

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

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

**`ClipboardItem`** はクリップボード API のインターフェイスで、 クリップボード API を介して読み書きする単一の形式の項目を表します。読み書きはそれぞれ `clipboard.read()` と `clipboard.write()` で行います。

データを表現するために **`ClipboardItem`** インターフェイスを持つことの利点は、開発者がファイルタイプやデータの様々な範囲に簡単に対処できることです。

クリップボードの内容へのアクセスは権限 API の下で制限されています。クリップボードへの書き込み権限は、ページがアクティブなタブにあるときに自動的に付与されます。 `clipboard-read` 権限は要求する必要があり、これはクリップボードからデータを読もうとすることで行えます。

**メモ:** テキストを扱うには、 `Clipboard` インターフェイスの `Clipboard.readText()` および `Clipboard.writeText()` メソッドをご覧ください。

**メモ:** 一度に渡すことができるクリップボードの項目は 1 つだけです。

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

`ClipboardItem()`

新しい **ClipboardItem`** オブジェクトを作成します。キーは MIME タイプで、値は `Blob` です。

プロパティ
-----

*このインターフェイスは以下のプロパティを提供しています。*

`types` 読取専用 

この **`ClipboardItem`** 内で利用できる MIME タイプの配列 (`Array`) を返します。

`presentationStyle` 読取専用 

`"unspecified"`, `"inline"`, `"attachment"` のいずれかを返します。

メソッド
----

*このインターフェイスは以下のメソッドを定義しています。*

`getType()`

要求された MIME タイプ の `Blob` で解決するプロミス (`Promise`) を返します。 MIME タイプが見つからない場合はエラーになります。

例
-

### クリップボードへの書き込み

ここでは、`ClipboardItem()` に新しい `Fetch API` を記述し、その`レスポンスの blob()` メソッドを用いて、新しい `ClipboardItem` を生成しています。


```js
async function writeClipImg() {
  try {
    const imgURL = "/myimage.png";
    const data = await fetch(imgURL);
    const blob = await data.blob();

    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob,
      }),
    ]);
    console.log("Fetched image copied.");
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

### クリップボードからの読み取り

ここでは、 `clipboard.read()` メソッドでクリップボード上の全項目を返しています。次に、 `ClipboardItem.types` プロパティを利用して `getType()` の引数をセットし、対応する blob オブジェクトを返します。


```js
async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();

    for (const clipboardItem of clipboardItems) {
      for (const type of clipboardItem.types) {
        const blob = await clipboardItem.getType(type);
        // we can now use blob here
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

仕様書
---

| Specification |
| --- |
| Clipboard API and events # clipboarditem |

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

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