公開日: 2025 年 3 月 4 日
Document Picture-in-Picture API(Document PiP API)を使用すると、ウェブアプリでフローティングの常に最前面のウィンドウ(ピクチャー イン ピクチャー ウィンドウ)を開き、任意の HTML コンテンツを表示できます。
この API は、<video>
用の Picture-in-Picture API をベースに構築されており、PiP ウィンドウで動画の視聴を継続できます。
Document PiP API は任意の HTML コンテンツを表示できるため、新しいユースケースを実現できます。
ブラウザのサポートと段階的な拡張
記事作成時点では、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 のドキュメントをご覧ください。