このページは Cloud Translation API によって翻訳されました。

Window Management API を使用して複数のディスプレイを管理する

接続されているディスプレイについての情報を取得し、それらのディスプレイに対してウィンドウの位置を調整します。

Thomas Steiner

Window Management API

Window Management API を使用すると、マシンに接続されているディスプレイを列挙し、特定の画面にウィンドウを配置できます。

推奨されるユースケース

この API を使用するサイトの例を次に示します。

Gimp のマルチウィンドウグラフィックエディタを使用すると、正確に配置されたウィンドウにさまざまな編集ツールを配置できます。
仮想取引デスクでは、複数のウィンドウで市場のトレンドを表示できます。これらのウィンドウはいずれも、全画面表示モードで表示できます。
スライドショーアプリでは、内部のメイン画面にスピーカーノートを表示し、外部プロジェクタにプレゼンテーションを表示できます。

Window Management API の使用方法

問題

ウィンドウを制御するための実績のあるアプローチである Window.open() では、残念ながら追加の画面を認識できません。windowFeatures DOMString パラメータなど、この API のいくつかの側面は少し古いようですが、それでも長年にわたって十分に役立っています。ウィンドウの位置を指定するには、座標を left と top（またはそれぞれ screenX と screenY）として渡し、希望のサイズを width と height（またはそれぞれ innerWidth と innerHeight）として渡します。たとえば、400×300 のウィンドウを左から 50 ピクセル、上から 50 ピクセルに開くには、次のコードを使用できます。

const popup = window.open(
  'https://example.com/',
  'My Popup',
  'left=50,top=50,width=400,height=300',
);

現在の画面に関する情報を取得するには、window.screen プロパティを調べます。このプロパティは Screen オブジェクトを返します。これは、私の MacBook Pro 13 インチでの出力です。

window.screen;
/* Output from my MacBook Pro 13″:
  availHeight: 969
  availLeft: 0
  availTop: 25
  availWidth: 1680
  colorDepth: 30
  height: 1050
  isExtended: true
  onchange: null
  orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
  pixelDepth: 30
  width: 1680
*/

テクノロジー業界で働くほとんどの人と同じように、私は新しい働き方に適応し、個人用の自宅オフィスをセットアップする必要がありました。私のセットアップは下の写真を参照してください（興味がある方は、私のセットアップの詳細をご覧ください）。MacBook の横にある iPad は Sidecar 経由でノートパソコンに接続されているため、必要に応じて iPad をサブ画面に素早く切り替えることができます。

2 台の椅子に置かれた学校のベンチ。学校のベンチの上に、ノートパソコンを支える靴箱と、その周囲にある 2 台の iPad が写っています。 — マルチスクリーン設定。

大きな画面を活用したい場合は、上記のコードサンプルのポップアップを 2 番目の画面に配置します。次のように行います。

popup.moveTo(2500, 50);

2 つ目の画面のサイズを把握する方法がないため、これはあくまでも推測です。window.screen の情報は、内蔵画面のみを対象としており、iPad の画面は対象外です。内蔵画面の報告された width は 1680 ピクセルでした。MacBook の右側にあることが判明しているため、2500 ピクセルに変更すると、ウィンドウが iPad に移動する可能性があります。一般的なケースでこれを行うにはどうすればよいですか？答えを推測するよりよい方法があります。その方法は Window Management API です。

特徴検出

Window Management API がサポートされているかどうかを確認するには、次のコマンドを使用します。

if ('getScreenDetails' in window) {
  // The Window Management API is supported.
}

`window-management` 権限

注: 以前の window-placement 権限名はサポートされていません。

Window Management API を使用するには、ユーザーに権限をリクエストする必要があります。window-management 権限は、次のように Permissions API でクエリできます。

let granted = false;
try {
  const { state } = await navigator.permissions.query({ name: 'window-management' });
  granted = state === 'granted';
} catch {
  // Nothing.
}

古い権限名と新しい権限名の両方が使用されているブラウザでは、次の例のように、権限をリクエストする際に防御コードを使用してください。

async function getWindowManagementPermissionState() {
  let state;
  // The new permission name.
  try {
    ({ state } = await navigator.permissions.query({
      name: "window-management",
    }));
  } catch (err) {
    return `${err.name}: ${err.message}`;
  }
  return state;
}

document.querySelector("button").addEventListener("click", async () => {
  const state = await getWindowManagementPermissionState();
  document.querySelector("pre").textContent = state;
});

ブラウザは、新しい API のいずれかのメソッドを初めて使用しようとしたときに、権限プロンプトを動的に表示することもできます。詳しくは以下をご覧ください。

`window.screen.isExtended` プロパティ

複数の画面がデバイスに接続されているかどうかを確認するには、window.screen.isExtended プロパティにアクセスします。true または false が返されます。私の設定では、true が返されます。

window.screen.isExtended;
// Returns `true` or `false`.

