Window.location - Web API

Window.location
===============

**`Window.location`** は読み取り専用プロパティで、現在の文書の現在位置についての情報を持つ `Location` オブジェクトを返します。

`Window.location` は *読み取り専用* の `Location` オブジェクトですが、文字列を代入することもできます。すなわち、多くの場合は `location` を文字列として扱うことができます。例えば `location = 'http://www.example.com'` は `location.href = 'http://www.example.com'` と同義です。

すべての利用可能なプロパティについては、 `Location` を参照してください。

値
-

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

例
-

### 基本的な例

```js
alert(location); // alerts "https://developer.mozilla.org/ja/docs/Web/API/Window/location"
```

### 例 1: 新しいページへ移動

location オブジェクトに新しい値が代入されるたびに、 `location.assign()` が変更された URL で呼び出されたかのように、その URL の文書が読み込まれます。

なお、ナビゲーション関連のサンドボックスフラグによっては、例外が発生して移動に失敗する場合があります。

```js
location.assign("http://www.mozilla.org"); // または
location = "http://www.mozilla.org";
```

### 例 2: 現在のページの再読み込み

```js
location.reload();
```

### 例 3

次の例を見てみましょう。これは、 `location.pathname` の値をハッシュに挿入するため、 `replace()` メソッドを使用してページを再読み込みします。

```js
function reloadPageWithHash() {
  location.replace(`http://example.com/#${location.pathname}`);
}
```

### 例 4: 現在の URL のプロパティを alert ダイアログに表示する

```js
function showLoc() {
  const logLines = [
    "Property (Typeof): Value",
    `location (${typeof location}): ${location}`,
  ];
  for (const prop in location) {
    logLines.push(
      `${prop} (${typeof location[prop]}): ${location[prop] || "n/a"}`,
    );
  }
  alert(logLines.join("\n"));
}

// html では <button onclick="showLoc();">location プロパティを表示</button>
```

### 例 5: `search` プロパティを変更してデータの文字列をサーバーへ送信

```js
function sendData(data) {
  location.search = data;
}

// html では <button onclick="sendData('Some data');">データを送信</button>
```

現在の URL に "?Some%20data" が追加されてサーバーへ送信されます (サーバー側で何も起こらない場合、現在の文書が、変更された search 文字列で再読み込みされます)。

### 例 6: `hash` プロパティを変更せずにブックマークを使用

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>MDN Example</title>
    <script>
 function showNode(node) {
 document.documentElement.scrollTop = node.offsetTop;
 document.documentElement.scrollLeft = node.offsetLeft;
 }

 function showBookmark(bookmark, useHash) {
 if (arguments.length === 1 || useHash) {
 location.hash = bookmark;
 return;
 }
 const bookmarkElement = document.querySelector(bookmark);
 if (bookmarkElement) {
 showNode(bookmarkElement);
 }
 }
 </script>
    <style>
 span.intLink {
 cursor: pointer;
 color: #0000ff;
 text-decoration: underline;
 }
 </style>
  </head>

  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices
      dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus
      auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in
      placerat est. Pellentesque habitant morbi tristique senectus et netus et
      malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor.
      Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris
      vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla
      consectetur aliquam purus. Curabitur convallis, justo posuere porta
      egestas, velit erat ornare tortor, non viverra justo diam eget arcu.
      Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit
      a hendrerit vitae, volutpat non ipsum.
    </p>
    <p>
      Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero,
      eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt
      rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida
      nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat.
      Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit.
      Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non
      felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et
      fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla
      mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent
      bibendum condimentum feugiat.
    </p>
    <p id="myBookmark1">
      [ <span class="intLink" onclick="showBookmark('#myBookmark2');"
 >Go to bookmark #2</span
 > ]
    </p>
    <p>
      Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin
      ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros
      convallis ut mollis magna pellentesque. Pellentesque placerat enim at
      lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt
      tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas
      mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.
    </p>
    <p>
      Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc,
      vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis.
      Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc.
      Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu
      sem vehicula egestas.
    </p>
    <p>
      Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus
      sit amet lectus vitae eros egestas pellentesque fermentum eget magna.
      Quisque mauris nisl, gravida vitae placerat et, condimentum id metus.
      Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae
      sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales
      quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in
      mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis.
      Pellentesque habitant morbi tristique senectus et netus et malesuada fames
      ac turpis egestas.
    </p>
    <p>
      Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu
      turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra.
      Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae
      molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci.
      Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit,
      turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio
      ante.
    </p>
    <p>
      Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit
      amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum.
      Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim
      turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante
      ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
      Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla
      euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet
      turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum,
      diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut
      nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.
    </p>
    <p>
      Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper.
      Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a
      aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas,
      ligula magna laoreet libero, eu commodo mauris odio id ante. In hac
      habitasse platea dictumst. In pretium erat diam, nec consequat eros.
      Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed
      pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie
      nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu
      faucibus in. Curabitur id arcu est. In semper mollis lorem at
      pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et
      tortor. Pellentesque porttitor facilisis ultricies.
    </p>
    <p id="myBookmark2">
      [ <span class="intLink" onclick="showBookmark('#myBookmark1');"
 >Go to bookmark #1</span
 >
      |
      <span class="intLink" onclick="showBookmark('#myBookmark1', false);"
 >Go to bookmark #1 without using location.hash</span
 >
      |
      <span class="intLink" onclick="showBookmark('#myBookmark3');"
 >Go to bookmark #3</span
 > ]
    </p>
    <p>
      Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla
      sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque
      tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque
      nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut
      libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat
      libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie.
      Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id
      sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus
      rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis
      lacinia rutrum ipsum varius.
    </p>
    <p>
      Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum
      sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare
      aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis
      et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis
      ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices
      augue, ac sodales sem mollis in.
    </p>
    <p id="myBookmark3"><em>Here is the bookmark #3</em></p>
    <p>
      Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et
      turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim
      enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis,
      varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit
      pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus.
      Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat
      nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed
      vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor
      arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat
      malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna
      velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas
      nulla nisl, facilisis eu egestas scelerisque, mollis eget metus.
      Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
      cubilia Curae; Morbi sed congue mi.
    </p>
    <p>
      Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi.
      Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet
      magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et
      pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus
      consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed
      consectetur. Cum sociis natoque penatibus et magnis dis parturient montes,
      nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis
      convallis, bibendum vitae turpis.
    </p>
    <p>
      Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie
      sollicitudin felis a porta. Mauris nec orci sit amet orci blandit
      tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan
      fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien
      ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget
      tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non.
      Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam
      sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer
      egestas leo eu turpis blandit scelerisque.
    </p>
    <p>
      Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi
      gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing
      pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante
      condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna,
      porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus.
      Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing
      eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet.
      Proin vel odio at lacus vehicula aliquet.
    </p>
    <p>
      Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper
      malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum
      risus, eget consequat urna laoreet nec. Etiam mollis quam non sem
      convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis
      ligula mattis eget vestibulum diam hendrerit. In non placerat mauris.
      Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea
      dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis
      vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat
      volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa,
      pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.
    </p>
    <p>
      Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo
      blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et
      ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing
      facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum
      ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
      Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est
      eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem
      neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non
      velit aliquam cursus. Integer semper condimentum tortor a pellentesque.
      Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus,
      vitae consequat augue urna vel odio.
    </p>
    <p>
      Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed
      nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit.
      Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis
      neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum
      imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui
      tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus
      vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis
      libero.
    </p>
    <p>
      Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed
      consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor
      rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit,
      ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis
      in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem.
      Nullam sollicitudin magna sed sem mollis id commodo libero condimentum.
      Duis eu massa et lacus semper molestie ut adipiscing sem.
    </p>
    <p>
      Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In
      quis varius elit. Nullam dignissim neque nec velit vulputate porttitor.
      Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar
      quis condimentum ut, porta nec justo. In hac habitasse platea dictumst.
      Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque
      placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget
      convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut
      tristique lacus luctus quis.
    </p>
    <p>
      Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed
      facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu
      sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum
      aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices
      tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc
      fringilla eget. Praesent scelerisque urna vitae nibh tristique varius
      consequat neque luctus. Integer ornare, erat a porta tempus, velit justo
      fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel
      dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar
      laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque
      sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales
      eleifend interdum.
    </p>
  </body>
</html>
```

... 同じことをアニメーションするページスクロールで行うと、次のようになります。

```js
const showBookmark = (() => {
  let _useHash;
  let _scrollX;
  let _scrollY;
  let _nodeX;
  let _nodeY;
  let _itFrame;
  let _scrollId = -1;
  let _bookMark;

  // duration: the duration in milliseconds of each frame
  // frames: number of frames for each scroll
  let duration = 200;
  let frames = 10;

  function \_next() {
    if (_itFrame > frames) {
      clearInterval(_scrollId);
      _scrollId = -1;
      return;
    }
    _isBot = true;
    document.documentElement.scrollTop = Math.round(
      _scrollY + ((_nodeY - _scrollY) \* _itFrame) / frames,
    );
    document.documentElement.scrollLeft = Math.round(
      _scrollX + ((_nodeX - _scrollX) \* _itFrame) / frames,
    );
    if (_useHash && _itFrame === frames) {
      location.hash = _bookMark;
    }
    _itFrame++;
  }

  function \_chkOwner() {
    if (_isBot) {
      _isBot = false;
      return;
    }
    if (_scrollId > -1) {
      clearInterval(_scrollId);
      _scrollId = -1;
    }
  }

  window.addEventListener("scroll", _chkOwner, false);

  return (bookmark, useHash) => {
    const node = document.querySelector(bookmark);
    _scrollY = document.documentElement.scrollTop;
    _scrollX = document.documentElement.scrollLeft;
    _bookMark = bookmark;
    _useHash = useHash === true;
    _nodeX = node.offsetLeft;
    _nodeY = node.offsetTop;
    _itFrame = 1;
    if (_scrollId === -1) {
      _scrollId = setInterval(_next, Math.round(duration / frames));
    }
  };
})();
```

仕様書
---

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

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

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

関連情報
----

* 返値のインターフェイス: `Location`
* 同様の情報、ただし document に付属: `Document.location`
* ブラウザーの履歴の操作
* `hashchange`


Window.showModalDialog() - Web API

Window.showModalDialog()
========================

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

**警告:** この機能は削除されました。ウェブサイトやアプリケーションを修正してください。

このメソッドは Chrome 43 および Firefox 56 で削除されました。

**`Window.showModalDialog()`** は、指定された HTML 文書を含むモーダルダイアログボックスを生成して表示します。

構文
--

```js
showModalDialog(uri);
showModalDialog(uri, arguments);
showModalDialog(uri, arguments, options);
```

### 引数

`uri`

ダイアログで表示する文書の URL です。

`arguments` 省略可

ダイアログに渡される値です。

`options` 省略可

 ダイアログのウィンドウ装飾を指定する文字列です。
 以下のうち 1 つ以上の値をセミコロンで区切って使用します。

| 構文 | 説明 |
| --- | --- |
| `center: {on | off | yes | no | 1 | 0 }` | この引数の値が `on`, `yes`, `1` のいずれかである場合、ダイアログウィンドウはデスクトップの中央に配置されます。それ以外の場合は、ダイアログボックスが隠れます。既定値は `yes` です。 |
| `dialogheight: *height*` | ダイアログボックスの高さを指定します。 |
| `dialogleft: *left*` | ダイアログボックスの水平位置をデスクトップの左上を基準とした値で指定します。 |
| `dialogwidth: *width*` | ダイアログボックスの幅を指定します。 |
| `dialogtop: *top*` | ダイアログボックスの垂直位置をデスクトップの左上角を基準とした値で指定します。 |
| `resizable: {on | off | yes | no | 1 | 0 }` | この引数の値が `on`, `yes`, 1 のいずれかである場合、ダイアログウィンドウは、ユーザーによるリサイズが可能になります。それ以外の場合は、ウィンドウのサイズが自動で調整されます。既定値は、 `no` です。 |
| `scroll: {on | off | yes | no | 1 | 0 }` | この引数の値が `on`, `yes`, 1 のいずれかである場合、ダイアログボックスにスクロールバーが表示されます。それ以外の場合は、ボックスのサイズが自動で調整されます。既定値は、 `no` です。 |

**メモ:** Firefox は、`dialogHide`、`edge`、`status`、および、`unadorned` 引数を実装していません。

### 返値

`uri` で指定した文書で設定された `returnValue` プロパティを保持します。

メモ
--

`showModalDialog()` は HTML5 の一部として一時的に標準化されました。追加オプションのための第 3 引数は、 HTML5 版には存在しませんでした。

仕様書
---

* MSDN の `showModalDialog` ページ
ブラウザーの互換性
---------

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

関連情報
----

* `window.showModalDialog()` を置き換える `<dialog>`
* showModalDialog のポリフィル、`<dialog>` およびジェネレーターを使用したもの


Window: pageshow イベント - Web API

Window: pageshow イベント
=====================

**`pageshow`** イベントは、操作によってブラウザーがウィンドウの文書を表示したときに `Window` へ送られます。これには以下のようなものがあります。

* 最初にページを読み込んだとき
* 同じウィンドウまたはタブの中で、他のページからそのページへ移動してきたとき
* モバイル OS で凍結されたページを復元したとき
* ブラウザーの進む、戻るボタンを利用してこのページに戻ったとき

