ピンチズームのジェスチャー - Web API

ピンチズームのジェスチャー
=============

アプリに*ジェスチャー*を追加すると、使い勝手が大幅に向上します。単純なシングルタッチの*スワイプ*ジェスチャーから、タッチポイント（別名*ポインター*）が異なる方向に移動する、より複雑なマルチタッチの*ツイスト*ジェスチャーまで、さまざまな種類のジェスチャーがあります。

この例では、*ピンチ/ズーム*ジェスチャーを検出する方法を示します。 これは、ポインターイベントを使用して、ユーザーが 2 つのポインターを互いに近づけるか遠ざけるかを検出します。

このアプリの*ライブ*版は GitHub で利用できます。 ソースコードは GitHub で入手できます。 プルリクエストやバグレポートは大歓迎です。

例
-

この例では、ポインターイベントを使用して、指、マウス、ペンなど、あらゆる種類の 2 つのポインティングデバイスを同時に検出します。 2 つのポインターを互いに近づけるピンチイン（ズームアウト、縮小）ジェスチャーでは、ターゲット要素の背景色が水色 (`lightblue`) に変わります。 2つのポインターを互いに遠ざけるピンチアウト（ズームイン、拡大）ジェスチャーでは、ターゲット要素の背景色がピンク (`pink`) に変わります。

### タッチターゲットの定義

アプリは `<div>` を使用してポインターのターゲット領域を定義します。

```html
<style>
 div {
 margin: 0em;
 padding: 2em;
 }
 #target {
 background: white;
 border: 1px solid black;
 }
</style>
```

### グローバルな状態

2 つのポインターのジェスチャーをサポートするには、さまざまなイベントフェーズでポインターのイベント状態を保存する必要があります。このアプリは、イベント状態をキャッシュするために 2 つのグローバル変数を使用します。

```js
// イベント状態をキャッシュするグローバル変数
const evCache = [];
const prevDiff = -1;
```

### イベントハンドラーの登録

イベントハンドラーは `pointerdown`、`pointermove`、`pointerup` のポインターイベントに登録します。 `pointerup` ハンドラーは `pointercancel`、`pointerout`、`pointerleave` のイベントにも使用します。 これら 4 つのイベントは、このアプリでは同じ意味を持っているからです。

```js
function init() {
  // ポインターターゲット用のイベントハンドラーをインストールする
  const el = document.getElementById("target");
  el.onpointerdown = pointerdownHandler;
  el.onpointermove = pointermoveHandler;

  // pointer{up,cancel,out,leave} イベントの意味は - このアプリでは -
  // 同じであるため、これらのイベントに同じハンドラーを使用する。
  el.onpointerup = pointerupHandler;
  el.onpointercancel = pointerupHandler;
  el.onpointerout = pointerupHandler;
  el.onpointerleave = pointerupHandler;
}
```

### ポインターダウン

`pointerdown` イベントは、ポインター (マウス、ペン/スタイラス、タッチ画面上のタッチポイント) が*接触面*に接触したときに発生します。 このアプリでは、このダウンイベントが 2 つのポインターのピンチ/ズームジェスチャーの一部である場合に備えて、イベントの状態をキャッシュする必要があります。

```js
function pointerdownHandler(ev) {
  // pointerdown イベントは、タッチ操作の開始を知らせます。
  // このイベントは2本指ジェスチャーをサポートするためにキャッシュされます
  evCache.push(ev);
  log("pointerDown", ev);
}
```

### ポインター移動

`pointermove` イベントハンドラーは、ユーザーが2ポインターのピンチ/ズームジェスチャーを呼び出しているかどうかを検出します。 2つのポインターが下がっていてポインター間の距離が増加している場合（ピンチアウトまたはズームイン）、要素の背景色がピンク (`pink`) に変わり、ポインター間の距離が減少している場合（ピンチインまたはズームアウト） 背景色が水色 (`lightblue`) に変わります。 より洗練されたアプリでは、ピンチインまたはピンチアウトの決定を使用してアプリ固有の意味論を適用できます。

このイベントが処理されると、ターゲットの境界線が破線 (`dashed`) に設定され、要素が移動イベントを受け取ったことを明確に視覚的に示します。

```js
function pointermoveHandler(ev) {
  // この関数は、 2 つのポインターの水平ピンチ/ズームジェスチャーを実装しています。
  //
  // 2つのポインター間の距離が広がると（ズームイン）、
  // ターゲット要素の背景色は "pink" に変わり、
  // 縮まると（ズームアウト）、色は "lightblue" に変わります。
  //
  // この関数は、ポインターのターゲットが移動イベントを受け取ったことを
  // 視覚的に示すために、ターゲット要素の境界線を "dashed" に設定します。
  log("pointerMove", ev);
  ev.target.style.border = "dashed";

  // キャッシュ内でこのイベントを見つけ、このイベントの記録を更新します
  const index = evCache.findIndex(
    (cachedEv) => cachedEv.pointerId === ev.pointerId,
  );
  evCache[index] = ev;

  // ポインターが 2 つダウンしている場合は、ピンチジェスチャーを確認します
  if (evCache.length === 2) {
    // 2 つのポインター間の距離を計算
    const curDiff = Math.abs(evCache[0].clientX - evCache[1].clientX);

    if (prevDiff > 0) {
      if (curDiff > prevDiff) {
        // 2 つのポインター間の距離が増えた
        log("Pinch moving OUT -> Zoom in", ev);
        ev.target.style.background = "pink";
      }
      if (curDiff < prevDiff) {
        // 2 つのポインター間の距離が減った
        log("Pinch moving IN -> Zoom out", ev);
        ev.target.style.background = "lightblue";
      }
    }

    // 次の移動イベントのために距離をキャッシュします
    prevDiff = curDiff;
  }
}
```

### ポインターアップ

`pointerup` イベントは、ポインターが*接触面*から上がると発生します。 これが発生すると、イベントはイベントキャッシュから削除され、ターゲット要素の背景色と境界線は元の値に戻ります。

このアプリでは、このハンドラーは `pointercancel`、`pointerleave`、`pointerout` のイベントにも使用します。

```js
function pointerupHandler(ev) {
  log(ev.type, ev);
  // このポインターをキャッシュから削除し、
  // ターゲットの背景色と境界線をリセットします
  remove\_event(ev);
  ev.target.style.background = "white";
  ev.target.style.border = "1px solid black";

  // ポインター数が2未満の場合は、以前の距離をリセットします
  if (evCache.length < 2) {
    prevDiff = -1;
  }
}
```

### アプリの UI

アプリは、タッチ領域に `<div>` 要素を使用し、ログ記録を有効にするボタンとログを消去するためのボタンを提供します。

ブラウザーの既定のタッチ動作が、このアプリのポインター処理をオーバーライドしないようにするために、 `touch-action` プロパティを `<body>` 要素に適用しています。

```html
<body onload="init();" style="touch-action:none">
  <div id="target">
    2 つの点に触れたままにして、ピンチインまたはピンチアウトしてください。<br />
    ピンチが開いている場合（ズームイン）は背景色がピンクに変わり、
    ピンチが閉じている場合（ズームアウト）は背景色が水色に変わります。
  </div>
  <!-- UI for logging/debugging -->
  <button id="log" onclick="enableLog(event);">Start/Stop event logging</button>
  <button id="clearlog" onclick="clearLog(event);">Clear the log</button>
  <p></p>
  <output></output>
</body>
```

### その他の関数

これらの関数はアプリをサポートしますが、イベントの流れに直接は関係しません。

#### キャッシュ管理

この関数はグローバルイベントキャッシュの `evCache` の管理に役立ちます。

```js
function removeEvent(ev) {
  // このイベントをターゲットのキャッシュから削除する
  const index = evCache.findIndex(
    (cachedEv) => cachedEv.pointerId === ev.pointerId,
  );
  evCache.splice(index, 1);
}
```

#### イベントログ

これらの関数は、イベント活動をアプリのウィンドウに送信するために使用します（デバッグとイベントの流れに関する学習をサポートするため）。

```js
// イベントをログ出力するフラグ
let logEvents = false;

// ログ/デバッグ関数
function enableLog(ev) {
  logEvents = !logEvents;
}

function log(prefix, ev) {
  if (!logEvents) return;
  const o = document.getElementsByTagName("output")[0];
  const s =
    `${prefix}:<br>` +
    ` pointerID = ${ev.pointerId}<br>` +
    ` pointerType = ${ev.pointerType}<br>` +
    ` isPrimary = ${ev.isPrimary}`;
  o.innerHTML += `${s}<br>`;
}

function clearLog(event) {
  const o = document.getElementsByTagName("output")[0];
  o.innerHTML = "";
}
```

関連情報
----

* Firefox Nightly にポインターイベントが追加されました。 Mozilla Hacks より、 Matt Brubeck と Jason Weathersby 著、 2015 年 8 月 4 日（英語）
* jQuery によるポインターイベントのポリフィル（英語）
* ジェスチャー マテリアルデザイン（英語）


マルチタッチ操作 - Web API

マルチタッチ操作
========

ポインターイベントは DOM 入力イベントを拡張して、マウスだけでなくペン/スタイラスやタッチ画面などのさまざまなポインティング入力デバイスをサポートします。*ポインター*は、特定の画面座標セットをターゲットにできるハードウェアにとらわれないデバイスです。 ポインターに単一のイベントモデルを使用すると、ウェブサイト、ウェブアプリの作成が簡単になり、ユーザーのハードウェアに関係なく優れたユーザーエクスペリエンスを提供できます。

ポインターイベントはマウスイベントと多くの類似点がありますが、タッチ画面上の複数の指など、複数同時のポインターをサポートしています。 この追加機能は、より豊富なユーザー操作モデルを提供するために使用できますが、マルチタッチ操作 (multi-touch interaction) の処理がさらに複雑になります。 このドキュメントは、異なるマルチタッチ操作を持つポインターイベントを使用して、コード例を介して説明します。

このアプリのライブ版は Github で利用できます。 ソースコードは Github で入手できます。 プルリクエストやバグレポートは大歓迎です。

例
-

この例では、さまざまなマルチタッチ操作にポインターイベントのさまざまなイベントタイプ（`pointerdown`, `pointermove`, `pointerup` `pointercancel` など）を使用する方法を示します。

### タッチターゲットの定義

アプリは `<div>` を使用して 3 つの異なるタッチターゲット領域を定義します。

```html
<style>
 div {
 margin: 0em;
 padding: 2em;
 }
 #target1 {
 background: white;
 border: 1px solid black;
 }
 #target2 {
 background: white;
 border: 1px solid black;
 }
 #target3 {
 background: white;
 border: 1px solid black;
 }
</style>
```

### グローバルな状態

マルチタッチ操作に対応するには、さまざまなイベントフェーズの間にポインターのイベント状態を維持することが必要です。 このアプリは、イベント状態をキャッシュするために、ターゲット要素ごとに 1 つのキャッシュで、 3 つの配列を使用します。

```js
// イベントログフラグ
const logEvents = false;

// タッチターゲットごとに 1 つのイベントキャッシュ
const evCache1 = [];
const evCache2 = [];
const evCache3 = [];
```

### イベントハンドラーの登録

イベントハンドラーは `pointerdown`, `pointermove`, `pointerup` のポインターイベントに登録します。 `pointerup` のハンドラーは `pointercancel`, `pointerout`, `pointerleave` のイベントにも使用します。これら 4 つのイベントは、このアプリでは同じ意味を持っているからです。

```js
function setHandlers(name) {
  // 指定された要素にイベントハンドラーをインストールする
  const el = document.getElementById(name);
  el.onpointerdown = pointerdownHandler;
  el.onpointermove = pointermoveHandler;

  // pointer{up,cancel,out,leave} イベントの意味は - このアプリでは -
  // 同じであるため、これらのイベントに同じハンドラーを使用する。
  el.onpointerup = pointerupHandler;
  el.onpointercancel = pointerupHandler;
  el.onpointerout = pointerupHandler;
  el.onpointerleave = pointerupHandler;
}

function init() {
  setHandlers("target1");
  setHandlers("target2");
  setHandlers("target3");
}
```

### ポインターダウン

`pointerdown` イベントは、ポインター（マウス、ペン/スタイラス、タッチ画面上のタッチ点）が*接触面*に接触したときに発生します。 このダウンイベントがマルチタッチ操作の一部である場合、イベントの状態をキャッシュしなければなりません。

このアプリでは、要素の上にポインターを置いてダウンすると、その要素が持つアクティブなタッチ点の数に応じて、要素の背景色が変わります。 色の変更に関する詳細は `update_background` 関数を参照してください。

```js
function pointerdownHandler(ev) {
  // pointerdown イベントは、タッチ操作の開始を知らせます。
  // このイベントを後で処理するために保存し（これはマルチタッチ
  // 操作の一部になる可能性があります）、背景色を更新します
  pushEvent(ev);
  if (logEvents) {
    log(`pointerDown: name = ${ev.target.id}`, ev);
  }
  updateBackground(ev);
}
```

### ポインター移動

`pointermove` ハンドラーは、ポインターが移動したときに呼び出されます。 別のイベントタイプが発生する前に（例えば、ユーザーがポインターを移動した場合など）複数回呼び出されることがあります。

このアプリでは、ポインターの移動は、要素がこのイベントを受け取ったことを明確に視覚的に示すために、ターゲットの境界線 (`border`) を破線 (`dashed`) にすることで表します。

```js
function pointermoveHandler(ev) {
  // 注: ユーザーが複数の「同時」タッチを行うと、ほとんどのブラウザーは少なくとも1つの
  // pointermove イベントを発生させ、一部はいくつかの pointermove イベントを発生させます。
  //
  // この関数は、ターゲットが移動イベントを受け取ったことを視覚的に示すために、
  // ターゲット要素の border を "dashed" に設定します。
  if (logEvents) {
    log("pointerMove", ev);
  }
  updateBackground(ev);
  ev.target.style.border = "dashed";
}
```

### ポインターアップ

`pointerup` イベントは、ポインターが*接触面*から上がると発生します。 これが発生すると、そのイベントは関連付けられているイベントキャッシュから削除されます。

このアプリでは、このハンドラーは `pointercancel`、`pointerleave`、`pointerout` のイベントにも使用します。

```js
function pointerupHandler(ev) {
  if (logEvents) {
    log(ev.type, ev);
  }
  // このタッチ点をキャッシュから削除し、
  // ターゲットの背景色と境界線をリセットします
  removeEvent(ev);
  updateBackground(ev);
  ev.target.style.border = "1px solid black";
}
```

### アプリの UI

アプリは、タッチ領域に `<div>` 要素を使用し、ログ記録を有効にするボタンとログを消去するためのボタンを提供します。

ブラウザーの既定のタッチの振る舞いが、このアプリのポインター処理をオーバーライドしないようにするために、`touch-action` プロパティを `<body>` 要素に適用しています。

```html
<body onload="init();" style="touch-action:none">
  <div id="target1">Tap, Hold or Swipe me 1</div>
  <div id="target2">Tap, Hold or Swipe me 2</div>
  <div id="target3">Tap, Hold or Swipe me 3</div>

  <!-- UI for logging/debugging -->
  <button id="log" onclick="enableLog(event);">Start/Stop event logging</button>
  <button id="clearlog" onclick="clearLog(event);">Clear the log</button>
  <p></p>
  <output></output>
</body>
```

