スクリーンショット PDF の内部: 長い Web ページが 1 つの連続キャプチャになる仕組み
フルページのスクリーンショットは、ある瞬間に撮影された文書全体の写真ではありません。通常、ブラウザは現在のビューポート内のピクセルのみを公開します。したがって、長いページをキャプチャするには、制御されたシーケンスが必要です。スクロールするものを特定し、測定し、移動し、表示されているスライスをキャプチャし、ソース ページを変更することなくそれらのスライスを組み立てます。
この記事では、バージョン 0.0.13 の現在のスクリーンショット PDF 拡張パイプラインについて説明します。これは、理想化された図ではなく、付属のキャプチャ コードとエディタ コードに基づいています。すべてのページを完全にキャプチャできるという約束よりも、再現可能な制限の方が役立つため、以下の境界が重要になります。
1. 拡張機能はアクティブなタブから始まります
スクリーンショット PDF は、Manifest V3 Chrome 拡張機能とアクティブなブラウザー タブを使用します。 chrome://settings や Chrome ウェブストアなどの Chrome 内部ページはブラウザによって制限されており、キャプチャが開始される前に拒否されます。拡張機能はユーザーの現在のセッション内で動作するため、通常の公開ページ、ユーザーに表示される認証済みページ、および多くのアプリケーション画面をキャプチャできます。
このアクセスは、すべての埋め込みサーフェスが利用可能であることを意味するわけではありません。クロスオリジン フレーム、保護されたビデオ、WebGL、仮想化リスト、および通常のページ フローの外側で描画されたコンテンツでは、引き続き別のエクスポート方法が必要になる場合があります。 Chrome は、基礎となる可視タブの操作を tabs.captureVisibleTab API に文書化しています。
2. 実際のスクロールコンテナを見つける
すべてのサイトが文書本文をスクロールするわけではありません。ダッシュボードでは、外側のページが固定されたままで、スクロール可能な領域が div の内側に配置されることがよくあります。拡張機能はまず、通常のドキュメントのスクロール要素をチェックします。該当するものがない場合は、共通のコンテンツ コンテナを調べて、垂直方向のオーバーフローと最大の有効領域を持つ表示要素を選択します。
この選択は結果的なものです。間違った要素を測定すると、ユーザーがさらに多くのコンテンツを表示できるにもかかわらず、1 画面後に停止する画像が生成されます。実際の診断は、ユーザーが移動するスクロールバーと、DevTools で scrollHeight が変化する要素を比較することです。拡張機能はこの選択を自動的に行いますが、ネストされたアプリケーションや水平スクロール アプリケーションでは依然としてセクション キャプチャが必要な場合があります。
3. 移動前の採寸
キャプチャ ペイロードは、ページ幅、ページ高さ、ビューポート幅、ビューポート高さ、およびデバイス ピクセル比を記録します。 CSS ピクセルはページ レイアウトを記述します。キャプチャされた PNG ピクセルは、高 DPI ディスプレイでは密度が高くなる可能性があります。エディターは後で、CSS 座標と画像座標が一致するように、最初にキャプチャされたスライスから固有のピクセル比を導き出します。
現在のフルページ ワークフローでは、実行ごとに高さ 15,000 CSS ピクセルに明示的な上限が設定されています。境界により、無制限のフィードがメモリを無制限に消費することがなくなります。ページが長い場合は、重複部分が見える名前付きセクションをキャプチャするか、ソース サービスからの公式エクスポートを使用します。その境界を越えた結果を完全なものとして説明しないでください。
4. 一度に 1 つのビューポートをキャプチャする
拡張機能はビューポートの高さのステップでページ内を移動します。スクロールが要求されるたびに、ページが要求どおりに正確に移動したと想定するのではなく、実際のスクロール位置を読み取ります。これにより、ブラウザがスクロール位置を下部に固定する可能性がある最後のスライスが保護されます。
コンテンツ スクリプトは 2 つのアニメーション フレームを待機し、移動後約 300 ミリ秒待機します。バックグラウンド ワークフローにより、スライス間にさらに短い一時停止が追加されます。これらの待機により、通常のレイアウトが安定するまでの時間が与えられますが、すべての遅延画像、アニメーション、またはネットワーク リクエストが完了することは保証されません。メディアの多いページの場合は、ページを手動で 1 回スクロールし、プレースホルダーが解決されるまで待ってからキャプチャを開始します。
Chrome は、表示タブのキャプチャを一時的に抑制することがあります。エラーが Chrome のキャプチャ レート制限と一致する場合、Screenshot PDF は 1 秒の遅延を設けて最大 3 回再試行します。他のエラーは非表示にならずに報告されます。この区別により、永続的なアクセス許可やレンダリングの問題が長いサイレント ループに陥るのを回避できます。
5. フローティングインターフェイス要素の処理
スティッキー ヘッダー、Cookie コントロール、チャット ランチャー、およびフローティング ツールバーは、ドキュメント内の 1 つの場所ではなく、ビューポートにアタッチされます。すべてのスライスでそれらが表示されたままである場合、それらはステッチされたイメージに繰り返し表示されます。スクリーンショット PDF は、フローティング候補を記録し、最初のスライスに保持し、レイアウト位置を書き換えるのではなく可視性を変更することで、後のスライスから非表示にします。
成功後および失敗パス内でも可視性が回復します。ページが先頭に戻り、キャプチャ進行状況インターフェイスが削除され、拡張機能バッジがクリアされます。このクリーンアップは正確さの一部です。キャプチャが失敗した場合、ツールは視覚的に変更されたソース ページを残すべきではありません。
6. スライスをエディタに渡す
各スライスは実際の垂直位置を保持します。エディターはすべての PNG スライスをロードし、白い Canvas を作成し、CSS 座標、固有のデバイスのピクセル比、およびメモリ主導のスケール係数から導出された位置にそれらを描画します。有効な高さは、変更された可能性がある以前のページ測定値を自動的に信頼するのではなく、最後にキャプチャされたビューポートで終了します。
このステッチ方法は、安定した垂直スクロール レイアウトに適しています。単一のスクロール状態では存在しなかったコンテンツを再構築することはできません。仮想化テーブルでは、新しい行が表示されると、以前の行がアンロードされる場合があります。ライブ ダッシュボードではスライス間で値が変更される場合があります。自動回転コンポーネントでは異なるフレームが表示される場合があります。そのような場合は、より小さなセクションまたはソースネイティブのエクスポートを使用してください。
7. 再現可能なキャプチャ記録
通常の個人的な文書の場合は、目で確認するだけで十分かもしれません。サポート証拠、調査、設計レビュー、または作業の記録については、次のことを記録します。
- パブリック URL または認証されたページの機密性のない説明。
- Chrome と拡張機能のバージョン。
- ビューポートのサイズ、ズーム、デバイスのピクセル比。
- 意図した開始点と終了点。
- コンテンツが展開されたか事前スクロールされたか。
- ページが 15,000 CSS ピクセルを超えているかどうか。
- 欠落しているフレーム、埋め込まれたサーフェス、またはライブ値。
スクリーンショット PDF には、スティッキー ヘッダー、固定コントロール、遅延コンテンツ、テーブル、交互の背景、および最終エンドポイントを備えたパブリック 再現可能なキャプチャ フィクスチャ が含まれています。これを使用して、一般的なキャプチャの問題とサイト固有のレイアウトの問題を区別します。
パイプラインでは証明できないこと
視覚的に完全なスクリーンショットは、信頼性、法的許容性、または修正されていないソースを証明するものではありません。ブラウザー セッションからレンダリングされたピクセルを記録します。ソース URL、アクセス時間、関連するコンテキストを個別に保管してください。ソース サービスが署名付き明細書、構造化エクスポート、請求書、またはボーンデジタル PDF を提供する場合は、スクリーンショットと一緒にその強力なソースを保存してください。
現在のパイプラインは意図的に制限されています。測定、実際の位置でのキャプチャ、既知のスロットリングのみの再試行、ページの復元、ローカルでのアセンブル、そしてユーザーに出力の検査を依頼します。これらの境界により、長いページのキャプチャが理解しやすく、再現可能になります。