**メモ:** 最初にページを読み込んでいる間、 `pageshow` イベントは `load` イベントの*後で*発生します。

|  |  |
| --- | --- |
| バブリング | なし |
| キャンセル | 不可 |
| インターフェイス | `PageTransitionEvent` |
| イベントハンドラープロパティ | `onpageshow` |

例
-

この例は配列 `events` の中に列挙されたイベントのイベントハンドラーを設定します。ハンドラーである `eventLogger()` は、発生したイベントの種類と、 `persisted` (en-US) フラグの値を `pageshow` および `pagehide` イベントの場合に含めてコンソールに出力します。

### JavaScript

```js
const events = ["pagehide", "pageshow", "unload", "load"];

const eventLogger = (event) => {
  switch (event.type) {
    case "pagehide":
    case "pageshow":
      let isPersisted = event.persisted ? "persisted" : "not persisted";
      console.log("Event:", event.type, "-", isPersisted);
      break;
    default:
      console.log("Event:", event.type);
      break;
  }
};

events.forEach((eventName) => window.addEventListener(eventName, eventLogger));
```

### HTML

```html
<p>
  コンソールを開き、このページに出入りしたときの出力を見てください。
  このタブに新しいページを読み込んだり、履歴で前後に移動したりして、
  イベントのログへの出力を見てください。
</p>
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # event-pageshow |

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

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

関連情報
----

* `onpageshow` イベントハンドラープロパティ
* `pagehide`


Window: focus イベント - Web API

Window: focus イベント
==================

**`focus`** イベントは、要素がフォーカスを受け取ったときに発生します。

`focus` の反対は `blur` です。

|  |  |
| --- | --- |
| バブリング | なし |
| キャンセル | 不可 |
| インターフェイス | `FocusEvent` |
| イベントハンドラープロパティ | `onfocus` |
| 同期 / 非同期 | 同期 |
| Composed | はい |

例
-

### ライブデモ

この例ではフォーカスを失ったときに文書の外見を変更します。 `addEventListener()` を使用して `focus` および `blur` イベントを監視します。

#### HTML

```html
<p id="log">Click on this document to give it focus.</p>
```

#### CSS

```css
.paused {
  background: #ddd;
  color: #555;
}
```

#### JavaScript

```js
function pause() {
  document.body.classList.add("paused");
  log.textContent = "FOCUS LOST!";
}

function play() {
  document.body.classList.remove("paused");
  log.textContent =
    "This document has focus. Click outside the document to lose focus.";
}

const log = document.getElementById("log");

window.addEventListener("blur", pause);
window.addEventListener("focus", play);
```

#### 結果

仕様書
---

| Specification |
| --- |
| UI Events # event-type-focus |
| HTML Standard # handler-onfocus |

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

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

関連情報
----

* 関連イベント: `blur`
* `Element` を対象としたこのイベント: `focus` イベント


Window.showSaveFilePicker() - Web API

Window.showSaveFilePicker()
===========================

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

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

`Window` インターフェイスの **`showSaveFilePicker()`** メソッドは、ファイルピッカーを表示し、ユーザーにファイルを保存させることができます。
 既存のファイルを選択することも、新規ファイルの名前を入力することもできます。

構文
--

```js
showSaveFilePicker()
```

### 引数

`options` 省略可

以下のオプションを含むオブジェクトです。

`excludeAcceptAllOption`

`boolean` 値で、デフォルトは `false` です。
 通常、ピッカーには (以下の `type` オプションに基づく) ファイル形式フィルターを何も適用しない選択肢があるはずです。このオプションを `true` にすると、この選択肢を利用 *不可能* にします。

`suggestedName`

提案するファイル名を表す `String` です。

`types`

保存できるファイル形式の`配列`です。各要素は、以下のオプションを持つオブジェクトです。

`description`

許可されるファイル形式のカテゴリーの説明で、省略可能です。

`accept`

キーを MIME タイプに、値をファイルの拡張子の`配列`に設定した `Object` です。(例は以下を参照してください)

### 返値

`FileSystemFileHandle` オブジェクトで解決する `Promise` を返します。

### 例外

`AbortError`

ユーザーがファイルの選択や入力をせずにピッカーを閉じた場合や、選択されたファイルをユーザーエージェントがセンシティブや危険とみなした場合、投げられます。

セキュリティ
------

ユーザーによる一時的な有効化が必要です。この機能が動作するためには、ユーザーがページまたは UI 要素を操作することが必要です。

例
-

以下の関数は、テキストファイルが選択しやすい状態でファイルピッカーを表示します。

```js
async function getNewFileHandle() {
  const opts = {
    types: [
      {
        description: "テキストファイル",
        accept: { "text/plain": [".txt"] },
      },
    ],
  };
  return await window.showSaveFilePicker(opts);
}
```

仕様書
---

| Specification |
| --- |
| File System Access # api-showsavefilepicker |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


Window.resizeBy() - Web API

Window.resizeBy()
=================

**`Window.resizeBy()`** メソッドは、現在のウィンドウを指定した大きさにリサイズします。

構文
--

```js
resizeBy(xDelta, yDelta);
```

### 引数

* `xDelta` はウィンドウを水平方向に広げるピクセル数です。
* `yDelta` はウィンドウを垂直方向に広げるピクセル数です。
### 返値

なし (`undefined`)。

例
-

```js
// Shrink the window
window.resizeBy(-200, -200);
```

メモ
--

このメソッドは、ウィンドウの大きさを現在の大きさからの相対値で変更します。ウィンドウの大きさを絶対的な値で変更する場合は `window.resizeTo()` を使用してください。

### 外部ウィンドウの生成とリサイズ

セキュリティ上の理由から、 Firefox では、ウィンドウが `window.open()` によって生成されていない場合や、複数のタブを含む場合に、ウェブサイトがブラウザー内のウィンドウの既定のサイズを変更することができなくなりました。この変更の詳細については、互換性一覧表を参照してください。

`window.open()` によってウィンドウを作成しても、 **既定ではリサイズできません。** ウィンドウをリサイズ可能にするには、 `"resizable"` 特性を使用してウィンドウを開く必要があります。

```js
// リサイズ可能なウィンドウを作成
myExternalWindow = window.open(
  "http://myurl.domain",
  "myWindowName",
  "resizable",
);

// ウィンドウを 500x500 にリサイズ
myExternalWindow.resizeTo(500, 500);

