今日、私たちが持っている情報の中で、PDFフォーマットで保存されているものがどれほど多いかは驚くべきことです。 PDF協会によると、毎年約2.5兆個のPDFが作成され、ウェブの6％を占めているそうです。
- PDFビューアに依存しているため、ユーザーやデバイスによって閲覧体験が大きく異なります。 Web ブラウザに組み込まれているものであれ、無料のオンライン ライブラリであれ、いくつかのビューアは他よりも優れています。
- PDFを自分のウェブサイトの他の部分に組み入れることが難しくなります。
- PDF を HTML に変換するのは難しく、信頼性に欠けます。
- 訪問者がそれらの PDF をどのように見ているかについて、私は可視性がありません。
幸いなことに、アドビはAdobe PDF Embed API (PDF 埋め込み)をリリースしました。これは、簡単なコードの断片だけで、PDFを自分のウェブサイトに直接組み込むことができる簡単な方法です。 このAPIは、完全に無料で使用でき、Webアプリケーション内のクライアントサイドでレンダリングを行います。 洗練されたPDFライブラリを学ぶ必要はなく、非常に簡単に行うことができます。 アドビのサーバーでデータをレンダリングすることもありません。
何もありません。 それがこの製品の最大の特徴です。 PDF Embedを使うためには、ウェブページ以外に何も必要ありません。
デモサイトを使ってPDF Embed APIを試す
。
PDF 埋め込みを知る最も簡単な方法は、デモ サイトで実際に試してみることです。
- PDF に利用可能なさまざまな埋め込みモードをリアルタイムで確認できます。
- 注釈ツール、PDF のダウンロード、PDF の印刷、ページ コントロールなど、ビューアの一部として必要な機能をカスタマイズできます。
- あなたの Web サイトに直接貼り付けるためのコードを生成します。
クライアント ID の取得
独自のコードで PDF 埋め込みを試したい場合、ローカルで使用しているときはクライアント ID なしで動作します。 しかし、実際に自分のウェブサイトに組み込む場合は、クライアントIDを取得する必要があります。 クライアントIDの取得はこちら
重要なヒントをいくつかご紹介します。
注意: Adobe.io コンソールで構成を編集することはできますが、キーを作成するためのリンクにアクセスすることをお勧めします。 Adobe.io コンソール内でキーを作成した場合、ドメインを設定するオプションは表示されません。
埋め込みモードの選択
PDF 埋め込みの強力な点の 1 つは、さまざまな埋め込みモードを選択できることです。
フルウィンドウ
。
フルウィンドウでは、コンピュータ上のAdobe Acrobat Readerと同様の表示エクスペリエンスを、ウェブサイトに埋め込むことができます。 長文のドキュメントを閲覧する場合や、UIで見慣れたPDFの閲覧体験をしたい場合などに最適です。
サイズの異なるコンテナ
Sized Containerは、PDFに変換されたPowerPointプレゼンテーションや、一連の説明書などのコンテンツに最適です。 長文の PDF を組み込む場合は、あまり理想的なエクスペリエンスではないと感じます。
インライン
インラインビューは、デザイナーがデザインを再構築したり、画像にフラットにしたりすることなく、ウェブページに埋め込むのに役立ちます。 インラインビューは、PDFを受け取り、HTMLとしてインラインでレンダリングします。 この埋め込みモードは、Illustrator や InDesign などでデザインして PDF に書き出したインフォグラフィックのようなコンテンツを表示したいが、ウェブ用にデザインし直す心配をすることなく、検索可能でハイパーリンクを持つコンテンツにしたい場合に適しています。
ライトボックス
。
ライトボックスは、PDFビューアーをウェブページの上に開き、より焦点の合った表示を行います。 このモードは、Web サイト全体に PDF ファイルへのリンクがあり、ユーザーが投稿した PDF ファイルをどのように操作しているかに基づいて、表示エクスペリエンスを制御したり、分析を収集したり、イベントを起動したりしたい場合に最適です。
コードの生成
デモ サイトを使用しているときに、「コードの生成」をクリックすると、次のように表示されます。
まず始めに、以下の項目を置き換えてください。
- <YOUR_CLIENT_ID>を生成したクライアントIDに置き換えてください。
- urlパラメータを表示したいPDFのURLに置き換えます。
注：PDF Embeddedはブラウザのクライアントサイドでレンダリングするため、クロスドメインの制限が設定されていてもそれを尊重しますので、ヘッダーがクロスドメインのリンクを許可していることを確認する必要があるかもしれません。 - fileNameをドキュメントの名前に変更します。
これで、あなたのウェブサイトにPDFを埋め込むことができます。 とっても簡単ですね。
Service SDKを現在使用している例
Service SDKを現在すでに使用しているアプリケーションは数多くあります。
- PDF Viewer Component for AEM
- PDF like a boss
- Microsoft SharePoint Plugin
- Adobe Acrobat for G Suite
Conclusion
PDF Embed は、ウェブサイトで PDF を活用するための柔軟性を提供します。
We want to hear from you
PDF Embed を使用してみて、あなたの意見を聞かせてください。 Adobe Document Cloud フォーラムに参加してフィードバックを提供するか、この記事に返信してください！
更新 (07/07/2020)しました。
UPDATE (07/07/2020):新しい Lightbox 埋め込みモードを追加し、新しいヘッダーイメージを追加しました
UPDATE (07/31/2020): 新しいブランドを反映して更新しました。