recursal/MDN huggingface dataset:
CountQueuingStrategy
====================

**`CountQueuingStrategy`** はストリーム API のインターフェイスで、ストリームの構築時に使用できる組み込みのチャンクカウントキューイング戦略を提供します。

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

`CountQueuingStrategy()`

新しい `CountQueuingStrategy` オブジェクトのインスタンスを作成します。

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

`CountQueuingStrategy.highWaterMark` 読取専用 

背圧が適用される前の内部キューに含まれているチャンクの総数です。

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

`CountQueuingStrategy.size()`

常に `1` を返します。

例
-


```js
const queueingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });

const writableStream = new WritableStream(
  {
    // シンクの実装
    write(chunk) {
      // …
    },
    close() {
      // …
    },
    abort(err) {
      console.log("Sink error:", err);
    },
  },
  queueingStrategy,
);

const size = queueingStrategy.size();
```

仕様書
---

| Specification |
| --- |
| Streams Standard # cqs-class |

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

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

関連情報
----

* Streams API
* `CountQueuingStrategy()` コンストラクター
* 内部キューとキューイング戦略
CustomEvent
===========

**`CustomEvent`** インターフェイスは、何らかの目的でアプリケーションから初期化されるイベントを表します。

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

Event

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

`CustomEvent()`

`CustomEvent` を生成します。

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

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

`CustomEvent.detail` 読取専用 

イベントが初期化されたときに渡された何らかのデータを返します。

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

*親である `Event` インターフェイスから継承したメソッドがあります。*

`CustomEvent.initCustomEvent()` 
非推奨

`CustomEvent` オブジェクトを初期化します。イベントが既に配信されている場合、このメソッドは何も行いません。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-customevent |

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

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

関連情報
----

* `Window.postMessage()`
* イベントの作成と起動
DragEvent
=========

**`DragEvent`** インターフェイスは、ドラッグ＆ドロップ操作を表す DOM イベントです。ユーザーはタッチ面でポインティングデバイス（マウスなど）を置くことによりドラッグを開始して、ポインタを新たな場所（別の DOM 要素など）にドラッグします。アプリケーションは独自の方法で、ドラッグ＆ドロップの操作を自由に解釈できます。

このインターフェイスは、`MouseEvent` および `Event` からプロパティを継承しています。

Event

UIEvent

MouseEvent

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

`DragEvent.dataTransfer` 読取専用 

ドラッグ＆ドロップ操作で動かされているデータです。

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

このインターフェイスにはコンストラクターがありますが、役に立つ DataTransfer オブジェクトをスクリプトから作成することはできません。これは `DataTransfer` オブジェクトに、ドラッグ＆ドロップ中にブラウザーによって調整される処理やセキュリティのモデルがあるためです。

`DragEvent()`

合成された信頼されてない DragEvent を作成します。

イベントの種類
-------

`drag`

このイベントは、要素や選択テキストのドラッグが開始されているときに発生します。

`dragend`

このイベントは、（マウスボタンを離したり、Esc キーを押下したりして）ドラッグ操作が終了したときに発生します。

`dragenter`

このイベントは、ドラッグされた要素や選択テキストが有効なドロップ先に入ったときに発生します。

`dragleave`

このイベントは、ドラッグされた要素や選択テキストが有効なドロップ先から出たときに発生します。

`dragover`

このイベントは、要素や選択テキストが有効なドロップ先の上をドラッグされたときに発生します（マウスが動いていない場合は 50 ミリ秒ごとに、それ以外は 5 ミリ秒ごと（遅い動作）か 1 ミリ秒ごと（速い動作）の間隔です。この発生パターンは `mouseover` とは異なります）。

`dragstart`

このイベントは、ユーザーが要素や選択テキストのドラッグを開始したときに発生します。

`drop`

このイベントは、要素や選択テキストが有効なドロップ先にドロップされたときに発生します。

例
-

各プロパティ、コンストラクター、イベントタイプおよびグローバルイベントハンドラーの例は、それぞれのリファレンスページに掲載しています。

仕様書
---

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

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

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

関連情報
----

* ドラッグ＆ドロップ
* ドラッグ操作
* 推奨されるドラッグの種類
* DataTransfer test - Paste or Drag
HTMLHeadElement
===============