// ウィンドウをより小さく 400x400 にする
myExternalWindow.resizeBy(-100, -100);
```

作成するウィンドウは、「同一オリジンポリシー」を尊重する必要があります。開いたウィンドウと現在のウィンドウのオリジンが同じでない場合、そのウィンドウ/タブの大きさを変更したり、情報にアクセスしたりすることはできません。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-window-resizeby |

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

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


Window: languagechange イベント - Web API

Window: languagechange イベント
===========================

**`languagechange`** イベントはグローバルスコープオブジェクトで、ユーザーの推奨言語が変更されたときに発生します。

|  |  |
| --- | --- |
| バブリング | いいえ |
| キャンセル | 不可 |
| インターフェイス | `Event` |
| イベントハンドラー | `onlanguagechange` |

例
-

`languagechange` は `addEventListener` メソッドで使用することができます。

```js
window.addEventListener("languagechange", function () {
  console.log("languagechange event detected!");
});
```

または、 `onlanguagechange` イベントハンドラープロパティを使用することもできます。

```js
window.onlanguagechange = function (event) {
  console.log("languagechange event detected!");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-languagechange |
| HTML Standard # handler-window-onlanguagechange |

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

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

関連情報
----

* `navigator.language`
* `navigator.languages`
* `Navigator`
* `Window.onlanguagechange` (en-US)


Window.focus() - Web API

Window.focus()
==============

ウィンドウを最前面にするようリクエストします。ユーザー設定によっては失敗する可能性があり、このメソッドが返される前にウィンドウが最前面になることは保証されません。

構文
--

```js
focus();
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

```js
if (clicked) {
  window.focus();
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-window-focus-dev |

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

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


Window: gamepaddisconnected イベント - Web API

Window: gamepaddisconnected イベント
================================

`gamepaddisconnected` イベントは、ゲームパッドが切断されたことをブラウザーが検出したときに発行されます。

このイベントは、文書の `gamepad` (en-US) 権限ポリシーが不許可になっている場合には発生しません。

このイベントはキャンセル不可で、バブリングしません。

例
-

ゲームパッドが切断されたことを通知するには、`addEventListener()` を使用してウィンドウにハンドラーを追加します。

```js
window.addEventListener("gamepaddisconnected", (event) => {
  console.log("ゲームパッドの接続が失われました。");
});
```

また、`window.ongamepaddisconnected` イベントハンドラプロパティを使用して、`gamepaddisconnected` イベントのハンドラーを確立することもできます。

```js
window.ongamepaddisconnected = (event) => {
  console.log("ゲームパッドの接続が失われました。");
};
```

仕様書
---

| Specification |
| --- |
| Gamepad # event-gamepaddisconnected |

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

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

関連情報
----

* gamepadconnected
* Gamepad API の利用


window.scrollX - Web API

window.scrollX
==============

`Window` インターフェイスの読み取り専用プロパティである **`scrollX`** は、文書が水平スクロールされているピクセル数を返します。現代のブラウザーではこの値がサブピクセル精度ですので、必ずしも整数であるとは限りません。文書が垂直スクロールされているピクセル数は、`scrollY` プロパティで取得できます。

構文
--
```

var x = window.scrollX;
```

### 値

実際に返される値は、文書が原点から水平方向にスクロールされた量をピクセル数で表す倍精度浮動小数点数です。正の値は、内容物が左にスクロールされていることを表します。文書がサブピクセル精度のデバイスに表示されている場合は、戻り値も小数部を含むサブピクセル精度の値になります。文書が左にも右にもスクロールされていない場合の `scrollX` は 0 です。

**メモ:** 整数値が必要である場合は、`Math.round()` を使用して切り捨てできます。

専門用語で説明すると `scrollX` は、現在の ビューポート の左端の X 座標を返します。ビューポートがない場合の戻り値は 0 です。

例
-

これは、文書の現在の水平スクロール位置を確認する例です。400 ピクセルより大きい場合は、文書の左上にスクロール位置をリセットします。

```js
if (window.scrollX > 400) {
  window.scroll(0, 0);
}
```

注記
--

`pageXOffset` プロパティは、`scrollX` プロパティのエイリアスです。:

```js
window.pageXOffset == window.scrollX; // 常に true
```

クロスブラウザー互換性のため、`window.scrollX` ではなく `window.pageXOffset` を使用します。*さらに*、古いバージョンの Internet Explorer (IE9 以前) はいずれもサポートしていないため、チェックの上、なければ他の非標準の方法で回避する必要があります。以下に互換性を確保した例を示します。

```js
var x =
  window.pageXOffset !== undefined
    ? window.pageXOffset
    : (document.documentElement || document.body.parentNode || document.body)
        .scrollLeft;

var y =
  window.pageYOffset !== undefined
    ? window.pageYOffset
    : (document.documentElement || document.body.parentNode || document.body)
        .scrollTop;
```

仕様
--

| Specification |
| --- |
| CSSOM View Module # dom-window-scrollx |

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

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

関連情報
----

* `window.scrollY`


Window: scrollbars プロパティ - Web API

Window: scrollbars プロパティ
========================

`scrollbars` オブジェクトを返します。

これは `Window` プロパティのうちの論理値を持つ `visible` プロパティの 1 つであり、ウェブブラウザーのユーザーインターフェイスの特定の部分が可視であるかどうかを表すものでした。

プライバシーと相互運用性の理由から、これで `visible` プロパティの値は、この `Window` がポップアップの場合は `false` となり、そうでない場合は `true` となるようになりました。

構文
--

単一のプロパティを持つオブジェクトです。

`visible` 読取専用

論理値のプロパティで、 `false` は `Window` がポップアップの場合、 `true` はそれ以外を表します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-window-scrollbars-dev |

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

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

関連情報
----

* `window.locationbar`
* `window.menubar`
* `window.personalbar`
* `window.statusbar`
* `window.toolbar`


Window.scrollByPages() - Web API

Window.scrollByPages()
======================

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

**`Window.scrollByPages()`** メソッドは、現在の文書を指定されたページ数だけスクロールさせます。

概要
--

```js
window.scrollByPages(pages);
```

### 引数

* `pages` はスクロールさせるページ数です。正または負の整数を指定することができます。
例
-

```js
// 文書を下へ 1 ページスクロール
window.scrollByPages(1);

// 文書を上へ 1 ページスクロール
window.scrollByPages(-1);
```

仕様書
---

DOM Level 0 です。仕様書にはありません。

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

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

関連情報
----

* `window.scroll()`
* `window.scrollBy()`
* `window.scrollByLines()`
* `window.scrollTo()`


window.stop - Web API

window.stop
===========

概要
--

このメソッドは、ウィンドウの読み込みを停止します。

構文
--
```

window.stop()
```

例
-

```html
<script>
 stop();
</script>

<p>このパラグラフは読み込まれないでしょう。</p>
```

注記
--

`stop()` メソッドは、ブラウザの停止ボタンをクリックすることと全く同じです。スクリプトが読み込まれる順番のために、`stop()` メソッドは文書の読み込みを停止できない可能性がありますが、巨大な画像、新しいウィンドウなど、読み込みを遅延させるオブジェクトの読み込みを停止することはできるでしょう。

仕様
--

| Specification |
| --- |
| HTML Standard # dom-window-stop-dev |

互換性
---

stop() メソッドは、Internet Explorer でサポートされません。


Window.captureEvents() - Web API

Window.captureEvents()
======================

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

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

**`Window.captureEvents()`** メソッドは、指定した種類のすべてのイベントをキャプチャするように、そのウィンドウを登録します。

構文
--

```js
window.captureEvents(eventType);
```

`eventType` は、 `Event.ABORT`, `Event.BLUR`, `Event.CLICK`, `Event.CHANGE`, `Event.DBLCLICK`, `Event.DRAGDDROP`, `Event.ERROR`, `Event.FOCUS`, `Event.KEYDOWN`, `Event.KEYPRESS`, `Event.KEYUP`, `Event.LOAD`, `Event.MOUSEDOWN`, `Event.MOUSEMOVE`, `Event.MOUSEOUT`, `Event.MOUSEOVER`, `Event.MOUSEUP`, `Event.MOVE`, `Event.RESET`, `Event.RESIZE`, `Event.SELECT`, `Event.SUBMIT`, `Event.UNLOAD` の値の組み合わせを取ります。

例
-

```html
<!doctype html>
<html lang="en">
  <head>
    <!-- ... -->
    <script>
 function reg() {
 window.captureEvents(Event.CLICK);
 window.onclick = page\_click;
 }

 function page\_click() {
 alert("ページクリックイベントが検出されました！");
 }
 </script>
  </head>

  <body onload="reg();">
    <p>click anywhere on this page.</p>
  </body>
</html>
```

### 注

ユーザーの操作によって DOM 内で発生したイベント (ボタンのクリックや現在の文書からのフォーカス移動など) は、通常、イベントを開始したオブジェクトに到達する前に、まず高レベルの `window` や `document` オブジェクトを通過します。

`window` の `captureEvents()` メソッドを呼び出すと、指定した種類のイベント (例えば `Event.CLICK`) は、階層内の「下位」オブジェクトに通過しなくなります。イベントを通常のように「バブルアップ」させるためには、 `window.releaseEvents()` (
非推奨
) を window 上で呼び出し、イベントをトラップしないようにしなければなりません。

 なお、次の構文を使用することでこのメソッドにイベントのリストを渡すことができます。
 `window.captureEvents(Event.KEYPRESS | Event.KEYDOWN | Event.KEYUP)`.

仕様書
---

どの仕様書にも含まれていません。


Window.console - Web API

Window.console
==============

読み取り専用プロパティの **`Window.console`** は、ブラウザーのコンソールへ情報を出力するメソッドを提供する`Console`オブジェクトへの参照を返します。これらのメソッドで出力される情報はデバッグ目的のものであり、ユーザーへ情報を提示するために使われるべきではありません。

構文
--

```js
var consoleObj = window.console;
```

例
-

### コンソールへの出力

一つ目の例はテキストをコンソールに出力します。

```js
console.log("An error occurred while loading the content");
```

次の例では開閉ウィジェットによって要素が展開可能な状態でオブジェクトをコンソールに出力します。

```js
console.dir(someObject);
```

より詳細な例については `console` の記事内の例をご参照ください。

仕様書
---

| Specification |
| --- |
| Console Standard  |

**メモ:** 現在はブラウザー間で多くの実装の違いがありますが、それらを統合して互いの一貫性を高める作業が進められています。


Window: statusbar プロパティ - Web API

Window: statusbar プロパティ
=======================

`statusbar` オブジェクトを返します。

これは `Window` プロパティのうちの論理値を持つ `visible` プロパティの 1 つであり、ウェブブラウザーのユーザーインターフェイスの特定の部分が可視であるかどうかを表すものでした。

プライバシーと相互運用性の理由から、これで `visible` プロパティの値は、この `Window` がポップアップの場合は `false` となり、そうでない場合は `true` となるようになりました。

構文
--

単一のプロパティを持つオブジェクトです。

`visible` 読取専用

論理値のプロパティで、 `false` は `Window` がポップアップの場合、 `true` はそれ以外を表します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-window-statusbar-dev |

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

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

関連情報
----

* `window.locationbar`
* `window.menubar`
* `window.personalbar`
* `window.scrollbars`
* `window.toolbar`


requestIdleCallback - Web API

requestIdleCallback
===================

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

**`window.requestIdleCallback()`** メソッドを利用すると、ブラウザーがアイドル状態の時に実行される関数をキューに登録できます。これにより、アニメーションや入力への応答など、遅延が問題となる処理に影響を与えることなく、優先度の低いバックグラウンド処理をメインスレッド内で実行させられます。キューに登録された関数は、関数登録時に設定したタイムアウト時間（`timeout`）に達していない限り、登録順に呼び出されます。

`requestIdleCallback()` をアイドルコールバック関数からコールし、次のイベントループ以降で実行されるようにスケジュールもできます。

**メモ:** `timeout` は必須のタスクにおいては設定することを強くおすすめします。設定しない場合、コールバックが実行するまでに数秒かかってしまう可能性もあるからです。

構文
--
```

var handle = window.requestIdleCallback(callback[, options])
```

### 返り値

`Window.cancelIdleCallback()` (en-US) メソッドで、実行をキャンセルする際に使用する ID を返します。

### 引数

`callback`

イベントループがアイドル状態のときに実行したい関数への参照。コールバック関数には `IdleDeadline` (en-US) オブジェクトが渡されます。これはアイドル状態の際に余っている時間と、コールバックが実行されたかされていないかを示します。コールバックの実行有無は、タイムアウト期間が終了してしまったかどうかに左右されます。

`options` 省略可

任意の設定パラメータです。現在はひとつのプロパティのみ定義されています。

* `timeout`：`timeout` に正の値が指定され、かつコールバックがその値の期間（ミリ秒）内に実行されていない場合、コールバックは次のアイドル期間に実行されます。それがパフォーマンスに悪影響があったとしても、それを加味することはありません。

例
-

Cooperative Scheduling of Background Tasks API (en-US)の記事で、例を一式 (en-US)紹介しています。

仕様
--

| Specification |
| --- |
| requestIdleCallback() Cooperative Scheduling of Background Tasks # the-requestidlecallback-method |

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

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

関連情報
----

* `window.cancelIdleCallback()` (en-US)
* `IdleDeadline` (en-US)
* `window.setTimeout()`
* `window.setInterval()`
* `window.requestAnimationFrame`


Window: deviceorientationabsolute イベント - Web API

Window: deviceorientationabsolute イベント
======================================

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

**`deviceorientationabsolute`** イベントは、端末の絶対的な方向が変化したときに発行されます。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("deviceorientationabsolute", (event) => {});

ondeviceorientationabsolute = (event) => {};
```

イベント型
-----

`DeviceOrientationEvent` です。 `Event` から継承しています。

Event

DeviceOrientationEventイベントプロパティ
---------

`DeviceOrientationEvent.absolute` 読取専用

論理値で、端末が絶対に方向データを提供するかどうかを示します。

`DeviceOrientationEvent.alpha` 読取専用

数値で、端末の Z 軸の回転量を表し、 0 （含む）から 360 （含まない）までの範囲の値で表します。

`DeviceOrientationEvent.beta` 読取専用

数値で、端末の X 軸の回転量を表し、 -180 （含む）から 180 （含まない）までの範囲の値で表します。これは端末の前後方向の動きを表します。

`DeviceOrientationEvent.gamma` 読取専用

数値で、端末の Z 軸の回転量を表し、 -90 （含む）から 90 （含まない）までの範囲の値で表します。これは端末の左右方向の動きを表します。

`DeviceOrientationEvent.webkitCompassHeading`
Non-standard
 読取専用

数値で、ワールドシステムの Z 軸を中心とした端末の動きと北の方向との差を表し、 0 から 360 の範囲の値で度数で表します。

`DeviceOrientationEvent.webkitCompassAccuracy`
Non-standard
 読取専用

コンパスの精度で、偏差が正の値または負の値を意味しています。通常は 10 です。

仕様書
---

| Specification |
| --- |
| DeviceOrientation Event Specification # dom-window-ondeviceorientationabsolute |

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

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

関連情報
----

* `devicemotion` イベント
* `deviceorientation` イベント
* 端末の方向の検出


Window.customElements - Web API

Window.customElements
=====================

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
**`customElements`** は `Window` インターフェイスの読み取り専用プロパティで、 `CustomElementRegistry` オブジェクトへのリファレンスを返します。これにより、新しいカスタム要素を登録したり、以前に登録したカスタム要素に関する情報を取得したりすることができます。

例
-

このプロパティが使われている最も一般的な例は、新しいカスタム要素を定義・登録するために `CustomElementRegistry.define()` メソッドにアクセスすることです。例えば次のようにします。

```js
let customElementRegistry = window.customElements;
customElementRegistry.define("my-custom-element", MyCustomElement);
```

しかし、ふつうは以下のように短縮します。

```js
customElements.define(
  "element-details",
  class extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById(
        "element-details-template",
      ).content;
      const shadowRoot = this.attachShadow({ mode: "open" }).appendChild(
        template.cloneNode(true),
      );
    }
  },
);
```

web-components-examples リポジトリーにより多くの使用例がありますので参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-window-customelements |

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

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


Window.status - Web API

Window.status
=============

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

**`status`** は `Window` インターフェイスのプロパティで、もともとブラウザーウィンドウの最下部にあるステータスバーのテキストを設定するためのものでした。しかし、 HTML 標準は `window.status` に設定してもステータスバーに表示されるテキストには影響させないよう要求しています。

構文
--

```js
window.status = string;
var value = window.status;
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-window-status |

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

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


window.scrollY - Web API

window.scrollY
==============

`Window` インターフェイスの読み取り専用プロパティである **`scrollY`** は、文書が現在垂直方向にスクロールしているピクセル数を返します。最近のブラウザーでは、この値はサブピクセル精度ですので、必ずしも整数であるとは限りません。文書が水平方向にスクロールしているピクセル数は `scrollX` プロパティで取得できます。

構文
--
```

var y = window.scrollY
```

### 値

実際に返される値は、文書が原点から垂直方向にスクロールした量をピクセル数で表す倍精度浮動小数点値であり、正の値は、内容物が上にスクロールしていることを表します。文書がサブピクセル精度の端末に表示されている場合は、返値も小数部を含むサブピクセル精度の値になります。文書が上にも下にもスクロールしていない場合、 `scrollY` は 0 になります。

**メモ:** 整数値が必要である場合は、 `Math.round()` を使用して四捨五入してください。

専門用語で説明すると `scrollY` は、現在の ビューポート の上端の Y 座標を返します。ビューポートがない場合の戻り値は 0 です。

例
-

```js
// スクロールしている場合、戻してから次のページへスクロールダウン
if (window.scrollY) {
  window.scroll(0, 0); //文書の左上にスクロール位置をリセット
}

window.scrollByPages(1);
```

メモ
--

`scrollBy()`、`scrollByLines()`、`scrollByPages()` のような相対スクロールする関数を使用する際に、文書がすでにスクロールしていないかをチェックするためにこのプロパティを使用してください。

`pageYOffset` プロパティは、`scrollY` プロパティのエイリアスです。

```js
window.pageYOffset === window.scrollY; // 常に true
```

クロスブラウザー互換性のため、`window.scrollY` ではなく `window.pageYOffset` を使用します。*さらに*、古いバージョンの Internet Explorer (IE9 以前) はいずれもサポートしていないため、チェックの上、なければ他の非標準の方法で回避する必要があります。以下に互換性を確保した例を示します。

```js
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = (document.compatMode || "") === "CSS1Compat";

var x = supportPageOffset
  ? window.pageXOffset
  : isCSS1Compat
    ? document.documentElement.scrollLeft
    : document.body.scrollLeft;
var y = supportPageOffset
  ? window.pageYOffset
  : isCSS1Compat
    ? document.documentElement.scrollTop
    : document.body.scrollTop;
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-window-scrolly |

ブラウザーの対応
--------

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

関連情報
----

* `window.scrollX`


Window.scrollMaxX - Web API

Window.scrollMaxX
=================

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

**`Window.scrollMaxX`** は読み取り専用プロパティで、文書が横方向にスクロールできる最大ピクセル数を返します。

構文
--

```js
xMax = window.scrollMaxX;
```

* `xMax` はピクセル数です。
例
-

```js
// ページの右端までスクロールする
let maxX = window.scrollMaxX;

window.scrollTo(maxX, 0);
```

注
-

このプロパティを、文書の全体の幅を取得するためには使用しないでください。これは window.innerWidth + window.scrollMaxX とは等しくありません。これは `window.innerWidth` には表示中の垂直スクロールバーがすべて含まれるからであり、結果は文書の幅よりすべての表示中の垂直スクロールバーの幅だけ大きくなります。代わりに `document.body.scrollWidth` を使用してください。 `window.scrollMaxY` も参照してください。

仕様書
---

どの仕様書にも含まれていません。

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

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


Window: vrdisplayactivate イベント - Web API

Window: vrdisplayactivate イベント
==============================

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

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

**`vrdisplayactivate`** は WebVR API のイベントで、 VR ディスプレイが表示可能になったときに発生します。例えば、 HMD がスタンバイ状態から移行した場合、あるいは装着されて起動した場合など、表示することが可能な状態になったときです。

**メモ:** このイベントは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("vrdisplayactivate", (event) => {});

onvrdisplayactivate = (event) => {};
```