### その他の関数

これらの関数はアプリをサポートしますが、イベントの流れに直接は関係しません。

#### キャッシュ管理

これらの関数は、グローバルイベントキャッシュの `evCache1`、`evCache2`、`evCache3` を管理します。

```js
function getCache(ev) {
  // このイベントのターゲット要素のキャッシュを返す
  switch (ev.target.id) {
    case "target1":
      return evCache1;
    case "target2":
      return evCache2;
    case "target3":
      return evCache3;
    default:
      log("Error with cache handling", ev);
  }
}

function pushEvent(ev) {
  // このイベントをターゲットのキャッシュに保存する
  const evCache = getCache(ev);
  evCache.push(ev);
}

function removeEvent(ev) {
  // このイベントをターゲットのキャッシュから削除する
  const evCache = getCache(ev);
  const index = evCache.findIndex(
    (cachedEv) => cachedEv.pointerId === ev.pointerId,
  );
  evCache.splice(index, 1);
}
```

#### 背景色の更新

タッチ領域の背景色は次のように変わります。 アクティブなタッチがない場合は白 (`white`) です。 1 つのアクティブなタッチは黄色 (`yellow`) です。 2 つ同時のタッチはピンク (`pink`) で、 3 つ以上同時のタッチは水色 (`lightblue`) です。

```js
function updateBackground(ev) {
  // 現在ダウンしている同時タッチ/ポインターの数に基づいて
  // 次のように背景色を変更します
  // white - ターゲット要素にタッチ点がない。 つまり、ポインターのダウンがない。
  // yellow - 1つのポインターのダウン
  // pink - 2つのポインターのダウン
  // lightblue - 3つ以上のポインターのダウン
  const evCache = getCache(ev);
  switch (evCache.length) {
    case 0:
      // ターゲット要素にタッチ点がない
      ev.target.style.background = "white";
      break;
    case 1:
      // 単独のタッチ点
      ev.target.style.background = "yellow";
      break;
    case 2:
      // 2 つ同時のタッチ点
      ev.target.style.background = "pink";
      break;
    default:
      // 3 つ以上同時のタッチ
      ev.target.style.background = "lightblue";
  }
}
```

#### イベントの記録

これらの関数は、アプリのウィンドウへのイベント活動の送信に使用されます（デバッグとイベントの流れに関する学習をサポートするため）。

```js
// イベントログフラグ
let logEvents = false;

function enableLog(ev) {
  logEvents = !logEvents;
}

function log(name, ev) {
  const o = document.getElementsByTagName("output")[0];
  const s =
    `${name}:<br>` +
    ` pointerID = ${ev.pointerId}<br>` +
    ` pointerType = ${ev.pointerType}<br>` +
    ` isPrimary = ${ev.isPrimary}`;
  o.innerHTML += `${s}<br>`;
}

function clearLog(event) {
  const o = document.getElementsByTagName("output")[0];
  o.innerHTML = "";
}
```


GamepadButton: value プロパティ - Web API

GamepadButton: value プロパティ
==========================

**`GamepadButton.value`** は `GamepadButton` インターフェイスのプロパティで、トリガーなど、現代の多くのゲームパッドにおけるアナログボタンの現在の状態を表すために使用する double 値を返します。

値は `0.0` - `1.0` の範囲で正規化され、`0.0` は押されていないボタン、`1.0` は完全に押されたボタンを表します。

例
-

```js
let gp = navigator.getGamepads()[0];

if (gp.buttons[0].value > 0) {
  // アナログボタンが押されたことに対する反応
}
```

値
-

A double.

仕様書
---

| Specification |
| --- |
| Gamepad # dom-gamepadbutton-value |

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

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

関連情報
----

ゲームパッド API の使用


GamepadButton: touched プロパティ - Web API

GamepadButton: touched プロパティ
============================

**`touched`** は `GamepadButton` インターフェイスのプロパティで、タッチを検出できるボタンが現在タッチされているか (`true`) またはタッチされていないか (`false`) を示す論理値を返します。

ボタンがタッチを検出できないがアナログ値を返すことができる場合、プロパティは値が `0` より大きければ `true` となり、そうでなければ `false` となります。ボタンがタッチを検出できず、デジタル値しか返せない場合は、`GamepadButton.pressed` プロパティを反映します。

値
-

論理値 (`Boolean`) です。タッチされていれば true です。

例
-

```js
let gp = navigator.getGamepads()[0]; // 最初のゲームパッドオブジェクトを取得

if (gp.buttons[0].touched) {
  // タッチされているボタンに応答
}
```

仕様書
---

| Specification |
| --- |
| Gamepad # dom-gamepadbutton-touched |

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

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

関連情報
----

* ゲームパッド API の使用


GamepadButton: pressed プロパティ - Web API

GamepadButton: pressed プロパティ
============================

**`GamepadButton.pressed`** は `GamepadButton` インターフェイスのプロパティで、現在ボタンが押されている (`true`) か、押されていない (`false`) かを示す論理値を返します。

例
-

```js
let gp = navigator.getGamepads()[0]; // 最初のゲームパッドオブジェクトを取得

if (gp.buttons[0].pressed) {
  // 押されているボタンに反応
}
```

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| Gamepad # dom-gamepadbutton-pressed |

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

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

関連情報
----

* ゲームパッド API の使用


FileReaderSync: readAsBinaryString() メソッド - Web API

FileReaderSync: readAsBinaryString() メソッド
=========================================

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

**メモ:** このメソッドは非推奨であり、 `readAsArrayBuffer()` に取って代わられました。

`readAsBinaryString()` は `FileReaderSync` インターフェイスのメソッドで、 `File` または `Blob` オブジェクトを同期的に文字列に読み込むことを可能にします。このインターフェイスは、ブロックが発生する可能性のある同期 I/O を可能にするため、ワーカーでのみ利用可能です。

構文
--

```js
readAsBinaryString(File)
readAsBinaryString(Blob)
```

### 引数

`blob`

読み取る `File` または `Blob` です。

### 返値

入力データを表す文字列です。

例外
--

`NotFoundError` `DOMException`

DOM の `File` または `Blob` で表されるリソースが、消去されたなどの理由で見つからない場合に発生します。

`SecurityError` `DOMException`

以下の問題のある状況のいずれかが検出された場合に発生します。

* リソースが第三者によって変更されている
* 同時に行われる読み取りが多すぎる
* リソースが指しているファイルがウェブから利用するには安全ではない（システムファイルなど）

`NotReadableError` `DOMException`

同時実行ロックなどの権限の問題でリソースを読み込めない場合に発生します。

`EncodingError` `DOMException`

リソースがデータ URL であり、ブラウザーごとに定義された制限長を超えた場合に発生します。

仕様書
---

| Specification |
| --- |
| File API # readAsBinaryStringSyncSection |

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

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

関連情報
----

* ファイル API
* `File`
* `FileReaderSync`
* `FileReader`
* `Blob`


FileReaderSync: readAsText() メソッド - Web API

FileReaderSync: readAsText() メソッド
=================================

`readAsText()` は `FileReaderSync` インターフェイスのメソッドで、`File` または `Blob` オブジェクトを同期的に文字列に読み込むことができます。このインターフェイスは、ブロックが発生する可能性のある同期 I/O を可能にするため、ワーカーでのみ利用可能です。

構文
--

```js
readAsText(File)
readAsText(Blob)
readAsText(File, encoding)
readAsText(Blob, encoding)
```

### 引数

`blob`

読み込み対象の DOM `File` または `Blob`。

`encoding`

オプションの引数で、使用するエンコーディングを指定します（`iso-8859-1` や `UTF-8` など）。存在しない場合、このメソッドは検出アルゴリズムを適用します。

### 返値

入力データを表す文字列です。

例外
--

このメソッドでは以下の例外が発生する可能性があります。

`NotFoundError` `DOMException`

DOM の `File` または `Blob` で表されるリソースが、消去されたなどの理由で見つからない場合に発生します。

`SecurityError` `DOMException`

以下の問題のある状況のいずれかが検出された場合に発生します。

* リソースが第三者によって変更されている
* 同時に行われる読み取りが多すぎる
* リソースが指しているファイルがウェブから利用するには安全ではない（システムファイルなど）

`NotReadableError` `DOMException`

同時実行ロックなどの権限の問題でリソースを読み込めない場合に発生します。

`EncodingError` `DOMException`

リソースがデータ URL であり、ブラウザーごとに定義された制限長を超えた場合に発生します。

仕様書
---

| Specification |
| --- |
| File API # readAsTextSync |

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

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

関連情報
----

* ファイル API
* `File`
* `FileReaderSync`
* `FileReader`
* `Blob`


FileReaderSync: readAsDataURL() メソッド - Web API

FileReaderSync: readAsDataURL() メソッド
====================================

`readAsDataURL()` は `FileReaderSync` インターフェイスのメソッドで、`File` または `Blob` オブジェクトを同期的にデータ URL を表す文字列に読み込むことができます。このインターフェイスは、ブロックが発生する可能性のある同期 I/O を可能にするため、ワーカーでのみ利用可能です。

構文
--

```js
readAsDataURL(File)
readAsDataURL(Blob)
```

### 引数

`blob`

読み込み対象の `File` または `Blob` です。

### 返値

入力データをデータ URL として表す文字列です。

例外
--

このメソッドでは以下の例外が発生する可能性があります。

`NotFoundError` `DOMException`

DOM の `File` または `Blob` で表されるリソースが、消去されたなどの理由で見つからない場合に発生します。

`SecurityError` `DOMException`

以下の問題のある状況のいずれかが検出された場合に発生します。

* リソースが第三者によって変更されている
* 同時に行われる読み取りが多すぎる
* リソースが指しているファイルがウェブから利用するには安全ではない（システムファイルなど）

`NotReadableError` `DOMException`

同時実行ロックなどの権限の問題でリソースを読み込めない場合に発生します。

`EncodingError` `DOMException`

リソースがデータ URL であり、ブラウザーごとに定義された制限長を超えた場合に発生します。

仕様書
---

| Specification |
| --- |
| File API # readAsDataURLSync-section |

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

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

関連情報
----

* ファイルとディレクトリー項目 API
* `File`
* `FileReaderSync`
* `FileReader`
* `Blob`


FileReaderSync: FileReaderSync() コンストラクター - Web API

FileReaderSync: FileReaderSync() コンストラクター
=========================================

**`FileReaderSync()`** コンストラクターは、新しい `FileReaderSync` を作成します。

構文
--

```js
new FileReaderSync()
```

### 引数

なし。

例
-

次のコードは、`FileReaderSync` オブジェクトをコンストラクター `FileReaderSync()` を用いて生成し、続いてオブジェクトを使用する様子を示します。

```js
function readFile(blob) {
  const reader = new FileReaderSync();
  postMessage(reader.readAsDataURL(blob));
}
```

>
> **Note:** このスニペットは `Worker` の中で使用しなければなりません。同期インターフェイスはメインスレッドでは使用することができないからです。
>
>
>

仕様書
---

| Specification |
| --- |
| File API # filereadersyncConstrctr |

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

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


FileReaderSync: readAsArrayBuffer() メソッド - Web API

FileReaderSync: readAsArrayBuffer() メソッド
========================================

`readAsArrayBuffer()` は `FileReaderSync` インターフェイスのメソッドで、`File` または `Blob` オブジェクトを同期的に `ArrayBuffer` に読み込むことができます。このインターフェイスは、ブロックが発生する可能性のある同期 I/O を可能にするため、ワーカーでのみ利用可能です。

構文
--

```js
readAsArrayBuffer(blob)
```

### 引数

`blob`

`File` または `Blob` で、`File` または `ArrayBuffer` に読み込むためのものです。

### 返値

ファイルのデータを表す `ArrayBuffer` です。

例外
--

このメソッドでは以下の例外が発生する可能性があります。

`NotFoundError` `DOMException`

DOM の `File` または `Blob` で表されるリソースが、消去されたなどの理由で見つからない場合に発生します。

`SecurityError` `DOMException`

以下の問題のある状況のいずれかが検出された場合に発生します。

* リソースが第三者によって変更されている
* 同時に行われる読み取りが多すぎる
* リソースが指しているファイルがウェブから利用するには安全ではない（システムファイルなど）

`NotReadableError` `DOMException`

同時実行ロックなどの権限の問題でリソースを読み込めない場合に発生します。

`EncodingError` `DOMException`

リソースがデータ URL であり、ブラウザーごとに定義された制限長を超えた場合に発生します。

仕様書
---

| Specification |
| --- |
| File API # readAsArrayBufferSyncSection |

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

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

関連情報
----

* ファイル API
* `File`
* `FileReaderSync`
* `FileReader`
* `Blob`


MediaStreamTrackAudioSourceNode: MediaStreamTrackAudioSourceNode() コンストラクター - Web API

MediaStreamTrackAudioSourceNode: MediaStreamTrackAudioSourceNode() コンストラクター
===========================================================================

Web Audio API の **`MediaStreamTrackAudioSourceNode()`** コンストラクターは、オプションオブジェクトで指定された `MediaStreamTrack` から音声を取得する新しい `MediaStreamTrackAudioSourceNode` オブジェクトを生成して返します。

`MediaStreamTrackAudioSourceNode` を生成する別の方法は、音声の取得元とする `MediaStreamTrack` を指定して `AudioContext.createMediaStreamTrackSource()` メソッドを呼び出すことです。

構文
--

```js
new MediaStreamTrackAudioSourceNode(context, options)
```

### 引数

`context`

このノードを関連付ける音声コンテキストを表す `AudioContext` です。

`options`

`MediaStreamTrackAudioSourceNode` に持たせる性質を定義するオブジェクトです。

`mediaStreamTrack`

このノードの出力とする音声のデータの取得元とする `MediaStreamTrack` です。

### 返値

メディアを指定のメディアトラックから取得する音声ノードを表す新しい `MediaStreamTrackAudioSourceNode` オブジェクトです。

### 例外

`NotSupportedError` `DOMException`

指定の `context` が `AudioContext` でないとき投げられます。

`InvalidStateError` `DOMException`

指定の `MediaStreamTrack` が音声トラックでない (すなわち、`kind` プロパティが `audio` でない) とき投げられます。

例
-

この例では、`getUserMedia()` を用いてユーザーのカメラにアクセスし、そのデバイスが提供する最初の音声トラックから新しい `MediaStreamAudioSourceNode` を生成します。