**`HTMLHeadElement`** インターフェイスは、文書の説明的な情報やメタデータを持ちます。このオブジェクトはすべてのプロパティとメソッドを `HTMLElement` インターフェイスから継承しています。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLHeadElement.profile` 
非推奨

文字列で、 1 つ以上のメタデータプロファイルの URI を（ホワイトスペース区切りで）表します。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlheadelement |

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

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

関連情報
----

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

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` の **`HIDDevice`** インターフェイスは HID デバイスを表します。デバイスに関する情報にアクセスするためのプロパティと、接続を開いたり閉じたりするメソッド、そしてレポートの送受信を行うメソッドを提供します。

EventTarget

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

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

`HIDDevice.opened` 読取専用  
Experimental

`boolean` を返します。このデバイスとの接続が開かれているとき `true` になります。

`HIDDevice.vendorId` 読取専用  
Experimental

この HID デバイスのベンダー ID を返します。

`HIDDevice.productId` 読取専用  
Experimental

この HID デバイスのプロダクト ID を返します。

`HIDDevice.productName` 読取専用  
Experimental

この HID デバイスの製品名の文字列を返します。

`HIDDevice.collections` 読取専用  
Experimental

この HID デバイスのレポート形式の配列を返します。

### イベント

`inputreport` 
Experimental

レポートがデバイスから送られてきた時、発火します。

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

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

`HIDDevice.open()` 
Experimental

この HID デバイスとの接続を開きます。接続に成功したら解決する `Promise` を返します。

`HIDDevice.close()` 
Experimental

この HID デバイスとの接続を閉じます。操作が完了したら解決する `Promise` を返します。

`HIDDevice.forget()` 
Experimental

この HID デバイスとの接続を閉じ、アクセスの許可をリセットします。操作が完了したら解決する `Promise` を返します。

`HIDDevice.sendReport()` 
Experimental

この HID デバイスに Output レポートを送信します。操作が完了したら解決する `Promise` を返します。

`HIDDevice.sendFeatureReport()` 
Experimental

この HID デバイスに Feature レポートを送信します。操作が完了したら解決する `Promise` を返します。

`HIDDevice.receiveFeatureReport()` 
Experimental

この HID デバイスから Feature レポートを、`DataView` で解決する `Promise` として受信します。これにより、メッセージの内容に型を用いてアクセスできます。

例
-

この例では、アプリケーションが Joy-Con Right デバイスでどのボタンが押されたかを検出するために `inputReport` イベントを監視する方法を示します。


