PDF サムネイルグリッド — 全ページを 1 枚のコンタクトシート PNG に集約

全ページのサムネイルグリッド = PDF の内容を一望できる派生物が生まれる

PDF サムネイルグリッドは、全ページを並べた画像 1 枚 (または複数枚) です。この画像を作ることで、PDF の各ページに何が書かれているかを視覚的に一望できる「内容の縮小版」が生成されます。表紙・章立て・図表・重要な数値が含まれるページの存在が、元の PDF を開かなくても一枚の画像から読み取れます。Slack や Notion に貼ったり、印刷して赤入れしたりする際に便利ですが、この「一望できる画像」がオンラインサービスのサーバー上に存在することの意味を考える必要があります。

グリッド画像は元の PDF の機密性を引き継ぎます。契約書 10 ページのサムネイルグリッドには、各条項のレイアウト・金額が書かれているページの存在・署名欄のページ・特記事項の存在が視覚的に含まれます。財務報告書のグリッドには、グラフの形・表の構成・ページ量が一目でわかります。元 PDF をアップロードしてグリッドを作成するオンラインサービスは、元 PDF と同等の機密度を持つ派生物を生成する処理を受け持つことになります。

「PDF 全体を画像化して可視化する」操作のリスクスコープ

pdf-to-jpg / pdf-to-png と比較したとき、サムネイルグリッドは「全ページを 1 枚の画像にまとめる」という点でさらに視認しやすい形に変換します。個別ページ画像が N 枚ある状態よりも、1 枚のグリッドに並んだ状態の方が「PDF の全体像が一目でわかる」のがサービスとしての価値ですが、その一目でわかる画像がサーバー上に生成・送信される点が問題です。

オンラインサービスにとって、グリッド生成のために受け取った元 PDF は、その全ページを処理する必要があります。1 ページずつラスタライズし、サムネイルに縮小し、Canvas に配置する処理は、各ページのコンテンツを実際に描画 (render) することを意味します。描画された各ページの内容は、サービスの実装によっては中間ファイルとしてサーバーに一時保存されることがあります。「N 時間後に削除」の保証の前に、この一時処理の過程でのログ・キャッシュがリスク経路です。

pdfjs-dist でページをレンダリング、Canvas で合成 — すべてブラウザ内

このツールは pdfjs-dist をブラウザ内の Web Worker として起動し、各ページを page.render(\{ canvasContext, viewport }) でブラウザの Canvas 要素にラスタライズします。各ページの Canvas を指定サムネイル幅にリサイズしながら、出力グリッド Canvas の ctx.drawImage() で配置します。ページ番号テキストはグリッド Canvas の ctx.fillText() で描画します。全ページの配置が完了したら canvas.toBlob('image/png') で PNG として書き出します。

入力 PDF の ArrayBuffer、各ページの Canvas バッファ、グリッド Canvas の RGBA データ、出力 PNG Blob はすべてブラウザのページメモリ内にとどまり、サーバーへのアップロードは一切発生しません。DevTools の Network タブを開いた状態でグリッド生成・ZIP ダウンロードを走らせても、ツール本体 (pdfjs-dist ワーカーを含む) の読み込み以外にリクエストが発生しません。実装は GitHub で公開されており、描画とグリッド合成の処理を第三者が監査できます。

PDF の全貌を映す画像は、手元のブラウザで生成する

サムネイルグリッドは「この PDF に何が書かれているかを視覚的に把握する」ためのツールです。その画像が機密 PDF の内容を一覧できるものである以上、生成プロセスも機密 PDF と同じレベルのプライバシー保護のもとで行われるべきです。ブラウザ内で生成まで完結することで、元 PDF もグリッド画像も、外部サービスを一切経由せずに手元で作成でき、共有したい相手にだけ渡せます。

pdf.js のラスタライズパイプラインと Canvas 合成の内部処理

pdf.js の page.render() は ISO 32000-2 の content stream を解釈して、PDF 演算子 (Tj でテキスト、Do で XObject、l / c でパス描画、f / S で塗り / ストローク) を順番に Canvas 2D Context の API 呼び出しに変換します。Type 1 / TrueType / OpenType / CID-keyed フォントの subset を内部の FontFace API で動的ロードし、テキスト描画時にラスタライズします。複雑な PDF (透明度 + ブレンドモード + マスク + パターン塗り) でも、ブラウザの 2D Canvas が GPU 加速されているため、各ページ数百ミリ秒で描画が完了します。

サムネイル合成の段階では、ページ Canvas を ctx.drawImage(srcCanvas, dstX, dstY, dstW, dstH) でグリッド Canvas に縮小描画します。ブラウザの Canvas 2D は内部的にバイリニア補間 (or 設定によってはバイキュービック) で縮小処理を行うため、ページ全体を 1/4 〜 1/8 サイズに縮めても文字や図表の可読性は十分保たれます。最終的な PNG エンコードは canvas.toBlob('image/png') で、ブラウザの zlib + PNG エンコーダ (Chromium は libpng 派生、Firefox は独自実装) が使われます。出力 PNG は /Filter /FlateDecode 相当の zlib 圧縮で、サムネ枚数 × 解像度に応じてファイルサイズが線形に増加します。

業界別のサムネイルグリッド活用と「コンタクトシート」の歴史

「コンタクトシート」(contact sheet) は写真フィルム時代の業界用語で、ネガフィルムを 1 枚の印画紙に密着焼きして全コマを一望できる状態にしたもので、Magnum Photos などの報道写真エージェンシーが選別 (edit) 作業で使ってきた手法です。デジタル時代の Adobe Bridge、Photo Mechanic、Lightroom の「コンタクトシート出力」機能はこの直接の後継です。PDF サムネイルグリッドはその発想をドキュメント PDF に持ち込んだもので、出版業界・編集業界での赤入れ・校正 (proofreading) ワークフローに自然に馴染みます。

法律事務所では訴訟資料の証拠目録作成 (Exhibit Index) で、各証拠の 1 ページ目をサムネイルで並べた一覧を法廷提出資料として作成することがあります。建築設計では図面集 (Drawing Set) のサムネイル目次を、施工管理書類の冒頭に添付する慣行があります。出版業界では雑誌のレイアウト確認段階で、全ページのサムネイルを 1 枚にまとめて編集会議で議論する用途があります。学術出版では論文 PDF の図表だけを抜粋したサムネイルグリッドを、プレゼンスライドの補助資料として作成する用途も増えています。これらの用途では「機密度の高い元 PDF を完全に手元に置いたまま、視覚的サマリーを作る」ことが価値の本質であり、ブラウザ内完結の本ツールがこの要求を満たします。1 枚にまとめずページ単位の PNG / JPG が必要な場合は pdf-to-png または pdf-to-jpg が同じ pdf.js のラスタライズパスを使って個別ファイルを書き出し、グリッドを作る前に各ページの寸法・向きが揃っているかを確認したい場合は pdf-pages-info で読み取り専用に検査できます。