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

Jad Joubran

公開日: 2025 年 3 月 4 日

Document Picture-in-Picture API（Document PiP API）を使用すると、ウェブ アプリケーションでフローティング ウィンドウ（ピクチャー イン ピクチャー ウィンドウ）を開き、任意の HTML コンテンツを表示できます。このウィンドウは常に最前面に表示されます。

この API は、Picture-in-Picture API for <video> を基盤としており、PiP ウィンドウで動画の視聴を継続できます。

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

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

この記事の執筆時点では、Document Picture-in-Picture API は限定的にご利用いただけます。

ただし、 プログレッシブ エンハンスメントまたは グレースフル デグラデーションで使用することは可能です。

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

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

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

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

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

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

const isPipSupported = "documentPictureInPicture" in window;

この変数を使用して、documentPictureInPicture 呼び出しをラップしたり、Document PiP に依存する関数から早期に返したりできます。次のコードは、Document PiP のサポートを確認し、Document 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 の場合、代替動作は 最大化 と 最小化 で説明されます。

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

ブラウザのサポートが限定的であっても制限を受けず、適切なフォールバック ユースケースを用意してください。

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