```js
const audioCtx = new AudioContext();

if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices
    .getUserMedia({
      audio: true,
      video: false,
    })
    .then((stream) => {
      const options = {
        mediaStreamTrack: stream.getAudioTracks()[0],
      };

      const source = new MediaStreamTrackAudioSourceNode(audioCtx, options);
      source.connect(audioCtx.destination);
    })
    .catch((err) => {
      console.error(`以下の gUM エラーが発生しました: ${err}`);
    });
} else {
  console.log("このブラウザーは新しい getUserMedia に対応していません！");
}
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-mediastreamtrackaudiosourcenode-mediastreamtrackaudiosourcenode |

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

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


DocumentFragment: children プロパティ - Web API

DocumentFragment: children プロパティ
================================

**`children`** は読み取り専用のプロパティで、生きた `HTMLCollection`
 を返します。これは呼び出された文書フラグメントのすべての子`要素`を持ちます。

値
-

この文書フラグメントの子である DOM 要素の、生きた順序通りの集合である `HTMLCollection` です。この集合に対して `item()` メソッドを使用するか、JavaScript の配列スタイル記法を使用すると、集合の個々の子ノードにアクセスすることができます。

この文書フラグメントに子要素がなかった場合は、`children` は `length` が `0` である空のリストを返します。

例
-

```js
let fragment = new DocumentFragment();
fragment.children; // HTMLCollection []

let paragraph = document.createElement("p");
fragment.appendChild(paragraph);

fragment.children; // HTMLCollection [<p>]
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-children① |

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

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

関連情報
----

* `Node.childNodes`


DocumentFragment: lastElementChild プロパティ - Web API

DocumentFragment: lastElementChild プロパティ
========================================

**`DocumentFragment.firstElementChild`** は読み取り専用プロパティで、この文書フラグメントの最後の子`要素`を返します。子要素がなければ `null` を返します。

値
-

このオブジェクトの最後の子要素である `Element` です。存在しなければ `null` です。

例
-

```js
let fragment = new DocumentFragment();
fragment.lastElementChild; // null

let paragraph = document.createElement("p");
fragment.appendChild(paragraph);

fragment.lastElementChild; // <p>
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-lastelementchild① |

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

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

関連情報
----

* `Element.lastElementChild`


DocumentFragment: append() メソッド - Web API

DocumentFragment: append() メソッド
===============================

**`DocumentFragment.append()`** メソッドは、この文書フラグメントの最後の子の後に、一連の `Node` オブジェクトまたは文字列を挿入します。文字列は同等の `Text` ノードとして挿入されます。

このメソッドは、`DocumentFragment` に子を追加します。ツリー内の任意の要素に追加する場合は、`Element.append()` を参照してください。

構文
--

```js
append(param1)
append(param1, param2)
append(param1, param2, /\* … ,\*/ paramN)
```

### 引数

`param1`, …, `paramN`

挿入する一連の `Node` または文字列です。

### 返値

なし (`undefined`)。

### 例外

`HierarchyRequestError` `DOMException`

階層内の指定された位置にノードが挿入できなかった場合に発生します。

例
-

### 文書フラグメントに要素を追加

```js
let fragment = new DocumentFragment();
let div = document.createElement("div");
fragment.append(div);

fragment.children; // HTMLCollection [<div>]
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-append① |

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

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

関連情報
----

* `DocumentFragment.prepend()`
* `Element.append()`


DocumentFragment: querySelectorAll() メソッド - Web API

DocumentFragment: querySelectorAll() メソッド
=========================================

**`DocumentFragment.querySelectorAll()`** メソッドは `NodeList` で、 `DocumentFragment` の中で指定されたセレクター群に一致する要素の一覧を（文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して）返します。

引数で指定されたセレクターが無効であった場合、 `DOMException` が `SYNTAX_ERR` の値で発生します。

構文
--

```js
querySelectorAll(selectors)
```

### 引数

`selectors`

文字列で、1 つ以上の CSS セレクターをカンマで区切って指定します。

### 返値

生きていない `NodeList` です。これには、指定されたセレクター群の少なくとも 1 つに一致する要素ごとに 1 つの `Element` オブジェクトが格納されます。一致するものがなかった場合は空の `NodeList` となります。

例
-

この例は、 `DocumentFragment` の中にあるすべての `div` 要素のうち、 "`note`" または "`alert`" クラスのついたものすべてのリストを返します。

```js
const matches = documentfrag.querySelectorAll("div.note, div.alert");
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-queryselectorall① |

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

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

関連情報
----

* 所属する `DocumentFragment` インターフェイス


DocumentFragment: prepend() メソッド - Web API

DocumentFragment: prepend() メソッド
================================

**`DocumentFragment.prepend()`** メソッドは、一連の `Node` オブジェクトまたは文字列を、この文書フラグメントにおける最初の子の前に挿入します。文字列は同等の `Text` ノードとして挿入されます。

このメソッドは、`DocumentFragment` の先頭に子要素を挿入します。ツリー内の任意の要素に挿入する場合は、 `Element.prepend()` を参照してください。

構文
--

```js
prepend(param1)
prepend(param1, param2)
prepend(param1, param2, /\* … ,\*/ paramN)
```

### 引数

`param1`, …, `paramN`

挿入する一連の `Node` または文字列です。

### 返値

なし (`undefined`)。

### 例外

`HierarchyRequestError` `DOMException`

階層内の指定された位置にノードが挿入できなかった場合に発生します。

例
-

### Prepending an element to a document fragment

```js
let fragment = new DocumentFragment();
let div = document.createElement("div");
let p = document.createElement("p");
fragment.append(p);
fragment.prepend(div);

fragment.children; // HTMLCollection [<div>, <p>]
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-prepend① |

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

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

関連情報
----

* `DocumentFragment.append()`
* `Element.prepend()`


DocumentFragment: getElementById() メソッド - Web API

DocumentFragment: getElementById() メソッド
=======================================

**`getElementById()`** は `DocumentFragment` のメソッドで、`id` プロパティが指定された文字列に一致する `Element` オブジェクトを返します。要素の ID は指定された場合は一意であることが求められるため、特定の要素に素早くアクセスする方法として有効です。

ID を持っていない要素へアクセスする必要がある場合は、`querySelector()` を使用すると任意のセレクターを用いて要素を検索することができます。

**メモ:** ID は単一の文書フラグメント内で一意である必要があります。2 つ以上の要素が単一の文書フラグメント内で同じ ID を持っている場合、このメソッドは最初に見つかった要素を返します。

構文
--

```js
getElementById(id)
```

**メモ:** コードが機能するためには、このメソッドの名前における `"Id"` という大文字小文字の表記を正確にしなければなりません。`getElementByID()` のほうが自然に見えますが、正しくなく機能しません。

### 引数

`id`

探す要素の ID です。 ID は大文字と小文字の区別がある文字列で、文書内で固有です。指定された ID の要素は一つしかありません。

### 返値

指定された ID に一致する DOM 要素オブジェクトを記述した `Element` オブジェクト、または文書内に一致する要素がなければ `null` です。

例
-

### 要素のリストを展開

この例では、文書に 1 つのアイテム `Cherry` を持つリストが格納されています。`Apple`、`Orange`、`Banana`、`Melon` の 4 つの項目を含む文書フラグメントを作成します。

次に、`getElementById()` を使用して、文書内とフラグメント内で `Apple` と `Cherry` を探した結果をログ出力します。この点で、`Cherry` は文書内にしか現れず、`Apple` はフラグメント内にしか現れません。

［フラグメントを文書に追加する］をクリックすると、文書内のリストにフラグメントが追加され、文書内とフラグメント内で `Apple` と `Cherry` の両方を探していた結果を再びログ出力します。この時点では、`Apple` と `Cherry` の両方が文書内に現れ、どちらもフラグメントには現れません。

これは、フラグメントを文書に追加すると、フラグメントのノードが DOM 内へ移動し、空の `DocumentFragment` が残るからです。

#### HTML

```html
<button id="add">フラグメントを文書に追加</button>
<button id="reset">例をリセット</button> <br />
リストの内容:
<ul>
  <li id="Cherry">Cherry</li>
</ul>
フラグメントの内容:
<ul id="fragment"></ul>
現在の状態:
<pre id="log" />
```

```
button {
  margin-bottom: 10px;
}
```

#### JavaScript

```js
// 文書フラグメントを初期コンテンツで作成
const fragment = new DocumentFragment();
["Apple", "Orange", "Banana", "Melon"].forEach((fruit) => {
  const li = document.createElement("li");
  li.textContent = fruit;
  li.id = fruit;
  fragment.append(li);
});

// ボタンがクリックされると、フラグメントをリストへ追加
document.getElementById("add").addEventListener("click", () => {
  document.querySelector("ul").append(fragment);
  displayStatus();
});

// 両方の結果を getElementById() でログ出力
function displayStatus() {
  const log = document.getElementById("log");
  log.textContent = "";
  ["Apple", "Cherry"].forEach((id) => {
    log.textContent += `document.getElementById("${id}") ${
 document.getElementById(id) ? "Yes" : "No"
 }\n`;
    log.textContent += `fragment.getElementById("${id}") ${
 fragment.getElementById(id) ? "Yes" : "No"
 }\n`;
  });

  // Empty the fragment viewer and fill it with the current content
  const fragmentViewer = document.getElementById("fragment");
  while (fragmentViewer.hasChildNodes()) {
    fragmentViewer.removeChild(fragmentViewer.lastChild);
  }
  for (entry of fragment.children) {
    fragmentViewer.appendChild(entry.cloneNode(true));
  }
}

// 初期状態をログ出力
displayStatus();

// リセットボタンをフック
document.getElementById("reset").addEventListener("click", () => {
  document.location.reload();
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-nonelementparentnode-getelementbyid |

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

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

関連情報
----

* `Document.getElementById()`


DocumentFragment: firstElementChild プロパティ - Web API

DocumentFragment: firstElementChild プロパティ
=========================================

**`DocumentFragment.firstElementChild`** は読み取り専用プロパティで、この文書フラグメントの最初の子`要素`を返します。子要素がなければ `null` を返します。

値
-

このオブジェクトの最初の子要素である `Element` です。存在しなければ `null` です。

例
-

```js
let fragment = new DocumentFragment();
fragment.firstElementChild; // null

let paragraph = document.createElement("p");
fragment.appendChild(paragraph);

fragment.firstElementChild; // <p>
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-firstelementchild① |

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

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

関連情報
----

* `Element.firstElementChild`


DocumentFragment: querySelector() メソッド - Web API

DocumentFragment: querySelector() メソッド
======================================

**`DocumentFragment.querySelector()`** メソッドは、指定されたセレクター群に一致する `DocumentFragment` の中の最初の要素を（文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して）返します。一致するものがなければ `null` を返します。

ID に一致するセレクターで、その ID が誤って文書中に複数使用されていた場合は、最初に一致する要素を返します。

引数で指定されたセレクターが無効であった場合、 `DOMException` が `SYNTAX_ERR` の値で発生します。

構文
--

```js
querySelector(selectors)
```

### 引数

`selectors`

文字列で、1 つ以上の CSS セレクターをカンマで区切って指定します。

### 返値

指定された CSS セレクターの集合に一致する文書内の最初の要素を表す `Element` オブジェクトです。一致する要素がない場合は `null` が返されます。

例
-

### 基本的な例

この基本的な例では、 `DocumentFragment` の中で "`myclass`" クラスが返されます。

```js
const el = documentfragment.querySelector(".myclass");
```

### CSS の構文とメソッドの引数

`querySelector` に CSS の構文に従う必要があります。 CSS の構文に従っていない ID やセレクター（例えばセミコロンや空白が不適切に入っているなど）に一致させるには、適合しない文字をバックスラッシュ 2 つでエスケープする必要があります。

```html
<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
 document.querySelector("#foo\bar"); // 何にも一致しない
 document.querySelector("#foo\\\\bar"); // 最初の div に一致する
 document.querySelector("#foo:bar"); // 何にも一致しない
 document.querySelector("#foo\\:bar"); // 2 つ目の div に一致する
</script>
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-queryselector① |

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

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

関連情報
----

* 所属する `DocumentFragment` インターフェイス


DocumentFragment: DocumentFragment() コンストラクター - Web API

DocumentFragment: DocumentFragment() コンストラクター
=============================================

**`DocumentFragment()`** コンストラクターは、新しい空の `DocumentFragment` オブジェクトを返します。

構文
--

```js
new DocumentFragment()
```

### 引数

なし。

### 返値

新しい `DocumentFragment` オブジェクト。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-documentfragment-documentfragment① |

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

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


DocumentFragment: childElementCount プロパティ - Web API

DocumentFragment: childElementCount プロパティ
=========================================

**`Document.childElementCount`** は読み取り専用のプロパティで、`DocumentFragment` の子要素の数を返します。

特定の要素の子要素の数を取得する場合は、 `Element.childElementCount` を参照してください。

値
-

この文書フラグメントの子の数を表す数値。

例
-

```js
let fragment = new DocumentFragment();
fragment.childElementCount; // 0

let paragraph = document.createElement("p");
fragment.appendChild(paragraph);

fragment.childElementCount; // 1
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-parentnode-childelementcount |

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

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

関連情報
----

* `Element.childElementCount`
* `Document.childElementCount`


DocumentFragment: replaceChildren() メソッド - Web API

DocumentFragment: replaceChildren() メソッド
========================================

**`DocumentFragment.replaceChildren()`** メソッドは、`DocumentFragment` の既存の子を指定された新しい子の集合で置き換えます。これらは文字列または `Node` オブジェクトです。

構文
--

```js
replaceChildren(param1)
replaceChildren(param1, param2)
replaceChildren(param1, param2, /\* … ,\*/ paramN)
```

### 引数

`param1`, …, `paramN`

一連の `Node` または文字列で、これで `DocumentFragment` の既存の子を置き換えます。置換するオブジェクトが指定されなかった場合、`DocumentFragment` は子ノードがすべて空になります。

### 返値

なし (`undefined`)。

### 例外

`HierarchyRequestError` `DOMException`

ノードツリーの制約に違反していた場合に発生します。

例
-

### 文書フラグメントを空にする

`replaceChildren()` は文書フラグメントの子ノードをすべて空にする、とても便利な方法を提供します。引数を指定せずに呼び出せばよいのです。