`getScreenDetails()` メソッド

現在の設定がマルチ画面であることがわかったので、Window.getScreenDetails() を使用して 2 番目の画面の詳細情報を取得できます。この関数を呼び出すと、サイトが画面上にウィンドウを開いて配置することを許可するかどうかを尋ねる権限プロンプトが表示されます。この関数は、ScreenDetailed オブジェクトで解決される Promise を返します。iPad が接続されている MacBook Pro 13 では、2 つの ScreenDetailed オブジェクトを含む screens フィールドがあります。

await window.getScreenDetails();
/* Output from my MacBook Pro 13″ with the iPad attached:
{
  currentScreen: ScreenDetailed {left: 0, top: 0, isPrimary: true, isInternal: true, devicePixelRatio: 2, …}
  oncurrentscreenchange: null
  onscreenschange: null
  screens: [{
    // The MacBook Pro
    availHeight: 969
    availLeft: 0
    availTop: 25
    availWidth: 1680
    colorDepth: 30
    devicePixelRatio: 2
    height: 1050
    isExtended: true
    isInternal: true
    isPrimary: true
    label: "Built-in Retina Display"
    left: 0
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 30
    top: 0
    width: 1680
  },
  {
    // The iPad
    availHeight: 999
    availLeft: 1680
    availTop: 25
    availWidth: 1366
    colorDepth: 24
    devicePixelRatio: 2
    height: 1024
    isExtended: true
    isInternal: false
    isPrimary: false
    label: "Sidecar Display (AirPlay)"
    left: 1680
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 24
    top: 0
    width: 1366
  }]
}
*/

接続されている画面に関する情報は、screens 配列で確認できます。iPad の場合、left の値は 1680（内蔵ディスプレイの width）から始まります。これにより、画面が論理的にどのように配置されているか（互いの並べ方、重ね合わせなど）を正確に判断できます。また、各画面が isInternal かどうかと isPrimary かどうかを示すデータもあります。内蔵画面は、必ずしもメイン画面とは限りません。

currentScreen フィールドは、現在の window.screen に対応するライブオブジェクトです。オブジェクトは、クロススクリーンのウィンドウプレースメントやデバイスが変更されると更新されます。

注: Chromium の最新の API 実装では、"Internal Display 1" などのわかりにくいプレースホルダではなく、基盤となるプラットフォームから提供される画面ラベル（"Built-in Retina Display" など）が返されます。

`screenschange` イベント

今不足しているのが、画面設定が変更されたときを検出する方法だけです。新しいイベント screenschange はまさにそれを行います。画面コンステレーションが変更されると起動されます。（イベント名の「screens」は複数形です）。つまり、新しい画面または既存の画面が（Sidecar の場合は物理的に、または仮想的に）接続または切断されるたびに、このイベントが発生します。

新しい画面の詳細を非同期で検索する必要があります。screenschange イベント自体はこのデータを提供しません。画面の詳細を検索するには、キャッシュに保存された Screens インターフェースのライブオブジェクトを使用します。

const screenDetails = await window.getScreenDetails();
let cachedScreensLength = screenDetails.screens.length;
screenDetails.addEventListener('screenschange', (event) => {
  if (screenDetails.screens.length !== cachedScreensLength) {
    console.log(
      `The screen count changed from ${cachedScreensLength} to ${screenDetails.screens.length}`,
    );
    cachedScreensLength = screenDetails.screens.length;
  }
});

`currentscreenchange` イベント

現在の画面の変更（ライブオブジェクト currentScreen の値）のみに関心がある場合は、currentscreenchange イベントをリッスンできます。

const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('currentscreenchange', async (event) => {
  const details = screenDetails.currentScreen;
  console.log('The current screen has changed.', event, details);
});

`change` イベント

最後に、具体的な画面に対する変更のみに関心がある場合は、その画面の change イベントをリッスンできます。

const firstScreen = (await window.getScreenDetails())[0];
firstScreen.addEventListener('change', async (event) => {
  console.log('The first screen has changed.', event, firstScreen);
});

新しい全画面表示オプション

これまでは、適切な名前の requestFullScreen() メソッドを使用して、要素を全画面モードで表示するようリクエストできました。このメソッドは、FullscreenOptions を渡せる options パラメータを受け取ります。これまでのところ、唯一のプロパティは navigationUI です。Window Management API に、全画面表示を開始する画面を決定できる新しい screen プロパティが追加されました。たとえば、プライマリ画面を全画面表示にする場合は、次のようにします。

try {
  const primaryScreen = (await getScreenDetails()).screens.filter((screen) => screen.isPrimary)[0];
  await document.body.requestFullscreen({ screen: primaryScreen });
} catch (err) {
  console.error(err.name, err.message);
}

ポリフィル

Window Management API をポリフィルすることはできませんが、シェイプをシムして、新しい API に対してのみコードを記述できます。