```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]} を押しました。`);
});
```


この例では、デバイスを点滅させるために `sendFeatureReport` を使用します。


```js
const reportId = 1;
for (let i = 0; i < 10; i++) {
  // 消灯させます
  await device.sendFeatureReport(reportId, Uint32Array.from([0, 0]));
  await waitFor(100);
  // 点灯させます
  await device.sendFeatureReport(reportId, Uint32Array.from([512, 0]));
  await waitFor(100);
}
```


記事 Connecting to uncommon HID devices で他の例や動くデモを見ることができます。

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hiddevice |

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

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

`<video>` 要素が実装している **`HTMLVideoElement`** インターフェイスは、動画ブジェクトを操作するための特別なプロパティとメソッドを提供します。また、 `HTMLMediaElement` と `HTMLElement` のプロパティとメソッドを継承しています。

対応しているメディア形式のリストは、ブラウザーによって異なります。動画を提供する際には、関連するすべてのブラウザーが対応している単一の形式で提供するか、対応する必要のあるすべてのブラウザーをカバーするように、異なる形式で複数の動画ソースを提供するかしてください。

EventTarget

Node

Element

HTMLElement

HTMLMediaElement

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

*祖先インターフェイスである `HTMLMediaElement` および `HTMLElement` から継承したプロパティがあります。*

`HTMLVideoElement.height` (en-US)

文字列で、 HTML の `height` 属性を反映し、表示領域の高さを CSS ピクセル数で指定します。

`HTMLVideoElement.poster`

文字列で、 HTML の `poster` 属性を反映し、動画データが利用できないときに表示する画像を指定します。

`HTMLVideoElement.videoHeight` 読取専用 

符号なし整数値で、リソースの内在的な高さを CSS ピクセル数で示す値を返します。メディアが利用できない場合は 0 を返します。

`HTMLVideoElement.videoWidth` 読取専用 

符号なし整数値で、リソースの内在的な幅を CSS ピクセル数で示す値を返します。メディアが利用できない場合は 0 を返します。

`HTMLVideoElement.width` (en-US)

文字列で、HTML の `width` 属性を反映し、表示領域の幅を CSS ピクセル数で指定します。

`HTMLVideoElement.disablePictureInPicture`

`disablePictureInPicture` プロパティは、ユーザーにピクチャインピクチャを提案しないようにするか、または自動的に要求するか、ユーザーエージェントにヒントを与えます。

### Gecko 固有のプロパティ

`HTMLVideoElement.mozParsedFrames` 
Non-standard
 読取専用  
非推奨

`unsigned long` で、メディアリソースから解析された動画のフレーム数を返します。

`HTMLVideoElement.mozDecodedFrames` 
Non-standard
 読取専用  
非推奨

`unsigned long` で、すでに画像にデコードされた、解析された動画のフレーム数を返します。

`HTMLVideoElement.mozPresentedFrames` 
Non-standard
 読取専用  
非推奨

`unsigned long` で、描画のためにレンダリングパイプラインに提示されたデコード済みのフレーム数を返します。

`HTMLVideoElement.mozPaintedFrames` 
Non-standard
 読取専用  
非推奨

`unsigned long` で、画面上に描画されたフレームの数を返します。

`HTMLVideoElement.mozFrameDelay` 
Non-standard
 読取専用  
非推奨

`double` で、最後にペイントされたビデオフレームの時刻をを秒単位で返します。

`HTMLVideoElement.mozHasAudio` 
Non-standard
 読取専用  
非推奨

論理値で、動画に音声があるかどうかを示す値を返します。

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

*親である `HTMLMediaElement` とその祖先である `HTMLElement` から継承したメソッドがあります。*

`HTMLVideoElement.getVideoPlaybackQuality()`

現在の再生指標を含む `VideoPlaybackQuality` (en-US) オブジェクトを返します。この情報には、ドロップされたフレーム数や破損したフレーム数、総フレーム数などが含まれます。

`HTMLVideoElement.requestPictureInPicture()`

ユーザーエージェントが動画をピクチャーインピクチャーモードにすることをリクエストします。

イベント
----

*親である `HTMLMediaElement` およびその祖先である `HTMLElement` から継承したイベントがあります。* これらのイベントを待ち受けするには、 `addEventListener()` を使用するか、イベントリスナーをこのインターフェイスの `onイベント名` に代入するかしてください。

`enterpictureinpicture`

ピクチャインピクチャモードになったときに `HTMLVideoElement` に送信されます。

`leavepictureinpicture`

ピクチャインピクチャモードになったときに `HTMLVideoElement` に送信されます。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlvideoelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<video>`
* 対応しているメディア形式
Credential
==========

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

**`Credential`** は資格情報管理 API のインターフェイスで、信頼の判断に必要なエンティティ（普通はユーザー）についての情報を提供します。

`Credential` オブジェクトには 4 つの異なる型になる可能性があります。

* `FederatedCredential`
* `IdentityCredential` (en-US)
* `PasswordCredential` (en-US)
* `PublicKeyCredential`
プロパティ
-----

`Credential.id` 読取専用 

認証情報の識別子の入った文字列を返します。これは GUID、ユーザー名、メールアドレスのいずれかになる可能性があります。

`Credential.type` 読取専用 

認証情報の種別の入った文字列を返します。有効な値は `password`, `federated`, `public-key` の何れかです。（それぞれ `PasswordCredential` (en-US), `FederatedCredential`, `PublicKeyCredential`）

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

なし

メソッド
----

なし

例
-


```js
let pwdCredential = new PasswordCredential({
  id: "example-username", // Username/ID
  name: "Carina Anand", // Display name
  password: "correct horse battery staple", // Password
});

console.assert(pwdCredential.type === "password");
```

仕様書
---

| Specification |
| --- |
| Credential Management Level 1 # the-credential-interface |

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

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

**`PushManager`** はプッシュ API のインターフェイスで、サードパーティのサーバーからの通知だけではなく、プッシュ通知へのリクエスト URL を取得するための方法を提供します。

このインターフェイスは、`ServiceWorkerRegistration.pushManager` プロパティを経由してアクセスできます。

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