```js
let fragment = new DocumentFragment();
let div = document.createElement("div");
let p = document.createElement("p");
fragment.append(p);
fragment.prepend(div);

fragment.children; // HTMLCollection [<div>, <p>]

fragment.replaceChildren();

fragment.children; // HTMLCollection []
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-replacechildren① |

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

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

関連情報
----

* `DocumentFragment.prepend()`
* `DocumentFragment.append()`


位置情報 API の使用 - Web API

位置情報 API の使用
============

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

位置情報 API (Geolocation API) により、ユーザーは希望すれば自身の場所をウェブアプリケーションに通知することができるようになります。この記事では、その使い方の基本を説明します。

geolocation オブジェクト
------------------

位置情報 API は `navigator.geolocation` オブジェクトを通じて利用できます。

このオブジェクトが存在していれば、位置情報サービスを利用することができます。次のようなコードでの存在を確認することができます。

```js
if ("geolocation" in navigator) {
  /\* geolocation が使用可能 \*/
} else {
  /\* geolocation が使用不可 \*/
}
```

### 現在位置の取得

ユーザーの現在位置を取得するには、 `getCurrentPosition()` メソッドを呼び出します。このメソッドはユーザーの現在位置を特定するための非同期通信を開始するとともに、位置取得デバイスから最新の情報を取得します。現在位置が特定されるとコールバック関数が実行されます。また、オプションとして第二引数にコールバック関数を指定することで、エラー発生時に実行される関数を指定することができます。省略可能な第三引数は、最大試行回数、要求待ち時間、高精度の位置情報を求めるかを指定するオブジェクトです。

**メモ:** 既定では、 `getCurrentPosition()` は低精度の結果を使い、なるべく高速に応答しようとします。これは、正確さに関わらず速い応答を必要とする場合に役立ちます。例えば GPS を備えている端末でも GPS が確定するまでには数分以上かかる可能性がありますので、 `getCurrentPosition()` からは (IP ロケーションや Wi-Fi による) 低精度のデータを返すことがあります。

```js
navigator.geolocation.getCurrentPosition((position) => {
  doSomething(position.coords.latitude, position.coords.longitude);
});
```

上記の例では、位置情報が取得でき次第 `doSomething()` 関数が実行されます。

### 現在位置の監視

位置情報が変化した場合（端末が移動した時や、より正確な位置情報が得られた時）は、位置情報の更新と同時に呼び出されるコールバック関数を指定することができます。これは `watchPosition()` 関数を使うことで実現できますが、こちらの入力引数は `getCurrentPosition()` と同じです。コールバック関数は繰り返し呼び出され、ブラウザーは移動に応じて位置情報を更新したり、位置の特定に別の技術を使用することでより詳細な位置情報を提供したりすることが可能です。エラー発生時に呼び出されるコールバック関数は `getCurrentPosition()` と同様に任意指定であり、繰り返し呼び出される場合があります。

**メモ:** `watchPosition()` を使用する際に、先に `getCurrentPosition()` を呼び出す必要はありません。

```js
const watchID = navigator.geolocation.watchPosition((position) => {
  doSomething(position.coords.latitude, position.coords.longitude);
});
```

`watchPosition()` メソッドは、位置監視の登録を識別する ID 番号を返します。この ID 番号を `clearWatch()` メソッドに渡すことで、ユーザーの位置監視を終了させることができます。

```js
navigator.geolocation.clearWatch(watchID);
```

### 応答の微調整

`getCurrentPosition()` および `watchPosition()` は成功時のコールバック、省略可能なエラー時のコールバック、そして省略可能な options オブジェクトを受け取ります。

このオブジェクトでは、高精度を有効にするかどうか、返された位置値の使用期限（この期限までは、同じ位置が再度要求された場合にキャッシュされて再利用され、それ以降はブラウザーが新しい位置データを要求します）、タイムアウトする前にブラウザーがどのくらいの時間位置データを取得しようとするかを指定するタイムアウト値を指定することができます。

`watchPosition` の呼び出しは以下のようになります。

```js
function success(position) {
  doSomething(position.coords.latitude, position.coords.longitude);
}

function error() {
  alert("位置情報が利用できません。");
}

const options = {
  enableHighAccuracy: true,
  maximumAge: 30000,
  timeout: 27000,
};

const watchID = navigator.geolocation.watchPosition(success, error, options);
```

位置の表現
-----

ユーザーの位置は `GeolocationPosition` オブジェクトインスタンスを使用して記述され、それ自体が `GeolocationCoordinates` オブジェクトインスタンスを含んでいます。

`GeolocationPosition` インスタンスが持つ情報は 2 つだけで、 `coords` プロパティは `GeolocationCoordinates` インスタンスを持っており、 `timestamp` プロパティは位置データが取得された時刻を表す、ミリ秒単位の Unix 時刻を持っています。

`GeolocationCoordinates` インスタンスにはいくつかのプロパティがありますが、最も一般的に使用されるのは `latitude` と `longitude` の 2 つで、これは地図上に位置を描画するために必要なものです。そのため、多くの Geolocation 成功コールバックはとてもシンプルに見えます。

```js
function success(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;

  // 緯度と経度で何かを行う
}
```

しかし `GeolocationCoordinates` オブジェクトからは、高度、速度、端末が向いている方向、高度、経度、緯度データの精度測定など、他にも多くの情報を得ることができます。

エラーの扱い
------

`getCurrentPosition()` や `watchPosition()` の呼び出し時にエラーコールバック関数を提供する場合、最初の引数が `GeolocationPositionError` オブジェクトインスタンスとなります。このオブジェクト型には二つのプロパティがあります。 `code` は返されたエラーの種類を示し、 `message` は人間が読める形でエラーコードの意味を説明します。

次のように使用することができます。

```js
function errorCallback(error) {
  alert(`ERROR(${error.code}): ${error.message}`);
}
```

例
-

以下の例では、位置情報 API はユーザーの経度と緯度を取得するために使用されます。成功した場合、その位置を表示する `openstreetmap.org` の URL の有効なハイパーリンクが表示されます。
```

body {
  padding: 20px;
  background-color: #ffffc9;
}

button {
  margin: 0.5rem 0;
}
```

### HTML

```html
<button id="find-me">現在の位置を表示</button><br />
<p id="status"></p>
<a id="map-link" target="\_blank"></a>
```

### JavaScript

```js
function geoFindMe() {
  const status = document.querySelector("#status");
  const mapLink = document.querySelector("#map-link");

  mapLink.href = "";
  mapLink.textContent = "";

  function success(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;

    status.textContent = "";
    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
    mapLink.textContent = `緯度: ${latitude}°、経度: ${longitude}°`;
  }

  function error() {
    status.textContent = "Unable to retrieve your location";
  }

  if (!navigator.geolocation) {
    status.textContent = "このブラウザーは位置情報に対応していません";
  } else {
    status.textContent = "位置情報を取得中…";
    navigator.geolocation.getCurrentPosition(success, error);
  }
}

document.querySelector("#find-me").addEventListener("click", geoFindMe);
```

### 結果


BluetoothRemoteGATTDescriptor: value プロパティ - Web API

BluetoothRemoteGATTDescriptor: value プロパティ
==========================================

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

読み取り専用プロパティ **`BluetoothRemoteGATTDescriptor.value`** は、現在キャッシュされているディスクリプターの値を返します。この値はディスクリプターの値が読まれると更新されます。

値
-

`ArrayBuffer` です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattdescriptor-value |

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

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


BluetoothRemoteGATTDescriptor: readValue() メソッド - Web API

BluetoothRemoteGATTDescriptor: readValue() メソッド
===============================================

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

**`BluetoothRemoteGATTDescriptor.readValue()`** メソッドは、利用可能で対応していれば `value` プロパティの複製が格納された `ArrayBuffer` で解決する `Promise` を返します。そうでない場合、エラーを投げます。

構文
--

```js
readValue()
```

### 引数

なし

### 返値

`ArrayBuffer` で解決する `Promise` です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattdescriptor-readvalue |

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

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


BluetoothRemoteGATTDescriptor: writeValue() メソッド - Web API

BluetoothRemoteGATTDescriptor: writeValue() メソッド
================================================

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

**`BluetoothRemoteGATTDescriptor.writeValue()`** メソッドは、`value` プロパティを `ArrayBuffer` に格納されたバイト列に設定し、`Promise` を返します。

構文
--

```js
writeValue(array)
```

### 引数

`array`

`value` をこの配列に格納されたバイト列に設定します。

### 返値

`Promise` です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattdescriptor-writevalue |

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

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


BluetoothRemoteGATTDescriptor: uuid プロパティ - Web API

BluetoothRemoteGATTDescriptor: uuid プロパティ
=========================================

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

 読み取り専用プロパティ **`BluetoothRemoteGATTDescriptor.uuid`** は、このキャラクタリスティックディスクリプターの UUID を返します。
 たとえば、theClient Characteristic Configuration descriptor は「`00002902-0000-1000-8000-00805f9b34fb`」です。

値
-

UUID です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattdescriptor-uuid |

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

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


BluetoothRemoteGATTDescriptor: characteristic プロパティ - Web API

BluetoothRemoteGATTDescriptor: characteristic プロパティ
===================================================

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

読み取り専用プロパティ **`BluetoothRemoteGATTDescriptor.characteristic`** は、このディスクリプターが属する `BluetoothRemoteGATTCharacteristic` を返します。

値
-

`BluetoothRemoteGATTCharacteristic` のインスタンスです。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattdescriptor-characteristic |

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

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


通知 API の使用 - Web API

通知 API の使用
==========

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

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

通知 API は、ウェブページやアプリからシステムレベルでページ外部に表示される通知を送ることを可能にします。これにより、アプリケーションがアイドルやバックグラウンドの状態であっても、アプリからユーザーに情報を送信することができます。この記事では、アプリで API を使用する方法の基本を見ていきます。

一般的にシステム通知とは、オペレーティングシステムの標準的な通知メカニズムを指します。一般的なデスクトップシステムやモバイル端末が、通知を行う方法の実例を思い出しましょう。

![](/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API/android-notification.png)

当然ながらシステム通知の仕組みはプラットフォームやブラウザーによって異なりますが問題はなく、通知 API はほとんどのシステム通知に対して十分な互換性を持つようになっています。

例
-

ウェブ通知の最も顕著な用途の一つが、ウェブベースのメールや IRC アプリケーションにおいて、新しいメッセージを受信したときに、ユーザーがほかのアプリケーションで何かをしていても通知をする必要がある場合です。これには数多くの事例が存在し、例えば Slack などがあります。

ウェブ通知がどのように利用できるのかの考えを深めるために、実世界の例を — To-do リストアプリ — を書いてみました。これは IndexedDB を使用してローカルにデータを格納し、タスクの期限が来たときにシステム通知を使用してユーザーに通知します。 To-do リストのコードをダウンロードするか、ライブで実行するアプリを見るかしてみましょう。

許可の要求
-----

アプリが通知を送信できるようになる前に、ユーザーはアプリがそれを行う権限を認めなければなりません。これは API がウェブページの外部にあるものと対話しようとする際の一般的な要件です。ユーザは少なくとも 1 回はアプリケーションが通知を送ることを認めなければならず、これによりどのアプリやサイトが通知を表示してよいかをユーザーが制御することができます。

過去にプッシュ通知が悪用されることがあったため、ウェブブラウザーや開発者はこの問題を緩和するための対策を実装し始めています。通知を表示することの許可を求めるのは、ユーザーの操作 (ボタンをクリックするなど) の反応として行うべきです。ユーザーが同意していない通知でユーザーに迷惑をかけるべきではないので、これはベストプラクティスであるだけでなく、今後ブラウザーはユーザーの操作によって起動されたものではない通知の許可の要求を明示的に拒否するようになるでしょう。例えば、 Firefox はバージョン72からすでにこれを行っており、 Safari もしばらく前からこれを行っています。

加えて、 Chrome と Firefox では、サイトが安全なコンテキスト (すなわち HTTPS) ではない限り通知を要求することができず、また別オリジンの `<iframe>` から要求された通知を許可することができなくなりました。

### 現在の許可状態を確認する

読取専用の `Notification.permission` プロパティの値を調べると、すでに許可を得ているかを確認できます。このプロパティは、3 種類のいずれかの値を取ります。

`default`

ユーザーはまだ許可を求められたことがなく、したがって通知は表示されない。

`granted`

ユーザーは以前に通知表示の許可を求められており、許可した。

`denied`

ユーザーは、通知を表示することを明示的に拒否した。

### 許可を得る

通知を表示する許可をまだ得ていない場合は、アプリケーションは `Notification.requestPermission()` メソッドを使用してユーザーに要求する必要があります。もっとも簡単な形では、次のようなものがあります。

```js
Notification.requestPermission().then(function (result) {
  console.log(result);
});
```

これはメソッドのプロミスベースの版を使用しています。古いバージョンに対応したい場合は、次のように古いコールバック版を使用する必要があります。

```js
Notification.requestPermission();
```

コールバック版はオプションで、ユーザーが表示を許可する要求に答えた時に呼び出されるコールバック関数を受け入れます。

### 例

To-do リストのデモでは、 "Enable notifications" ボタンを配置し、押されたときにアプリの通知を要求します。

```html
<button id="enable">Enable notifications</button>
```

これをクリックすると、 `askNotificationPermission()` 関数が呼び出されます。

```js
function askNotificationPermission() {
  // function to actually ask the permissions
  function handlePermission(permission) {
    // set the button to shown or hidden, depending on what the user answers
    if (
      Notification.permission === "denied" ||
      Notification.permission === "default"
    ) {
      notificationBtn.style.display = "block";
    } else {
      notificationBtn.style.display = "none";
    }
  }

  // Let's check if the browser supports notifications
  if (!("Notification" in window)) {
    console.log("This browser does not support notifications.");
  } else {
    if (checkNotificationPromise()) {
      Notification.requestPermission().then((permission) => {
        handlePermission(permission);
      });
    } else {
      Notification.requestPermission(function (permission) {
        handlePermission(permission);
      });
    }
  }
}
```

最初に 2 番目のメインブロックを見てみると、まず最初に通知に対応しているかどうかチェックしているのが分かります。もし対応していれば、次に `Notification.requestPermission()` のプロミスベース版に対応しているかどうかチェックします。対応している場合は、プロミスベース版 (Safari 以外で対応) を実行し、対応していない場合は古いコールバックベース版 (Safari で対応) を実行します。

コードの重複を避けるために、このスニペットの最初のメインブロックである `handlePermission()` 関数の中に、多少のハウスキーピングコードを格納しています。この内部では、 `Notification.permission` の値を明示的に設定し (古いバージョンの Chrome では自動的に設定できないものがありました)、ユーザーが許可ダイアログで選択した内容に応じてボタンを表示・非表示にしています。すでに許可されている場合は表示したくありませんが、ユーザーが許可を拒否することを選択した場合は、後で変更できるようにしたいと考えています。

**メモ:** バージョン 37 より前の Chrome では、 `Notification.requestPermission()` を `load` イベントのハンドラー内で呼び出すことを許可していませんでした (issue 274284 をご覧ください)。

### requestPermission() プロミスの機能検出

前に、ブラウザーがプロミス版の `Notification.requestPermission()` に対応しているかどうかをチェックする必要があると言いました。これは以下のようにして行います。

```js
function checkNotificationPromise() {
  try {
    Notification.requestPermission().then();
  } catch (e) {
    return false;
  }

  return true;
}
```

基本的には、 `.then()` メソッドが `requestPermission()` で利用できるかどうかを確認します。成功した場合は `true` を返します。失敗した場合は、 `false` を `catch() {}` ブロック内で返します。

通知の作成
-----

通知の作成は簡単です。 `Notification` コンストラクターを使用するだけです。このコンストラクターは通知内に表示するタイトルと、通知を拡張するためのアイコン (`icon`) やテキスト本文 (`body`) などのオプションを受け取ります。

例えば To-do リストの例では必要に応じて以下のスニペットを使用して通知を作成します (`createNotification()` 内にあります)。

```js
const img = "/to-do-notifications/img/icon-128.png";
const text = 'HEY! Your task "' + title + '" is now overdue.';
const notification = new Notification("To do list", { body: text, icon: img });
```

通知を閉じる
------

`close()` を使用して、ユーザーに関係がなくなった通知を除去します (例えば、メッセージアプリなどで、ユーザーが既にウェブページ上の通知を読んだ場合や、音楽アプリですでに次の曲が始まっているため、曲の変更を行うための通知を閉じるなど)。最近のブラウザーの多くは、数秒 (約 4 秒) 経過すると通知を自動的に解除しますが、これはユーザーやユーザーエージェントの判断に委ねられているため、一般的には気にする必要はありません。通知の削除はオペレーティングシステムレベルでも発生する可能性があり、ユーザーが制御できるようにしておく必要があります。古いバージョンの Chrome は通知を自動的に削除しないので、他のブラウザーの通知トレイから通知を削除しないように、古いバージョンのブラウザーでのみ `setTimeout()` の後に削除してください。

```js
const n = new Notification("My Great Song");
document.addEventListener("visibilitychange", function () {
  if (document.visibilityState === "visible") {
    // The tab has become visible so clear the now-stale Notification.
    n.close();
  }
});
```

**メモ:** この API は、 (現代のブラウザーで) 一定時間経過後に通知を画面から消去するだけのために使用すべきではありません。通知が最初に表示された後にユーザーがそれとやりとりすることを防ぐため、このメソッドは通知トレイからも通知を削除するためです。

**メモ:** "close" イベントを受け取ったとき、それが通知を閉じたユーザーであるという保証はありません。これは仕様書に準拠しており、以下のように記載されています。「通知が基礎となる通知プラットフォームによって、またはユーザーによって閉じられるとき、その通知のための閉じるステップを実行しなければなりません。」

Notification イベント
-----------------

Notifications API の仕様では、`Notification` のインスタンスで発生するイベントを 2 つ定義しています:

`click`

ユーザーが通知をクリックしたときに発生します。

`close`

通知が閉じられたときに一度発生します。

`error`

通知で問題が発生したときに発生します。通常、なんらかの理由で通知が表示されなかったためです。

`show`

通知がユーザーに表示されたときに発生します。

これらのイベントは `onclick`, `onclose`, `onerror`, `onshow` の各ハンドラーを使用して追跡することができます。 `Notification` は `EventTarget` も継承していますので `addEventListener()` メソッドも使用することができます。

既存の通知を置き換える
-----------

ユーザーが短期間に多くの通知を受け取ることは、通常望ましくありません。例えばメッセンジャーアプリがメッセージを受け取るたびに通知を行って、それが大量になったらどうなるでしょうか。大量の通知によるスパム状態を避けるため、準備中の通知キューを変更して 1 つ以上の未表示通知を新た通知で置き換えることができます。

これを行うために、任意の新たな通知にタグ付けすることができます。すでに同じタグがついている通知がまだ表示されていない場合は、新しい通知が以前の通知を置き換えます。同じタグがついている通知がすでに表示されている場合は、前の通知が閉じられて新しい通知が表示されます。

### タグの例

以下の基本的な HTML を想定してください。

```html
<button>Notify me!</button>
```

以下の方法で、複数の通知を扱うことが可能です。

```js
window.addEventListener("load", function () {
  const button = document.getElementsByTagName("button")[0];

  if (window.self !== window.top) {
    // Ensure that if our document is in a frame, we get the user
    // to first open it in its own tab or window. Otherwise, it
    // won't be able to request permission to send notifications.
    button.textContent = "View live result of the example code above";
    button.addEventListener("click", () => window.open(location.href));
    return;
  }

  button.addEventListener("click", function () {
    // If the user agreed to get notified
    // Let's try to send ten notifications
    if (window.Notification && Notification.permission === "granted") {
      let i = 0;
      // Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.
      const interval = window.setInterval(function () {
        // Thanks to the tag, we should only see the "Hi! 9" notification
        const n = new Notification("Hi! " + i, { tag: "soManyNotification" });
        if (i++ == 9) {
          window.clearInterval(interval);
        }
      }, 200);
    }

    // If the user hasn't told if they want to be notified or not
    // Note: because of Chrome, we are not sure the permission property
    // is set, therefore it's unsafe to check for the "default" value.
    else if (window.Notification && Notification.permission !== "denied") {
      Notification.requestPermission(function (status) {
        // If the user said okay
        if (status === "granted") {
          let i = 0;
          // Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.
          const interval = window.setInterval(function () {
            // Thanks to the tag, we should only see the "Hi! 9" notification
            const n = new Notification("Hi! " + i, {
              tag: "soManyNotification",
            });
            if (i++ == 9) {
              window.clearInterval(interval);
            }
          }, 200);
        }

        // Otherwise, we can fallback to a regular modal alert
        else {
          alert("Hi!");
        }
      });
    }

    // ユーザが通知を拒否している場合
    else {
      // 通常型の alert にフォールバックできます
      alert("Hi!");
    }
  });
});
```

結果は以下のとおりです。

仕様書
---

| Specification |
| --- |
| Notifications API Standard # api |

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

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

関連情報
----

* `Notification`


StylePropertyMap.delete() - Web API

StylePropertyMap.delete()
=========================

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

**`delete()`** は `StylePropertyMap` インターフェイスのメソッドで、指定されたプロパティの CSS 宣言を削除します。

構文
--

```js
delete(property)
```

### 引数

`property`

削除するスタイル特性（フォント、幅、背景色など）を示す識別子です。

### 返値

なし (`undefined`)。

例
-

以下の例では、要素の style 属性から `background-image` プロパティを削除します。

```js
// button 要素を取得
const buttonEl = document.querySelector("button");

