ウィンドウ管理 API

概念と使用方法

これまで、現在のアプリケーションに関連するブラウザーウィンドウ（新しいウィンドウを開く、既存のウィンドウのサイズ変更や閉じるなど）を管理するために、 Window.open() が使用されてきました。例えば、画面の左端と上端から 50 ピクセルの位置に 400×300 のウィンドウを開く場合は、次のようになります。

const myWindow = window.open(
  "https://example.com/",
  "myWindow",
  "left=50,top=50,width=400,height=300",
);

Window.screen プロパティから、ウィンドウを配置できる利用可能な画面領域の大きさなど、画面に関する情報を取得できます。

ただし、上記の機能には制限があります。 Window.screen はプライマリ画面に関するデータのみを返し、デバイスで利用可能なセカンダリディスプレイの情報は含まれません。ウィンドウをセカンダリディスプレイに移動させるには Window.moveTo() を使用できますが、プライマリディスプレイに対してそのディスプレイがどのような位置関係にあるかに基づいて、適切な座標を推測する必要があります。

ウィンドウ管理 APIは、より堅牢で柔軟なウィンドウ管理機能を提供します。この API を使用すると、ディスプレイが複数の画面に拡張されているかどうかを確認したり、各画面の情報を個別に取得したりできるため、ウィンドウを各画面上の任意の場所に配置することが可能です。さらに、利用可能な画面の変更に対応するためのイベントハンドラーや、どの画面をフルスクリーンモードにするか（あるいはフルスクリーンにしないか）を選択できる新しいフルスクリーン機能、そしてAPIへのアクセスを制御する権限管理機能も備えています。

使用方法の詳細については、「ウィンドウ管理 API の使用」を参照してください。

ユースケース

ウィンドウ管理 APIは、次のような場合に役立ちます。

• マルチウィンドウのグラフィックエディターやオーディオプロセッサーで、編集ツールやパネルを複数の画面に配置したい場合。
• 仮想トレーディングデスクで、複数のウィンドウに市場動向を表示し、注目している特定のウィンドウを全画面モードにしたい場合。
• スライドショーアプリで、内蔵のプライマリ画面に発表者ノートを表示し、外付けプロジェクターにプレゼンテーションを表示したい場合。

権限ポリシーの統合

window-management Permissions-Policy を使用して、ウィンドウ管理 API を使用する権限を制御できます。具体的には：

• Window.getScreenDetails() メソッドの使用がブロックされた場合、返される Promise は NotAllowedError 例外で拒否されます。
• Window.screen.isExtended プロパティは、ブロックされている場合は常に false を返します。

開発者は、allow 属性を使用して、 <iframe> が、ウィンドウ管理を使用することを明示的に許可できます。

<iframe src="3rd-party.example" allow="window-management"></iframe>

インターフェイス

ScreenDetails 安全なコンテキスト用

ユーザーのデバイスで使用可能なすべての画面の詳細を表します。

ScreenDetailed 安全なコンテキスト用

ユーザーのデバイスで使用可能な、特定の 1 つの画面の詳細を表します。

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

Screen change イベント 安全なコンテキスト用

特定の画面で発生します。その画面の利用可能な幅や高さ、向きなどが変化したときです。

Screen.isExtended 安全なコンテキスト用

ユーザーのデバイスが複数の画面を持っている場合は true、持っていない場合は false を返す真偽値です。

Element.requestFullscreen(), screen オプション

要素を全画面モードで表示したい画面を指定します。

Window.getScreenDetails() 安全なコンテキスト用

ScreenDetails オブジェクトのインスタンスで解決される Promise を返します。

例

完全な例はこちらでご覧いただけます

• 基本的なマルチウィンドウ学習環境 (ソースコード参照)。
• マルチウィンドウプラットフォーマーゲーム (ソースコード参照)。
• ウィンドウ配置デモ (ソースコード参照)。

仕様書

ブラウザーの互換性