イベント型
-----

`VRDisplayEvent` です。 `Event` を継承しています。

イベントプロパティ
---------

*`VRDisplayEvent` は親オブジェクトである `Event` からプロパティを継承しています。*

`VRDisplayEvent.display`
非推奨
 読取専用

このイベントに関連付けられた `VRDisplay` です。

`VRDisplayEvent.reason`
非推奨
 読取専用

このイベントが発生した理由を人間可読な形で示します。

例
-

`vrdisplayactivate` イベントは `addEventListener` メソッドで使用することができます。

```js
window.addEventListener("vrdisplayactivate", () => {
  info.textContent = "Display activated.";
  reportDisplays();
});
```

または、 `onvrdisplayactivate` イベントハンドラープロパティを使用してください。

```js
window.onvrdisplayactivate = () => {
  info.textContent = "Display activated.";
  reportDisplays();
};
```

仕様書
---

このイベントは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

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

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

関連情報
----

* WebVR API


Window: rejectionhandled イベント - Web API

Window: rejectionhandled イベント
=============================

**`rejectionhandled`** イベントは、 JavaScript の `Promise` が拒否されたものの、その後で Promise の拒否が処理された場合にスクリプトのグローバルスコープ (ふつうは `window` だが `Worker` の場合もある) に送られます。これは、 Promise が拒否されたが拒否の手助けがないときに送信される `unhandledrejection` イベントと並行して、デバッグや一般的なアプリケーションの回復に使用できます。

|  |  |
| --- | --- |
| バブリング | なし |
| キャンセル可能 | いいえ |
| インターフェイス | `PromiseRejectionEvent` |
| イベントハンドラープロパティ | `onrejectionhandled` |

例
-

`rejectionhandled` イベントを使用して、拒否された Promise を、拒否された理由を添えてコンソールに出力することができます。

```js
window.addEventListener(
  "rejectionhandled",
  (event) => {
    console.log("Promise rejected; reason: " + event.reason);
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # unhandled-promise-rejections |
| HTML Standard # handler-window-onrejectionhandled |

ブラウザーの対応
--------

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

関連情報
----

* プロミスの拒否イベント
* `PromiseRejectionEvent`
* `Promise`
* `unhandledrejection`


Window: open() メソッド - Web API

Window: open() メソッド
===================

**`open()`** は `Window` インターフェイスのメソッドで、指定されたリソースを、新しい、または既存の指定された名前を持った閲覧コンテキスト (ウィンドウ、 iframe、タブ) に読み込みます。

構文
--

```js
open()
open(url)
open(url, target)
open(url, target, windowFeatures)
```

### 引数

`url` 省略可

文字列で、読み込むリソースの URL を示します。これは HTML ページ、画像ファイル、その他のブラウザーが対応しているリソースのパスまたは URL にすることができます。空文字列 (`""`) がこの時期数に指定されると、対象の閲覧コンテキストに空のページが開きます。

`target` 省略可

ホワイトスペースのない文字列で、リソースを読み込むための閲覧コンテキストの名前を指定します。その名前で既存のコンテキストが識別できない場合は、新しいコンテキストが指定された名前で作成されます。特殊な `target` キーワードである `_self`、`_blank`、`_parent`、`_top` も利用することができます。

この名前は `<a>` や `<form>` 要素の `target` 属性として使うことができます。

`windowFeatures` 省略可

`name=value` の形式、または論理特性の場合は `name` だけで、ウィンドウの特性をカンマで区切った文字列です。これらの特性には、ウィンドウの既定値や位置、最小限のポップアップウィンドウを開くかどうか、などのオプションが記載されます。以下のようなオプションに対応しています。

`popup`

この特性を有効にすると、最小限のポップアップウィンドウを使用するように要求されます。ポップアップウィンドウに含まれる UI 機能はブラウザーが自動的に決定し、一般的にはアドレスバーのみを含みます。

もし `popup` が有効でなく、ウィンドウ機能が宣言されていない場合、新しい閲覧コンテキストはタブになります。

**メモ:** `windowFeatures` 引数で `noopener` や `noreferrer` 以外の機能を指定すると、ポップアップを要求する効果もあります。

この機能を有効にするには、 `popup` を指定して値を指定しないか、 `yes`、`1`、`true` のいずれかに設定します。

例: `popup=yes`, `popup=1`, `popup=true`, `popup` は同じ結果になります。

`width` または `innerWidth`

スクロールバーを含むコンテンツ領域の幅を指定します。必要最小値は 100 です。

`height` または `innerHeight`

スクロールバーを含むコンテンツ領域の高さを指定します。必要最小値は 100 です。

`left` または `screenX`

新しいウィンドウを生成する、ユーザーのオペレーティングシステムによって定義される作業領域の左側からの距離をピクセル単位で指定します。

`top` または `screenY`

新しいウィンドウを生成する、ユーザーのオペレーティングシステムによって定義される作業領域の上側からの距離をピクセル単位で指定します。

`noopener`

この特性が設定されている場合、新しいウィンドウは `Window.opener` を介して元のウィンドウにアクセスすることはできず、 `null` を返します。

`noopener` を使用した場合、 `_top`, `_self`, `_parent` 以外の空でないターゲット名は、新しい閲覧コンテキストを開くかどうかの判断において、 `_blank` と同様に扱われます。

`noreferrer`

この特性が設定されると、ブラウザーは `Referer` ヘッダーを省略し、 `noopener` を true に設定します。詳しくは `rel="noreferrer"` を参照してください。

**メモ:** 要求する位置 (`top`, `left`)、要求する寸法 (`width`, `height`) の値が `windowFeatures` で指定された場合、ブラウザーのポップアップ全体がユーザーのオペレーティングシステムのアプリケーションの作業領域内に表示できないと、**修正されます**。言い換えれば、新しいポップアップのどの部分も、最初は画面外に配置することはできません。

### 返値

ブラウザーが新しい閲覧コンテキストを開くことができた場合は、 `WindowProxy` オブジェクトを返します。返される参照は、同一オリジンポリシーのセキュリティ要件に準拠する限り、新しいコンテキストのプロパティとメソッドにアクセスするために使用することができます。

ブラウザーが新しい閲覧コンテキストを開くために失敗した場合、例えばブラウザーのポップアップブロッカーによってブロックされた場合などには `null` が返されます。

解説
--

`Window` インターフェイスの `open()` メソッドは、 URL を引数として取り、識別する新規または既存のタブまたはウィンドウにリソースを読み込みます。 `target` 引数は、リソースを読み込むウィンドウやタブを決定します。また、 `windowFeatures` 引数は、最小限の UI 機能で新しいポップアップを開き、そのサイズや位置を制御するために使用することができます。

リモートの URL は、すぐには読み込まれません。 `window.open()` から返ったとき、ウィンドウには常に `about:blank` を含んでいます。 URL が実際に読み込まれるまでには猶予期間があり、現在のスクリプトブロックが実行を終えた後に開始されます。ウィンドウの生成と参照されるリソースの読み込みは、非同期に行われます。

現代のブラウザーは厳しいポップアップブロッカーポリシーを持っています。ポップアップウィンドウはユーザーの入力に直接反応して開く必要があり、 `Window.open()` を呼び出すたびに別個のジェスチャーイベントが要求されます。これにより、サイトがたくさんのウィンドウでユーザーをスパムするのを防ぐことができます。しかし、これはマルチウィンドウのアプリケーションでは課題となります。この制限をうまく回避するために、アプリケーションを次のように設計してください。

* 一度に複数の新しいウィンドウを開かないようにしてください。
* さまざまなページを表示するために既存のウィンドウを再利用してください。
* 複数のウィンドウを使用できるようにブラウザー設定を更新する方法をユーザーにアドバイスしてください。
例
-

### 新しいタブを開く

```js
window.open("https://www.mozilla.org/", "mozillaTab");
```

### ポップアップを開く

他にも以下の例では、 `popup` 特性を使用して、ポップアップを開く方法を示しています。

```js
window.open("https://www.mozilla.org/", "mozillaWindow", "popup");
```

新しいポップアップの大きさと位置を操作することが可能です。

```js
const windowFeatures = "left=100,top=100,width=320,height=320";
const handle = window.open(
  "https://www.mozilla.org/",
  "mozillaWindow",
  windowFeatures,
);
if (!handle) {
  // ウィンドウを開くことが許可されなかった場合。
  // これは主にポップアップブロッカーによって発生します。
  // …
}
```

プログレッシブエンハンスメント
---------------

JavaScript が無効または利用できない場合、`window.open()` が動作しないことがあります。この機能の有無だけに頼るのではなく、サイトやアプリケーションが機能するような代替策を提供してください。

### JavaScript が無効な場合の代替手段を提供する

JavaScript のサポートが無効または存在しない場合、ユーザーエージェントはそれに応じて副ウィンドウを作成するか、 `target` 属性の処理に従って参照されるリソースをレンダリングします。目標とアイデアは、参照されるリソースを開く方法をユーザーに提供してください (押し付けないでください) ということです。

#### HTML

```html
<a href="https://www.wikipedia.org/" target="OpenWikipediaWindow">
  Wikipedia, a free encyclopedia (opens in another, possibly already existing,
  tab)
</a>
```

#### JavaScript

```js
let windowObjectReference = null; // global variable
function openRequestedTab(url, windowName) {
  if (windowObjectReference === null || windowObjectReference.closed) {
    windowObjectReference = window.open(url, windowName);
  } else {
    windowObjectReference.focus();
  }
}

const link = document.querySelector("a[target='OpenWikipediaWindow']");
link.addEventListener(
  "click",
  (event) => {
    openRequestedTab(link.href);
    event.preventDefault();
  },
  false,
);
```

上記のコードは、リンクがポップアップを開くことに関連するいくつかのユーザビリティの問題を解決しています。コード中の `event.preventDefault()` の目的は、リンクの既定値のアクションを取り消すことです。`click` のイベントリスナーが実行されれば、リンクの既定値のアクションを実行する必要はありません。しかし、ユーザーのブラウザーで JavaScript のサポートが無効または存在しない場合、 `click` のイベントリスナーは無視され、ブラウザーは `"WikipediaWindowName"` という名前を持つターゲットフレームまたはウィンドウに参照されたリソースを読み込む。フレームやウィンドウに `"WikipediaWindowName"` という名前がない場合、ブラウザーは新しいウィンドウを作成して `"WikipediaWindowName"` という名前を付けます。

**メモ:** `target` 属性についての詳細は、 `<a>` または `<form>` を参照してください。

### 既存のウィンドウを再利用して `target="_blank"` を防止する

target 属性の値として `"_blank"` を使用すると、ユーザーのデスクトップ上にリサイクルや再使用ができない新しい無名のウィンドウがいくつも作成されます。 `target` 属性に意味のある名前を提供し、ページ内で `target` 属性を再利用するようにしてください。そうすれば、別のリンクをクリックしたときに、すでに作成・表示されているウィンドウに参照先のリソースが読み込まれ（したがってユーザーの処理速度が速くなり）、第二ウィンドウを作成した当初の理由（およびユーザーのシステムリソース、費やした時間）が正当化されることになります。単一の `target` 属性値を使用し、それをリンクで再利用することで、第二ウィンドウを一つだけ作成して再利用するので、よりユーザーリソースに優しくなります。

ここでは、第二ウィンドウを開いて、他のリンクに再利用する例を紹介します。

#### HTML

```html
<p>
  <a href="https://www.wikipedia.org/" target="SingleSecondaryWindowName">
    Wikipedia, a free encyclopedia (opens in another, possibly already existing,
    tab)
  </a>
</p>
<p>
  <a
 href="https://support.mozilla.org/products/firefox"
 target="SingleSecondaryWindowName">
    Firefox FAQ (opens in another, possibly already existing, tab)
  </a>
</p>
```

#### JavaScript

```js
let windowObjectReference = null; // global variable
let previousURL; /\* global variable that will store the
 url currently in the secondary window \*/
function openRequestedSingleTab(url) {
  if (windowObjectReference === null || windowObjectReference.closed) {
    windowObjectReference = window.open(url, "SingleSecondaryWindowName");
  } else if (previousURL !== url) {
    windowObjectReference = window.open(url, "SingleSecondaryWindowName");
    /\* if the resource to load is different,
 then we load it in the already opened secondary window and then
 we bring such window back on top/in front of its parent window. \*/
    windowObjectReference.focus();
  } else {
    windowObjectReference.focus();
  }
  previousURL = url;
  /\* explanation: we store the current url in order to compare url
 in the event of another call of this function. \*/
}

const links = document.querySelectorAll(
  "a[target='SingleSecondaryWindowName']",
);
for (const link of links) {
  link.addEventListener(
    "click",
    (event) => {
      openRequestedSingleTab(link.href);
      event.preventDefault();
    },
    false,
  );
}
```

同一オリジンポリシー
----------

新しく開いた閲覧コンテキストが同じオリジンでない場合、開いたスクリプトは閲覧コンテキストの内容とやり取り（読み書き）をすることができません。

```js
// Script from example.com
const otherOriginContext = window.open("https://example.org");
// example.com and example.org are not the same origin

console.log(otherOriginContext.origin);
// DOMException: Permission denied to access property "origin" on cross-origin object
```

```js
// Script from example.com
const sameOriginContext = window.open("https://example.com");
// This time, the new browsing context has the same origin