// スタイル属性から background-image を削除
buttonEl.attributeStyleMap.delete("background-image");
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymap-delete |

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

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


StylePropertyMap.clear() - Web API

StylePropertyMap.clear()
========================

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

**`clear()`** は `StylePropertyMap` インターフェイスのメソッドで、 `StylePropertyMap` にあるすべての宣言を削除します。

構文
--

```js
clear()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

以下の例は、要素の style 属性からすべてのスタイルを削除します。

```js
// button 要素を取得
const buttonEl = document.querySelector(".example");

// style 属性からすべてのスタイルを削除
buttonEl.attributeStyleMap.clear();
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymap-clear |

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

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


StylePropertyMap.set() - Web API

StylePropertyMap.set()
======================

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

**`set()`** は `StylePropertyMap` インターフェイスのメソッドで、指定したプロパティの CSS 宣言を変更します。

構文
--

```js
set(property, value)
```

### 引数

`property`

変更するスタイル特性（フォント、幅、背景色など）を示す識別子です。

`value`

指定されたプロパティが持つべき値です。

### 返値

なし (`undefined`)。

例
-

この例では、要素の style 属性の中で、 `padding-top` プロパティを指定された値に設定しています。

```js
// button 属性を取得
const buttonEl = document.querySelector("button");

// button の style 属性で padding-top を設定
buttonEl.attributeStyleMap.set("padding-top", CSS.px(10));
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymap-set |

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

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


StylePropertyMap.append() - Web API

StylePropertyMap.append()
=========================

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

**`append()`** は `StylePropertyMap` インターフェイスのメソッドで、渡された CSS の値をこの `StylePropertyMap` の指定されたプロパティで追加します。

構文
--

```js
append(property, value)
```

### 引数

`property`

追加するスタイル特性（フォント、幅、背景色など）を示す識別子です。

`value`

指定されたプロパティが持つべき値です。

### 返値

なし (`undefined`)。

例
-

この例では、要素の `background-image` プロパティに、`HTMLElement.attributeStyleMap` を使用して追加の背景画像の値を追加しています。

```js
// button 要素を取得
const buttonEl = document.querySelector("button");

// background-image プロパティに別の値を追加する
buttonEl.attributeStyleMap.append(
  "background-image",
  "linear-gradient(180deg, blue, black",
);
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymap-append |

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

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


CSSGroupingRule.deleteRule() - Web API

CSSGroupingRule.deleteRule()
============================

**`deleteRule()`** は `CSSGroupingRule` インターフェイスのメソッドで、子 CSS ルールの一覧からある CSS ルールを取り除きます。

構文
--

```js
deleteRule(index);
```

### 引数

index

削除するルールの位置です。

### 返値

なし (`undefined`)。

### 例外

`IndexSizeError` `DOMException`

*index* が子 CSS ルールの数以上であった場合に発生します。

`InvalidStateError` `DOMException`

削除しようとしているルールが `@namespace` アットルールであり、子 CSS ルールに `@import` アットルールまたは `@namespace` アットルール以外の者があった場合に発生します。

例
-

```js
let myRules = document.styleSheets[0].cssRules;
myRules[0].deleteRule(2); /\* deletes the rule at index 2 \*/
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssgroupingrule-deleterule |

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

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


CSSGroupingRule.insertRule() - Web API

CSSGroupingRule.insertRule()
============================

**`insertRule()`** は `CSSGroupingRule` インターフェイスのメソッドで、新しい CSS ルールを CSS ルールのリストへ追加します。

構文
--

```js
insertRule(rule);
insertRule(rule, index);
```

### 引数

rule

文字列です。

index省略可

省略可能で、このルールを挿入する位置です。既定値は 0 です。

### 返値

新しいルールの位置です。

### 例外

`IndexSizeError` `DOMException`

*index* が子 CSS ルールの数以上であった場合に発生します。

`HierarchyRequestError` `DOMException`

CSS で規定された制約により、リストの指定された（ゼロ起点の）インデックス位置に新しいルールが挿入できない場合に発生します。

`InvalidStateError` `DOMException`

新しいルールが `@namespace` アットルールで、子 CSS ルールのリストが `@import` アットルールと `@namespace` アットルール以外のものを含んでいる場合に発生します。

例
-

```js
let myRules = document.styleSheets[0].cssRules;
myRules[0].insertRule(
  "html {background-color: blue;}",
  0,
); /\* HTML 要素に対するルールを位置 0 に挿入します。 \*/
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssgroupingrule-insertrule |

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

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


CSSGroupingRule.cssRules - Web API

CSSGroupingRule.cssRules
========================

**`cssRules`** は `CSSGroupingRule` インターフェイスのプロパティで、 `CSSRuleList` 型で `CSSRule` オブジェクトのコレクションを返します。

値
-

`CSSRuleList` です。

例
-

```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules);
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssgroupingrule-cssrules |

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

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


Navigator: languages プロパティ - Web API

Navigator: languages プロパティ
==========================

**`Navigator.languages`** は読み取り専用プロパティで、ユーザーの推奨される言語を表す文字列の配列を返します。この言語は RFC 5646: Tags for Identifying Languages (also known as BCP 47) による言語タグを使用して記述されています。返された配列の中では、設定で最も推奨される言語が最初に来るように並べられています。

`navigator.language` の値は返される配列の最初の要素です。

この値を変更すると、ユーザーの推奨言語が変更され、 `languagechange` イベントが `Window` オブジェクトに発行されます。

ユーザーのブラウザーからのすべての HTTP リクエストにある `Accept-Language` ヘッダーは、 `navigator.languages` プロパティと同じ値ですが、拡張された `qvalues` (quality values) フィールドのみが異なります (例えば `en-US;q=0.8`)。

値
-

文字列です。

例
-

```js
navigator.language; //"en-US"
navigator.languages; //["en-US", "zh-CN", "ja-JP"]
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-languages-dev |

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

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

関連情報
----

* `navigator.language`
* `navigator`
* `languagechange` イベント


Navigator: keyboard プロパティ - Web API

Navigator: keyboard プロパティ
=========================

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

**`keyboard`** は `Navigator` インターフェイスの読み取り専用プロパティで、物理キーボードのキーボードレイアウトマップを受け取ったり、キー押下のキャプチャの切り替えたりするための `Keyboard` オブジェクトを返します。

値
-

`Keyboard` オブジェクト。

仕様書
---

| Specification |
| --- |
| Keyboard Lock # h-navigator-keyboard |

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

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


Navigator: hid プロパティ - Web API

Navigator: hid プロパティ
====================

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

**`Navigator.hid`** は読み取り専用のプロパティで、`HID` オブジェクトを返します。このオブジェクトは、HID デバイスへの接続およびアタッチした HID デバイスのリストアップを行うメソッドと、HID デバイスの接続を扱うイベントハンドラーを提供します。

定義されている権限ポリシーが WebHID の使用をブロックしている場合、 `Navigator.hid` プロパティは利用できません。

値
-

`HID` オブジェクトです。

仕様書
---

| Specification |
| --- |
| WebHID API # dom-navigator-hid |

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

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

関連情報
----

* WebHID API


Navigator: contacts プロパティ - Web API

Navigator: contacts プロパティ
=========================

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

**`contacts`** は `Navigator` インターフェイスの読み取り専用プロパティで、 `ContactsManager` インターフェイスを返します。ユーザーが連絡先リストから項目を選択し、選択した項目の限定された詳細をウェブサイトやアプリケーションと共有することができます。

値
-

`ContactsManager` オブジェクトです、 2 回連続して呼び出すと、同じオブジェクトを返します。

例
-

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

```js
const supported = "contacts" in navigator && "ContactsManager" in window;
```

仕様書
---

| Specification |
| --- |
| Contact Picker API # dom-navigator-contacts |

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

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


Navigator: presentation プロパティ - Web API

Navigator: presentation プロパティ
=============================

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

`presentation` は `Navigator` のプロパティで、プレゼンテーション API のエントリーポイントを提供し、 `Presentation` (en-US) オブジェクトへの参照を返します。

構文
--

```js
const presentation = navigator.presentation
```

### 値

`Presentation` (en-US) オブジェクトへの参照。

仕様書
---

| Specification |
| --- |
| Presentation API # dom-navigator-presentation |

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

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

関連情報
----

* プレゼンテーション API
* `Presentation` (en-US)


Navigator: vendorSub プロパティ - Web API

Navigator: vendorSub プロパティ
==========================

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

**`Navigator.vendorSub`** プロパティの値は、どのブラウザーでも常に空文字列です。

### 値

* 空文字列です。
仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-vendorsub-dev |

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

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


Navigator.vibrate() - Web API

Navigator.vibrate()
===================

**`Navigator.vibrate()`** メソッドは、端末のバイブレーションハードウェアがあればパルスを送ります。端末がバイブレーションに対応していない場合は、このメソッドは効果はありません。このメソッドが呼び出されたときに、すでにバイブレーションパターンが進行中であった場合は、前のパターンが停止され、代わりに新しいパターンが始まります。

引数が無効であるためこのメソッドがバイブレーションを実行できなかった場合は `false` を返し、それ以外の場合は `true` を返します。パターンによってとても長いバイブレーションが指定された場合は、短縮されます。最大長は実装に依存します。

構文
--
```

var successBool = window.navigator.vibrate(pattern);
```

`pattern`

バイブレーションと停止の間隔のパターンを提供します。それぞれの値はミリ秒単位の数値でバイブレーションと停止の長さを交互に表します。単一の値 (そのミリ秒だけ一度バイブレーションを行う) か、値の配列でバイブレーション、停止、再度バイブレーションと交互の値の配列で指定することができます。詳しくは Vibration API (en-US) を参照してください。

`0` の値、空の配列、すべての値がゼロである配列を渡すと、現在進行中のバイブレーションパターンをすべて中止します。

例
-

