#AdobeMAX 2020 レポート:WebのPDF体験が変わる! PDF Embed APIを使いこなそう

請求書や発注書など、重要性の高いビジネス文書のフォーマットとして、そしてWeb上のホワイトペーパーや報告書、申請書として、数多くのシーンで使われているPDF。現在、世界には2兆5000億のPDFファイルがあると言われています。

そんなPDFですが、閲覧や編集、印刷、書き込みといった処理を行うには、PDF Acrobatという別環境が必要なため、一貫したWebエクスペリエンスを実現できず、ユーザー/Web開発者共にストレスを抱えていました。こうした課題に対し、Adobe MAX 2020に登壇したアドビのシニア テクニカル プロダクト エバンジェリスト ベン・ヴァンデンバーグ(Ben Vandenberg)が、PDFを含むWebのユーザーエクスペリエンスを大きく向上させる方法を紹介しました。

PDFでWebエクスペリエンスが分断される?

いまやデジタル活動において欠かせない存在となったPDF。ベンによると、2019年にアドビのアプリケーションで開かれたPDFファイルは2500億あり、スキャンした文書をPDFに自動変換するモバイルアプリ「Adobe Scan」は1億8,000万回以上使われたそうです。

ところが、そんなPDFには大きなネックがあります。

第一に、一貫したWebエクスペリエンスを保てないこと。例として、大学の申請手続きを考えるとわかりやすいでしょう。大学のWebサイトにはPDFで作成したさまざまな申請書類が掲載されています。申請書をクリックすると、目当てのPDFに飛びますが、ほかのWebページからは離脱してしまいます。また、せっかくWebのPDFフォームに記入したとしても、提出の際には自分のPCに記入済みPDFをダウンロードしたり、別途印刷したりしなければならず、かえって手間がかかってしまうという問題もあります。

有用な情報を検索して、PDFのホワイトペーパーにたどり着いたとしても、そのホワイトペーパーが置かれているWebサイトの他ページには飛べません。これでは、関連情報がすぐに入手できず、ユーザーの不利益につながります。こうした点についてベンは、「一貫したユーザーエクスペリエンスが欠如し、コントロールできないブラックボックス状態になっているのです」と指摘します。

第二に、これによりWeb開発者やWebのオーナーにも不利益が生じているという課題があります。ユーザーがPDFをダウンロードしたのか、それとも印刷したのか、PDF内のリンクから別のWebサイトに飛んだのか、どのような操作をしたのかわからないため、Web開発者側も対策が打てません。PDFがブラックボックスになっているため、Webページの分析機能を使って操作を解析するわけにもいきません。かろうじて把握できるのは、そのPDFがダウンロードされた回数だけです。

「Webでの統一されたエクスペリエンスの実現や、分析の実現に向け、PDFコンテンツをWebページに変換するツールもあります。ですが、必ずしも元のPDF同様のレイアウトで変換されるとは限りません。そのためHTMLタグでフォーマットを整える必要がありますが、それには膨大な時間がかかり、開発者の不可となっていました。Adobeでは、こうした問題を解決するために Adobe I/Oでテクノロジーを公開しています。」(ベン)

同一のWebページ内でPDFを表示・操作可能にするPDF Embed API

アドビが提供するPDF Embed APIは、ユーザーのWebブラウザでPDFをレンダリングするAPIです。PDFファイルを置いたディレクトリのURLではなく、このAPIをHTML内に埋め込めば、Webページから飛ぶことなく、そのページ内にPDFが表示されます。Webページのサイドメニューやヘッダーも維持したままです。

PDFなので、ページやブックマークを移動できますし、申請フォームの場合はそのままWebブラウザで必要箇所に入力し、アプリケーション内で保存することもできます。PDFをダウンロードしたり印刷したりしなくて済むので、申請作業も楽になります。

ホワイトペーパーも同様に、Webサイト内にそのままPDFが表示されるので、Web内の関連情報にすぐ飛ぶことができます。さらにこのAPIを使うと、特定のURLをクリックしたり、テキストをハイライトしたりといった操作を、JavaScriptイベントとして認識できるので、アドビの分析ソリューション「Adobe Analytics」やWebサイトの拡張機能に組み込むことができます。

参考情報:ウェブに掲載されているPDF内の計測をAdobe Analyticsで実施する

講演では、ベンがPDF Embed APIを使って、「特定のPDFページに来ると、チャットボットが立ち上がり、専門家への相談予約を入れられる」というイベントをPDFに追加しました。ベンは「静的で受け身のPDFではなく、PDFにこのような双方向の対話機能を加えることで、リッチなエクスペリエンスを実現できます」と説明します。

このAPIは、自社のWebサイトに簡単に埋め込むことができます。Adobe I/Oサイトの最下部にある「Adobe PDF Embed API」をクリックし、Try the Demo [デモを試す] をクリックするだけ。

インラインで表示したいPDFのサイズを確認し、Customize [カスタマイズ] で追加したい機能を簡単に選択・削除できます。たとえばダウンロード機能や印刷機能を削除する代わり、コメントやハイライト機能を追加したり、PDFに手書きで直接書き込む機能を加えることも可能です。WebブラウザのPDFに、手書きでコメントを追加できるのは画期的です!

必要な条件を設定したら、Generate Code [コードの生成] ボタンをクリックすると、埋め込み用のコードが作られます。APIを使うためのクライアントID(申請にはAdobe IDが必要です)を確認し、自社のWebにあるPDFのURL、ファイル名を変更し、HTML内にコードをペーストすれば、Webサイト内でPDFビューアができあがります。また、埋め込みコードにAdobe Analyticsのレポートスイートを組み込めば、情報をレポートにプッシュします。これにより、「ユーザーのPDF操作がブラックボックスで、分析できない」という課題も解決できるのです。

WebアプリやデータベースとPDFも連携可能

さらにベンは、「PDF Tools API」というAPIも紹介します。これはAcrobatの機能をWebアプリケーションに組み込むためのAPIです。具体的には、PDFの生成や結合、エクスポートといった機能や、保護、OCR、またはページの削除や追加といった機能をWebアプリケーションに搭載するためのAPIのこと。

ベンはデモで、スキャンした紙文書を自動でPDF化するWebアプリケーションを操作しました。通常スキャンした文書のPDFは、画像PDFとして認識されるため、文書内のテキストを検索したり、インデックスを付けたりすることはできませんが、このWebアプリケーションを使ってスキャンした画像PDFをアップロードすると、OCRが読み取り、文字や画像、テーブルを埋め込んだPDFとして認識できるようになります。

また「Extract API」を使うと、PDF内にある数値やテキストなどの情報を抽出して、自社のデータベースに格納したり、または別のWebアプリケーションに展開できます。これは現在プライベートベータ版として提供していますが、「今後はこの機能に多大な投資を行い、PDF内の有益なコンテンツやデータを抽出して、社内システムなどに組み込むことができるようにします」(ベン)と説明します。

現在、ビジネスドキュメントの標準フォーマットとして、全世界で利用されているPDF。これからは文書だけでなく、Webコンテンツのフォーマットとして、そして有用なコンテンツや情報、データをさらに有効活用する仕組みとして、さらなる発展が期待されます。最後にベンは「ぜひAdobe I/Oにアクセスして、ユーザーのPDFエクスペリエンスをさらに向上させ、より良いエクスペリエンスを提案できるように活用してください」と話し、講演を終えました。