Document Picture-in-Picture API で魅力的なユースケースを実現する

Jad Joubran

公開日: 2025 年 3 月 4 日

ドキュメント ピクチャー イン ピクチャー API（ドキュメント PiP API）を使用すると、ウェブ アプリケーションで任意の HTML コンテンツを表示できるフローティング ウィンドウ（ピクチャー イン ピクチャー ウィンドウ）を開くことができます。

この API は、<video> のピクチャー イン ピクチャー API をベースに構築されています。この API を使用すると、PIP ウィンドウで動画の視聴を継続できます。

Document PiP API は任意の HTML コンテンツを表示できるため、この API を使用して新しいユースケースを開拓できます。

ブラウザのサポートとプログレッシブ エンハンスメント

このドキュメントの作成時点では、Document Picture-in-Picture API は限定的に利用可能です。

ただし、プログレッシブ エンハンスメントやグレースフル デグラデーションと組み合わせて使用することを妨げるものではありません。

ユースケースを計画する際は、標準機能ではなくプログレッシブ エンハンスメントとして扱うようにしてください。この記事では、グレースフル デグラデーションの例を示します。

Document PiP API を使用して学習者のユーザー エクスペリエンスを向上させる

LearnHTMLCSS.online は、セマンティックでアクセシブルな HTML と CSS を教えるインタラクティブな学習プラットフォームです。インタラクティブなテキスト エディタとブラウザのプレビュー ウィンドウが用意されています。

次のスクリーンキャストは、アプリのレイアウトを示しています。画面は 2 つの列に分割されています。最初の列にはコードエディタが含まれています。2 列目にはタブ付きレイアウトが含まれています。デフォルトでは、ユーザーはチャレンジの手順を確認でき、[ブラウザ] タブをクリックしてライブ プレビューを表示できます。

生徒は、ブラウザのプレビュー ウィンドウを最大化したい場合があります。Document Picture-in-Picture API のサポートを追加する絶好の機会です。

これを実装するには、まずブラウザのサポートを確認します。

const isPipSupported = "documentPictureInPicture" in window;

この変数を使用して、documentPictureInPicture 呼び出しをラップしたり、ドキュメント PiP に依存する関数から早期に返したりできるようになりました。次のコードは、ドキュメント PiP のサポートを確認してから、ドキュメント PiP ウィンドウを開きます。

async function initDocumentPip() {
  if (!isPipSupported) {
    return false;
  }

  const pipWindow = await documentPictureInPicture.requestWindow({
    width: window.innerWidth,
    height: window.innerHeight,
  });
}

ユースケースに応じて、ウィンドウの幅と高さを指定できます。特定の要素や現在のドキュメントを照合したり、固定値を指定したりできます。

これまでのところ、ドキュメントは空です。ここで、コンテンツを入力する必要があります。

// htmlCode is the HTML code of the challenge
pipWindow.document.documentElement.innerHTML = htmlCode;

CSS コードに関する問題については、CSS の同期も必要になります。

これで、最大化ボタンが追加され、別の PiP ウィンドウで開くようになりました。ブラウザのプレビュー タブを最大化するだけでなく、外部モニターがある場合は別の画面に移動したり、メインのウェブアプリとブラウザのプレビュー タブを列レイアウトで並べ替えたりすることもできます。

フォールバック

この API は利用可能な範囲が限られています。この API がサポートされていないブラウザやデバイスでは、フォールバック（グレースフル デグラデーション）動作を提供する必要があります。

最大化ボタンでブラウザのプレビュー タブ全体を引き出すのではなく、現在のウェブアプリの残りのスペース全体を占有するようにします。

さまざまなブラウザでこの動作を試す: https://learnhtmlcss.online/app.html?id=2096

ツールチップの小さな詳細にも注意してください。isPipSupported が true の場合、最大化/最小化ボタンのツールチップは [ピクチャー イン ピクチャーを開始] と [ピクチャー イン ピクチャーを終了] の間で切り替わります。一方、isPipSupported が false の場合、フォールバック動作は Maximize と Minimize で記述されます。

ご覧のとおり、Document Picture-in-Picture API は、プログレッシブ エンハンスメントやグレースフル デグラデーションと組み合わせることで、ウェブアプリの新しいユースケースを開拓できます。

ブラウザのサポートが限られていることを考慮し、適切なフォールバック ユースケースを忘れないようにしてください。

この API のさまざまな例とユースケースについては、ドキュメント PiP のドキュメントをご覧ください。