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

Jad Joubran

公開日: 2025 年 3 月 4 日

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

この API は、<video> 用の Picture-in-Picture API をベースに構築されており、PiP ウィンドウで動画の視聴を継続できます。

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

ブラウザのサポートと段階的な拡張

Browser Support

• 116
• 116
• x
• x

Source

記事作成時点では、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 の場合、フォールバック動作は [最大化] と [最小化] で記述されます。

---

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

ブラウザのサポートが限定的だからといって制限を受けないようにし、適切な代替のユースケースを用意してください。

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