ウィンドウ管理

W3C作業草案,

このドキュメントの詳細
このバージョン:
https://www.w3.org/TR/2024/WD-window-management-20240607/
最新公開バージョン:
https://www.w3.org/TR/window-management/
編集者ドラフト:
https://w3c.github.io/window-management/
以前のバージョン:
履歴:
https://www.w3.org/standards/history/window-management/
フィードバック:
GitHub
仕様内インライン
編集者:
(Google Inc.)
(Google Inc.)
テストスイート:
https://github.com/web-platform-tests/wpt/tree/master/window-management
https://github.com/web-platform-tests/wpt/tree/master/screen-details

概要

このドキュメントは、スクリプトがデバイスの画面情報を取得し、特定の画面にコンテンツを配置できるWebプラットフォームAPIを定義します。

このドキュメントのステータス

このセクションは、公開時点におけるこのドキュメントのステータスについて説明します。現在のW3Cの出版物および本技術報告書の最新版は、W3C 技術報告書一覧(https://www.w3.org/TR/)に掲載されています。

このドキュメントは、Second Screen Working Groupによって、勧告トラックの作業草案として公開されました。このドキュメントはW3C勧告となることを意図しています。

Second Screen Working Groupは未対応のバグレポート一覧を管理しています。このドラフトには、作業グループで今後議論が必要な未解決の課題もハイライトされています。これらの課題が妥当かどうかも含め、まだ結論は出ていません。未解決課題に対する仕様テキストの提案プルリクエストを強く推奨します。

作業草案としての公開は、W3Cおよびその会員による承認を意味するものではありません。このドキュメントはドラフトであり、随時更新、差し替え、廃止される可能性があります。このドキュメントを進行中の作業以外のものとして引用することは不適切です。

このドキュメントはW3C特許ポリシーのもとで活動するグループによって作成されました。W3Cは、グループ成果物に関連する特許開示の公開リストを管理しています。そのページには特許開示の手順も記載されています。ある特許が必須クレームを含むと認識した場合は、W3C特許ポリシー第6節に従い開示してください。

このドキュメントは2023年11月3日W3Cプロセス文書に準拠しています。

1. はじめに

このセクションは規範的ではありません。

オペレーティングシステムは一般的に、ユーザーが単一のデバイスに複数の画面を接続し、それらを仮想的に配置して全体の作業領域を拡張できるようにしています。

さまざまなアプリケーションがプラットフォームのツールを使って、こうしたマルチスクリーン環境にコンテンツを配置していますが、Webアプリケーション開発者には従来のAPIの制約があり、多くは単一画面の利用を前提に設計されています。

マルチスクリーンデバイスやアプリケーションが、より一般的かつ重要なユーザー体験の一部となるにつれ、Web開発者が拡張された表示環境を活用できる情報やツールを提供することがより重要になります。

この仕様は、WindowScreenFullscreenOptions のAPIを段階的に拡張し、新たにScreenDetails および ScreenDetailed インターフェイスを導入します。これらの変更により、Webアプリケーションは特定の画面にコンテンツを配置するなど、魅力的なマルチスクリーン体験を提供できるようになります。

1.1. 想定ユースケース

この仕様の目的は、複数画面を持つWebアプリケーションユーザーに、より良い体験を提供することです。以下は設計の参考となるユースケース例です:

1.2. 利用概要

マルチスクリーン体験をサポートするため、APIはWebアプリケーションで以下を可能にします:

  1. デバイスに複数の画面があるかどうか検出する

  2. 特定の画面にコンテンツを配置するために必要な情報を取得する

  3. 画面の追加・削除を検出する

  4. 現在の画面やその属性が変化した場合に検出する

  5. 特定の画面で要素をフルスクリーン表示する

  6. ウィンドウを特定の画面に配置する

  7. 単一の一時的ユーザー操作からマルチスクリーン体験を開始する

API利用の基本例:

// デバイスに複数の画面があるか検出
if (window.screen.isExtended) {
  // 特定の画面にコンテンツを配置するため必要な情報を取得。
  const screenDetails = await window.getScreenDetails();

  // 画面が追加・削除された時の監視。
  screenDetails.addEventListener('screenschange', onScreensChange);

  // 現在の `ScreenDetailed` や属性の変更監視。
  screenDetails.addEventListener('currentscreenchange', onCurrentScreenChange);

  // プライマリスクリーンを探し、そこにコンテンツをフルスクリーン表示。
  const primaryScreen = screenDetails.screens.find(s => s.isPrimary);
  document.documentElement.requestFullscreen({screen : primaryScreen});

  // 他の画面を探し、その利用可能領域に新しいウィンドウを配置。
  const otherScreen = screenDetails.screens.find(s => s !== primaryScreen);
  window.open(url, '_blank', \`left=${otherScreen.availLeft},\` +
                             \`top=${otherScreen.availTop},\` +
                             \`width=${otherScreen.availWidth},\` +
                             \`height=${otherScreen.availHeight}\`);
} else {
  // レガシー `Screen` インターフェイス属性変化の監視。
  window.screen.addEventListener('change', onScreenChange);

  // 従来の単一画面環境でのレイアウト…
}

1.2.1. 複数画面の有無を検出する

マルチスクリーン体験を実現するうえで重要なのは、コンテンツを配置できる複数の画面がデバイスに存在するかです。これらの画面は(ラップトップのディスプレイパネルのような)内蔵タイプ、(HDMIケーブル等で接続された)外付けタイプ、(MacとiPadのSidecar機能のような)他の手段で接続されたもの、または仮想化によるディスプレイデバイスなどが含まれます。これはisExtended ブール値により提供され、パーミッションプロンプト無しでセキュアコンテキストから利用できます。

if (screen.isExtended) {
  // ユーザーのためにマルチスクリーンコントロールを提供。
}

1.2.2. Screen 属性の変化を検出する

レガシーScreen 属性の変化を監視することは、単一画面デバイスでもコンテンツを適応させる上で有用です。また、 isExtended を監視することで、単一画面からマルチスクリーン構成への移行も検出できます。ポーリングを避けるため、 change イベントがScreen オブジェクトで発火します:

screen.addEventListener('change', e => {
  // レガシー `Screen` インターフェイスの属性が変更された。
});

1.2.3. 詳細な画面情報を要求する

デバイスで利用されている画面の詳細情報は、getScreenDetails() メソッドで取得できます。このメソッドはパーミッションを求める場合があります。返されるScreenDetails オブジェクトでは、画面の列挙、属性取得、変化監視ができます。

try {
  // 画面詳細を要求し、即時に情報を処理。
  const screenDetails = await window.getScreenDetails();
  processScreenDetails(screenDetails);

  // 画面セットが変化した時に詳細情報を処理。
  screenDetails.onscreenschange = () => {
    processScreenDetails(screenDetails);
  };
} catch (err) {

  console.error(err);
  // パーミッション拒否やその他のエラー処理。
}

function processScreenDetails(screenDetails) {
  // 画面リストのUIを構築(補助関数利用を仮定)。
  clearScreenList();
  screenDetails.screens.forEach(screen => {
    addToScreenList({name: screen.label, screen: screen});
    // 個別画面情報が変化した場合にも再処理。
    screen.onchange = () => {
      processScreenDetails(screenDetails);
    };
  });
  selectCurrentInScreenList(screenDetails.currentScreen);
}

1.2.4. 特定画面にフルスクリーンコンテンツを配置する

マルチスクリーンで一般的な使い方は、特定の画面でコンテンツをフルスクリーン表示することです。画面はインタラクティブに選択する場合も、属性や事前選択に基づき自動選択する場合もあります。選択された画面は、requestFullscreen() メソッドに渡せます。

// 選択された `ScreenDetailed` インスタンスを返す補助関数を仮定。
const screenDetailed = getScreenForSlideshow();

// 選択画面で要素をフルスクリーン表示を要求。
slideshowElement.requestFullscreen({ screen: screenDetailed });

1.2.5. 特定画面にウィンドウを配置する

もうひとつの一般的なマルチスクリーン用途は、ウィンドウを特定画面に配置することです。これは、ScreenDetailed インターフェイスの座標と、open()moveTo() など既存メソッドを用いて実現できます。

function openCenteredWindow(url, screenDetailed, w, h) {
  // ターゲット画面の中央にウィンドウを配置する座標計算。
  const l = screenDetailed.left + Math.round(screenDetailed.width - w) / 2;
  const t = screenDetailed.top + Math.round(screenDetailed.height - h) / 2;

  // 指定サイズでウィンドウを開く。
  return window.open(url, '_blank', \`left=${l},top=${t},width=${w},height=${h}\`);
}

1.2.6. マルチスクリーン体験を開始する

よくあるマルチスクリーン目的の一つは、単一のユーザー操作から魅力的なマルチスクリーン体験を開始することです。具体案のひとつは、サイトが単一ユーザー操作で § 1.2.4 特定画面にフルスクリーンコンテンツを配置 および § 1.2.5 特定画面にウィンドウを配置 の両方を行える形です。これは、マルチスクリーンデバイスの特定画面にフルスクリーンを要求し、同じイベントリスナー内で別画面にポップアップウィンドウを開くことにより実現できます。

initiateMultiScreenExperienceButton.addEventListener('click', async () => {
  // プライマリスクリーンを探し、そこにコンテンツをフルスクリーン表示。
  const primaryScreen = screenDetails.screens.find(s => s.isPrimary);
  await document.documentElement.requestFullscreen({screen : primaryScreen});

  // 他の画面を探し、その利用可能領域に新しいウィンドウを配置。
  const otherScreen = screenDetails.screens.find(s => s !== primaryScreen);
  window.open(url, '_blank', \`left=${otherScreen.availLeft},\` +
                             \`top=${otherScreen.availTop},\` +
                             \`width=${otherScreen.availWidth},\` +
                             \`height=${otherScreen.availHeight}\`);
});

2. 概念

本仕様の概念は、CSSOM-View-1 作業草案CSSOM-View-1 編集者ドラフト[HTML][Fullscreen] を基にしています。

2.1. スクリーン

ユーザーエージェントをホストするデバイスには、単一のスクリーンまたは複数のスクリーンがあり、ビジュアルコンテンツの表示に使用されます。デバイスで利用されるスクリーンのセットは、ユーザーエージェント実行中にも、デバイスのハードウェアやソフトウェア構成の変化を反映して変更されることがあります。

Note: スクリーン構成が変わる基本例としては、ノートパソコンにHDMIケーブルでテレビやプロジェクターを接続する、ノートパソコンのふたを閉じて内蔵液晶パネルを無効化する、接続された液晶モニターの解像度を変更する、などがあります。

スクリーンカラーデプスを持ち、これはスクリーンのピクセルのカラーデプスです。

スクリーンデバイスピクセル比を持ち、これは WindowdevicePixelRatio と同様で、次のアルゴリズムの結果となります:

  1. CSSピクセルサイズCSSピクセル のサイズとする。

  2. デバイスピクセルサイズピクセル の垂直サイズとする。

  3. CSSピクセルサイズデバイスピクセルサイズ で割った結果を返す。

スクリーン向き を持ち、この説明は [screen-orientation] を参照。

スクリーンは、 ラベル を持ち、これはユーザーがスクリーンを識別・区別しやすいように意味のある説明をする文字列です。

Note: ラベルはユーザーエージェントが選ぶ任意の文字列にもなります。デバイス相対で "internal""external" など、寸法情報 "640×480"、 ハードウェアモデル(例:"Acme Telletube 1000x"VESA E-EDID由来)、 番号(例:"screen 1""screen 2")、またはそれらの組み合わせも可能です。 基礎ディスプレイ情報が不明な場合や情報秘匿のため空文字にもなり得ます。アプリケーションはラベル文字列にデバイス種類・モデル・寸法・密度など特定情報が含まれていることを前提にすべきではありません。

多くの画面属性がアクティブフィンガープリンティングに使われ得ますが、特にラベルに使う文字列は、ユニーク性を最小限にする観点で十分検討されるべきです。例として、機器のシリアル番号をラベルに含めるのは不適切です。

デバイスピクセル比ページズーム を含めるべきか?

2.2. スクリーンピクセル

スクリーンピクセル を持ち、これはプログラムで直接制御可能な最小のスクリーン要素です。各 ピクセル は一色を表示します。

Note: 液晶ディスプレイ(LCD)では、各ピクセルは3つの要素で構成されており、それぞれが可変強度の(赤・緑・青)のライトです。ピクセル要素(サブピクセルレンダリング)を取り扱うことは本仕様の範囲外です。

Note: 一部のスクリーンは、物理的なハードウェア構造とは異なる解像度に設定できます。たとえば、ハードウェア解像度2560×1440のモニターが1920×1080で動作するよう設定される場合などがあります。

ピクセルカラーデプス を持ち、これは表示可能な色を表現するために使われるビット数です。

Note: 一部のレンダリングシステムでは、ピクセルカラーデプスを24としてモデル化しています。これらの3つの8ビットグループはLCD ピクセルの(赤・緑・青)のサブピクセルの強度を表します。

2.3. スクリーン領域

スクリーンスクリーン領域 を持ち、これは ピクセル からなる長方形の2次元グリッドであり、OSやクライアントアプリケーションのビジュアルコンテンツをユーザーに表示するために利用されます。これは特定のWeb公開スクリーン領域に該当します。

スクリーン領域 を持ち、これは ピクセル の横方向本数です。

スクリーン領域高さ を持ち、これは ピクセル の縦方向本数です。

Note: グリッドの大きさは通常、<>×<高さ>で表現されます。例えば、1920×1080 のスクリーン領域は幅1920ピクセル・高さ1080ピクセルのグリッドです。

Note: CSSOM View § 2.3 Web公開スクリーン情報 で規定されている通り、ユーザーエージェントはユーザーのプライバシー保護のために出力デバイスのスクリーン情報を非公開にすることができます。この場合、スクリーン領域ビューポートと同じになることがあります。

2.4. 利用可能スクリーン領域

スクリーン利用可能スクリーン領域 を持ち、これは スクリーン領域 のうち、オペレーティングシステムがWebアプリケーションのウィンドウ配置を許可する長方形領域です。この長方形の辺は スクリーン領域の辺と平行です。この領域には、OS自身のUI(タスクバーやメニューバーなど)で予約されている部分は含みません。これは特定のWeb公開利用可能スクリーン領域に等しいです。

利用可能幅スクリーンピクセル 本数(利用可能スクリーン領域の横方向)です。

利用可能高さスクリーンピクセル 本数(利用可能スクリーン領域の縦方向)です。

2.5. 仮想スクリーン配置

デバイスは 仮想スクリーン配置を持ち、これはデバイス全体の表示環境を構成するスクリーンの相対的な配置を定義します。配置は、一般に全方向に広がる2次元平面上に構成され、(x, y)座標はそれぞれ右と下方向に増加します。その起点はマルチスクリーン原点であり、これは 仮想スクリーン配置 の(0, 0)座標です。

よくある慣例として、マルチスクリーン原点プライマリスクリーンの左上隅に設定しますが、仮想スクリーン配置内の任意の点が原点となりえます。あらゆるスクリーンスクリーン領域は、仮想スクリーン配置の長方形サブセットへのビューです。

以下の図は、複数のスクリーン仮想スクリーン配置内でどのように配置され得るか、またマルチスクリーン原点例を示しています:

Diagram showing various examples of screens and multi-screen origins

Note: Second Screen Community GroupForm Factors Explainedドラフトレポートは、関連する用語や概念モデルを詳述しています。

2.6. スクリーン座標

スクリーンスクリーン座標 を持ち、これは仮想スクリーン配置の中でマルチスクリーン原点を基準としたスクリーン領域の(x, y)座標です。座標は負値となる場合もあり、通常は(x, y) の形式で表わします。

2.7. 利用可能スクリーン座標

スクリーン利用可能スクリーン座標 を持ち、これはマルチスクリーン原点を基準にした利用可能スクリーン領域の(x, y)座標です。座標は負値の場合もあり、通常は(x, y)の形式で表します。

2.8. プライマリスクリーン

ユーザーエージェントをホストするデバイスは、正確に一つのプライマリスクリーンを持ちます。それ以外のスクリーンセカンダリと見なされます。

Note: プライマリスクリーンは、通常タスクバーやDockなど、OS自体のタスク管理UIをホストします。

スクリーンプライマリ または セカンダリ 指定は、ユーザーエージェント実行中にも変化し得ます。

Note: 多くのOSでは、WindowsコントロールパネルやmacOS設定アプリのようなUIでユーザーがプライマリスクリーンを選択できます。

2.9. 内蔵スクリーン

スクリーン内蔵 または 外部 と指定されることがあります。

外部スクリーンは、ビジュアル出力を提供するデバイスとは別に製造されます。外部スクリーンは別のデバイスに取り外して接続されることが珍しくありません。

Note: 例:デスクトップコンピューターは、HDMIケーブルで接続された外部スクリーンに表示します。HDMIケーブルは、コンピューター利用中でも挿抜可能で、その都度ハード構成変更に応じて表示環境を調整します。

内蔵スクリーンは通常、製造時にデバイスへ取り付けられます。内蔵スクリーンはユーザーによる取り外しを想定していません。ただし、内蔵 スクリーンでも、ユーザーエージェント実行中に有効・無効の切り替えが可能です。

Note: 例:ラップトップのふたを閉じると、内蔵スクリーンや入力装置が無効化されることがあります。この状態でも、外部スクリーン・入力装置を使って利用可能です。内蔵無効化スクリーンは、ふたを閉じている間はデバイスが利用するスクリーンとして報告されません。

2.10. 現在のスクリーン

Window コンテキストで実行されるスクリプトは、screen 属性にアクセス可能です。そのScreen オブジェクトは現在のスクリーンの特性を反映しており、これはそのウィンドウを現在表示しているスクリーンです。

Note: 多くのOSでは、1つのウィンドウが異なる特性を持つ複数のスクリーンにまたがって表示されたり、「隠し」状態でどのスクリーンにも表示されなかったりします。OSおよびユーザーエージェントは、例えばウィンドウと最も大きく重なるスクリーン等、そのWindowについて正準的なスクリーンを定義すると想定されます。

2.11. 観測可能なスクリーンプロパティ

スクリーン基本的な観測プロパティは次の通りです:

スクリーン高度な観測プロパティは次の通りです:

3. API

3.1. Screen インターフェイスの拡張

CSSOM View Module 仕様は Screen インターフェイスを定義しており、本仕様はそれを拡張します:

window . screen . isExtended

デバイスの表示出力が複数画面にわたる場合は true を返します。

window . screen . onchange

ウィンドウのスクリーンやその属性が変更されたときに発火します。

partial interface Screen /* : EventTarget */ {
  [SecureContext]
  readonly attribute boolean isExtended;

  [SecureContext]
  attribute EventHandler onchange;
};

ScreenEventTarget として CSSOM View § 4.3 The Screen Interface で継承させるべきか。

3.1.1. isExtended 属性

isExtendedゲッターの手順:

  1. this関連グローバルオブジェクト関連付けられたドキュメントが、"window-management"というポリシー制御機能の利用を許可されていない場合、falseを返し中断。

  2. デバイスが複数のスクリーンを持つ場合はtrue、そうでなければfalseを返す。

3.1.2. onchange 属性

onchange属性は、イベントハンドラーIDL属性であり、イベントタイプchange です。

基本の観測可能プロパティのいずれかがWindow window現在のスクリーンで変更されたとき、window関連するグローバルオブジェクト上でグローバルタスクをキューし、window placement task sourceを用いて イベント changewindowScreen オブジェクト(screen 属性で参照)で発火する。

3.2. Window インターフェイスの拡張

[HTML]標準は Window インターフェイスを定義しており、本仕様はそれを拡張します:

window . getScreenDetails()

デバイスのスクリーン情報を持つ ScreenDetails オブジェクトで解決されるPromiseを返します。パーミッションが拒否された場合、Promiseは拒否されます。

partial interface Window {
  [SecureContext]
  Promise<ScreenDetails> getScreenDetails();
};

3.2.1. getScreenDetails() メソッド

getScreenDetails() メソッドは非同期に完了し、window placement task sourceで作業をキューします。

Window のインスタンスには 内部スロット [[screenDetails]] が作成時に undefined で設定されます。

getScreenDetails() メソッドの手順:

  1. promise新しいPromiseとする。

  2. this関連グローバルオブジェクト関連ドキュメントが、"window-management" というポリシー制御機能の利用を許可されていない場合、 NotAllowedError DOMExceptionpromise を拒否し、手順を中止。

  3. 次の手順を 並列で実行:

    1. permissionState"window-management" への利用許可を要求した結果とする。

    2. グローバルタスクをキューし、thisの関連グローバルオブジェクト上のwindow placement task sourceを用いて以下を実行:

      1. permissionStateが"denied"のとき、 NotAllowedError DOMExceptionpromiseを拒否し手順中止。

      2. this.[[screenDetails]]undefined の場合、this.[[screenDetails]] に新しい ScreenDetails オブジェクトを設定する。

      3. promiseを解決し、値は this.[[screenDetails]]

  4. promiseを返す。

3.2.2. Window 属性およびメソッド定義の変更

次のWindow の属性とメソッド定義は、マルチスクリーン原点を基準に値を返し・解釈するように更新されています:

3.2.3. Window.open() メソッド定義の変更

Window のインスタンスは、データモデルがlast activation timestampと同等の[[targetScreenFullscreen]] 内部スロットを持つ。これは通常DOMHighResTimeStamp 値だが、2つの例外があり:正の無限大はまだ一度もアクティベートされていないこと、負の無限大はユーザーアクティベーションゲートAPI(詳細は HTML § 6.4.3)が最後のユーザーアクティベーションを消費したことを示す。初期値は正の無限大。

Window.open() の手順およびそのサブメソッドの手順は、オプションで次の動作を行うように更新されています:

  1. 一時的アクティベーションの状態要件を免除可能とする(関連グローバルオブジェクトの 現在高分解能時刻this.[[targetScreenFullscreen]] 以上でかつ this.[[targetScreenFullscreen]] + 一時的アクティベーション持続時間未満の場合)。

  2. this.[[targetScreenFullscreen]] をユーザーアクティベーション消費後、即座に負の無限大に設定する。

3.3. ScreenDetails インターフェイス

screenDetails . screens

各スクリーンを記述する ScreenDetailed オブジェクトの配列を返します。

screenDetails . currentScreen

ScreenDetailed オブジェクトを返し、現在のスクリーンを記述します。このオブジェクトはWindow.screen と同じスクリーンだが、情報は上位互換です。

screenDetails . onscreenschange

スクリーン集合が変更された時(例:スクリーンが追加・削除されたとき)に発火します。

screenDetails . oncurrentscreenchange

現在のスクリーンまたはその属性に変更があったとき(ウィンドウが別のスクリーンに移動・現在のスクリーンのプロパティが変化したとき)に発火します。

[Exposed=Window, SecureContext]
interface ScreenDetails : EventTarget {
  readonly attribute FrozenArray<ScreenDetailed> screens;
  readonly attribute ScreenDetailed currentScreen;

  attribute EventHandler onscreenschange;
  attribute EventHandler oncurrentscreenchange;
};

3.3.1. screens 属性

screensゲッターの手順:

  1. screens新しいリストとする。

  2. デバイスのスクリーンごとに:

    1. aScreenDetailed オブジェクトとする(そのscreenを記述)。

    2. aをscreensに追加する。

  3. screen orderingアルゴリズムでscreensを昇順ソートしたものを返す。

screen ordering アルゴリズムは、次の手順でtrueを返す場合に、スクリーンa はb より小さいと定義します:

  1. aのスクリーン座標x が b の スクリーン座標x より小さければtrue。

  2. b の スクリーン座標x が a の スクリーン座標xより小さければfalse。

  3. a の スクリーン座標y が b の スクリーン座標y より小さければtrue。

  4. それ以外はfalseを返す。

3.3.2. currentScreen 属性

currentScreenゲッターの手順は、現在のスクリーンを表すScreenDetailed オブジェクトを、screens 内から返すことです。これはWindow オブジェクトと関連付けられたthisの現在のスクリーンです。

Note: どのScreenDetailed オブジェクトが現在のスクリーンを表すかはOSやユーザーエージェントによって定義されます。これは Window.screen と合致し、例えばウィンドウと最も多く重なるスクリーンなどが該当します。

注: currentScreen は、screens のいずれかのエントリと===で比較可能であることが保証されています。たとえば screenDetails.screens.find(s => s !== screenDetails.currentScreen); のような比較を容易に実現できます。そのため、currentScreen[SameObject]とすることはできません。関連して、change イベントリスナーをcurrentScreen に追加した場合、その特定のスクリーンの変更のみが通知されます。一方、currentscreenchange イベントリスナーは、ウィンドウの現在のスクリーンが別のスクリーンに移動したとき、そのどれに対しても変更が通知されます。

3.3.3. onscreenschange 属性

onscreenschange属性は、イベントハンドラーIDL属性であり、そのイベントタイプはscreenschangeです。

ScreenDetails オブジェクト screenDetailsscreens のセットが変更されたとき、screenDetails関連グローバルオブジェクト 上で グローバルタスクをキュー し、window placement task source を使って イベントscreenschangescreenDetails で発火する。

3.3.4. oncurrentscreenchange 属性

oncurrentscreenchange属性は、イベントハンドラーIDL属性であり、そのイベントタイプはcurrentscreenchangeです。

window現在のスクリーン がある スクリーン から別のスクリーンに変わったとき(例:Window が他のディスプレイへ移動した場合)、または window現在のスクリーン基本的な観測プロパティ または 高度な観測プロパティ のいずれかが変化したとき、window関連グローバルオブジェクト上で グローバルタスクをキューし、window placement task source を使って イベントcurrentscreenchangewindow の内部スロット ScreenDetails オブジェクト([[screenDetails]])で発火する。

3.4. ScreenDetailed インターフェイス

ScreenDetailed オブジェクトはスクリーンを表します。

screenDetailed . availLeft

利用可能スクリーン領域の左端までのマルチスクリーン原点からの距離を返す。

screenDetailed . availTop

利用可能スクリーン領域の上端までのマルチスクリーン原点からの距離を返す。

screenDetailed . left

スクリーン領域の左端までのマルチスクリーン原点からの距離を返す。

screenDetailed . top

スクリーン領域の上端までのマルチスクリーン原点からの距離を返す。

screenDetailed . isPrimary

このスクリーンがOSで「プライマリ」に指定されているか(そうでなければ「セカンダリ」)を返す。

screenDetailed . isInternal

このスクリーンがノートPCのディスプレイなどデバイス内蔵パネルかどうか(そうでなければ外部/有線モニター)を返す。

screenDetailed . devicePixelRatio

物理ピクセルと論理ピクセルの比率を返す。

screenDetailed . label

ユーザーエージェントやOSが決定した画面のユーザーフレンドリーなラベル。

[Exposed=Window, SecureContext]
interface ScreenDetailed : Screen {
  readonly attribute long availLeft;
  readonly attribute long availTop;
  readonly attribute long left;
  readonly attribute long top;
  readonly attribute boolean isPrimary;
  readonly attribute boolean isInternal;
  readonly attribute float devicePixelRatio;
  readonly attribute DOMString label;
};

availLeftゲッターの手順は、このscreen利用可能スクリーン座標のx値を返す。

availTopゲッターの手順は、このscreen利用可能スクリーン座標のy値を返す。

leftゲッターの手順は、このscreenスクリーン座標のx値を返す。

topゲッターの手順は、このscreenスクリーン座標のy値を返す。

isPrimaryゲッターの手順は、このscreenプライマリか否かを判定し、該当すればtrue, そうでなければfalseを返す。

isInternalゲッターの手順は、このscreen内蔵ならtrue, そうでなければfalseを返す。

devicePixelRatioゲッターの手順は、このscreenデバイスピクセル比を返す。

labelゲッターの手順は、このscreenラベルを返す。

3.4.1. onchange 属性

onchange属性は、onchange 属性をScreenから継承したものです。

ScreenDetailed オブジェクト screenDetailed が表す 基本的な観測プロパティ または 高度な観測プロパティ のいずれかが スクリーンで変更されたとき、screenDetailed関連グローバルオブジェクト 上で グローバルタスクをキューし、window placement task source を使って イベントchangescreenDetailed で発火する。

3.5. FullscreenOptionsへの拡張

fullscreenOptions . screen

要素のフルスクリーン要求用にスクリーンを指定します。

partial dictionary FullscreenOptions {
  ScreenDetailed screen;
};

省略可能なFullscreenOptionsscreenメンバーは、特定のスクリーンで要素をフルスクリーン表示したいというアプリケーションの希望を示します。ユーザーエージェントは常にアプリケーションの希望よりユーザーの希望を優先できます。デフォルト値undefined はアプリケーション希望なしを意味します。

3.5.1. Element.requestFullscreen() メソッド定義の変更

Element.requestFullscreen() メソッドの手順は、オプションで次を含むように更新されています:

  1. options["screen"] を考慮し、pendingDocトップレベルブラウジングコンテキストアクティブドキュメントのビューポート移動・リサイズ時に利用する。この手順でビュー ポートが指定のスクリーンへ移動されることもある。

  2. もしoptions["screen"]が ScreenDetailed で、かつisExtended がtrueなら、現在高分解能時刻this.[[targetScreenFullscreen]] 内部スロットに設定する。

3.6. Permission API連携

本仕様は既定のパワフル機能を定義し、その名前は "window-management"です。

[permissions]APIは パーミッション状態の取得方法をWebサイトに一貫して提供します。

Note: 旧バージョンでは "window-placement" という名前を使用していました。ユーザーエージェントは新しい window-management 文字列へ慎重に移行すべきです。#114参照。

window-management[permissions]レジストリに追加すること。

パーミッションが取り消された場合のキャッシュ済みオブジェクトやメソッド手順の挙動定義。( #80 )

3.7. Permission Policy連携

本仕様は、"window-management" という文字列で識別されるポリシー制御機能を定義します。これによりisExtendedgetScreenDetails その他の機能使用可否を制御します。この機能のデフォルト許可リストは'self'です。詳細は[permissions-policy] および Experimental Featuresリスト参照。

Note: document のpermission policy は、そのドキュメント内の全てのコンテンツがisExtended で意味のある値取得、ScreenDetails へのアクセス、あるいは特定スクリーンへの配置可否を制御します。無効時はisExtended はfalse、getScreenDetails はpromise拒否、配置要求は現在のスクリーンへ制限される。

window-managementProposed またはStandardized 機能リストに掲載すること。

4. セキュリティに関する考慮事項

この仕様はサイトが特定の画面にコンテンツを配置できるようにするため、限定的な新たなセキュリティリスクを生む可能性があります:

  1. サイトが予期しない画面にセンシティブなコンテンツを目立つように表示しようとする可能性がある

  2. サイトが目立ちにくい画面にこっそり望ましくないコンテンツを表示しようとする可能性がある。例えば:

  3. サイトがユーザーの注意を特定の画面に引きつけ、そこでの操作シグナルを使って別のあまり監視されていない画面に欺瞞的なコンテンツを表示し、OS・ブラウザ・他のサイトを詐称してフィッシング攻撃を行おうとする可能性がある

  4. サイトがその他の方法で特定の画面にコンテンツを配置し、欺瞞的・虐待的・迷惑な振る舞いを行おうとする可能性がある

こうしたリスクを軽減するために、画面間配置機能はセキュアコンテキストで明示的な許可を必要とし、デフォルトで第三者アクセスを防ぐ[permissions-policy]の対象となります。

ユーザーエージェントは画面を跨いだ配置要求を検出し、潜在的な悪用からユーザーを保護するために介入できます。例えば、サイトが別の画面にコンテンツを配置したときや、画面間配置の後にウィンドウがユーザーの注意を引いたときに、ユーザーエージェントは顕著なセキュリティ表示を行うことがあります。さらに、画面間配置要求は拒否されるか、既存の一部ユーザーエージェントの振る舞いに合わせて current screenにクランプ(制限)されることがあります。

その他の注記:

以下の追加的なセキュリティ考察も参照してください:

5. プライバシーに関する考慮事項

この仕様はデバイスに接続された画面に関する新しい情報をサイトに公開するため、限定的な新たなプライバシーリスクを生む可能性があります。特に異例の画面構成を持つデバイスでは、デバイスのフィンガープリンティングの表面が拡大します。

こうしたリスクを軽減するために、新しい情報は一般的な配置ユースケースで必要最小限に削減されており、ほとんどのアクセスはセキュアコンテキストで明示的な許可を要し、デフォルトで第三者アクセスを防ぐ[permissions-policy]の対象です。公開されるスクリーンのリストには相互運用性の問題を軽減しフィンガープリンティングを抑えるための順序が定義されています。ユーザーエージェントは、サイトが新しい情報を要求したときに計測やその他の介入を行うことが一般に可能です。

Screen.isExtended ブールは明示的な許可チェック無しで公開されます。これは単一ビットの最小情報であり、(例:「別の画面で表示」などのマルチスクリーンUIの表示/非表示のエントリポイントを示す)いくつかの重要な機能をサポートし、単一画面ユーザーに不必要な許可プロンプトを表示するのを避けるためです。これはデバイス列挙に関するTAGの設計原則(Web Platform Design Principles § device-enumeration)に概ね従います。

多くのユーザーエージェントは既に、セカンダリスクリーン上にあるウィンドウに対して複数画面の存在を事実上公開しています(window.screen.availLeft|Top が大きい場合)。このビットへのスクリプトアクセスは検出可能なアクティブフィンガープリンティング信号であり、ユーザーエージェントにより観測・ブロックされ得ます。さらに、未許可のウィンドウ配置要求を current screenに制限しないユーザーエージェントは、攻撃者が他の画面へプログラムで配置を試みることを許してしまい、そうした場合にそのwindow.screenに関する情報が露出します。

新しいScreen.onchangeイベントは、ephemeral fingerprintingを容易にすることでわずかなリスクを生みますが、スクリプトは既にwindow.screenの変化をポーリングして同様の結果を得ることができます。このリスクは、隠れたドキュメントに対してはイベントの送出を遅延させることで部分的に緩和できる可能性があります。

サイトにより少ない権限を与える別のAPI形状も検討されましたが、ユーザーと開発者にとって体験が悪くなるため不適当でした(例:ユーザーに画面を選ばせる度にプロンプトする、開発者に宣言的な画面ランク付けを要求するなど)。接続された任意のスクリーンへの非フルスクリーンでのアプリウィンドウ配置に対する実用的な代替はほとんど存在しません。本仕様のAPI形状は、より完全なマルチスクリーン環境をサポートするための既存APIの最も自然な拡張のように思われます。将来的には、サイトが任意で情報公開を最小化できるような、より限定的なマルチスクリーン情報を照会する手段を含める可能性があります。

指定されたアクセスモデルによって、ユーザーエージェントがスクリーンを選択的に公開する(例えばユーザーが指示したスクリーンに関する情報・配置機能のみを制限する)新しい公開モデルを実現できるように、API設計は考慮されています。

その他の注記:

以下の追加的なプライバシー考察も参照してください:

6. アクセシビリティに関する考慮事項

この仕様はサイトが特定の画面にコンテンツを配置できるようにするため、限定的な新たなアクセシビリティリスクを生む可能性があります。視覚的な提示、非視覚的なレンダリング、および支援技術がコンテンツ自体に与える影響は、コンテンツをどの画面に配置するかによって大きく変わることは一般的にありません。それでも、プログラムによるコンテンツ配置に関する既存のアクセシビリティ上の懸念は、配置可能な領域が拡大することで悪化する可能性があります。本仕様のパーミッションモデル、プロンプト方法、およびパーミッション関連UIに関する既存のアクセシビリティ考慮事項は、この仕様のパーミッションにも同様に関係します。

現時点で、APIによって公開される構造化されたスクリーン情報(およびそのアクセシビリティ機能)に関する文書化されたアクセシビリティ上の考慮事項はありません。

7. 国際化に関する考慮事項

現時点で文書化された国際化に関する考慮事項はありません。

8. 謝辞

以下の方々に本仕様の作成にご協力いただいたことに感謝します: Adrienne Walker, Anssi Kostiainen, Chris Terefinko, Domenic Denicola, Jonathan Garbee, Kenneth Rohde Christiansen, L. David Baron, Lukasz Olejnik, Marijn Kruisselbrink, Matt Giuca, Michael Ketting, Nadav Sinai, Peter Linss, Reilly Grant, Staphany Park, Theresa O’Connor, Thomas Nattestad, Thomas Steiner, および Victor Costan (本仕様の作成支援に感謝します)。

忘れている人がいないか確認してください!

また、本ドキュメントの作成に使用された仕様作成ツールである Bikeshed を作成・維持している Tab Atkins, Jr. と、その一般的な執筆助言に特別な感謝を表します。

適合性

ドキュメント規約

適合性要件は記述的主張と RFC 2119 用語の組み合わせで表現されています。 規範的部分におけるキーワード “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, および “OPTIONAL” は RFC 2119 の説明に従って解釈されます。 ただし可読性のため、これらの語は本仕様では常に大文字で表記されるわけではありません。

本仕様の全テキストは、非規範的と明示された章、例、および注記を除き規範的です。 [RFC2119]

本仕様の例は “for example” の語で導入されるか、または次のように class="example" で規範テキストから区別されます:

これは情報的な例の例です。

情報的な注記は “Note” で始まり、規範テキストから class="note" で区別されます:

注:これは情報的な注記です。

適合するアルゴリズム

アルゴリズム内の命令形で表現された要件(例えば "strip any leading space characters" や "return false and abort these steps")は、導入に用いられたキーワード("must", "should", "may" 等)の意味で解釈されます。

アルゴリズムや特定の手順として表現された適合性要件は、最終結果が同等である限り任意の方法で実装できます。特に、本仕様で定義されたアルゴリズムは理解しやすくすることを目的としており、必ずしもパフォーマンス最適化を意図したものではありません。実装者は最適化を行うことが推奨されます。

索引

本仕様で定義される用語

参照により定義される用語

参考文献

標準的参考文献

[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. 12 March 2024. WD. URL: https://www.w3.org/TR/css-values-4/
[CSSOM-VIEW-1]
Simon Pieters. CSSOM View Module. 17 March 2016. WD. URL: https://www.w3.org/TR/cssom-view-1/
[DESIGN-PRINCIPLES]
Sangwhan Moon; Lea Verou. Web Platform Design Principles. 30 January 2024. NOTE. URL: https://www.w3.org/TR/design-principles/
[DOM]
Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
[ECMASCRIPT]
ECMAScript Language Specification. URL: https://tc39.es/ecma262/multipage/
[FINGERPRINTING-GUIDANCE]
Nick Doty. Mitigating Browser Fingerprinting in Web Specifications. 28 March 2019. NOTE. URL: https://www.w3.org/TR/fingerprinting-guidance/
[Fullscreen]
Philip Jägenstedt. Fullscreen API Standard. Living Standard. URL: https://fullscreen.spec.whatwg.org/
[HR-TIME-3]
Yoav Weiss. High Resolution Time. 19 July 2023. WD. URL: https://www.w3.org/TR/hr-time-3/
[HTML]
Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[INFRA]
Anne van Kesteren; Domenic Denicola. Infra Standard. Living Standard. URL: https://infra.spec.whatwg.org/
[PERMISSIONS]
Marcos Caceres; Mike Taylor. Permissions. 19 March 2024. WD. URL: https://www.w3.org/TR/permissions/
[PERMISSIONS-POLICY]
Ian Clelland. Permissions Policy. 18 December 2023. WD. URL: https://www.w3.org/TR/permissions-policy-1/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[WEBIDL]
Edgar Chen; Timothy Gu. Web IDL Standard. Living Standard. URL: https://webidl.spec.whatwg.org/

参考情報

[SCREEN-ORIENTATION]
Marcos Caceres. Screen Orientation. 9 August 2023. WD. URL: https://www.w3.org/TR/screen-orientation/

IDL 索引

partial interface Screen /* : EventTarget */ {
  [SecureContext]
  readonly attribute boolean isExtended;

  [SecureContext]
  attribute EventHandler onchange;
};

partial interface Window {
  [SecureContext]
  Promise<ScreenDetails> getScreenDetails();
};

[Exposed=Window, SecureContext]
interface ScreenDetails : EventTarget {
  readonly attribute FrozenArray<ScreenDetailed> screens;
  readonly attribute ScreenDetailed currentScreen;

  attribute EventHandler onscreenschange;
  attribute EventHandler oncurrentscreenchange;
};

[Exposed=Window, SecureContext]
interface ScreenDetailed : Screen {
  readonly attribute long availLeft;
  readonly attribute long availTop;
  readonly attribute long left;
  readonly attribute long top;
  readonly attribute boolean isPrimary;
  readonly attribute boolean isInternal;
  readonly attribute float devicePixelRatio;
  readonly attribute DOMString label;
};

partial dictionary FullscreenOptions {
  ScreenDetailed screen;
};

課題一覧

デバイスピクセル比ページズーム を含めるべきか?
ScreenEventTarget として CSSOM View § 4.3 The Screen Interface で継承させるべきか。
window-management[permissions] レジストリに追加すること。
パーミッションが取り消された場合のキャッシュ済みオブジェクトやメソッド手順の挙動定義。(#80 参照)
window-managementProposed または Standardized 機能リストに掲載すること。
忘れている人がいないか確認してください!