`PushManager.supportedContentEncodings`

プッシュメッセージのペイロードの暗号化でサポートされているコンテンツエンコーディングの配列を返します。

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

`PushManager.getSubscription()`

既存のプッシュサブスクリプションを受け取ります。これは既存のプッシュサブスクリプションの詳細を含む `PushSubscription` に解決される `Promise` を返します。既存のプッシュサブスクリプションが存在しない場合、`null` 値で解決されます。

`PushManager.permissionState()`

現在の `PushSubscription` の許可状況で解決される `Promise` を返します。許可状況は `'granted'`、`'denied'`、`'prompt'` のいずれかです。

`PushManager.subscribe()`

プッシュサービスに加入します。プッシュサブスクリプションの詳細を含む `PushSubscription` オブジェクトで解決される `Promise` を返します。現在のサービスワーカーに既存のサブスクリプションがない場合、新しいプッシュサブスクリプションが生成されます。

### 非推奨のメソッド

`PushManager.hasPermission()` 
非推奨

リクエストしているウェブアプリの `PushPermissionStatus` で解決される `Promise` を返します。この値は `granted`、`denied`、`default` のいずれかです。`PushManager.permissionState()` で置き換えられました。

`PushManager.register()` 
非推奨

プッシュサービスに加入します。 `PushManager.subscribe()` で置き換えられました。

`PushManager.registrations()` 
非推奨

既存のプッシュサブスクリプションを受け取ります。`PushManager.getSubscription()` で置き換えられました。

`PushManager.unregister()` 
非推奨

指定したサブスクリプションのエンドポイントを登録解除して削除します。API の更新後は、サブスクリプションは `PushSubscription.unsubscribe()` メソッドを呼び出して登録解除することになりました。

例
-


```js
this.onpush = (event) => {
  console.log(event.data);
  // ここから、IndexedDB にデータを書き込んだり、いずれかのウィンドウに
  // それを送信したり、通知を表示したりできます。
};

navigator.serviceWorker
  .register("serviceworker.js")
  .then((serviceWorkerRegistration) => {
    serviceWorkerRegistration.pushManager.subscribe().then(
      (pushSubscription) => {
        console.log(pushSubscription.endpoint);
        // これでアプリケーションサーバーが使用できるプッシサブスクリプションの
        // 詳細が利用できるようになり、例えば XMLHttpRequest を使用してサーバーに
        // 送信することができます。
      },
      (error) => {
        console.error(error);
      },
    );
  });
```

仕様書
---

| Specification |
| --- |
| Push API # pushmanager-interface |

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

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

関連項目
----

* プッシュ API
* サービスワーカー API
ファイル API
========

概念と使い方
------

ファイル API は、ウェブアプリケーションがファイルとそのコンテンツにアクセスできるようにするためのものです。

ウェブアプリケーションは、ユーザーがファイルを利用可能にしたとき、すなわち file 型の `<input>` 要素を使用するか、ドラッグ＆ドロップを介するかのどちらかでファイルにアクセスすることができるようになります。

このようにして利用可能になった一連のファイルは `FileList` オブジェクトとして表され、ウェブアプリケーションが個々の `File` オブジェクトを取得することができるようになっています。そして、 `File` オブジェクトから、ファイル名、サイズ、型、最終更新日時などのメタデータにアクセスすることができます。

`File` オブジェクトを `FileReader` オブジェクトに渡すことで、ファイルの内容にアクセスすることができます。 `FileReader` インターフェイスは非同期ですが、ウェブワーカーでのみ利用できる同期バージョンが `FileReaderSync` インターフェイスで提供されています。

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

`Blob`

"Binary Large Object" を表し、不変の生データを持つファイルのようなオブジェクトを意味します。 `Blob` はテキストまたはバイナリーデータとして読み込むことができ、そのメソッドを使用してデータを処理できるように `ReadableStream` に変換されることがあります。

`File`

ファイルに関する情報を提供し、ウェブページ内の JavaScript がそのコンテンツにアクセスできるようにします。

`FileList`

HTML の `<input>` 要素の `files` プロパティが返す値です。これにより、 `<input type="file">` 要素で選択されたファイルのリストにアクセスすることができます。また、ドラッグ & ドロップ API を用いてウェブコンテンツにドロップされたファイルのリストにも使用されます。この使用方法の詳細については、 `DataTransfer` オブジェクトを参照してください。

