このガイドでは、JavaScript による PDF アノテーションと、それをプロジェクトに追加する方法について説明します。
また、この分野に関しての多くの専門知識を持っている PDFTron と WebViewer SDK のアノテーション機能についても触れていきます。
PDF アノテーション (注釈) とは？
まず初めに、PDF のアノテーションとは何でしょうか？アノテーションとは、ユーザーがドキュメントに追加するテキスト、グラフィックス、ハイライト、テキストボックス、または再編集マークなどのオブジェクトです。SDK やライブラリをソリューションに組み込むことで、ユーザーがドキュメントにアノテーションを追加することができます。
アノテーションは、基盤となる PDF の内容を変更することなく、既存のドキュメントに追加されます。コメントや図面を PDF に追加してレビューやコラボレーションを行ったり、アノテーションを個別にデータベースにエクスポートして、アノテーションの保存やバージョン管理の適用をより細かく制御したりすることも可能です。
さらに、PDF の JavaScript アノテーションは、フォームや電子署名などのインタラクティブなオブジェクトをサポートしています。音声、動画、3D アノテーションなどのリッチメディアを PDF ファイルに埋め込んだり、ハイパーリンクや透かしを追加したり、さまざまなことが可能です。
ドキュメントにアノテーションを付ける一般的な方法として、Web アプリを使用する方法があります。PDFTron SDK を使用したネイティブ言語によるアノテーションに加え、JavaScript を使用してプロジェクト内の PDF にアノテーションを付けることができます。
なぜ PDF アノテーションを追加すべきなのか？
では、なぜ PDF アノテーション機能をソリューションに組み込むのでしょうか？答えは簡単で、PDF の注釈は汎用性が高いからです (PDFTron は 35 種類以上のアノテーションをサポートしています)。PDF 形式には多くのユースケースとワークフローをサポートするアノテーションの種類があります。
また、開発者としては、透かし、ハイパーリンク、画像、その他のアノテーションをコードで配置し、アノテーション付きドキュメントをプログラムでカスタマイズすることが可能です。
画像や Office ファイルへのアノテーション
今回は PDF に焦点を当てますが、アノテーションを追加できるのは PDF だけに限りません。Word ドキュメント、契約書や報告書、複雑な設計図や施工図にアノテーションやスレッドを追加することもできます。
適切なツールキットを使用すれば、アノテーションは事実上ファイル形式にとらわれません。画像、Office ファイル、動画にさえも、アノテーションを追加できます。たとえば、クライアントサイドの動的な Office 変換により、Office ファイルを事前に変換処理することなく、Web アプリケーション上でアノテーションを行うことができます。
ツールキットは、動画や Web サイトのアノテーションもサポートすることができます。各フォーマットは、同じWebViewer コンポーネントと豊富な PDF アノテーションを使用し、統合、サポート、メンテナンス、拡張を簡素化します。
詳しくは、「JavaScript を使った Web ページのアノテーション方法 (How to annotate web pages using JavaScript)」の動画をご覧ください。
クライアントサイドでの JavaScript による変換とアノテーション
クライアントサイドのアプリで JavaScript のアノテーションを追加すべき理由は数多くあります。
- プライバシーが重要な場合、これらはうまく機能します。機密性の高いデータを扱う場合、ネットワークやサーバーとの間の転送を最小限に抑えることができます。
- クライアントサイドでサーバーとネットワークのリソース使用量を削減できるため、費用対効果の高い機能拡張が可能です。
- ネットワーク遅延やサーバーの高負荷による閲覧やアノテーションの影響を受けないため、一貫した信頼性の高いユーザーエクスペリエンスが得られます。
マークアップとアノテーションの比較
PDF でアノテーションを使用する場合、2 つの異なる方法があります。
マークアップ: PDF ファイルや他のドキュメント内のコンテンツをマークアップするために使用します。マークアップは、複数の人が共同でテキストコメントを作成したり、メモを追加したりするドキュメント レビューで一般的です。
非マークアップ: 既存の PDF に、署名や入力可能なフォーム フィールドなどのインタラクティブなウィジェット オブジェクトを追加するために使用されます。
PDF アノテーションの種類
PDF の仕様は 26 種類の標準的なアノテーションをサポートしており、PDFTron JavaScript アノテーション ライブラリはさらに 9 種類のアノテーションを追加しています。さらに、外観や動作を変更したカスタム アノテーションを作成することも可能です。
ここでは、様々な PDF アノテーションの種類と、それらがアプリケーションにどのように適用されるかを見てみましょう。
描画と図形
これらのアノテーションの種類を追加すると、提案や編集にすばやく注意を引いたり、画像やテキスト ブロックの上に置いたり、ドキュメント内の情報を強調したりすることができます。図形や描画は、校閲者の提案を非常に見やすくする方法です。
- フリーハンド/インク
- 長方形
- 楕円
- 多角形
- 雲型
- 折れ線
- 線分
- 矢印
- フリー テキスト
- 吹き出し
雲型アノテーションを追加した PDF
インタラクティブなフォームと署名ウィジェット
フォーム ウィジェットを使用すると、PDF ドキュメントの中でインタラクティブな機能を実現できます。署名ウィジェットと一緒に追加することで、署名、フォーム入力、入力済み情報の取得が可能になります。
フォーム フィールドは、インタラクティブな要素の集合体です。テキスト ボックス、チェックボックス、ラジオ ボタン、ドロップダウン リスト、プッシュ ボタンなどがあり、ユーザーの情報をインタラクティブに収集します。
フォーム フィールドはウィジェット アノテーションとして存在し、フィールド自体から独立して表示されます。例えば、ローン書類に、主申請者の署名のために各ページに表示される署名ウィジェットを追加することができます。他のページでは、申請者と連帯保証人の両方に複数の署名が必要な場合もあります。
オンライン フォーム ビルダーのデモをご覧ください。
注：この注釈ウィジェットは、電子署名とは異なる電子署名とフィールドを追加します。
電子署名のアノテーションを追加した PDF
リダクション
PDF 内の機密データを削除するために、リダクションを使用します。PDFTron の JavaScript リダクションは、多くのブラウザーベースのツールのように、機密データを暗いハイライトや画像で隠したり、マスクしたりするだけではありません。テキスト、画像、画像の一部、クライアント側アプリケーションの特定のメタデータなど、リダクションされたあらゆる情報が悪用されないように、実際に基礎となる PDF ファイルを変更します。
リダクションには、2 つの段階があります。
- 他のユーザーがコンテンツのリダクションを確認できるようにするための、ハイライト/リダクション マークのドラフト。
- リダクション ラベルは、リダクションされたコンテンツの上に置かれます。ラベルはシンプルな基本的な黒い四角形にすることができます。PDFTron SDK を使用するとリダクション ラベルの外観をカスタマイズし、何がリダクションされたのかについての一般的なコンテキストを提供することができます
写真やフィールドにリダクションを使用し、テキスト ラベルを追加
テキスト
テキスト アノテーションは、テキストのコメントを追加しますが、テキスト マークアップは、代わりに実際のテキストにアノテーションを加えます。これは、テキストにハイライトやアンダーラインを付けたり、削除や変更するテキストを注記するために波線やテキストの取り消し線を付けたりすることで行われます。
- テキスト: テキストのコメント欄や付箋
- テキストのマークアップ: ハイライト、アンダーライン、取り消し線、波線、キャレット
ハイライト、下線、テキスト コメントなどのテキスト アノテーションを使用した PDF
ゴム印
このアノテーションを使用すると、印刷されたドキュメントに印鑑を押すのと同じように、PDF にスタンプを追加することができます。これにより、PDF が非公開、機密、著作権、またはドラフト版であることを、読者にすばやく伝えることができます。また、承認、却下などのスタンプが押されていれば、レビュー時にドキュメントの状態を伝えることもできます。
承認済みゴム印アノテーションを追加した PDF
リッチ メディアおよびマルチメディア
リッチ メディアを使用すると、PDF ドキュメントに動画や音声ファイルを埋め込むことができます。準拠したリーダーでドキュメントを開くと、ユーザーは通常動画をクリックするだけで、ページのコンテンツの一部としてそれらを直接再生することができます。
ハイパーリンク
PDF ファイルのページにハイパーリンクまたはドキュメント内リンクを追加します。
画像とファイル添付
PDF に画像やファイル添付を追加します。
カスタム アノテーション
ツールキットによっては、独自のアノテーションを作成し、カスタマイズすることができます。
例えば、アノテーション、選択ボックス、コントロール ハンドルの外観や動作を変更できます。また、他の PDF ビューアーで表示されるようにカスタマイズしたアノテーションを作成することもできます。
基本的な例については、カスタム アノテーション デモをご覧ください。
WebViewer のカスタム アノテーションで作成した三角形状のカスタム ツール
計測
JavaScript を使用して、PDF の面積、距離、周囲長を計測することができます。PDFTron SDK ツールは、アノテーションを追加し、一般的なプロパティを変更するための UI を提供します。また、細かい制御を行うための API も用意されています。
計測のアノテーションは建設業界では一般的で、図面の部屋やスペースの寸法や、必要な材料や労働力を見積もるために使用されます。計測ツールのデモをご覧ください。
- 距離測定
- 円弧測定
- 外周測定
- 面積測定
- 楕円の面積測定
- 長方形面積測定
- 雲形面積測定
- カウント測定
計測ツールで部屋の直径を計測
まとめ
Part 1 は以上になります。この記事では、PDF アノテーションとは何か、そして適切なアノテーション ライブラリを使用することでプロジェクトに豊かな機能をもたらすことについて説明しました。
Part 2 では、ユースケースやサンプルについて紹介していきます。
PDFTron 製品の詳細は、弊社 Web サイトをご確認ください。
記事参照：
© 2022 PDFTron
「A Comprehensive Guide to PDF Annotations with JavaScript」