console.log(sameOriginContext.origin);
// https://example.com
```

詳しくは、同一オリジンポリシーの記事を参照してください。

アクセシビリティの考慮
-----------

### window.open() への依存の回避

いくつかの理由で、 `window.open()` への依存を回避することをお勧めします。

* 最近のブラウザーは、ポップアップブロック機能を備えています。
* 最近のブラウザーはタブブラウジングを提供しており、タブブラウジングのユーザーはほとんどの状況で新しいウィンドウを開くよりも新しいタブを開くことを好みます。
* ユーザーは、ブラウザーに組み込まれた機能や拡張機能を使用して、リンクを新しいウィンドウで開くか、同じウィンドウで開くか、新しいタブで開くか、同じタブで開くか、バックグラウンドで開くかを選ぶことができます。 `window.open()` を使用し、特定の方法で開くことを強制すると、ユーザーを混乱させ、その習慣を無視することになります。
* ポップアップにはメニューツールバーがありませんが、新しいタブはブラウザーウィンドウのユーザーインターフェースを使用します。したがって、多くのユーザーはインターフェースが安定しているため、タブブラウジングを好みます。
### window.open() を HTML のインラインで使用しない

`<a href="#" onclick="window.open(…);">` や `<a href="javascript:window.open(…)" …>` は避けてください。

これらの偽の `href` 値は、リンクをコピー/ドラッグしたり、新しいタブ/ウィンドウでリンクを開いたり、ブックマークしたり、 JavaScript の読み込み中、エラー、無効のときに、予期しない動作を発生させます。また、画面の内側から読み取るリーダーなどの支援技術に対しても、誤った意味を伝えてしまいます。

必要であれば、代わりに `<button>` 要素を使用してください。一般的に、*本当の URL へのナビゲーションのためにのみリンクを使用する必要があります*。

### 副ウィンドウに案内するリンクを常に識別できるようにする

ユーザーのナビゲーションに役立つように、新しいウィンドウを開くリンクを識別できるようにしてください。

```html
<a target="WikipediaWindow" href="https://www.wikipedia.org">
  Wikipedia (opens in new tab)
</a>
```

コンテキストが変わることをユーザーに警告する目的は、ユーザー側の混乱を最小限にするためです。現在のウィンドウを変更したり、新しいウィンドウをポップアップしたりすると、ユーザーはとても混乱します（ポップアップの場合、ツールバーには前のウィンドウに戻るための「前へ」ボタンが用意されていません）。

極端なコンテキストの変化が起こる前に、明示的に識別することができれば、ユーザーは先に進むかどうかを判断でき、変化に備えることができます。ユーザーは混乱したり方向感覚を失ったりしないだけでなく、経験豊富なユーザーであれば、そうしたリンクを開く方法（新しいウィンドウで開くかどうか、同じウィンドウ、新しいタブ、「バックグラウンド」かどうか）を適切に判断することができます。

* WebAIM: Links and Hypertext - Hypertext Links
* MDN / WCAG を理解する、ガイドライン 3.2
* G200: Opening new windows and tabs from a link only when necessary
* G201: Giving users advanced warning when opening a new window
仕様書
---

| Specification |
| --- |
| HTML Standard # dom-open-dev |
| CSSOM View Module # the-features-argument-to-the-open()-method |

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

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

関連情報
----

* `target` 属性のドキュメント:
    + `<a>`
    + `<form>`
* `window.close()`
* `window.closed`
* `window.focus()`
* `window.opener`
* `rel="opener"` および `rel="noopener"`
* 同一オリジンポリシー


Window.screen - Web API

Window.screen
=============

`Window` の **`screen`** プロパティは、ウィンドウに関連付けられた画面オブジェクトへの参照を返します。 `screen` オブジェクトは `Screen` インターフェースを実装しており、現在のウィンドウがレンダリングされている画面のプロパティを検査するための特別なオブジェクトです。

構文
--
```

let screenObj = window.screen;
```

例
-

```js
if (screen.pixelDepth < 8) {
  // use low-color version of page
} else {
  // use regular, colorful page
}
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-window-screen |

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

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


Window: vrdisplaydisconnect イベント - Web API

Window: vrdisplaydisconnect イベント
================================

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

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

**`vrdisplaydisconnect`** は WebVR API のイベントで、互換性のある VR 機器がこのコンピューターから取り外されたときに発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("vrdisplaydisconnect", (event) => {});

onvrdisplaydisconnect = (event) => {};
```

イベント型
-----

`VRDisplayEvent` です。 `Event` を継承しています。

イベントプロパティ
---------

*`VRDisplayEvent` は親オブジェクトである `Event` からプロパティを継承しています。*

`VRDisplayEvent.display`
非推奨
 読取専用

このイベントに関連付けられた `VRDisplay` です。

`VRDisplayEvent.reason`
非推奨
 読取専用

このイベントが発生した理由を人間可読な形で示します。

例
-

`vrdisplaydisconnect` イベントは `addEventListener` メソッドで使用することができます。

**メモ:** このイベントは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

```js
window.addEventListener("vrdisplaydisconnect", () => {
  info.textContent = "Display disconnected.";
  reportDisplays();
});
```

または、 `onvrdisplaydisconnect` イベントハンドラープロパティを使用してください。

```js
window.onvrdisplaydisconnect = () => {
  info.textContent = "Display disconnected.";
  reportDisplays();
};
```

仕様書
---

このイベントは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

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

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

関連情報
----

* WebVR API


window.name - Web API

window.name
===========

ウィンドウ名を取得 / 設定します。

値
-

文字列。

構文
--

```js
string = window.name;
window.name = string;
```

例
-

```js
window.name = "lab\_view";
```

注記
--

ウィンドウ名は、主にハイパーリンクとフォームのターゲットを設定するために使われます。ウィンドウは必ずしもウィンドウ名を持つ必要はありません。

現代のブラウザーは、タブが他のドメインのページを読み込むと `Window.name` を空文字列に設定し、元のページが (例えば「戻る」ボタンを押すことにより) 再び読み込まれると名前を復元します。このことにより、信頼されていないページが、前のページがこのプロパティに保存していた可能性があるいかなる情報にもアクセスできないようにします。(新しいページがこのようなデータを書き換え、それが再び読み込まれた元のページによって読まれる、という可能性も考えられます)

`Window.name` はまた、いくつかのフレームワーク ( SessionVars や Dojo の dojox.io.windowName など) によって JSONP のより安全な代替としてクロスドメインメッセージングを実現するために使われています。しかし、現代の機微なデータを扱うウェブアプリケーションは、クロスドメインメッセージングのために `window.name` に依存するべきではありません。なぜなら、これは意図された目的ではない上、ウィンドウ間での情報の共有にはより安全な/良い方法があります。`Window.postMessage()` の利用を推奨します。

**メモ:** `window.name` は保存される全ての値を `toString` メソッドにより文字列表現に変換します。

### 例

```html
<script>
 // 指定したウィンドウ名を持つタブを開く
 const otherTab = window.open("url1", "\_blank");
 if (otherTab) otherTab.name = "other-tab";