`FileReader`

ウェブアプリケーションが、ユーザーのコンピューターに保存されているファイル（または生データバッファー）の内容を、 `File` または `Blob` オブジェクトを使って非同期に読み込むことができるようにするもので、ファイルまたはデータを指定して読み込みます。

`FileReaderSync`

ウェブアプリケーションが、ユーザーのコンピューターに保存されているファイル（または生データバッファー）の内容を、 `File` または `Blob` オブジェクトを使って同期的に読み込むことができるようにするもので、ファイルまたはデータを指定して読み込みます。

### 他のインターフェイスの拡張

`URL.createObjectURL()`

`File` または `Blob` オブジェクトを取得するために使用できる URL を作成します。

`URL.revokeObjectURL()`

`URL.createObjectURL()` を呼び出して作成された既存のオブジェクト URL を解放します。

例
-

### ファイルの読み取り

この例では、 file 型の `<input>` 要素を用意しており、ユーザーがファイルを選択すると、最初に選択したファイルの内容をテキストとして読み込み、結果を `<div>` で表示します。

#### HTML


```html
<input type="file" />
<div class="output"></div>
```


#### CSS


```css
.output {
  overflow: scroll;
  margin: 1rem 0;
  height: 200px;
}
```


#### JavaScript


```js
const fileInput = document.querySelector("input[type=file]");
const output = document.querySelector(".output");

fileInput.addEventListener("change", () => {
  const [file] = fileInput.files;
  if (file) {
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      output.innerText = reader.result;
    });
    reader.readAsText(file);
  }
});
```

### 結果

仕様書
---

| Specification |
| --- |
| File API  |

関連情報
----

* `<input type="file">`: file 型の入力要素
* `DataTransfer` インターフェイス
USBAlternateInterface
=====================

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 の `USBAlternateInterface` インターフェイスは、USB デバイスが提供するインターフェイスの特定のコンフィギュレーションの情報を提供します。インターフェイスには 1 個以上のオルタネイト設定があり、これらによりデバイスの動作モードに基づくエンドポイント一式の設定ができます。

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

`USBAlternateInterface()` 
Experimental

渡された `USBInterface` の指定のオルタネイト設定番号のオルタネイトインターフェイスの情報が格納される新しい `USBAlternateInterface` オブジェクトを生成します。

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

`USBAlternateInterface.alternateSetting` 読取専用  
Experimental

このインターフェイスのオルタネイト設定番号を返します。これはこのインターフェイスを定義しているインターフェイスディスクリプターの `bAlternateSetting` フィールドと一致します。

`USBAlternateInterface.interfaceClass` 読取専用  
Experimental

このインターフェイスのクラスを返します。これはこのインターフェイスを定義しているインターフェイスディスクリプターの `bInterfaceClass` フィールドと一致します。USB Implementers Forum により、このフィールド用の標準化された値が定義されています。値 `0xFF` はベンダー定義のインターフェイスを表します。

`USBAlternateInterface.interfaceSubclass` 読取専用  
Experimental

このインターフェイスのサブクラスを返します。これはこのインターフェイスを定義しているインターフェイスディスクリプターの `bInterfaceSubClass` フィールドと一致します。この値の意味は `interfaceClass` フィールドによります。

`USBAlternateInterface.interfaceProtocol` 読取専用  
Experimental

このインターフェイスがサポートしているプロトコルを返します。これはこのインターフェイスを定義しているインターフェイスディスクリプターの `bInterfaceProtocol` フィールドに一致します。この値の意味は、`interfaceClass` および `interfaceSubclass` フィールドによります。

`USBAlternateInterface.interfaceName` 読取専用  
Experimental

デバイスにより提供されていれば、このインターフェイスの名前を返します。これはこのインターフェイスを定義しているインターフェイスディスクリプターの `iInterface` フィールドで指定されたインデックスのストリングディスクリプターの値です。

`USBAlternateInterface.endpoints` 読取専用  
Experimental

このインターフェイスを構成するエンドポイントそれぞれを表す `USBEndpoint` インターフェイスのインスタンスが格納された配列を返します。

仕様書
---

| Specification |
| --- |
| WebUSB API # usbalternateinterface |

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

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