```js
window.navigator.vibrate(200); // vibrate for 200ms
window.navigator.vibrate([
  100, 30, 100, 30, 100, 30, 200, 30, 200, 30, 200, 30, 100, 30, 100, 30, 100,
]); // モールス信号で 'SOS' とバイブレーションします。
```

仕様書
---

| Specification |
| --- |
| Vibration API (Second Edition) # dom-navigator-vibrate |

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

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

関連情報
----

* Vibration API (en-US)


Navigator: mediaCapabilities プロパティ - Web API

Navigator: mediaCapabilities プロパティ
==================================

**`Navigator.mediaCapabilities`** プロパティは読み取り専用で、メディア能力 API (en-US) で定義されています。
 指定された形式のエンコードとデコードおよび出力能力についての情報が取得できる `MediaCapabilities` (en-US) オブジェクトを返します。

値
-

`MediaCapabilities` (en-US) オブジェクト。

例
-

```js
navigator.mediaCapabilities
  .decodingInfo({
    type: "file",
    audio: {
      contentType: "audio/mp3",
      channels: 2,
      bitrate: 132700,
      samplerate: 5200,
    },
  })
  .then((result) => {
    console.log(
      `This configuration is ${result.supported ? "" : "not "}supported,`,
    );
    console.log(`${result.smooth ? "" : "not "}smooth, and`);
    console.log(`${result.powerEfficient ? "" : "not "}power efficient.`);
  });
```

仕様書
---

| Specification |
| --- |
| Media Capabilities # dom-navigator-mediacapabilities |

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

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

関連情報
----

* メディア能力 API (en-US)
* `Navigator`


Navigator.getUserMedia() - Web API

Navigator.getUserMedia()
========================

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

非推奨の **`Navigator.getUserMedia()`** メソッドは、最大 1 系統の動画入力機器（カメラや共有画面など）および最大 1 系統の音声入力機器（マイクなど）を `MediaStream` のソースとして使用する許可をユーザーに求めます。

許可が与えられた場合、それらの機器から動画や音声のトラックを持つ `MediaStream` が、指定された成功コールバックに配信されます。許可が拒否された場合や、互換性のある入力機器が存在しない場合、その他のエラー条件が発生した場合は、何が問題となったかを説明する `MediaStreamError` オブジェクトを伴ってエラーコールバックが実行されます。ユーザーがまったく選択をしなかった場合は、どちらのコールバックも実行されません。

**メモ:** これは古いメソッドです。代わりに新しい `navigator.mediaDevices.getUserMedia()` を使用してください。技術的には非推奨ではありませんが、この古いコールバックの版はそのようにマークされていますので、新しいプロミスを返す版を使用するよう強くお勧めします。

構文
--

```js
getUserMedia(constraints, successCallback, errorCallback);
```

### 引数

`constraints`

要求するメディアの種類と、それぞれの種類に対する要求事項を指定するオブジェクトです。詳細は、最新の `MediaDevices.getUserMedia()` メソッドの定数の節と、能力、制約、そして設定の記事を参照してください。

`successCallback`

メディアアクセスの要求が承認されたときに呼び出される関数です。この関数は、メディアストリームを含む `MediaStream` オブジェクトの単一の引数で呼び出されます。コールバックは、次の例のようにストリームを任意のオブジェクト (`<audio>` や `<video>` 要素など) に割り当てることができます。

```js
function(stream) {
   const video = document.querySelector('video');
   video.srcObject = stream;
   video.onloadedmetadata = function(e) {
      // Do something with the video here.
   };
}
```

`errorCallback`

呼び出しが失敗した場合、 `errorCallback` で指定され、`MediaStreamError` が唯一の引数に与えられた関数が呼び出されますこのオブジェクトは、`DOMException` をひな形としています。発生しうるエラーの一覧は、以下のエラーを参照してください。

### 返値

なし (`undefined`)。

例
-

### 幅と高さ

これは、様々のブラウザーの接頭辞に対処したコードを含む、 `getUserMedia()` の使用例です。ただし、これは非推奨の使用方法なので注意してください。現在の API の使用例は、`MediaDevices.getUserMedia()` 下の例の節を参照してください。

```js
navigator.getUserMedia =
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
  navigator.getUserMedia(
    { audio: true, video: { width: 1280, height: 720 } },
    function (stream) {
      const video = document.querySelector("video");
      video.srcObject = stream;
      video.onloadedmetadata = function (e) {
        video.play();
      };
    },
    function (err) {
      console.log("The following error occurred: " + err.name);
    },
  );
} else {
  console.log("getUserMedia not supported");
}
```

許可設定
----

インストール可能なアプリで `getUserMedia()` を使用するには、マニフェストファイル内で以下のフィールドのいずれか、または両方を指定する必要があります。

```js
"permissions": {
  "audio-capture": {
    "description": "Required to capture audio using getUserMedia()"
  },
  "video-capture": {
    "description": "Required to capture video using getUserMedia()"
  }
}
```

詳しい情報は、permission: audio-capture および permission: video-capture を参照してください。

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

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

**警告:** 新しいコードでは代わりに `MediaDevices.getUserMedia` を使用してください。

関連情報
----

* この非推奨のメソッドに代わる `MediaDevices.getUserMedia()`。
* WebRTC - この API の入門ページ
* MediaStream API - メディアストリームオブジェクト向けの API
* ウェブカメラでの写真撮影 (en-US) - `getUserMedia()` を使って、動画ではなく写真を撮るためのチュートリアル


Navigator: gpu プロパティ - Web API

Navigator: gpu プロパティ
====================

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

**`Navigator.gpu`** は読み取り専用のプロパティで、 WebGPU API のエントリーポイントである現在の閲覧コンテキストの `GPU` オブジェクトを返します。

値
-

`GPU` オブジェクトです。

例
-

```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU not supported.");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("Couldn't request WebGPU adapter.");
  }

  const device = await adapter.requestDevice();

  //...
}
```

仕様書
---

| Specification |
| --- |
| WebGPU # navigator-gpu |

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

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

関連情報
----

* WebGPU API


Navigator: connection プロパティ - Web API

Navigator: connection プロパティ
===========================

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

**`Navigator.connection`** は読み取り専用のプロパティで、ユーザーの端末の現在の帯域幅や、接続が測定されているかどうかなどのシステムの接続に関する情報を含む `NetworkInformation` を返します。

ユーザーの接続に基づいて、高解像度と低解像度のどちらのコンテンツを使うかの選択に使用できます。

値
-

`NetworkInformation` オブジェクトです。

仕様書
---

| Specification |
| --- |
| Network Information API # connection-attribute |

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

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

関連情報
----

* オンライン／オフラインイベント


Navigator.sendBeacon() - Web API

Navigator.sendBeacon()
======================

**`navigator.sendBeacon()`** メソッドは、ウェブサーバーに非同期に少量のデータを HTTP で送るために使用することができます。

構文
--
```

navigator.sendBeacon(url, data);
```

### 引数

`url`

*data* を受け取る URL です。相対でも絶対でも可能です。

`data`

送るデータを含む `ArrayBuffer`, `ArrayBufferView` (en-US), `Blob`, `DOMString`, `FormData`, `ReadableStream`, `URLSearchParams` のいずれかのオブジェクトです。

### 返値

**`sendBeacon()`** メソッドが `true` を返した場合は、ユーザーエージェントが転送のために `data` をキューに入れることに成功したことを表します。それ以外の場合は `false` を返します。

解説
--

このメソッドは、アナリティクスや診断のために、データの送信が早すぎるとデータ収集の機会を失う可能性があるような場合、文書がアンロードされる前にサーバーにデータを送信するものです。例えば、他のページに移動してページがアンロードされる前にユーザーがどのリンクをクリックしたかなどです。

文書のアンロード時に確実にデータが送信されるようにするのは開発者にとってずっと難しいことでした。ユーザーエージェントは通常 `unload` ハンドラーの中で生成された非同期 `XMLHttpRequest` を無視するからです。

伝統的には、これは以下のような回避方法を使用して、ある URL にデータを送信するまでページのアンロードを遅らせるよう位置づけられていました。

* ブロックする同期 `XMLHttpRequest` の呼び出しを `unload` または `beforeunload` イベントハンドラーの中で行い、データを送信する。
* `<img>` 要素を作成し、その `src` を `unload` ハンドラーの中で設定する。ほとんどのユーザーエージェントは画像を読み込むためにアンロードを遅延させる。
* `unload` ハンドラー内で何もしないループを作成する。

これらの方法はすべて、文書のアンロードをブロックするので、次への遷移が遅くなります。次のページがこれをやめさせる方法は存在しないので、前のページの問題であるにもかかわらず、次のページが遅いように見えます。

次の例は `unload` ハンドラーで同期 `XMLHttpRequest` を送ってサーバにデータを送信しようとする理論的なアナリティクスのコードです。これは、次のページの読み込みが遅らせられる結果になります。

```js
window.addEventListener("unload", function logData() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/log", false); // third parameter of `false` means synchronous
  xhr.send(analyticsData);
});
```

これが **`sendBeacon()`** で置き換わるところです。 `sendBeacon()` メソッドにより、ユーザーエージェントが行う機会があればデータが非同期に送信され、アンロードや次への遷移が遅れることはありません。**これはアナリティクスのデータを送信する際の問題をすべて解決します。**

* データの送信の信頼性が高い
* 非同期に送信される
* 次のページの読み込みへの影響がない
* 加えて、どの古いテクニックよりも簡単にコードを書くことができる。

次の例は、 `sendBeacon()` メソッドを使用してサーバーにデータを送信する、理論的なアナリティクスのコードパターンです。

```js
window.addEventListener("unload", function logData() {
  navigator.sendBeacon("/log", analyticsData);
});
```

ビーコンは HTTP リクエストを POST メソッドで送信し、関連する Cookie も呼び出し時にすべて利用できます。

仕様書
---

| Specification |
| --- |
| Beacon # sendbeacon-method |

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

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

関連情報
----

* `navigator`


Navigator: appCodeName プロパティ - Web API

Navigator: appCodeName プロパティ
============================

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

**`Navigator.appCodeName`** プロパティの値は、どのブラウザーでも常に "`Mozilla`" です。このプロパティは互換性のためだけに維持されています。

**メモ:** このプロパティが実際の製品名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "`Mozilla`" を返します。

値
-

"`Mozilla`" という文字列です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-appcodename-dev |

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

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

関連情報
----

* `Navigator.appName`
* `Navigator.product`


Navigator: globalPrivacyControl プロパティ - Web API

Navigator: globalPrivacyControl プロパティ
=====================================

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

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

**`Navigator.globalPrivacyControl`** プロパティはユーザーのグローバルプライバシー制御設定を返します。この設定は、ウェブサイトやサービスワーカースクリプトがユーザーの個人情報を第三者に販売したり、共有したりすることにユーザーが同意するかどうかを示します。

プロパティの値は、 `Sec-GPC` (en-US) HTTP ヘッダーの値を反映します。

| Sec-GPC 値 | 意味 |
| --- | --- |
| 1 | ユーザーは、自分のデータを販売または共有することに同意していません。 |
| 0 | ユーザーは、データの販売または共有に同意しました。 |
| unspecified | ユーザーはデータに関してまだ同意していません。 |

例
-

```js
console.log(navigator.globalPrivacyControl);
// prints "1" indicating user does not want their data shared or sold.
// prints "0" if the user consents to their data being shared or sold.
// prints "unspecified" if Sec-GPC header is not present.
```

仕様書
---

#### No specification found

No specification data found for `api.Navigator.globalPrivacyControl`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

関連情報
----

* `Sec-GPC` (en-US) ヘッダー
* globalprivacycontrol.org
* Global Privacy Control Spec
* Do Not Track on Wikipedia


Navigator: permissions プロパティ - Web API

Navigator: permissions プロパティ
============================

**`Navigator.permissions`** は読み取り専用プロパティで、権限 API の対象となる API のパーミッションの状態を照会および更新するために使用できる `Permissions` オブジェクトを返します。

値
-

`Permissions` オブジェクトです。

例
-

```js
navigator.permissions.query({ name: "geolocation" }).then((result) => {
  if (result.state === "granted") {
    showMap();
  } else if (result.state === "prompt") {
    showButtonToEnableMap();
  }
  // パーミッションが拒否された場合は、何もしないでください。
});
```

仕様
--

| Specification |
| --- |
| Permissions # dom-navigator-permissions |

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

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

関連情報
----

* 権限 API
* `Navigator`


Navigator: setAppBadge() メソッド - Web API

Navigator: setAppBadge() メソッド
=============================

`Navigator` インターフェイスの **`setAppBadge()`** メソッドは、このアプリケーションに関連付けられたアイコン上のバッジを設定します。メソッドに値を渡した場合は、この値をバッジの値として設定します。値を渡さなかった場合は、バッジは点、もしくはプラットフォームで定義されたその他の表示になります。

構文
--

```js
setAppBadge()
setAppBadge(contents)
```

### 引数

`contents` 省略可

バッジの値として用いる `number` です。`contents` が `0` の場合は、バッジは `nothing` に設定され、非表示になります。

### 返値

`undefined` で解決する `Promise` を返します。

### 例外

`NotSupportedError` `DOMException`

`Navigator` に操作を実行する対象のドキュメントが無いとき投げられます。

例
-

以下の例では、未読カウントを `setAppBadge()` に渡します。その結果、バッジは `30` を表示するはずです。

```js
const unread = 30;
navigator.setAppBadge(unread);
```

仕様書
---

| Specification |
| --- |
| Badging API # setappbadge-method |

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

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

関連情報
----

* Badging for app icons


Navigator: userActivation プロパティ - Web API

Navigator: userActivation プロパティ
===============================

**`userActivation`** は `Navigator` インターフェイスの読み取り専用プロパティで、現在のウインドウのユーザーによる有効化の状態についての情報を持つ `UserActivation` オブジェクトを返します。

値
-

`UserActivation` オブジェクトです。

例
-

### 最近ユーザーによる操作が行われたかをチェックする

ユーザーが最近ページを操作したか (一時的な有効化) をチェックするために `UserActivation.isActive` を使用します｡

```js
if (navigator.userActivation.isActive) {
  // 例えば､メディアの再生の要求に進む
}
```

### これまでにユーザーによる操作が行われたかをチェックする

ユーザーがこれまでにページを操作したか (粘着的な有効化) をチェックするために `UserActivation.hasBeenActive` を使用します｡

