FlipLink

PDF.js

技術＆インフラ

WebブラウザでPDFファイルを直接レンダリングするMozillaのオープンソースJavaScriptライブラリです。

定義

PDF.jsは、Mozillaが開発したオープンソースのJavaScriptライブラリで、プラグインや外部ソフトウェアなしにウェブブラウザ内でPDFファイルを直接レンダリングします。PDFの内部構造（フォント、ベクターグラフィックス、画像、テキストレイヤー）を解析し、各ページをHTML5 canvas要素に描画します。これにより、デスクトップとモバイルの両方で、あらゆるモダンブラウザでPDFを閲覧できます。PDF.jsはFirefoxの内蔵PDFビューアを動かしている同じレンダリングエンジンであり、信頼性の高いクロスプラットフォームのドキュメント表示が必要なウェブアプリケーションで広く採用されています。

重要な理由

PDF.jsは、Adobe Acrobatのようなサードパーティ製PDFリーダーや、プラットフォームごとに異なる動作をするブラウザ固有のプラグインへの依存を排除します。パブリッシャーにとって、これはすべての読者がChrome、Safari、Firefox、EdgeのいずれをWindows、macOS、iOS、Androidで使用していても、同一の閲覧体験を得られることを意味します。また、PDF.jsはビューアインターフェースの完全な制御を提供します — カスタムナビゲーションコントロール、検索動作、ズームレベル、そしてネイティブブラウザPDFビューアではサポートされないアナリティクスやアクセス制御機能との統合が可能です。

FlipLinkでの使い方

FlipLinkは[ドキュメントビューア](/glossary/document-viewer)モードのエンジンとしてPDF.jsを使用しています。PDFをアップロードして（[フリップブック](/glossary/flipbook)ではなく）ドキュメントとして作成することを選択すると、FlipLinkはPDF.jsを使用してクリーンでスクロール可能なリーダーインターフェースでレンダリングします。これにより、ページナビゲーション、ズーム、全文検索、レスポンシブレイアウトを備えた従来のドキュメント閲覧体験が提供されます。ドキュメントビューアは、レポート、技術マニュアル、契約書、法的文書など、ページめくりアニメーションが不要なコンテンツに最適です。FlipLinkのすべての機能 — [アナリティクス](/features/analytics-and-insights)、[リードキャプチャ](/features/lead-capture)、[パスワード保護](/features/password-protection)、[カスタムブランディング](/features/branding-and-design)、[CTAボタン](/features/cta-buttons) — はPDF.jsドキュメントでもフリップブックとまったく同じように機能します。

技術的な詳細

PDF.jsは完全にクライアントサイドで動作します。ライブラリがブラウザに読み込まれると、PDFのバイナリデータを取得し、ドキュメントのクロスリファレンステーブルを解析し、Canvas 2D APIを使用して各ページをレンダリングします。テキストの選択、コピー＆ペースト、ドキュメント内検索を可能にするために、キャンバスの上に別のテキストレイヤーが重ねられます。このデュアルレイヤーアプローチ — 視覚的忠実度のためのcanvas、インタラクティビティのためのDOMオーバーレイ — により、PDF.jsは複雑なレイアウトを再現しながらスクリーンリーダー互換性などのアクセシビリティ機能もサポートできます。レンダリングはブラウザで行われるため、初回ファイル読み込み後のサーバーサイド処理は不要で、レイテンシーとサーバーコストを削減します。

PDF.jsとネイティブPDFビューアの違い

ほとんどのブラウザにはPDFビューアが内蔵されていますが、その機能と動作は大きく異なります。ChromeのビューアはPDFを埋め込みオブジェクトとしてレンダリングし、基本的なスクロールとズームを提供します。SafariはPreviewベースの独自レンダラーを使用します。Firefoxのビューアは実際にはPDF.jsそのものです。この不一致により、パブリッシャーは読者がどのような体験を得るか予測できません。PDF.jsは、プラットフォームが制御する単一の一貫したレンダラーを提供することでこれを解決します。ネイティブビューアとは異なり、PDF.jsはカスタムUIオーバーレイ（[リードキャプチャ](/features/lead-capture)フォームや[CTAボタン](/features/cta-buttons)用）、イベントトラッキング（[アナリティクス](/features/analytics-and-insights)用）、アクセス制限（[パスワード保護](/features/password-protection)用）をサポートします — これらはブラウザのデフォルトPDFハンドラでは不可能です。

重要なポイント

PDF.jsは静的なPDFファイルを、あらゆるブラウザとデバイスで一貫した体験を持つインタラクティブで追跡可能なウェブドキュメントに変換します — ドキュメントの忠実性とエンゲージメント機能を組み合わせる必要があるFlipLinkのようなプラットフォームの基盤となっています。

関連用語

PWA（プログレッシブWebアプリ）

オフラインでも動作し、ネイティブアプリのようにデバイスにインストールできるWebアプリケーションです。

レスポンシブデザイン

あらゆる画面サイズやデバイスに適切に表示されるよう、レイアウトとコンテンツを自動調整する設計手法です。

レスポンシブ埋め込み

フリップブックのサイズをコンテナや画面幅に合わせて自動調整する埋め込みコードです。

REST API

HTTPメソッドを使用してデータの作成、読み取り、更新、削除を行うWebサービスのアーキテクチャスタイルです。

Robots.txt

検索エンジンのクローラーにサイト内のインデックス対象ページと除外ページを指示するファイルです。

他の言語で利用可能

PDFを
もっと活用しませんか？

FlipLinkを活用して、PDFから魅力的でインタラクティブなコンテンツを作成している多くの企業に加わりませんか。クレジットカード不要で無料スタートできます。

最初のフリップブックを作成料金プランを見る