if (!('getScreenDetails' in window)) {
  // Returning a one-element array with the current screen,
  // noting that there might be more.
  window.getScreenDetails = async () => [window.screen];
  // Set to `false`, noting that this might be a lie.
  window.screen.isExtended = false;
}

API のその他の機能、つまり、さまざまな画面変更イベントと FullscreenOptions の screen プロパティは、それぞれ、サポートされていないブラウザではまったく呼び出されないか、通知なく無視されます。

デモ

私と同じように、さまざまな暗号通貨の開発を注視している方も多いと思います。（実際には、私はこの星が好きなのであまり気にしませんが、この記事では、私が好きだったと仮定します）。自分が所有する暗号通貨を管理するために、ウェブアプリを開発しました。このアプリでは、快適なシングルスクリーンセットアップを備えたベッドなど、あらゆる生活状況で市場を監視できます。

ベッドの端にある巨大なテレビ画面。投稿者の脚が一部写っています。画面に、偽の暗号通貨取引デスクが表示されている。 — リラックスしながら市場を観察する。

暗号通貨市場はいつでも混乱する可能性があります。そのような場合は、マルチ画面をセットアップしたデスクにすぐに移動できます。任意の通貨のウィンドウをクリックすると、反対側の画面の全画面表示で詳細情報をすばやく確認できます。以下は、前回の YCY の血の浴びの間に撮影した私の最近の写真です。完全に不意を突かれ、顔に手を当ててしまいました。

偽の暗号通貨取引デスクを見つめ、パニックに陥った顔に手を当てている著者。 — パニッキー、YCY の殺人事件を目の当たりに。

下記に埋め込まれたデモを試したり、glitch でソースコードを確認したりできます。

セキュリティと権限

Chrome チームは、強力なウェブプラットフォーム機能へのアクセスの制御で定義されているユーザーコントロール、透明性、エルゴノミクスなどの基本原則に基づいて、Window Management API を設計、実装しています。Window Management API は、デバイスに接続されている画面に関する新しい情報を公開し、ユーザーの指紋採取サーフェスを増やします。特に、複数の画面がデバイスに常時接続されているユーザーの指紋採取サーフェスは増加します。このプライバシーに関する懸念を軽減するため、公開される画面プロパティは、一般的なプレースメントのユースケースに必要な最小限に制限されています。サイトがマルチスクリーン情報を取得し、他の画面にウィンドウを配置するには、ユーザーの許可が必要です。Chromium は詳細な画面ラベルを返しますが、ブラウザでは説明的な内容を省略して（または空のラベルでも）返すことができます。

ユーザーコントロール

ユーザーは、設定の公開を完全に管理できます。ブラウザのサイト情報機能を使用して、権限プロンプトを承認または拒否したり、以前に付与された権限を取り消したりできます。

エンタープライズコントロール

Chrome Enterprise ユーザーは、アトミックポリシーグループの設定の該当するセクションで説明されているように、Window Management API のいくつかの側面を制御できます。

透明性

Window Management API の使用許可が付与されているかどうかは、ブラウザのサイト情報で公開され、Permissions API でクエリすることもできます。

権限の永続性

ブラウザは権限の付与を保持します。この権限は、ブラウザのサイト情報で取り消すことができます。

フィードバック

Chrome チームでは、Window Management API に関する感想をお聞かせください。

API 設計について

API に関して、想定どおりに機能していないものはありますか？または、アイデアを実装するために必要なメソッドやプロパティが不足している場合はどうすればよいですか？セキュリティモデルに関する質問やコメントがある場合

対応する GitHub リポジトリで仕様に関する問題を報告するか、既存の問題にコメントを追加します。

実装に関する問題を報告する

Chrome の実装にバグは見つかりましたか？それとも、実装が仕様と異なるのでしょうか？

new.crbug.com でバグを報告します。できるだけ詳細な情報を含め、再現手順を簡単に説明してください。[コンポーネント] ボックスに Blink>Screen>MultiScreen を入力します。Glitch は、簡単な再現手順をすばやく共有するのに適しています。

API のサポートを表示する

Window Management API を使用する予定はありますか？一般公開されている機能へのサポートは、Chrome チームが機能の優先順位を決める際に役立ち、他のブラウザベンダーにその機能のサポートがどれほど重要であるかを示します。

WICG Discourse スレッドで、どのように使用する予定かをお知らせください。
ハッシュタグ #WindowManagement を使用して @ChromiumDev にツイートし、どこでどのように使用しているかをお知らせください。
他のブラウザベンダーに API の実装を依頼する。

謝辞

Window Management API の仕様は、Victor Costan、Joshua Bell、Mike Wasserman によって編集されました。この API は Mike Wasserman と Adrienne Walker によって実装されました。この記事は、Joe Medley、François Beaufort、Kayce Basques によってレビューされました。写真は Laura Torrent Puig 様から提供されました。