```js
if (navigator.userActivation.hasBeenActive) {
  // 例えば､アニメーションの自動再生に進む
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-useractivation |

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

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

関連情報
----

* `UserActivation`
* `UserActivation.hasBeenActive`
* `UserActivation.isActive`
* ユーザーによる有効化によって制御される機能


Navigator.getBattery() - Web API

Navigator.getBattery()
======================

**`getBattery()`** メソッドは、システムのバッテリーに関する情報を提供します。これは `BatteryManager` (en-US) オブジェクトで解決されるバッテリーのプロミスを返し、バッテリーの状態を監視するために処理できるいくつかの新しいイベントを提供します。これはバッテリー状態 API を実装しています。詳細、API の使用ガイド、サンプルコードについては、そのドキュメントを参照してください。

**メモ:** ブラウザーによっては、この機能へのアクセスは `Feature-Policy` の `battery` ディレクティブで制御されます。

構文
--

```js
getBattery()
```

### 引数

なし。

### 返値

解決されると、バッテリーの状態に関する情報を取得するために使用できる `BatteryManager` (en-US) オブジェクトを単一の引数として持つ履行ハンドラーを呼び出す `Promise` です。

例外
--

このメソッドは真の例外を発生させません。代わりに、返されたプロミスが拒否され、 `DOMException` の中に `name` を次のうちの一つに設定します。

`SecurityError`

ユーザーエージェントは安全でないコンテキストではバッテリー情報を公開しませんが、このメソッドが安全でないコンテキストから呼び出されました。

**メモ:** 一部のユーザーエージェントの古いバージョンでは、安全でないコンテキストでこの機能の利用を許可していることがあります。

`NotAllowedError`

現在この例外を発生させるユーザーエージェントはありませんが、仕様書では以下のような動作が記述されています。

>
>
>  この文書ではこの機能の使用が許可されていません。
>  例えば、 `Feature-Policy` `battery` 機能を介して明示的に許可されてなかったり、制限されていたりした場合です。
>
>
>
>

例
-

この例では、バッテリーの現在の充電状態を取得し、充電状態が変化するたびに充電状態が記録されるように、 `chargingchange` (en-US) イベントのハンドラーを確立します。

```js
let batteryIsCharging = false;

navigator.getBattery().then((battery) => {
  batteryIsCharging = battery.charging;

  battery.addEventListener("chargingchange", () => {
    batteryIsCharging = battery.charging;
  });
});
```

その他の例や詳細については、バッテリー状態 APIを参照してください。

仕様書
---

| Specification |
| --- |
| Battery Status API # dom-navigator-getbattery |

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

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

関連情報
----

* バッテリー状態 API
* `Feature-Policy` の `battery` 機能


Navigator: userAgentData プロパティ - Web API

Navigator: userAgentData プロパティ
==============================

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

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

**`userAgentData`** は `Navigator` インターフェイスの読み取り専用プロパティで、 `NavigatorUAData` オブジェクトを返します。これを使用して、ユーザーエージェントクライアントヒント API へアクセスすることができます。

値
-

`NavigatorUAData` オブジェクトです。

例
-

以下の例は、 `NavigatorUAData.brands` の値をコンソールに表示するものです。

```js
console.log(navigator.userAgentData.brands);
```

仕様書
---

| Specification |
| --- |
| User-Agent Client Hints # dom-navigatorua-useragentdata |

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

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

関連情報
----

* Improving user privacy and developer experience with User-Agent Client Hints


Navigator.getVRDisplays() - Web API

Navigator.getVRDisplays()
=========================

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

**`getVRDisplays()`** は `Navigator` インターフェイスのメソッドで、コンピューターに接続されている利用可能な VR 機器を表す `VRDisplay` オブジェクトの配列へ解決するためのプロミスを返します。

構文
--

```js
getVRDisplays();
```

### 引数

なし。

### 返値

`VRDisplay` オブジェクトの配列へ解決するためのプロミスです。

例
-

コード例については `VRDisplay` を参照してください。

仕様書
---

#### No specification found

No specification data found for `api.Navigator.getVRDisplays`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

関連情報
----

* WebVR API


Navigator: xr プロパティ - Web API

Navigator: xr プロパティ
===================

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

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

**`xr`** は `Navigator` インターフェイスによって提供される読み取り専用プロパティで、WebXR 機器 API へのアクセスに使用できる `XRSystem` オブジェクトを返します。

値
-

現在のコンテキストで WebXR 機器 API とのインターフェイスに使用する `XRSystem` オブジェクト。 これを使用して、拡張現実や仮想現実の画像をユーザーに提示することができます。

使用上の注意
------

それぞれの `Window` には独自の `Navigator` のインスタンスがあり、`window.navigator` または単に `navigator` としてアクセスできます。 同時に、新しい `XRSystem` インスタンスも作成され、`navigator.xr` として `navigator` インスタンスにアタッチされます。 `xr` プロパティが存在する場合は、それを使用して WebXR 機器 API にアクセスできます。

WebXR が利用可能かどうかを判断するには、次のようにします。

```js
if ("xr" in window.navigator) {
  /\* WebXR can be used! \*/
} else {
  /\* WebXR isn't available \*/
}
```

仕様
--

| Specification |
| --- |
| WebXR Device API # navigator-xr-attribute |

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

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

関連情報
----

* WebGL API: ウェブの 2D および 3D グラフィック
* Canvas API: 簡単な 2D グラフィック API


Navigator: serial プロパティ - Web API

Navigator: serial プロパティ
=======================

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

**`serial`** は `Navigator` インターフェイスの読み取り専用プロパティで、ウェブシリアル API のエントリーポイントを表す `Serial` オブジェクトを返します。

読み取り時、常に同じ `Serial` オブジェクトのインスタンスが返ります。

値
-

`Serial` オブジェクトです。

例
-

この例では、`getPorts()` メソッドを用いて利用可能なポートのリストを初期化します。

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

仕様書
---

| Specification |
| --- |
| Web Serial API # extensions-to-the-navigator-interface |

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

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

関連情報
----

* シリアルポートとの読み書き
* Getting started with the web serial API


Navigator: wakeLock プロパティ - Web API

Navigator: wakeLock プロパティ
=========================

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

**`wakeLock`** は読み取り専用のプロパティで、 `WakeLock` インターフェイスを返します。これにより、文書が画面起動ロックを取得することができます。画面起動ロックが有効であれば、ユーザーエージェントは端末が画面を暗くしたり、画面を完全にオフにしたり、スクリーンセーバーを表示したりすることを防ぐよう試みることができます。

構文
--

```js
navigator.wakeLock
```

仕様書
---

| Specification |
| --- |
| Screen Wake Lock API # extensions-to-the-navigator-interface |

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

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

関連情報
----

* `WakeLock.request()`
* 画面起動ロック API
* ブログ投稿 - Stay awake with the Screen Wake Lock API


Navigator: userAgent プロパティ - Web API

Navigator: userAgent プロパティ
==========================

**`Navigator.userAgent`** は読み取り専用のプロパティで、現在のブラウザーのユーザーエージェント文字列を返します。

**メモ:** 仕様書では、ブラウザーがこのフィールドを介して提供する情報をできるだけ少なくすることを求めています。このプロパティの値は、同じブラウザーの将来のバージョンでも同じままであると仮定してはいけません。まったく使用しないようにしたり、ブラウザーの現在のバージョンと過去のバージョンのためだけに使用するようにしてください。新しいブラウザーは、古いブラウザーと同じ UA、またはその一部を使い始めるかもしれません。ブラウザーエージェントが本当にこのプロパティによって広告されたものであるという保証は本当にありません。

また、ブラウザーのユーザーはこのフィールドの値を変更することができることを覚えておいてください (UA なりすまし)。

ユーザーエージェント文字列の検出に基づくブラウザーの識別は**信頼できず**、ユーザーエージェント文字列はユーザーが設定可能なので**推奨されません**。例えば、以下のようになります。

* Firefox では、 about:config の `general.useragent.override` 設定を使って変更することができます。一部の Firefox 拡張機能でも設定可能です。しかし、これは取得する HTTP ヘッダーと `navigator.userAgent` が返す HTTP ヘッダーを変更するだけです。
 他にも JavaScript コードを利用してブラウザー識別を行うメソッドがあるかもしれません。
* Opera 6 以降では、メニューからブラウザー識別文字列を設定できます。
値
-

文字列で、ブラウザーが HTTP ヘッダーで提供する完全なユーザーエージェント文字列と、 `Navigator` オブジェクト上のメソッドやその他の関連メソッドへのレスポンスを指定します。

ユーザーエージェント文字列は形式的な構造に基づいて構築されており、いくつかの情報に分解することができます。これらの情報の各部分は、ユーザ－が設定可能な他の Navigator のプロパティから来ています。Gecko ベースのブラウザは以下の一般的な構造に準拠しています。
```

userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU;
Localization; rv: revision-version-number) product/productSub
Application-Name Application-Name-version
```

例
-

```js
alert(window.navigator.userAgent);
// alerts "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1"
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-useragent-dev |

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

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

関連情報
----

* `User-Agent` HTTP ヘッダー


Navigator: appVersion プロパティ - Web API

Navigator: appVersion プロパティ
===========================

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

"`4.0`" またはそのブラウザーのバージョン情報を表す文字列のどちらかを返します。

**メモ:** このプロパティがブラウザーの正しいバージョンを返すことを期待しないでください。

値
-

"`4.0`" またはそのブラウザーのバージョン情報を表す文字列のどちらかです。

例
-

```js
alert(
  `このブラウザーのバージョンは ${navigator.appVersion} と報告されています。`,
);
```

注
-

`window.navigator.userAgent` プロパティもバージョン番号を含んでいる場合がありますが ("`Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape 6/6.1`" など)、ユーザーエージェント文字列を変更したり、他のブラウザー、プラットフォーム、ユーザーエージェントに「偽装」したり、ブラウザーベンダー自身がこれらのプロパティに無頓着であったりすることを意識しておいてください。

`window.navigator.appVersion`, `window.navigator.appName`, `window.navigator.userAgent` の各プロパティは、「ブラウザー推定」 (browser sniffing) コード、すなわち使用しているブラウザーを検出し、それに従ってページを調整しようとするスクリプトで使われてきました。これにより、一部のウェブサイトから拒否されないようにするために、ブラウザーがこれらのプロパティで偽の情報を返さなければならないという現在の状況が発生したのです。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-appversion-dev |

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

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


Navigator.registerProtocolHandler() - Web API

Navigator.registerProtocolHandler()
===================================

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

**`Navigator`** の **`registerProtocolHandler()`** メソッドで、ウェブサイトが特定の URL スキーム（別名プロトコル）を開いたり処理したりする機能を登録することを可能にします。

例えば、この API はウェブメールサイトで `mailto:` の URL を開かせたり、 VoIP サイトで `tel:` の URL を開かせたりします。

構文
--

```js
registerProtocolHandler(scheme, url);
registerProtocolHandler(scheme, url, title);
```

**メモ:** 非推奨の `title` 引数が付いたものは、互換性のために推奨されます（下記の引数情報を参照してください）。

### 引数

`scheme`

 サイトが扱いたいプロトコルの許可されているスキームが入った文字列です。
 例えば、 `"sms"` スキームを渡すことで、SMS テキストメッセージリンクを扱うように登録することができます。

`url`

 ハンドラーの URL を指定する文字列。
 **この URL には `%s` を含める必要があり**、これは取り扱う URL をエスケープしたもので置き換得られるプレイスホルダーとして扱われます。

**メモ:** ハンドラーの URL は `https` スキームを使用する必要があります。古いブラウザーは `http` にも対応しています。

`title`
非推奨

 ハンドラーを表す人間が読めるタイトル文字列です。
 **これはユーザーに表示されます**。例えば、「このサイトで [スキーム] のリンクを扱うことを許可しますか？」と尋ねたり、ブラウザーの設定で登録されたハンドラーの一覧に表示されたりします。

**メモ:** タイトルはなりすましの懸念から仕様から削除されました。
 しかし `title` は一部のブラウザーが**まだ必要としている**ため、設定する必要があります（下記の互換性一覧表をご覧ください）。
 更新された仕様に対応しているブラウザーはほとんどの場合、タイトルを受け付けますが、無視します。

### 返値

なし (`undefined`)。

### 例外

`SecurityError` `DOMException`

 ユーザーエージェントが登録をブロックしました。
 以下のような場合に起こる可能性があります。

* ブラウザーが自身が処理するスキーム（`https:`, `about:`, など）であるなど、登録されているスキーム（プロトコル）が無効である場合。
* ハンドラーの URL のオリジンが、本 API を呼び出すページのオリジンと一致しない場合。
* ブラウザーが、この関数を安全なコンテキストから呼び出すことを要求している場合。
* ブラウザーが、ハンドラーの URL が HTTPS であることを要求している場合。

`SyntaxError``DOMException`

`%s` が指定されたハンドラー URL に含まれていない場合。

許可されているスキーム
-----------

セキュリティ上の理由により `registerProtocolHandler()` は登録可能なスキームに制限を設けています。

**カスタムスキーム**は次のような場合に登録されます。

* カスタムスキームの名前が `web+` で始まる
* カスタムスキームの名前が `web+` 接頭辞の後に 1 文字以上ある
* カスタムスキームの名前に小文字の ASCII 文字のみが含まれている

例えば下の 例 で使われている `web+burger` などが挙げられます。

もしくは、以下のホワイトリストに挙げられているスキームでなければなりません。

* `bitcoin`
* `ftp`
* `ftps`
* `geo`
* `im`
* `irc`
* `ircs`
* `magnet`
* `mailto`
* `matrix`
* `mms`
* `news`
* `nntp`
* `openpgp4fpr`
* `sftp`
* `sip`
* `sms`
* `smsto`
* `ssh`
* `tel`
* `urn`
* `webcal`
* `wtai`
* `xmpp`

例
-

ウェブアプリケーションが `burgers.example.com` にある場合、次のようにして `web+burger:` リンクを処理するプロトコルハンドラーを登録することができます。

```js
navigator.registerProtocolHandler(
  "web+burger",
  "https://burgers.example.com/?burger=%s",
  "Burger handler",
); // 最後の title 引数は互換性のために入れている
```

これは、 `web+burger:` リンクがアクセスしたバーガーの URL を `%s` プレースホルダーに挿入し、ユーザーをサイトに誘導するハンドラーを作成します。

このスクリプトはハンドラーの URL と同じオリジン (すなわち、 `https://burgers.example.com` にあるページのいずれか) から実行する必要があり、ハンドラーの URL は `http` または `https` である必要があります。

コードがプロトコルハンドラーを登録しようとしていることはユーザーに通知され、ユーザーは登録を許可するかどうか決めることができます。以下のスクリーンショットは `google.co.uk` での例です。

![ブラウザーの通知には、 "Add Burger handler (www.google.co.uk) as application for burger links?" と表示され、「アプリケーションの追加」ボタンとハンドラー要求を無視するクローズボタンが提供されます。](/ja/docs/Web/API/Navigator/registerProtocolHandler/protocolregister.png)

仕様書
---

| Specification |
| --- |
| HTML Standard # custom-handlers |

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

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

関連情報
----

* ウェブベースのプロトコルハンドラー
* RegisterProtocolHandler Enhancing the Federated Web (Mozilla Webdev)


Navigator: mediaDevices プロパティ - Web API

Navigator: mediaDevices プロパティ
=============================

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

**`Navigator.mediaDevices`** 読み取り専用プロパティは、カメラやマイク、画面共有のような接続されたメディア入力装置へのアクセスを提供する `MediaDevices` オブジェクトを返します。

構文
--

```js
navigator.mediaDevices
```

### 返値

`MediaDevices` シングルトンオブジェクト。例えば `navigator.mediaDevices.getUserMedia()` (en-US) などを呼び出すなど、通常は、このオブジェクトのメンバーを直接使用するだけです。

