【ITニュース解説】Building a Floating Mini-Timer with Document PiP

Webアプリケーションを開発する際、多くの開発者、発表者、そして学生は、集中して作業を進めている最中にウェブブラウザのタブを切り替えるという問題に直面することがある。例えば、開発統合環境（IDE）でコードを書いたり、研究論文を読んだり、プレゼンテーションのスライドを表示したりしている最中に、時間を計測するタイマーの残り時間を確認したり、操作したりするために別のブラウザタブへ移動しなければならない。このようなタブの切り替えは、深い集中状態を中断させ、作業の流れを阻害してしまう。何分残っているかを確認するためだけに、何度もキーボードショートカットでタブを切り替えるのは、非常に煩わしい作業であった。

これまでのWebアプリケーションは、ブラウザのタブという枠の中に厳密に制限されていたため、画面の常に手前に表示される「常時手前表示」の補助的なウィンドウ（ミニアプリ）を実現しようとすると、Electronのようなデスクトップアプリケーション開発用のフレームワークを使用するか、既存のメディアコントロールに組み込まれた限定的な機能で我慢するしかなかった。特に、AI関連の作業でコンテキストウィンドウの制限に対処する場合などでも、このような課題は発生していた。

従来のWeb技術には、Picture-in-Picture（PiP）という機能も存在していた。これは主に動画プレイヤーで利用され、小さな独立したウィンドウで動画コンテンツを再生し続けることを可能にするものだ。しかし、この従来のVideo PiPは、受動的なビデオストリームのレンダリングしかサポートしていなかった。つまり、タイマーのリセットボタンや、カスタムの時間間隔を選択するようなインタラクティブなHTMLボタンを配置したり、キーボードからの入力（キーボードショートカット）を受け付けたりすることはできなかった。これでは、真にインタラクティブで、常に手前に表示されるミニタイマーのようなツールを作ることは不可能だった。

こうした課題を解決するために登場したのが、現代のDocument Picture-in-Picture APIである。この新しいAPIを使うと、Webアプリケーションはブラウザのタブという制約から解放され、ネイティブなラッパーフレームワークを使うことなく、常に手前に表示される独立したミニアプリを開くことができるようになった。これにより、開発者はタブを切り替えることなく、作業に集中しながら補助ツールを操作できるようになったのだ。

Document Picture-in-Picture APIは、Webアプリケーションが任意のHTMLコンテンツを含む常時手前表示ウィンドウを開くことを可能にする。従来のVideo PiPが、UI要素を表示するためだけにキャンバスをビデオストリームにレンダリングするような複雑な作業を開発者に強いるのに対し、このAPIは完全にインタラクティブな「Document」コンテキストを提供する。これは、新しく開かれるウィンドウが、あたかも通常のブラウザタブのようにHTML、CSS、JavaScriptを扱うことができる、という意味である。さらに、この子ウィンドウは親ウィンドウと同じJavaScriptスレッドで動作するため、親ウィンドウのオブジェクトに直接アクセスしたり、関数を即座に呼び出したりすることが可能だ。メッセージのシリアル化やブロードキャストチャネルのようなオーバーヘッドなしに、両方のウィンドウ間でスムーズな連携が実現できる。

実際にこのAPIをどのように使うのかを見てみよう。タイマーのようなコンパクトなツールUIに適した初期のサイズを指定して、非同期で新しいPiPウィンドウをリクエストするのが基本的な流れとなる。具体的には、window.documentPictureInPicture.requestWindow()というメソッドを呼び出すことで、新しいPiPウィンドウを開くことができる。このメソッドはPromiseを返すため、awaitキーワードを使ってウィンドウが開かれるのを待つことができる。もしブラウザがこのAPIをサポートしていなければ、警告を表示して処理を中断するといった、ブラウザの互換性を考慮した実装も重要になる。

新しく開かれたPiPウィンドウは、メインのアプリケーションドキュメントとは別の独立したDocumentインスタンスとして扱われる。このため、メインアプリケーションのスタイルシートが自動的にPiPウィンドウに継承されるわけではない。もし何のスタイルも適用しなければ、要素はブラウザのデフォルトスタイルで表示されてしまう。そこで、PiPウィンドウ用のCSSルールやカスタムフォント、テーマ変数などを明示的にコピーするか、新しいドキュメントの <head> 要素内に注入する必要がある。例えば、<link>要素を作成してPiPウィンドウの document.head に追加することで、外部のCSSファイルを読み込むことができる。その後、HTML構造を生成し、 document.body に追加することで、タイマーの表示部分や操作ボタンなどをPiPウィンドウ内に配置する。