Page transition events fire when a webpage is being loaded or unloaded.

DOM Information
---------------

### 継承関係

EventPageTransitionEvent

メンバ
---

**PageTransitionEvent** オブジェクトは、以下のメンバを持ちます：

* Properties
### 属性

**PageTransitionEvent** オブジェクトには以下の属性があります。

| 属性名 | アクセス | 説明 |
| --- | --- | --- |
| **persisted** | Read-only | Web ページがキャッシュからロードされたかどうかを示す属性 |
HTMLTitleElement
================

**`HTMLTitleElement`** インターフェイスは文書の `<title>` が実装しています。この要素は `HTMLElement` インターフェイスのすべてのプロパティおよびメソッドを継承しています。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLTitleElement.text` (en-US)

文字列で、文書の題名のテキストを表し、またテキスト部分のみを表します。例えば、この例を考えてみてください。


```html
<!doctype html>
<html lang="en-US">
  <head>
    <title>
      Hello world! <span class="highlight">Isn't this wonderful</span> really?
    </title>
  </head>
  <body></body>
</html>
```



```js
const title = document.querySelector("title");
console.log(title.text); // yield: "Hello world! really?"
```


ご覧の通り、`span` タグとその内容はスキップされています。

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

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

例
-

`document.title` と `document.querySelector('title')` を混同しないでください。

前者は文書の題名の内側のテキスト値を設定したり取得したりするための単なるセッター/ゲッターメソッドで、後者は `HTMLTitleElement` オブジェクトです。ですから、`document.title.text = "Hello world!";` のように書くことはできません。

代わりに、シンプルに `document.title = "Hello world!";` と書くことができます。これは `document.querySelector('title').text = "Hello world!";` と等価です。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmltitleelement |

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

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

関連情報
----

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

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

**EyeDropper API** は、スポイトツールを作るための仕組みを提供します。このツールを使うと、ユーザーはブラウザーウィンドウ外を含む画面から色を採取できます。

概念
--

創造的なアプリケーションには、アプリケーション内で絵や図形から色を採取して再利用する機能があることが多いです。ウェブアプリケーションは、**EyeDropper API** を使うことで、ブラウザーによって提供される同様のスポイトツールを提供できます。

この API を使うと、ウェブアプリケーションはスポイトモードを開始できます。開始すると、カーソルが変わることで、ユーザーにこのモードが有効になっていることを知らせます。そして、ユーザーは画面上のどこからでも色を選択することができるし、`Escape` を押してスポイトモードをキャンセルすることもできます。

セキュリティとプライバシーの対策
----------------

悪意のあるウェブサイトがユーザーに気付かれずに画面からピクセルデータを取得するのを防ぐため、**EyeDropper API** は以下の対策を実装しています。

* この API は、ユーザーの意図なしでスポイトモードを開始させません。`EyeDropper.prototype.open()` メソッドは、ユーザーの操作 (ボタンのクリックなど) への反応としてのみ呼び出すことができます。
* ピクセルデータの取得には、またユーザーの意図が必要です。`EyeDropper.prototype.open()` が返すプロミスは、ユーザーの操作 (ピクセルのクリック) の結果としてのみ色の値で解決します。そのため、ユーザーに気付かれずにバックグラウンドでスポイトを使うことはできません。
* ユーザーがスポイトモードにさらに気付きやすくするため、ブラウザーはこのモードを目立つようにします。短い間をおいて通常のマウスカーソルが非表示になり、かわりに虫眼鏡が出現します。スポイトモードの開始後、ユーザーがピクセルを選択できるようになるまでにも間があり、ユーザーが確実に虫眼鏡を見られるようにします。
* ユーザーはまた、(`Escape` キーを押すことで) スポイトモードをいつでもキャンセルできます。
インターフェイス
--------

* `EyeDropper` 
Experimental
仕様書
---

| Specification |
| --- |
| EyeDropper API # eyedropper-interface |

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

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

関連情報
----

* Picking colors of any pixel on the screen with the EyeDropper API
* The EyeDropper API W3C/SMPTE Joint Workshop
HTMLOptionsCollection
=====================

**`HTMLOptionsCollection`** インターフェイスは、 HTML の `<option>` 要素の集合を（文書内の順序で）表し、リストから選択すると共に、任意で項目を変更することもできるメソッドやプロパティを提供します。このオブジェクトが返されるのは、 select の `options` プロパティからのみです。

HTMLCollection

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

`length`

`unsigned long` です。仕様上は、オプションで読み取り専用にしないことが認められています。値を下げることで末尾のオプションを削除したり、値を上げることで末尾に空白のオプションを追加したりすることができます。 Mozilla はこれを許可していますが、他の実装では DOMException が発生する可能性があります。

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

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

仕様書
---

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

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

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

関連情報
----

* HTMLCollection
連絡先ピッカー API
===========

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

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

連絡先ピッカー API (Contact Picker API) は、ユーザーが連絡先リストから項目を選択し、選択した項目の限定された詳細をウェブサイトやアプリケーションで共有できるようにします。

**メモ:** この API はウェブワーカーでは使用できません（`WorkerNavigator` に公開されていません）。

連絡先ピッカー API の概念と使用法
-------------------

連絡先へのアクセスは、長い間、ネイティブアプリケーションの中で利用できる機能でした。連絡先ピッカー API は、その機能をウェブアプリケーションに提供します。

用途としては、メールやチャットアプリケーションでメッセージを送る連絡先を選択したり、Voice over IP ( VOIP ) で使用する連絡先の電話番号を選択したり、ソーシャルプラットフォームに既に参加している連絡先を発見したりするために使用されることがあります。また、ユーザーエージェントは、ユーザー機器上の他のアプリケーションとの一貫した使い勝手も提供することができます。

`ContactsManager` インターフェイスの `select` メソッドを呼び出すと、ユーザーに連絡先ピッカーが存在し、ユーザーはウェブアプリケーションと共有する連絡先情報を選択することができます。連絡先ピッカーを表示する許可を得るには、ユーザーとの対話が必要です。また、連絡先へのアクセスは永続的ではなく、アプリケーションからの要求があるたびにユーザーがアクセスを許可する必要があります。

このAPIが利用可能なのは、安全な最上位の閲覧コンテキストからのみであり、連絡先データの機密性とプライバシーについてとても慎重に考慮されています。共有するデータを選択する責任はユーザーにあり、選択した連絡先の特定のデータのみを許可し、他の連絡先のデータには一切アクセスできないようになっています。

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

`ContactAddress`

物理的な住所を表します。

`ContactsManager`

ユーザーがウェブアプリケーションで連絡先の限定された詳細を選択し、共有する方法を提供します。

`Navigator.contacts`

他のすべての機能にアクセス可能な `ContactsManager` オブジェクトのインスタンスを返します。

例
-

### 機能検出

以下のコードは、連絡先ピッカー API に対応しているかどうかを調べるものです。


```js
const supported = "contacts" in navigator;
```

### 対応しているプロパティを調べる

以下の非同期関数は、`getProperties()` メソッドを使用して、対応しているプロパティを調べます。


```js
async function checkProperties() {
  const supportedProperties = await navigator.contacts.getProperties();
  if (supportedProperties.includes("name")) {
    // 名前に対応したコードを実行
  }
  if (supportedProperties.includes("email")) {
    // メールアドレスに対応したコードを実行
  }
  if (supportedProperties.includes("tel")) {
    // 電話番号に対応したコードを実行
  }
  if (supportedProperties.includes("address")) {
    // 住所に対応したコードを実行
  }
  if (supportedProperties.includes("icon")) {
    // アバターに対応したコードを実行
  }
}
```

### 連絡先の選択

以下の例では、それぞれの連絡先に対して取得するプロパティの配列を設定し、また、複数の連絡先が選択できるようにオプションオブジェクトを設定しています。

そして、`select()` メソッドを使用して、ユーザーに連絡先ピッカーインターフェイスを表示し、選択された結果を処理する非同期関数を定義しています。


```js
const props = ["name", "email", "tel", "address", "icon"];
const opts = { multiple: true };

async function getContacts() {
  try {
    const contacts = await navigator.contacts.select(props, opts);
    handleResults(contacts);
  } catch (ex) {
    // Handle any errors here.
  }
}
```


`handleResults()` は開発者が定義する関数です。

仕様書
---

| Specification |
| --- |
| Contact Picker API # contacts-manager |

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

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

関連情報
----

* A Contact Picker for the Web
* A Contact Picker demo on glitch