仕様書
---

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

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

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

関連情報
----

* メディアキャプチャとストリーム API: すべてのメディアストリーム API についてのドキュメントのエントリーポイント。
* WebRTC API: 密接に関連する WebRTC API についてのドキュメント。


Navigator: productSub プロパティ - Web API

Navigator: productSub プロパティ
===========================

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

**`Navigator.productSub`** プロパティは読み取り専用で、現在のブラウザーのビルド番号を返します。

値
-

文字列です。

例
-

```js
document.body.textContent = `productSub: ${navigator.productSub}`;
```

メモ
--

IE では、このプロパティは、 `undefined` を返します。

Apple Safari および Google Chrome では、このプロパティは常に `20030107` を返します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-productsub-dev |

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

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


Navigator: language プロパティ - Web API

Navigator: language プロパティ
=========================

**`Navigator.language`** は読み取り専用プロパティで、ユーザーの言語を表す文字列を返します。普通、ブラウザー UI の言語が返されます。

値
-

文字列で、 RFC 5646: Tags for Identifying Languages (also known as BCP 47) で定義された言語バージョンを表します。例えば、"en"、"en-US"、"fr"、"fr-FR"、"es-ES" などが含まれます。

iOS 10.2 以前の Safari では、国コードは "en-us"、"fr-fr" のように小文字で返されます。

例
-

```js
if (/^en\b/.test(navigator.language)) {
  doLangSelect(window.navigator.language);
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-language-dev |

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

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

関連情報
----

* `navigator.languages`
* `navigator`


Navigator: mediaSession プロパティ - Web API

Navigator: mediaSession プロパティ
=============================

`Navigator` の読み取り専用プロパティである **`mediaSession`** は、`MediaSession` オブジェクトを返します。これは、文書内で扱われているメディアの現在の再生状態に関するメタデータやその他の情報をブラウザーと共有するために使用できます。

この情報は、端末の標準メディアコントロールユーザーがメディアの再生を記述し制御するために、端末や OS と共有されることがあります。

さらに、`MediaSession` インターフェイスは `setActionHandler()` メソッドを提供し、ユーザーが画面上または物理的に再生、一時停止、シーク、および他の同様のコントロールなどの機器の制御に関与するときのイベントを受信することができます。例えば、インターネットラジオアプリでは、`setActionHandler()` を使用して、キーボードやユーザー端末上の他の場所にあるメディアコントロールを使用して、アプリのメディア再生を制御できるようにすることができます。

値
-

現在の文書が使用できる `MediaSession` オブジェクトで、再生しているメディアとその現在の再生状態に関する情報を共有することができます。この情報には、再生中の曲のタイトル、アーティスト名、アルバム名などの典型的なメタデータに加え、アルバムアート、アーティスト写真などを含む 1 つ以上の画像が含まれる可能性があります。

例
-

この例では、メタデータは `mediaSession` オブジェクトに送信されます。このコードは、使用する前に `navigator.mediaSession` プロパティが利用できることを確認することから始めていることに注意してください。

```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Podcast Episode Title",
    artist: "Podcast Host",
    album: "Podcast Name",
    artwork: [{ src: "podcast.jpg" }],
  });
}
```

仕様書
---

| Specification |
| --- |
| Media Session # dom-navigator-mediasession |

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

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


Navigator: requestMIDIAccess() メソッド - Web API

Navigator: requestMIDIAccess() メソッド
===================================

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

`Navigator` インターフェイスの **`requestMIDIAccess()`** メソッドは、ユーザーのシステム上の MIDI デバイスへのアクセスの要求を表す `Promise` を返します。このメソッドは MIDI デバイスのアクセス、列挙、操作の方法を提供する Web MIDI API の一部です。

 このメソッドは、ユーザーにシステムで利用可能な MIDI デバイスへのアクセスを要求するプロンプトを表示する可能性もありますし、事前の設定に基づいてアクセスを許可または拒否する可能性もあります。
 許可が得られた場合は、`Promise` が解決し、`MIDIAccess` オブジェクトが返されます。

構文
--

```js
requestMIDIAccess()
requestMIDIAccess(MIDIOptions)
```

### 引数

`MIDIOptions` 省略可

メソッドに渡すオプションを表す `Object` です。以下のオプションがあります。

`sysex`

`Boolean` 値で、`true` に設定するとシステムエクスクルーシブ (sysex) メッセージを送受信する機能を許可します。デフォルト値は `false` です。

`software`

`Boolean` 値で、`true` に設定するとすべてのインストール済のソフトウェアシンセサイザーの使用をシステムに許可します。デフォルト値は `false` です。

### 返値

`MIDIAccess` オブジェクトで解決する `Promise` を返します。

### 例外

`AbortError` `DOMException`

ユーザーの操作によりドキュメントまたはページが閉じられたとき投げられます。

`InvalidStateError` `DOMException`

下層のシステムでエラーが発生したとき投げられます。

`NotSupportedError` `DOMException`

システムが機能またはオプションに対応していないとき投げられます。

`SecurityError` `DOMException`

ユーザーまたはシステムがアプリケーションによる要求されたオプションを持つ MIDIAccess オブジェクトの生成を拒否したか、ドキュメントがこの機能の使用を許可されていないとき (たとえば、Permission Policy で制限されているときや、ユーザーが以前に許可の要求を拒否しているとき) 投げられます。

セキュリティの要件
---------

この API へのアクセスは、以下の制約の対象です。

* このメソッドは安全なコンテキストで呼び出される必要があります。
* アクセスは `midi` HTTP Permission Policy で制限される可能性があります。
* ユーザーがユーザーエージェント固有のメカニズムによりこの API を使用する許可を明示的に与えるか、以前に許可を与えている必要があります。なお、Permission Policy でアクセスが拒否された場合は、ユーザーがアクセスを許可することはできません。

許可の状態は、Permissions API の `navigator.permissions.query()` メソッドに権限 `midi` および (省略可能な) `sysex` プロパティを設定した権限ディスクリプターを渡すことで取得できます。

```js
navigator.permissions.query({ name: "midi", sysex: true }).then((result) => {
  if (result.state === "granted") {
    // アクセスが許可されました
  } else if (result.state === "prompt") {
    // API を使用すると、許可を要求するプロンプトが表示されます
  }
  // ユーザープロンプトまたは Permission Policy でアクセスが拒否されました
});
```

例
-

### MIDI へのアクセスを要求する

以下の例では、`Navigator.requestMIDIAccess()` メソッドが `MIDIAccess` オブジェクトを返します。このオブジェクトは、入力および出力の MIDI ポートの情報へアクセスするのに用いることができます。

```js
navigator.requestMIDIAccess().then((access) => {
  // 利用可能な MIDI コントローラーのリストを取得する
  const inputs = access.inputs.values();
  const outputs = access.outputs.values();
  // …
});
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-navigator-requestmidiaccess |

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

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

関連情報
----

* Web MIDI API
* Introduction to Web MIDI


Navigator: cookieEnabled プロパティ - Web API

Navigator: cookieEnabled プロパティ
==============================

`navigator.cookieEnabled` は、クッキーが有効かどうかを示す論理値を返します。

このプロパティは読み取り専用です。

値
-

論理値です。

**メモ:** ブラウザーがサードパーティのクッキーをブロックするように構成されていた場合で、 `navigator.cookieEnabled` がサードパーティの iframe の中で呼び出された場合、 Safari, Edge Spartan, IE では `true` を返します (この場合にクッキーを設定しようとしても失敗するにもかかわらず)。 Firefox および Chromium ベースのブラウザーでは `false` を返します。

**メモ:** ウェブブラウザーは特定の場面で特定のクッキーを書き込むことを阻止することがあります。例えば、 Chrome ベースのブラウザーや、 Firefox の一部の実験的なバージョンでは、 `SameSite=None` 属性の付いたクッキーを作成することを許可しませんが、 HTTPS 上で生成され `Secure` 属性がある場合は例外です。

例
-

```js
if (!navigator.cookieEnabled) {
  // ブラウザーが対応していないか、クッキーが設定されることをブロックしています。
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-cookieenabled-dev |

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

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


Navigator: vendor プロパティ - Web API

Navigator: vendor プロパティ
=======================

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

`Navigator` の **`vendor`** プロパティの値は常に "`Google Inc.`"、"`Apple Computer, Inc.`"、（Firefox では）空文字列のいずれかです。

値
-

* "`Google Inc.`"、"`Apple Computer, Inc.`"、（Firefox では）空文字列のいずれかです。
仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-vendor-dev |

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

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


Navigator: serviceWorker プロパティ - Web API

Navigator: serviceWorker プロパティ
==============================

**`Navigator.serviceWorker`** は読み取り専用のプロパティで、 `ServiceWorkerContainer` オブジェクトを返します。これは関連付けられた文書で `ServiceWorker` の登録、削除、更新、通信へのアクセスを提供します。

この機能はプライベートモードでは利用できない可能性があります。

値
-

`ServiceWorkerContainer` です。

例
-

このコードは、ブラウザーがサービスワーカーに対応しているかをチェックします。

```js
if ("serviceWorker" in navigator) {
  // Supported!
}
```

仕様書
---

| Specification |
| --- |
| Service Workers # navigator-service-worker-attribute |

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

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

関連情報
----

* サービスワーカー API
* サービスワーカーの使用


Navigator: ink プロパティ - Web API

Navigator: ink プロパティ
====================

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

**`ink`** は `Navigator` インターフェイスの読み取り専用プロパティで、現在の文書の `Ink` (en-US) オブジェクトを取得します。これはインク API (en-US) の機能へのアクセスを提供します。

値
-

`Ink` (en-US) オブジェクトです。

例
-

```js
async function inkInit() {
  const ink = navigator.ink;
  let presenter = await ink.requestPresenter({ presentationArea: canvas });

  //...
}
```

仕様書
---

| Specification |
| --- |
| Ink API # navigator-interface-extensions |

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

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

関連情報
----

* Enhancing Inking on the Web


Navigator: clipboard プロパティ - Web API

Navigator: clipboard プロパティ
==========================

クリップボード API は **`Navigator`** インターフェイスに読み取り専用の **`clipboard`** プロパティを追加し、これはクリップボードの内容を読み書きするために使用する `Clipboard` オブジェクトを返します。

クリップボード API は切り取り、コピー、貼り付け機能をウェブアプリケーションに実装するために使用することができます。

非同期のクリップボード読み書きメソッドを使用するには、ユーザーがウェブサイトやアプリにクリップボードへのアクセスを許可する必要があります。この許可は Permissions API から、 `"clipboard-read"` や `"clipboard-write"` の権限を取得する必要があります。

値
-

システムのクリップボードにアクセスするために使用される `Clipboard` オブジェクトです。

例
-

以下のコードは、クリップボードの内容を読み取る目的でシステムのクリップボードにアクセスするため、 `navigator.clipboard` を使用します。

```js
navigator.clipboard
  .readText()
  .then(
    (clipText) => (document.querySelector(".cliptext").innerText = clipText),
  );
```

このスニペットは、クラスが `"cliptext"` の要素の内容を、クリップボードのテキストコンテンツで置き換えます。おそらくこのコードは現在のクリップボードの内容を表示するブラウザー拡張機能に使用されているもので、定期的または特定のイベントが発生したときに自動的に更新されます。

クリップボードが空であるか、テキストが含まれていない場合、 `"cliptext"` の要素の内容はクリアされます。これは、クリップボードが空かテキストが含まれていない場合、 `readText()` が空文字列を返すからです。

仕様書
---

| Specification |
| --- |
| Clipboard API and events # navigator-clipboard |

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

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


Navigator: geolocation プロパティ - Web API

Navigator: geolocation プロパティ
============================

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

**`Navigator.geolocation`** は読み取り専用のプロパティで、ウェブコンテンツが端末の位置情報にアクセスするための `Geolocation` オブジェクトを返します。これにより、ウェブサイトやアプリがユーザーの現在の位置に応じた結果を提供できるようになります。

**メモ:** セキュリティ上の理由により、ウェブページが位置情報にアクセスしようとする時、ユーザーにアクセス許可が求められます。その方法やポリシーはブラウザーによって異なることに注意してください。

値
-

`Geolocation` オブジェクトです。

仕様書
---

| Specification |
| --- |
| Geolocation API # dom-navigator-geolocation |

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

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

関連情報
----

* 位置情報 API の使用


Navigator: onLine プロパティ - Web API

Navigator: onLine プロパティ
=======================

ブラウザーのオンライン状態を返します。このプロパティは、オンラインを意味する `true` とオフラインを意味する `false` の論理値を返します。このプロパティは、ブラウザーのネットワークへの接続状態が変化するたびに更新を送信します。更新は、ユーザーがリンクをたどったときや、スクリプトがリモートページを要求したときに発生します。例えば、ユーザーがインターネット接続を失った直後にリンクをクリックした場合、このプロパティは `false` を返します。

このプロパティの実装は、ブラウザーにより異なります。

Chrome および Safari は、ブラウザーがローカルエリアネットワーク (LAN) またはルーターに接続できないときにオフライン、それ以外の状況では `true` を返します。従って、`false` 値が返る場合はブラウザーがオフラインであると考えることができますが、`true` 値は必ずインターネットにアクセスできると考えることはできません。仮想イーサネットアダプタを持つ仮想化ソフトウェアを実行しているコンピュータでは常に「接続中」になるなど、誤検出になる可能性があります。よって、本当にブラウザーのオンラインである状態を検出したい場合は、チェックするための追加の手段を開発する必要があります。

Firefox では、ブラウザーをオフラインモードに切り替えると、 `false` 値が送信されます。 Firefox 41 までは、それ以外の条件では `true` 値が返されます。 Windows の Nightly 68 で実際の動作を確認したところ、 Chrome や Safari のように LAN 接続のみを確認しているため、誤検出が発生していました。

`online` および `offline` イベントを待ち受けすることにより、ネットワーク接続状態の変化を確認することができます。

値
-

論理値です。

例
-

### 基本的な使い方

オンラインであるかを確認するには、以下の例のように `window.navigator.onLine` を確認します。

```js
if (navigator.onLine) {
  console.log("online");
} else {
  console.log("offline");
}
```

ブラウザーが `navigator.onLine` に対応していない場合は、上記の例では常に `false`/`undefined` が返ります。

### ネットワーク状態の変化の待ち受け

ネットワーク接続状態の変化を確認するには、以下の例のように `addEventListener` を使用して、 `window.online` および `window.offline` を待ち受けします。

```js
window.addEventListener("offline", (e) => {
  console.log("offline");
});

window.addEventListener("online", (e) => {
  console.log("online");
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-online-dev |

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

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


Navigator: locks プロパティ - Web API

Navigator: locks プロパティ
======================

**`locks`** は `Navigator` インターフェイスの読み取り専用プロパティで、新しい`Lock` オブジェクトを要求するためのメソッドを提供する `LockManager` オブジェクトを返します。既存の `Lock` オブジェクトを照会します。

値
-

`LockManager` オブジェクト。

仕様書
---

| Specification |
| --- |
| Web Locks API # dom-navigatorlocks-locks |

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

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