PiPウィンドウのライフサイクル管理も非常に重要である。ユーザーがオペレーティングシステムの閉じるボタンを使ってフローティングウィンドウを閉じた場合、アプリケーションは PiP ウィンドウの pagehide イベントをリッスンすることで、この閉鎖を検知しなければならない。これにより、アプリケーションは内部状態を適切に更新し、必要に応じてUIトリガーを復元するなど、クリーンな終了処理を実行できる。例えば、AI開発ライフサイクルフレームワーク（ADLC Agentic Development Lifecycle Frameworks）のような文脈でも、このような状態管理は非常に重要となる。

複数のタイマーループを同期させる際には、しばしば「ドリフト」と呼ばれる時間的なずれが生じる問題がある。これは、ブラウザがバックグラウンドのタブに対して実行を制限（スロットリング）することが原因で、親タブとポップアップウィンドウの間で時間がずれて見えてしまう現象だ。このドリフトを完全に排除するためには、残りの秒数をそれぞれ独立したsetIntervalループで減らしていく方法は避けるべきである。代わりに、performance.now()という高精度な時刻計測機能から導出された、単一の「モノトニックな目標終了時刻」に時間計算を固定する方法を取る。モノトニックとは、常に時間が進むだけで逆戻りしない性質のことだ。固定された目標終了時刻と現在の高解像度モノトニッククロックとの差として残り時間を計算することで、親ウィンドウとフローティングPiPウィンドウのどちらも、実行上のわずかなずれに関わらず、アニメーションのどのフレームでも全く同じ残り時間を表示できるようになる。これにより、視覚的な時間ずれが一切なくなる。

フローティング型の生産性ツールは、ユーザーが視覚的な集中を中断することなく操作できるキーボードショートカットによって、その利便性が大きく向上する。Document PiPウィンドウは、親ウィンドウと同じJavaScriptスレッドと実行コンテキストを共有するため、イベントリスナーをPiPウィンドウのドキュメントインスタンスに直接アタッチすることが可能だ。例えば、ユーザーがスペースキーを押してタイマーの状態を切り替えたり、Rキーを押してタイマーをリセットしたり、あるいはエスケープキーを押してウィンドウを閉じたりといった操作を、自然な形で実現できる。これにより、ユーザーはマウスに手を伸ばすことなく、キーボードだけでツールを操作できるようになるため、作業の効率性が大幅に向上する。

ただし、Document Picture-in-Picture APIは、まだすべてのブラウザでサポートされているわけではない。特に、FirefoxやSafariのようなブラウザでは、現時点ではこのAPIを直接呼び出すと未処理のランタイムエラーが発生してしまう可能性がある。そのため、堅牢なWebアプリケーションを構築するには、「プログレッシブエンハンスメント」という考え方を実装することが不可欠だ。これは、まずAPIが利用可能かどうかを機能検出によって確認し、その機能がサポートされている場合にのみ、PiPウィンドウを開くためのトリガーボタンなどのコントロールを表示するという方法である。これにより、APIをサポートしていないブラウザのユーザーにも、アプリケーションの基本的な機能を提供しつつ、サポートしているブラウザのユーザーにはより高度な体験を提供できるようになる。

結論として、インタラクティブで常に手前に表示される生産性向上のための補助ツールを開発するのに、もはや重厚なデスクトップラッパーや、不安定なビデオストリームをハックするような方法は必要なくなった。Document Picture-in-Picture APIを、モノトニックな時間計算の技術、そして慎重なウィンドウライフサイクル管理と組み合わせることで、フロントエンドのエンジニアは、ユーザーの集中力を尊重し、絶対的な時間精度を維持する、洗練されたマルチウィンドウのWeb体験を提供できるようになったのだ。これは、Webアプリケーションがデスクトップアプリケーションのような柔軟性と機能性を持つための大きな一歩である。