</script>
<a href="url2" target="other-tab">このリンクはもう一つのタブで開かれます。</a>
```

仕様書
---

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


Window: menubar プロパティ - Web API

Window: menubar プロパティ
=====================

`menubar` オブジェクトを返します。

これは `Window` プロパティのうちの論理値を持つ `visible` プロパティの 1 つであり、ウェブブラウザーのユーザーインターフェイスの特定の部分が可視であるかどうかを表すものでした。

プライバシーと相互運用性の理由から、これで `visible` プロパティの値は、この `Window` がポップアップの場合は `false` となり、そうでない場合は `true` となるようになりました。

構文
--

単一のプロパティを持つオブジェクトです。

`visible` 読取専用

論理値のプロパティで、 `false` は `Window` がポップアップの場合、 `true` はそれ以外を表します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-window-menubar-dev |

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

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

関連情報
----

* `window.locationbar`
* `window.personalbar`
* `window.scrollbars`
* `window.statusbar`
* `window.toolbar`


Window: beforeprint イベント - Web API

Window: beforeprint イベント
========================

**`beforeprint`** イベントは、関連する文書が印刷される直前や、印刷プレビューが開く直前に発生します。

|  |  |
| --- | --- |
| バブリング | いいえ |
| キャンセル | 不可 |
| インターフェイス | `Event` |
| イベントハンドラープロパティ | `onbeforeprint` |

例
-

`addEventListener()` の使用例:

```js
window.addEventListener("beforeprint", (event) => {
  console.log("Before print");
});
```

`onbeforeprint` イベントハンドラープロパティの使用例:

```js
window.onbeforeprint = (event) => {
  console.log("Before print");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-beforeprint |
| HTML Standard # handler-window-onbeforeprint |

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

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

関連情報
----

* 関連イベント: `afterprint`


Window: appinstalled イベント - Web API

Window: appinstalled イベント
=========================

**`appinstalled`** はウェブマニフェスト API のイベントで、ブラウザーがあるページをアプリケーションとして成功裏にインストールしたとき発行されます。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("appinstalled", (event) => {});

onappinstalled = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

`appinstalled` イベントは `addEventListener` メソッドで使用することができます。

```js
window.addEventListener("appinstalled", () => {
  console.log("アプリをインストールしてくれてありがとう！");
});
```

または `onappinstalled` イベントハンドラープロパティを使用してください。

```js
window.onappinstalled = () => {
  console.log("アプリをインストールしてくれてありがとう！");
};
```

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

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


Window: devicemotion イベント - Web API

Window: devicemotion イベント
=========================

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

**`devicemotion`** イベントは、一定の間隔で発行され、その時点で端末が受けている加速度の物理的な力の量を示します。また、利用可能であれば、回転速度に関する情報も提供します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("devicemotion", (event) => {});

ondevicemotion = (event) => {};
```

イベント型
-----

`DeviceMotionEvent` です。 `Event` から継承しています。

Event

DeviceMotionEventイベントプロパティ
---------

`DeviceMotionEvent.acceleration` 読取専用

X、Y、Z の 3 軸上の端末の加速度を表すオブジェクトです。加速度は m/s² で表示されます。

`DeviceMotionEvent.accelerationIncludingGravity` 読取専用

重力の影響を受けた X、Y、Z の 3 軸上の端末の加速度を表すオブジェクトです。加速度は m/s² で表示されます。

`DeviceMotionEvent.rotationRate` 読取専用

アルファ、ベータ、ガンマの 3 つの方向軸における端末の向きの変化速度を表すオブジェクト。回転率は 1 秒あたりの度数で表現されます。

`DeviceMotionEvent.interval` 読取専用

端末からデータを取得する時間間隔をミリ秒で表します。

例
-

```js
function handleMotionEvent(event) {
  const x = event.accelerationIncludingGravity.x;
  const y = event.accelerationIncludingGravity.y;
  const z = event.accelerationIncludingGravity.z;

  // 何か素晴らしいことをする
}

window.addEventListener("devicemotion", handleMotionEvent, true);
```

仕様書
---

| Specification |
| --- |
| DeviceOrientation Event Specification # devicemotion |
| DeviceOrientation Event Specification # ref-for-dom-window-ondevicemotion |

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

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

関連情報
----

* `deviceorientation`
* DeviceOrientation Event


window.dump() - Web API

window.dump()
=============

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

概要
--

(システムの) コンソールにメッセージを表示します。

構文
--
```

window.dump(message);

dump(message);
```

* `message` はログ出力するメッセージの文字列です。
注記
--

`dump`() の一般的な使い方は、JavaScript のデバッグです。Firefox のプロセスが `-console` オプション付きで開始された場合、`dump`() に渡されたメッセージは、システムコンソール (ネイティブのコンソール) に送信されます。`-console` オプションが指定されていない場合、stderr に出力されます。dump() からの出力は ブラウザコンソール に送信されません。ブラウザコンソール への出力は、console.log() を使用してください。特権コードは、`Components.utils.reportError` と `nsIConsoleService` を使用してメッセージを エラーコンソール / ブラウザコンソール にログ出力することもできます。

`dump`() は、JavaScript で実装された XPCOM コンポーネントでも使用できます。これは、`window` がコンポーネント内のグローバルオブジェクトでなくても使えます。また、sandboxes 内で明示的に使用可能にすることもできます。しかし、この `dump` の使用は、後述の設定に影響せず、常に表示されます。この設定を自分で確認するか、独自のデバッグ設定で、多くのデバッグコンテンツを、これらに興味のないユーザのコンソールに送信されないようにすることをおすすめします。ただし、XPCOM コンポーネントからの `dump` 出力は `stderr` へ送られますが、別の場所から呼び出された `dump` は `stdout` へ出力されるので注意してください。

Gecko の `dump()` は **既定で無効** です。実行しても何も起こらず、エラーも発生しません。`dump` 出力を見るには、about:config ページか user.js ファイル で、`browser.dom.window.dump.enabled` 設定の値を `true` にしなければなりません。注記: この設定は既定では `about:config` のリストに表示されないので、新たに作成してください (about:config ページのコンテンツ領域を右クリックし、"新規作成" から "真偽値" を選択します)。

Windows では、dump の出力を見るにはコンソールを開く必要があります。まだコンソールを開いていなければ、一旦アプリケーションを閉じ、コマンドライン引数に `-console` を追加して再度開いてください。アプリケーションと同時にコンソールが開きます。または、`-attach-console` を追加すると既存のコンソールを使用します。他のオペレーティングシステムでは、ターミナルからプリケーションを開くだけです。

コンソール出力をファイルへリダイレクトするには、Firefox を `-console` オプション*無し*で起動し、次のコマンドで stderr と stdout の出力をファイルへリダイレクトしてください:
```

firefox > console.txt 2>&1
```

**メモ:** コンソールメッセージを、アプリケーションを起動したコンソールに表示させたいときは、Gecko Console Redirector を使用してください。プリコンパイルされたバイナリが https://github.com/matthewkastor/Redirector/archive/master.zip の ZIP アーカイブ内の `Redirector-master\Gecko\Console Redirector\bin\Release` に含まれています。すべての dll ファイルと exe ファイルをお好みの場所にコピーしてください。次に、`Console Redirector.exe /?` を実行します。

仕様
--

これは、どの仕様にも含まれません。


FocusEvent.relatedTarget - Web API

FocusEvent.relatedTarget
========================

**`FocusEvent.relatedTarget`** は読み取り専用プロパティで、イベントの種類に応じた副ターゲットを表します。

| イベント名 | `target` | `relatedTarget` |
| --- | --- | --- |
| `blur` | フォーカスを失う `EventTarget` | フォーカスを受け取る `EventTarget` （存在する場合） |
| `focus` | フォーカスを受け取る `EventTarget` | フォーカスを失う `EventTarget` （存在する場合） |
| `focusin` | フォーカスを受け取る `EventTarget` | フォーカスを失う `EventTarget` （存在する場合） |
| `focusout` | フォーカスを失う `EventTarget` | フォーカスを受け取る `EventTarget` （存在する場合） |

なお、多くの要素はフォーカスを受け取ることができないことが、 `relatedTarget` が `null` になる良くある理由です。 `relatedTarget` はタブ移動でページをでたり入ったりする場合など、セキュリティ上の理由で `null` になることもあります。

`MouseEvent.relatedTarget` はマウスイベントにおける同様のプロパティです。

値
-

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

仕様書
---

| Specification |
| --- |
| UI Events # dom-focusevent-relatedtarget |

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

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

関連情報
----

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


FocusEvent() - Web API

FocusEvent()
============

**`FocusEvent()`** コンストラクターは、新しく作成された `FocusEvent` オブジェクトを返します。任意で `EventTarget` オブジェクトを指定することができます。イベントに送信元と送信先の両方がある場合、 `relatedTarget`の値は、もう一方のターゲットに設定する必要があります。

構文
--

```js
new FocusEvent(type)
new FocusEvent(type, options)
```

### 引数

*`FocusEvent()` コンストラクターは `UIEvent()` および `Event()` から引数を継承しています。*

`type`

 文字列で、このイベントの名前です。
 大文字小文字の区別があり、ブラウザーは `blur`、`focus`、`focusin`、`focusout` の何れかを設定します。

`options` 省略可

オブジェクトで、 *`UIEvent()` で定義されたプロパティに加え*、以下のプロパティを設定することができます。

`relatedTarget` 省略可

`EventTarget` で、 `FocusEvent` の第二ターゲットを表します。既定値は `null` です。

仕様書
---

| Specification |
| --- |
| UI Events # dom-focusevent-focusevent |

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

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

関連情報
----

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


Sensor: activate イベント - Web API

Sensor: activate イベント
=====================

**`activate`** イベントは、センサーの動作が開始したとき発火します。これは、センサーが測定値の取得を開始したということです。

`Sensor` はベースクラスであり、`onactivate` および `activate` イベントは派生クラスからのみ利用可能です。

構文
--

`addEventListener()` のようなメソッドでイベント名を用いるか、イベントハンドラープロパティを設定します。

```js
addEventListener("activate", (event) => {});

onactivate = (event) => {};
```

イベント型
-----

汎用の `Event` であり、追加されたプロパティはありません。

例
-

### 加速度計の測定の準備ができたとき記録する

この例では、`Accelerometer` の動作開始を記録するイベントリスナーを追加します。

```js
const acl = new Accelerometer({ frequency: 60 });
acl.addEventListener("activate", () => console.log("測定の準備ができました。"));
acl.start();
```

仕様書
---

| Specification |
| --- |
| Generic Sensor API # sensor-onactivate |

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

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

関連情報
----

* Sensor `error` イベント
* Sensor `reading` イベント


Sensor: activated プロパティ - Web API

Sensor: activated プロパティ
=======================

`Sensor` インターフェイスの読み取り専用プロパティ **`activated`** は、センサーが作動中かを表す `boolean` 値を返します。

`Sensor` はベースクラスなので、`activated` は派生クラスからのみ読み取り可能です。

値
-

`boolean` 値です。

仕様書
---

| Specification |
| --- |
| Generic Sensor API # sensor-activated |

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

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


Sensor: stop() メソッド - Web API

Sensor: stop() メソッド
===================

`Sensor` インターフェイスの **`stop`** メソッドは、現在のセンサーを動作停止させます。

構文
--

```js
stop()
```

### 引数

なし

### 返値

なし (`undefined`)

例
-

```js
// TBD
```

仕様書
---

| Specification |
| --- |
| Generic Sensor API # sensor-stop |

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

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


Sensor: start() メソッド - Web API

Sensor: start() メソッド
====================

**`start`** メソッドは、`Sensor` をベースとするセンサーを 1 個動作開始させます。

構文
--

```js
start()
```

### 引数

なし

### 返値

なし (`undefined`)

仕様書
---

| Specification |
| --- |
| Generic Sensor API # sensor-start |

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

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


Sensor: error イベント - Web API

Sensor: error イベント
==================

**`error`** イベントは、センサーで例外が発生したとき発火します。

`Sensor` はベースクラスであり、`onerror` および `error` イベントは派生クラスからのみ利用可能です。

このイベントの発生後、`Sensor` オブジェクトは idle 状態になります。センサーが値を読んでいた場合は、再び開始されるまで停止します。

構文
--

`addEventListener()` のようなメソッドでイベント名を用いるか、イベントハンドラープロパティを設定します。

```js
addEventListener("error", (event) => {});

onerror = (event) => {};
```

イベント型
-----

`Event` から派生した `SensorErrorEvent` です。

Event

SensorErrorEventイベントプロパティ
---------

*以下のプロパティに加え、親インターフェイスの `Event` 由来のプロパティが利用可能です。*

`error` 読取専用

投げられた `DOMException` を返します。

例
-

### 加速度計の例外を記録する

この例では、`Accelerometer` で発生したエラーを記録するイベントリスナーを追加します。

```js
const acl = new Accelerometer({ frequency: 60 });
acl.addEventListener("error", (error) => console.log(`エラー: ${error.name}`));
acl.start();
```

仕様書
---

| Specification |
| --- |
| Generic Sensor API # sensor-onerror |

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

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

関連情報
----

* Sensor `activate` イベント
* Sensor `reading` イベント


Sensor: reading イベント - Web API

Sensor: reading イベント
====================

**`reading`** イベントは、センサーで新しい測定値が得られたとき発火します。

`Sensor` はベースクラスであり、`onreading` および `reading` イベントは派生クラスからのみ利用可能です。

構文
--

`addEventListener()` のようなメソッドでイベント名を用いるか、イベントハンドラープロパティを設定します。

```js
addEventListener("reading", (event) => {});

onreading = (event) => {};
```

イベント型
-----

汎用の `Event` であり、追加されたプロパティはありません。

例
-

### 加速度を取得する

この例では、`Accelerometer` から加速度の値を取得するイベントリスナーを追加します。1 秒に 60 回取得を行います。

```js
const acl = new Accelerometer({ frequency: 60 });
acl.addEventListener("reading", () => {
  console.log(`X 軸方向の加速度 ${acl.x}`);
  console.log(`Y 軸方向の加速度 ${acl.y}`);
  console.log(`Z 軸方向の加速度 ${acl.z}`);
});
acl.start();
```

仕様書
---

| Specification |
| --- |
| Generic Sensor API # sensor-onreading |

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

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

関連情報
----

* Sensor `activate` イベント
* Sensor `error` イベント


Sensor: hasReading プロパティ - Web API

Sensor: hasReading プロパティ
========================

`Sensor` インターフェイスの読み取り専用プロパティ **`hasReading`** は、センサーが測定値を持っているかを表す `boolean` 値を返します。

`Sensor` はベースクラスなので、`hasReading` は派生クラスからのみ読み取り可能です。

値
-

`boolean` 値です。

仕様書
---

| Specification |
| --- |
| Generic Sensor API # sensor-has-reading |

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

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


Sensor: timestamp プロパティ - Web API

Sensor: timestamp プロパティ
=======================

`Sensor` インターフェイスの読み取り専用プロパティ **`timestamp`** は、センサーの最新の測定値のタイムスタンプを返します。

`Sensor` はベースクラスなので、`timestamp` は派生クラスからのみ読み取り可能です。

値
-

`DOMHighResTimeStamp` です。

仕様書
---

| Specification |
| --- |
| Generic Sensor API # sensor-timestamp |

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

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


IDBVersionChangeEvent.newVersion - Web API

IDBVersionChangeEvent.newVersion
================================

`IDBVersionChangeEvent` インターフェイスの読み取り専用プロパティ **`newVersion`** は、データベースの新しいバージョン番号を返します。

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

値
-

64 ビットの整数、またはデータベースが削除される場合は `null` です。

例
-

このコードスニペットでは、データベースを開く要求をし、成功した場合と失敗した場合用のハンドラーを用意します。これらのイベントはカスタムの `IDBVersionChangeEvent` インターフェイスによって発火します。動く例全体は、To-do Notifications を参照してください。(動く例を見る)

```js
const note = document.querySelector("ul");

// 我々のデータベースのバージョン 4 を開きましょう
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

// これらの 2 個のイベントハンドラーは、データベースが開かれる時動作します
DBOpenRequest.onerror = (event) => {
  note.innerHTML += "<li>データベースの読み込み中にエラーが発生しました。</li>";
};

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>データベースの初期化が完了しました。</li>";

  // データベースを開いた結果を変数 db に格納します。
  // これは後でトランザクションの開始などにたくさん使います。
  const db = DBOpenRequest.result;
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # dom-idbversionchangeevent-newversion |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キーの範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)


IDBVersionChangeEvent.oldVersion - Web API

IDBVersionChangeEvent.oldVersion
================================

`IDBVersionChangeEvent` インターフェイスの読み取り専用プロパティ **`oldVersion`** は、データベースの古いバージョンを返します。

開かれたデータベースがまだ存在しないときは、`oldVersion` の値は 0 です。

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

値
-

64 ビットの整数です。

例
-

```js
const dbName = "sampleDB";
const dbVersion = 2;
const request = indexedDB.open(dbName, dbVersion);

request.onupgradeneeded = (e) => {
  const db = request.result;
  if (e.oldVersion < 1) {
    db.createObjectStore("store1");
  }

  if (e.oldVersion < 2) {
    db.deleteObjectStore("store1");
    db.createObjectStore("store2");
  }

  // version < 3, 4... について同様に
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # dom-idbversionchangeevent-oldversion |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キーの範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)


IDBVersionChangeEvent() - Web API

IDBVersionChangeEvent()
=======================

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

**`IDBVersionChangeEvent()`** コンストラクターは、`onupgradeneeded` イベントハンドラーを実行した結果データベースのバージョンが変更されたことを表す、新しい `IDBVersionChangeEvent` オブジェクトを作成します。

構文
--

```js
new IDBVersionChangeEvent(type)
new IDBVersionChangeEvent(type, options)
```

### 引数

`type`

イベントの名前を表す文字列です。大文字と小文字は区別され、ブラウザーは `versionchange`、`success`、`blocked` のいずれかに設定します。

`options` 省略可

オブジェクトです。*`Event()` で定義されているプロパティに加え*、以下のプロパティを持つことができます。

`oldVersion` 省略可

データベースの更新前のバージョンを表す数値です。デフォルト値は `0` です。

`newVersion` 省略可

データベースの新しいバージョンを表す `unsigned long` 値、もしくはデータベースが削除される場合は `null` です。デフォルト値は `null` です。

### 返値

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

例
-

動作する例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # dom-idbversionchangeevent-idbversionchangeevent |

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

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


MutationEvent: attrName プロパティ - Web API

MutationEvent: attrName プロパティ
=============================

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

**`attrName`** は `MutationEvent` インターフェイスの読み取り専用プロパティで、 `DOMAttrModified` イベントの影響を受けるノードの名前を文字列で返します。これは他のイベントでは意味を持たず、空文字列 (`""`) に設定されます。

値
-

文字列です。

例
-

```js
element.addEventListener(
  "DOMAttrModified",
  (event) => {
    console.log(event.attrName);
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-mutationevent-attrname |

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

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


MutationEvent: newValue プロパティ - Web API

MutationEvent: newValue プロパティ
=============================

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

**`newValue`** は `MutationEvent` インターフェイスの読み取り専用プロパティで、文字列を返します。 `DOMAttrModified` イベントでは、 `Attr` ノードの新しい値を表します。 `DOMCharacterDataModified` イベントでは、`CharacterData` ノードの新しい値を表します。それ以外の場合は、空文字列 (`""`) を返します。

値
-

文字列です。

例
-

```js
element.addEventListener(
  "DOMAttrModified",
  (event) => {
    console.log(event.newValue);
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-mutationevent-newvalue |

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

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


MutationEvent: attrChange プロパティ - Web API

MutationEvent: attrChange プロパティ
===============================

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

**`attrChange`** は `MutationEvent` インターフェイスの読み取り専用プロパティで、 `DOMAttrModified` イベントのトリガーとなった変更の種類を示す数値を返します。取り得る値は `MODIFICATION` (`1`)、`ADDITION` (`2`)、`REMOVAL`(`3`) の 3 つです。この値は他のイベントでは意味を持たず、`0` に設定されます。

値
-

整数です。 `0`、`1` (`MODIFICATION`)、`2` (`ADDITION`)、`3` (`REMOVAL`) のいずれかです。

例
-

```js
element.addEventListener(
  "DOMAttrModified",
  (event) => {
    console.log(event.attrChange);
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-mutationevent-attrchange |

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

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


MutationEvent: prevValue プロパティ - Web API

MutationEvent: prevValue プロパティ
==============================

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

**`prevValue`** は `MutationEvent` インターフェイスの読み取り専用プロパティで、文字列を返します。 `DOMAttrModified` イベントでは、 `Attr` ノードの以前の値を表します。 `DOMCharacterDataModified` イベントでは、 `CharacterData` ノードの以前の値を表します。それ以外の場合は、空文字列 (`""`) を返します。

値
-

文字列です。

例
-

```js
element.addEventListener(
  "DOMAttrModified",
  (event) => {
    console.log(event.previousValue);
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-mutationevent-prevvalue |

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

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


MutationEvent: initMutationEvent() メソッド - Web API

MutationEvent: initMutationEvent() メソッド
=======================================

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

**`initMutationEvent()`** は `MutationEvent` インターフェイスのメソッドで、一度作成された変異イベントの値を初期化します（通常は `Document.createEvent()` メソッドを使用します）。

このメソッドは、 `EventTarget.dispatchEvent()` を使用して、配信される前にイベントを設定するために呼び出される必要があります。

**メモ:** 一般に、これらのイベントを自分で作成することはなく、ブラウザーが作成します。

構文
--

```js
initMutationEvent(type, canBubble, cancelable, relatedNode,
                  prevValue, newValue, attrName, attrChange)
```

### 引数

`type`

 イベントの `type` に設定する文字列。ブラウザーは `MutationEvent` に次の値を設定します。
 `DOMAttrModified`, `DOMAttributeNameChanged`, `DOMCharacterDataModified`, `DOMElementNameChanged`, `DOMNodeInserted`, `DOMNodeInsertedIntoDocument`, `DOMNodeRemoved`, `DOMNodeRemovedFromDocument`,`DOMSubtreeModified`

`canBubble`

論理値で、イベントがバブリングするかどうかを示します。 `Event.bubbles` の値を設定します。

`cancelable`

論理値で、イベントの既定のアクションを阻止できるかどうかを示します。 `Event.cancelable` の値を設定します。

`relatedNode`

文字列で、変更するノードの新しい値を表します。 `MutationEvent.relatedNode` の値を設定します。

`prevValue`

文字列で、変更するノードの前回値を表します。 `MutationEvent.prevValue` の値を設定します。

`newValue`

文字列で、変更するノードの新しい値を表します。 `MutationEvent.newValue` の値を設定します。

`attrName`

文字列で、もしあれば、変更された `Attr` ノードの名前を表します。 `MutationEvent.attrName` の値を設定します。

`attrChange`

整数で、属性ノードが変更された理由を表します。 `MutationEvent.attrChange` の値を設定します。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| UI Events # dom-mutationevent-initmutationevent |

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

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


MutationEvent: relatedNode プロパティ - Web API

MutationEvent: relatedNode プロパティ
================================

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

**`relatedNode`** は `MutationEvent` インターフェイスの読み取り専用プロパティで、 `DOMSubtreeModified` のサブツリー内の変更されたノードのように、イベントに関連するノードを示す文字列を返します。

値
-

文字列です。

例
-

```js
element.addEventListener(
  "DOMSubtreeModified",
  (event) => {
    console.log(event.relatedNode);
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-mutationevent-relatednode |

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

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


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

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

**`DOMPointReadOnly()`** コンストラクターは、スクリプトコードによってその値を変更できない、 2D または 3D の点を表す新しい `DOMPointReadOnly` オブジェクト（オプションで遠近法を使用可能）を返します。

構文
--

```js
new DOMPointReadOnly()
new DOMPointReadOnly(x)
new DOMPointReadOnly(x, y)
new DOMPointReadOnly(x, y, z)
new DOMPointReadOnly(x, y, z, w)
```

### 引数

`x` 省略可

水平座標 x の値を浮動小数点数で指定します。既定値は 0 です。

`y` 省略可

垂直座標 y の値を浮動小数点数で指定します。既定値は 0 です。

`z` 省略可

奥行き座標 z の値を浮動小数点数で指定します。既定値は 0 です。

`w` 省略可

視点位置 w を浮動小数点数で指定します。既定値は 1 です。

**メモ:** これらの値はそれぞれ*無制限*の数と呼ばれるものです。有限の浮動小数点数に加えて、±`Infinity` や `NaN` のような特別な値も使用することができます。

### 返値

空間内の指定された位置を表す、新しい `DOMPointReadOnly` オブジェクト。

例
-

次のコードは、 2D または 3D の点を作成する例です。

```js
const point2D = new DOMPointReadOnly(50, 25);
const point3D = new DOMPointReadOnly(50, 0, 10);
const perspectivePoint3D = new DOMPointReadOnly(50, 50, 25, 0.5);
```

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompointreadonly-dompointreadonly |

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

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


DOMPointReadOnly.fromPoint() - Web API

DOMPointReadOnly.fromPoint()
============================

静的な **{domxref("DOMPointReadOnly")}}** メソッド `fromPoint()` は、指定された元の点から新しい `DOMPointReadOnly` オブジェクトを作成し、それを返します。

また、 `new DOMPointReadOnly()` コンストラクターを使用しても、新しい `DOMPointReadOnly` オブジェクトを作成することができます。

構文
--

```js
fromPoint(sourcePoint);
```

### 引数

`sourcePoint`

新しい点のプロパティの値を取得するための `DOMPoint` または `DOMPointReadOnly` インスタンス、あるいは以下のプロパティを含むオブジェクトです。

`x`

空間上の点の `x` 座標を表す、無制限の浮動小数点数。これは一般に水平座標であり、正の値は右側に、負の値は左側になります。既定値は `0` です。

`y`

点の `y` 座標を表す無制限の浮動小数点数。これは垂直座標であり、座標系に適用される変換を除いて、正の値は下向きに、負の値は画面上方に向かって上向きになります。既定値は `0` です。

`z`

点の `z` 座標を与える無制限の浮動小数点数．この座標は、（状況を変えるような変換がないと仮定して）奥行き座標です。正の値はユーザーに近く、負の値は画面の奥に引っ込みます。既定値は `0` です。

`w`

点の `w` 視点位置。無制限の浮動小数点数で与えられます。 既定値は `1` です。

### 返値

新しい（元の点と同じ） `DOMPointReadOnly` オブジェクト。

例
-

### 二次元の点の作成

このサンプルでは、 `x` と `y` に使用する値を含むインラインオブジェクトを指定し、二次元点を作成しています。 `z` と `w` プロパティは既定値（それぞれ `0` と `1`）のままにしておくことが可能です。

```js
const point2D = DOMPointReadOnly.fromPoint({ x: 25, y: 25 });
```

### 既存の点を使用して三次元の点を作成します

この例では、 `DOMPoint` を用いて、 `new DOMPoint()` 型の点 `origPoint` を作成しています。そして、その点は `fromPoint()` の入力として使用され、新しい点 `newPoint` を作成します。

```js
const origPoint = new DOMPoint(25, 25, 100, 0.5);

const newPoint = DOMPointReadOnly.fromPoint(origPoint);
```

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompointreadonly-frompoint |

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

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


DOMPointReadOnly: x プロパティ - Web API

DOMPointReadOnly: x プロパティ
=========================

**`DOMPointReadOnly`** インターフェイスの **`x`** プロパティは、この点の水平座標 x を保持します。これは、空間内の読み取り専用の点です。このプロパティは、 `DOMPoint` オブジェクトの読み取り専用版なので、 JavaScript コードでは変更することができません。

一般的に、正の値 `x` は右方向を意味し、負の値 `x` は左方向を意味します。これは、変換によって反転された結果がないとみなされます。

値
-

点の x 座標の値を示す倍精度浮動小数点値。この値は**無制限**であり、無限または無効であることが許されます（つまり、その値は `NaN` または `±Infinity` であってもかまいません）。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompointreadonly-x |

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

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

関連情報
----

* その他の座標プロパティ: `y`,
 `z`, および視点位置である
 `w`


DOMPointReadOnly.toJSON() - Web API

DOMPointReadOnly.toJSON()
=========================

メソッド `toJSON()` は、この点オブジェクトの JSON 形式を表すオブジェクトを返します。

構文
--

```js
toJSON();
```

### 引数

なし。

### 返値

プロパティに、メソッドが呼び出された `DOMPoint` または `DOMPointReadOnly` の値が設定された新しいオブジェクトを返します。

例
-

この例では、現在のウィンドウの左上隅をスクリーン座標で表す `DOMPoint` オブジェクトを作成し、それを JSON に変換しています。

```js
var topLeft = new DOMPoint(window.screenX, window.screenY);

var pointJSON = topLeft.toJSON();
```

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompointreadonly-tojson |

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

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


DOMPointReadOnly: y プロパティ - Web API

DOMPointReadOnly: y プロパティ
=========================

**`DOMPointReadOnly`** インターフェイスの **`y`** プロパティは、空間の読み取り専用の点における垂直座標 y を保持します。

もし、スクリプトでこのプロパティの値を変更する必要がある場合は、代わりに `DOMPoint` オブジェクトを使用 してください。

一般的に、変換によって反転していないとみなすならば、正の値の `y` は下方向を意味し、負の値の `y` は上方向を意味します。

値
-

この点の y 座標の値を示す倍精度浮動小数点値。この値は**無制限**であり、無限大または無効であることが許されます（つまり、その値は `NaN` または `±Infinity` である可能性があります）。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompointreadonly-y |

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

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

関連情報
----

* その他の座標プロパティ: `x`,
 `z`, および視点位置である `w`


DOMPointReadOnly: w プロパティ - Web API

DOMPointReadOnly: w プロパティ
=========================

**`DOMPointReadOnly`** インターフェイスの **`w`** プロパティは、この点の視点位置である `w` を保持します。これは空間内の読み取り専用の点です。

スクリプトでこのプロパティの値を変更できるようにする必要がある場合は、代わりに `DOMPoint` オブジェクトを使用する必要があります。

値
-

この点の `w` 視点位置 を示す倍精度浮動小数点値です。この値は**無制限**であり，無限大でも無効値でも構いません（つまり，その値は `NaN` または `±Infinity` であってもかまいません）。既定値は `1.0` である。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompointreadonly-w |

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

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

関連情報
----

* その他の座標プロパティ: `x`, `y`, and `z`


DOMPointReadOnly: z プロパティ - Web API

DOMPointReadOnly: z プロパティ
=========================

**`DOMPointReadOnly`** インターフェイスの **`z`** プロパティは、空間の読み取り専用の点における置く息座標 z を保持します。

もし、スクリプトでこのプロパティの値を変更する必要がある場合は、代わりに `DOMPoint` オブジェクトを使用 してください。

一般に、変換によって反転していないとみなされる場合、 `z` の正の値はユーザーに向かい（画面の外側に向かい）、 `z` の負の値はユーザーから離れる（画面の内側へ向かう）ことを意味します。

値
-

この点の z 座標の値を示す倍精度浮動小数点値。この値は**無制限**であり、無限大または無効であることが許されます（つまり、その値は `NaN` または `±Infinity` である可能性があります）。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompointreadonly-z |

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

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

関連情報
----

* その他の座標プロパティ: `x`,
 `y`, および視点位置である `w`


BackgroundFetchUpdateUIEvent.updateUI() - Web API

BackgroundFetchUpdateUIEvent.updateUI()
=======================================

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

`BackgroundFetchUpdateUIEvent` インターフェイスの **`updateUI()`** メソッドは、 UI 上のタイトルとアイコンを更新し、バックグラウンドのフェッチの成否を表示します。

このメソッドは一度だけ実行され、フェッチの成否をユーザーに通知することができます。

構文
--

```js
updateUI(options)
```

### 引数

`options` 省略可

下記のいずれかを含むオブジェクト。

`icons` 省略可

UI で用いるアイコンを含む、 1 枚以上の画像リソースのリストです。画像リソースは下記の情報を持つオブジェクトです。

`src`

画像のURL文字列。

`sizes` 省略可

`<link>` `sizes` 属性と同じ意味を持つ文字列。

`type` 省略可

画像の MIME タイプを含む文字列。

`label` 省略可

画像の名前を指定する文字列。

`title` 省略可

UI の新しいタイトルを指定する文字列。

### 返値

`Promise` 。

### 例外

`InvalidStateError` `DOMException`

以下のいずれかに当てはまるとき、発生します。

* `isTrusted` プロパティが `false` のとき。
* `BackgroundFetchUpdateUIEvent` UI 更新のフラグがすでにセットされている、すなわち、すでに `updateUI()` メソッドが呼ばれたあとであるとき。
* `BackgroundFetchUpdateUIEvent` がアクティブではないとき。

例
-

以下の例では、フェッチ成功時に UI のタイトルとアイコン画像を更新しています。

```js
addEventListener("backgroundfetchsuccess", (event) => {
  event.updateUI({
    title: "Episode 5 ready to listen!",
    icon: {
      src: "path/to/success.ico",
      sizes: "16x16 32x32 64x64",
    },
  });
});
```

仕様書
---

| Specification |
| --- |
| Background Fetch # background-fetch-update-ui-event-update-ui |

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

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


BackgroundFetchUpdateUIEvent() - Web API

BackgroundFetchUpdateUIEvent()
==============================

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

コンストラクター **`BackgroundFetchUpdateUIEvent()`** は新しく `BackgroundFetchUpdateUIEvent` オブジェクトを生成します。 このコンストラクターは通常、使用されることはありません。なぜなら、これらのオブジェクトはブラウザーによって自動で生成され、バックグラウンドのフェッチイベントのコールバックに渡されるからです。

構文
--

```js
new BackgroundFetchEvent(type, options)
```

### 引数

`type`

 イベント名の文字列。
 大文字と小文字は区別されます。ブラウザーはこれを `backgroundfetchsuccess` または `backgroundfetchfail` に設定します。

`options`

*`ExtendableEvent()` で定義されたプロパティに加えて*、下記のプロパティを持つオブジェクト。

`registration`

`BackgroundFetchRegistration` オブジェクト。

### 返値

新しく生成された `BackgroundFetchUpdateUIEvent` オブジェクト。

仕様書
---

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchupdateuievent-backgroundfetchupdateuievent |

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

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


MediaList.mediaText - Web API

MediaList.mediaText
===================

**`mediaText`** は `MediaList` インターフェイスの文字列化プロパティで、この `MediaList` をテキストとして表す文字列を返します。新しい `MediaList` を設定することもできます。

値
-

スタイルシートのメディアクエリーを表す文字列です。それぞれは、 `screen and (min-width: 480px), print` のようにカンマで区切られます。

ドキュメントに新しいメディアクエリーを設定したい場合は、 `screen, print` のように、カンマで区切って文字列を指定する必要があります。 `MediaList` は生きたリストであることに注意してください。 `mediaText` によってリストを更新すると、ドキュメントの動作がすぐに更新されます。

また、 `mediaText` に `null` を設定しようとすると、空文字列として扱われ、その値は `""` に設定されることに注意してください。

例
-

次の例は、現在のドキュメントに適用された最初のスタイルシートの `MediaList` のテキスト表現をコンソールにログ出力するものです。

```css
const stylesheets = document.styleSheets;
let stylesheet = stylesheets[0];
console.log(stylesheet.media.mediaText);
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-medialist-mediatext |

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

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


StorageEvent: initStorageEvent() メソッド - Web API

StorageEvent: initStorageEvent() メソッド
=====================================

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

**`StorageEvent.initStorageEvent()`** メソッドは `StorageEvent` の値を初期化するために使用します。

構文
--

```js
initStorageEvent(type)
initStorageEvent(type, canBubble)
initStorageEvent(type, canBubble, cancelable)
initStorageEvent(type, canBubble, cancelable, key)
initStorageEvent(type, canBubble, cancelable, key, oldValue)
initStorageEvent(type, canBubble, cancelable, key, oldValue, newValue)
initStorageEvent(type, canBubble, cancelable, key, oldValue, newValue, url)
initStorageEvent(type, canBubble, cancelable, key, oldValue, newValue, url, storageArea)
```

### 引数

`typeArg`

イベントの名前です。

`canBubble` 省略可

論理値で、イベントが DOM を介してバブリングするかどうかを示します。

`cancelable` 省略可

論理値で、イベントがキャンセル可能であるかどうかを示します。

`key` 省略可

このイベントの結果として値を変更しようとしているキーです。

`oldValue` 省略可

キーの古い値です。

`newValue` 省略可

キーの新しい値です。

`url` 省略可

変更を行おうとしている文書の URL です。

`storageArea` 省略可

このイベントが発生したストレージ領域を表す `Storage` オブジェクトです。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-storageevent-initstorageevent |

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

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

関連情報
----

* この非推奨のメソッドの代わりに使用するコンストラクター: `StorageEvent()` (en-US)


scope - ウェブアプリマニフェスト

scope
=====

|  |  |
| --- | --- |
| 型 | `String` |
| 必須 | いいえ |

`scope` メンバーは文字列型で、このウェブアプリケーションのアプリケーションコンテキストのナビゲーションスコープを定義します。これは、マニフェストが適用されている時に見ることができるウェブページを制限するものです。ユーザーがスコープ外へ移動した場合は、ブラウザータブやウィンドウの中の通常のウェブページに戻ります。

`scope` が相対 URL である場合、ベース URL はマニフェストの URL になります。

例
-

スコープが相対 URL の場合は、マニフェストの URL がベース URL として使用されます。

```json
"scope": "/app/"
```

以下のスコープは、ナビゲーションを現在のサイトに制限します。

```json
"scope": "https://example.com/"
```

最後に、以下の例はナビゲーションを現在のサイトのサブディレクトリーに制限します。

```json
"scope": "https://example.com/subdirectory/"
```

仕様書
---

| Specification |
| --- |
| Web Application Manifest # scope-member |

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

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


name - ウェブアプリマニフェスト

name
====

|  |  |
| --- | --- |
| 型 | `String` |
| 必須 | はい |

`name` メンバーは文字列で、ウェブアプリケーションの名前を通常ユーザーに表示される形 (例えば、他のアプリケーションとのリストの中や、アイコンのラベルなど) で表します。 `name` は書字方向に対応しており、 `dir` および `lang` の各マニフェストメンバーの値に基づいて左書きで表示されたり右書きで表示されたりします。

例
-

単純な `name` を左書き言語で:

```json
"name": "Awesome application"
```

アラビア語で右書きの `name`:

```json
"dir": "rtl",
"lang": "ar",
"name": "!أنا من التطبيق"
```

仕様書
---

| Specification |
| --- |
| Web Application Manifest # name-member |

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

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


display - ウェブアプリマニフェスト

display
=======

|  |  |
| --- | --- |
| 型 | `String` |
| 必須 | いいえ |

`display` メンバーは、開発者が推奨するウェブサイトの表示モードを判別する文字列です。この表示モードは、ブラウザーの UI をどれだけユーザーに見せるかを変更するものであり、 `browser` (ブラウザーのウィンドウが完全に見える) から `fullscreen` (アプリが全画面になる) までの範囲を取ります。

**メモ:** ブラウザーは指定されたモードに対応していなかった場合は、定義済みの代替チェーンに従います。これは `fullscreen` → `standalone` → `minimal-ui` → `browser` であり、 `browser` が `display` メンバーが指定されていなかった場合の既定値です。

**メモ:** 表示モードに応じて選択的に CSS を提供するには、 `display-mode` メディア特性を使用することができます。これにより、サイトを URL から起動した場合とデスクトップアイコンから起動した場合とでユーザーの操作に一貫性を持たせることができます。

値
-

以下の値を利用することができます。

| 表示モード | 説明 | 代替表示モード |
| --- | --- | --- |
| `fullscreen` | 利用可能な画面の領域をすべて使用し、ユーザーエージェントのクロームは表示されなくなります。 | `standalone` |
| `standalone` | アプリケーションの外見は、単独のアプリケーションのようになります。これは、アプリケーションに別のウィンドウを持たせたり、アプリケーションランチャーに独自のアイコンを追加したりすることができるようになります。このモードでは、ユーザーエージェントはナビゲーションを制御するための UI 要素を除外しますが、ステータスバーなどの他の UI 要素を含めることはできます。 | `minimal-ui` |
| `minimal-ui` | アプリケーションの外見は、単独のアプリケーションのようになりますが、ナビゲーションを制御するために最小限の UI 要素が表示されます。要素はブラウザーによって異なります。 | `browser` |
| `browser` | アプリケーションはブラウザーやプラットフォームに応じた一般的なブラウザータブや新しいウインドウで表示されます。これが既定値です。 | (なし) |

例
-

```json
"display": "standalone"
```

仕様書
---

| Specification |
| --- |
| Web Application Manifest # display-member |

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

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


start_url - ウェブアプリマニフェスト

start\_url
==========

|  |  |
| --- | --- |
| 型 | `String` |
| 必須 | いいえ |

`start_url` メンバーは文字列で、*ウェブアプリケーションの開始 URL* を表します。 — ユーザーがウェブアプリケーションを起動したとき (例えば、ユーザーが端末のアプリケーションメニューやホーム画面でウェブアプリケーションのアイコンをタップしたときなど) に読み込まれるべき推奨 URL です。

**メモ:** `start_url` メンバーは純粋に参考であり、ユーザーエージェントがこれを無視したり、インストール時やその後でユーザーに変更を許したりすることがあります。

例
-

### 絶対 URL

```json
"start\_url": "https://example.com"
```

### 相対 URL

相対 URL の場合、解決のためのベース URL にはマニフェストの URL が使われます。

```json
"start\_url": "../startpoint.html"
```

仕様書
---

| Specification |
| --- |
| Web Application Manifest # start\_url-member |

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

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


id - ウェブアプリマニフェスト

id
==

|  |  |
| --- | --- |
| 型 | `String` |
| 必須 | いいえ |

`id` メンバーは、*ウェブアプリケーションのアイデンティティ* すなわち、ウェブアプリケーションの一意な識別子です。ウェブアプリケーション ID が既存の ID と一致しない場合、URL が同じであっても一意なアイデンティティとして扱われます。

**メモ:** `id` メンバーはアプリケーションを一意に識別するために使用可能です。`id` メンバーは `start_url` と同様に処理されますが、ナビゲーション対象のリソースを指すわけではないので、スコープの範囲外でも大丈夫です。

例
-

```json
"id": "?homescreen=1"
```

仕様書
---

| Specification |
| --- |
| Web Application Manifest # id-member |

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

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


display_override - ウェブアプリマニフェスト

display\_override
=================

|  |  |
| --- | --- |
| 型 | `Array` |
| 必須 | いいえ |

`display` メンバーは、開発者が推奨するウェブサイトの表示モードを決定するために使用されます。これは、要求された表示モードに対応していない場合に、ブラウザーが事次善の表示モードに代替するプロセスに従います。高度な用途では、この代替プロセスでは十分でない場合があります。

`display_override` メンバーは、 `display` メンバーを使用する前にブラウザーが考慮する一連の表示モードを開発者に提供することで、これを解決しています。この値は表示モードの配列であり、順番に考慮され、最初にサポートされた表示モードが適用されます。

値
-

表示上書きオブジェクトは表示モード文字列の集合で、利用可能な値は以下の通りです。

| 表示モード | 説明 |
| --- | --- |
| `fullscreen` | 利用可能な画面の領域をすべて使用し、ユーザーエージェントのクロームは表示されなくなります。 |
| `standalone` | アプリケーションの外見は、単独のアプリケーションのようになります。これは、アプリケーションに別のウィンドウを持たせたり、アプリケーションランチャーに独自のアイコンを追加したりすることができるようになります。このモードでは、ユーザーエージェントはナビゲーションを制御するための UI 要素を除外しますが、ステータスバーなどの他の UI 要素を含めることはできます。 |
| `minimal-ui` | アプリケーションの外見は、単独のアプリケーションのようになりますが、ナビゲーションを制御するために最小限の UI 要素が表示されます。要素はブラウザーによって異なります。 |
| `browser` | アプリケーションはブラウザーやプラットフォームに応じた一般的なブラウザータブや新しいウインドウで表示されます。これが既定値です。 |
| `window-controls-overlay` | この表示モードは、アプリケーションが別の PWA ウィンドウにあり、デスクトップ OS 上にある場合にのみ適用されます。この場合、ウィンドウ制御のオーバーレイ機能が利用できるようにします。これは、ウィンドウの全領域がアプリのウェブコンテンツに使用され、ウィンドウの制御ボタン（最大化、最小化、閉じる、およびその他の PWA 固有のボタン）がウェブコンテンツの上にオーバーレイとして表示されるものです。 |

例
-

以下の例では、ブラウザーは以下の表示モード代替チェーンを `fullscreen` → `minimal-ui` → `standalone` の順番で考慮します。

```json
{
  "display\_override": ["fullscreen", "minimal-ui"],
  "display": "standalone"
}
```

仕様書
---

| Specification |
| --- |
| Manifest Incubations # display\_override-member |

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

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

関連情報
----

* Preparing for the display modes of tomorrow
* Customize the window controls overlay of your PWA's title bar


prefer_related_applications - ウェブアプリマニフェスト

prefer\_related\_applications
=============================

|  |  |
| --- | --- |
| 型 | `Boolean` |
| 必須 | いいえ |

`prefer_related_applications` メンバーは論理値で、 `related_applications` で挙がっているアプリケーションがこのウェブアプリケーションよりも推奨されることを示します。 `prefer_related_applications` メンバーが `true` に設定されていた場合、ユーザーエージェントはこのウェブアプリの代わりに関連アプリケーションのうちの一つをインストールするよう勧めるかもしれません。

省略された場合は、 `prefer_related_applications` の既定値は `false` になります。

例
-

```json
"prefer\_related\_applications": true
```

仕様書
---

| Specification |
| --- |
| Web Application Manifest # prefer\_related\_applications-member |

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

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