JavaScript PDF ビューアに注釈、編集、フォーム エディター ツールを追加する方法

より多くのビジネス アプリケーションがWeb 環境に移行するにつれて、ドキュメントの共有や編集などの機能もブラウザーに移行するのは当然のことです。ただし、多くの場合、ユーザーは PDF ドキュメントを表示する以上の操作を行う必要があります。

追加情報を提供するために注釈を追加したり、ドキュメントから個人情報を削除したり、ドキュメント内のフォーム フィールドに入力したりする必要があるかもしれません。幸いなことに、 Document Solutions JavaScript PDF Viewer を使用すると、この機能をJavaScriptアプリケーションに簡単に追加できます。

この記事では、Document Solutions JavaScript PDF Viewer の次の機能について説明します。

• JavaScript PDF ビューアの注釈エディタ

• 注釈の主な機能

• PDF からコンテンツを編集する

• JavaScript PDF ビューア用フォーム エディター

• フォームエディターの主な機能

• PDF ビューアの追加編集オプション

  
  

それでは、これらの機能を見てみましょう。

JavaScript PDF ビューアの注釈エディタ

Document Solutions JavaScript PDF Viewer の注釈ツールは、PDF ドキュメント内の重要な情報を確認してマークするのに役立ちます。また、元のコンテンツを保持しながら、既存の PDF ドキュメントに注釈を追加、変更、削除することもできます。

ユーザーは PDF に注釈を付けたり、コメントしたり、お互いのコメントに返信したりできます。注釈を非表示にする機能により、ユーザーは元のドキュメントを簡単に表示および印刷できます。また、必要に応じて注釈を含むコピーを印刷することもできます。注釈エディターにはドキュメント内のすべての注釈が一覧表示され、既存の注釈にアクセスして変更できます。

使用例とメリット

通常、ユーザーは PDF に注釈を付ける際にAdobe Acrobatを使用します。編集機能を備えたビューアを使用すると、ユーザーはアプリケーション間を行き来することなく、アプリケーション内で直接ドキュメントに注釈を付けることができます。ご覧のとおり、編集機能を備えたビューアは、ビジネスのワークフローを大幅に効率化できます。

この機能が役立つ例をいくつか挙げます。

• 会社の従業員は、財務レポートを経営陣に送って確認してもらいたいと考えています。経営陣は、レポートを PDF ビューアーでオンラインで開き、注釈を使用して変更を提案し、コメントが付けられたことを従業員に知らせることができます。従業員は、オンライン エディターでドキュメントを開き、付けた注釈を使用してビューアーで更新できます。

• 従業員が会社の給与体系に疑問を抱いています。従業員は PDF ビューアーで文書を読み、機密情報を編集し、注釈ツールを使用して説明が必要な箇所にマークを付けることができます。

• ウェブサイト デザイナーは、ウェブサイトのスクリーンショットを準備し、それらを PDF にまとめてレビューに送信します。レビュー担当者は、注釈ツールを使用して、変更が必要な領域にマークを付けます。

  
  

Document Solutions JavaScript PDF Viewer の注釈ツールを使用すると、これらすべてのシナリオが可能になります。注釈に含まれる機能を調べてみましょう。

注釈の主な機能

注釈では次の主な機能が利用できます。

• さまざまな注釈を付けてPDFを編集する
• ユーザーフレンドリーなUIで重要な情報をマークする
• 新規および既存の PDF に注釈を追加、変更、削除する
• PDF コンテンツを強化し、注釈固有のプロパティを適用する
• 元のPDFを変更せずに印刷する
• 注釈付きの修正されたPDFをクライアントに保存する

さまざまな注釈を付けてPDFを編集する

Document Solutions PDF ビューアは、PDF ドキュメントを確認するために必要なすべての注釈をサポートしています。次の注釈を追加できます。

• テキスト注釈（付箋） - PDFにテキストまたは付箋を追加します
• フリーテキスト注釈 - PDFに常に表示されるメモを追加します
• インク注釈 - PDFにフリーハンドで落書きを描きます
• 四角形注釈 - PDFに長方形/正方形を追加します
• 円形注釈 - PDFに円形を追加します
• 線注釈 - PDFに直線を追加します
• ポリライン注釈 - PDF に複数のエッジを持つ閉じた図形または開いた図形を追加します。
• ポリゴン注釈 - PDFにポリゴンを追加します
• ファイル添付注釈 - ドキュメントにファイルを添付し、PDFに埋め込みます。
• サウンド注釈 - ファイルからインポートしたサウンド、またはコンピューターのマイクから録音したサウンド (.au、.aiff、または .wav 形式) を追加します。
• リンク注釈 - さまざまなウェブページにリンクしたり、検索エンジンを呼び出したり、JavaScript を実行したりできるリンクを追加します。
• スタンプ注釈 - ローカルまたはサーバー上の画像をPDFの注釈として使用します

ユーザーフレンドリーなUIで重要な情報をマークする

Document Solutions PDF Viewer 注釈ツールには、ユーザーが PDF に注釈を描画できる直感的な UI があります。PDF Viewer には、注釈の追加、注釈のプロパティの変更、既存の PDF からの注釈の削除を行うための個別の注釈ツールバーとエディターが含まれています。

プロパティパネルには、ドキュメント内の注釈のリストが表示されます。PDF 上の任意の注釈を選択したり、左側のパネルから注釈固有のプロパティを適用したり、注釈を削除したりできます。

パネルの「ページ」タブでは、ページに存在する注釈の数を確認できます。ドキュメントをレビュー用に送信するときに、行われた編集の数を確認できます。

新規および既存の PDF に注釈を追加、変更、削除する

JavaScript PDF ビューアで PDF を確認しているときに、いつでも既存の注釈を編集したり削除したりできます。注釈を追加するには、左側のパネルの注釈エディタ ボタンをクリックすると、注釈ツールバーが表示されます。任意の注釈をクリックし、PDF に直接描画します。注釈を選択すると、左側のパネルに注釈のプロパティが表示されます。既存の注釈を含む PDF をロードしたり、注釈を選択したり、プロパティを変更したり、プロパティ パネルから注釈を削除したりすることもできます。

PDF コンテンツを強化し、注釈固有のプロパティを適用する

ビューアでは、注釈固有のプロパティを設定するための広範なサポートが提供されます。プロパティ パネルから、リッチ テキストの追加、テキストの色の設定、境界線の追加、作成者と件名の設定、返信の追加、注釈の境界/X/Y 位置の設定などを行うことができます。

PDFを変更せずに印刷する

元の PDF を表示する場合は、 [非表示]ボタンを使用して注釈を非表示にし、注釈なしで PDF を印刷できます。

注釈付きの変更されたPDFをクライアントに保存する

保存ボタンをクリックして、PDF に変更を適用し、注釈を保存します。変更を保存するには、ビューアをDsPdfを実行しているサーバーに接続する必要があります。変更のリストと元の PDF がサーバーに送信され、DsPdf によって変更が適用されます。その後、変更された PDF がクライアントに返送され、ユーザーはそれを保存できます。

PDF からコンテンツを編集する

ツールバーの「注釈を編集」または「領域を編集」オプションを使用すると、機密セクションを削除対象としてマークできます。「境界線の色をマーク」および「塗りつぶしの色をマーク」を設定して、ユーザーが編集対象領域をマークできるようにします。ユーザーは、編集されたコンテンツにマウスを移動したときに適用されるこれらのプロパティ（オーバーレイの塗りつぶしの色、オーバーレイ テキスト、オーバーレイ テキストの配置、および繰り返しテキスト）を設定できます。これらのオプションはすべて、コンテンツがドキュメントから削除されると PDF に表示されます。

プロパティ パネルの[編集を適用]ボタンから特定のコンテンツを編集することもできます。編集を適用したら、ツールバーの [編集をリセット] ボタンを使用してリセットできます。ただし、PDF を保存すると、編集された情報にアクセスできなくなり、適用された編集をリセットできなくなります。

個別の編集注釈を適用するか、 [すべての編集を適用]ボタンをクリックしてドキュメント全体に編集を適用することができます。編集を適用した PDF を保存すると、編集されたコンテンツは PDF から完全に削除されます。ユーザーは削除されたコンテンツを選択または別のドキュメントにコピーしたり、他の PDF ツールを使用して編集されたコンテンツを読むことはできません。

JavaScript PDF ビューア用フォーム エディター

フォーム エディターを使用すると、インタラクティブな PDF フォームをオンラインで設計できます。エディターを使用すると、フォームを作成するときにさまざまなフォーム フィールドと高度なプロパティを使用できます。また、オンラインでフォームに入力して送信することもできます。

フォーム エディターの機能は次のとおりです。

• 新しいPDFフォームを最初から作成する
• PDFフォームのデザイン、入力、送信、リセット
• ユーザーから直接データを収集し、PDFフォームに入力します
• 外部ソース（データベース、 JSONなど）からフォーム フィールドにデータを入力します。
• 既存のPDF文書にフォームフィールドを追加する
• 既存のPDF文書のフォームフィールドを編集する
• PDFフォームにJavaScript機能を追加する
• フォームフィールドに幅広いプロパティを適用する
• PDF フォームを設計するための高速で直感的な UI ツールバーとプロパティ パネル
• カスタムUIを構築 - ツールバーの不要なフィールドを省略

Web ベースの PDF フォーム デザイナーの必要性

• PDF 形式は、レイアウトと外観の点で最も好まれる形式です。そのため、 HTML フォームが一般的であっても、PDF フォームは常に設計どおりの外観になります。

• ほとんどのアプリケーションは Web ベースですが、Document Solutions PDF Viewer は、PDF フォームの作成、PDF の編集、注釈の追加、変更した PDF をクライアントに保存するためのワンストップ オンライン ツールです。単一のアプリケーションで PDF を生成して保存するより高速な方法です。

• 開発者は Acrobat で PDF フォームを作成し、オンラインで共有できます。ただし、ブラウザのデフォルト ビューアで開かれた PDF はカスタマイズできず、開発者はフォーム上でコンテンツの送信やフォーム データによるコンテンツの入力などの追加の JavaScript アクションを使用することもできません。Document Solutions PDF Viewer は、送信アクションとリセット アクションを使用してフォーム上で設定できる追加の JavaScript アクションをサポートしています。

• フォームを作成するには、 Microsoft Wordを使用することも、PDF エディターを使用することもできます。Word で PDF フォームを作成するのは、複雑な編集ツールが必要なため難しい場合があります。Document Solutions PDF Viewer フォーム デザイナーは直感的で、ユーザー フレンドリな UI と、フォーム フィールドに必要なプロパティを設定するプロパティ パネルが含まれています。

• 任意のブラウザで表示および入力できるように PDF フォームを設計できます。また、フォームの外観やエンド ユーザーが Adobe Acrobat を持っているかどうかを心配する必要もありません。

作成できるさまざまな種類の PDF フォーム

フォーム デザイナーを使用して、次の PDF フォームを作成できます。

• 登録フォーム（例：イベント、大学のコース、会員、患者の履歴、コンテストなど）

• 申請書（例：求人応募書、ローン申請書など）

• フィードバック フォーム(例: イベント、Web サイト、e コマースなど)

• リクエストフォーム（例：レンタル、情報、支払いフォームなど）

  
  

PDFフォームデザイナーの主な機能

Document Solutions JavaScript PDF ビューアーは、PDF をインタラクティブかつ完全なものにするのに役立ついくつかの種類のフォーム フィールドをサポートしています。

• テキスト フィールド - ユーザーが名前、電話番号などのテキストを入力できるようにします。
• パスワードフィールド - ユーザーがドキュメントのパスワードを入力できるようにします
• テキスト エリア フィールド - 職歴、住所などの長い形式のテキストを追加できます。
• チェックボックスフィールド - ユーザーが複数のオプションを選択できるようにします
• ComboText フィールド - 等間隔の位置にテキストを追加できます (たとえば、登録フォームに日付や電子メールなどを入力する場合)
• コンボボックスフィールド - ポップアップメニューから項目を選択したり、値を入力したりできます
• リストボックスフィールド - 選択オプションのリストを表示します
• プッシュボタン フィールド - 個々のファイルを開いたり、ポップアップ メッセージを表示したりするなど、特定のアクションをトリガーする対話型ボタン。
• ラジオボタンフィールド - ユーザーが1つだけ選択できるオプションのグループを表示します。
• 送信ボタンフィールド - 入力したフォームを送信できます
• リセットボタンフィールド - フォームをリセットできます

PDF フォームをデザインするためのユーザーフレンドリーな UI

Document Solutions フォーム エディター ツールには、PDF にフォーム フィールドを追加するためのユーザー フレンドリな UI があります。PDF ビューアーには、フォーム フィールドを追加したり、プロパティを変更したり、既存の PDF からフォーム フィールドを削除したりするための、独立したフォーム フィールド ツールバーとエディターが含まれています。プロパティパネルには、ドキュメント内のフォーム フィールドのリストが表示されます。PDF 上の任意のフォーム フィールドを選択し、左側のパネルからフォーム フィールド固有のプロパティを適用し、フォーム フィールドを削除できます。パネルの [ページ] タブでは、ページに存在するフォーム フィールドの数も確認できます。

新規または既存の PDF フォームからフォーム フィールドを追加、変更、削除する

オンライン ビューアーで PDF フォームを設計しているときはいつでも、既存のフォーム フィールドを変更したり、削除したりできます。フォーム フィールドを追加するには、左側のパネルの[フォーム エディター]ボタンをクリックすると、フォーム エディター ツールバーが表示されます。任意のフォーム フィールドをクリックし、PDF ページに直接描画します。フォーム フィールドを選択すると、左側のパネルにフォーム フィールドのプロパティが表示されます。既存のフォーム フィールドを含む PDF フォームをロードしたり、フォーム フィールドを選択してプロパティを適用したり、プロパティ パネルから[削除]オプションを選択してフォーム フィールドを削除したりすることもできます。

フォームフィールド固有のプロパティを使用して PDF フォームを強化する

ビューアでサポートされている各フォーム フィールドに対して、フォーム フィールド固有のプロパティを設定するための広範なサポートがあります。一般的な機能としては、名前、読み取り専用、値、配置、背景色、最大長、境界線のプロパティ、フォント サイズを設定したり、フォーム フィールドの境界/X/Y 位置を設定したりできます。

さらに、TextField、PasswordField、TextArea、ComboText Field などのテキスト フィールドに Required プロパティを設定することもできます。

オリジナルのPDFフォームを印刷する

元の PDF ファイルを表示する場合は、メイン ツールバーの[非表示]ボタンを使用してフォーム フィールドを非表示にし、フォーム フィールドなしで PDF ファイルを表示または印刷できます。

フォームフィールドを含む新しくデザインされたPDFをクライアントに保存する

PDF ドキュメントに変更を適用し、フォームフィールドを保存します。この操作では、元の PDF と変更リストを取得し、変更を適用し、変更された PDF をクライアントに送り返すために、サーバー上に DsPdf 製品が必要です。

PDFフォームに記入して送信する

PDF フォームを設計したら、ユーザーが PDF フォームに入力してビューアに送信できるようにすることができます。フォーム データは、データベースに送信されるか、入力された値から PDF として生成されます。また、データベースからビューアにフォーム データを PDF フォームにインポートすることもできます。

PDF ビューアの追加編集オプション

注釈、編集、フォーム フィールドに加えて、次の機能を使用して PDF ドキュメントを操作および編集できます。

空白のPDFドキュメントを作成する

PDF ビューアを使用して、 [新規ドキュメント]ボタンで PDF ドキュメントを作成できます。注釈およびフォーム エディターツールを使用して、PDF または PDF フォームを設計できます。

PDF ドキュメントに新しいページを追加したり、ページを削除したりする

「新規ページ」ボタンを使用して既存の PDF ドキュメントまたは元の PDF ドキュメントに新しいページを追加したり、 「削除」ボタンを使用してページを削除したりできます。

PDF ドキュメントから注釈/フォーム フィールドを選択して削除する

PDF ドキュメントに追加された注釈/フォーム フィールドは、注釈エディターおよびフォーム エディター ビューでいつでも選択できます。 [削除]ボタンを使用して、新規または既存の PDF ドキュメントから注釈またはフォーム フィールドを削除します。

変更を元に戻す、やり直す

注釈またはフォーム フィールドへの変更を元に戻したりやり直したりする場合は、注釈エディターとフォーム エディターの両方で[元に戻す/やり直し]ボタンを使用できます。これらのボタンは変更を段階的に記録し、結果に満足するまで操作を元に戻したりやり直したりすることができます。

結論

これで、Document Solutions JavaScript PDF ビューアの注釈、編集、フォーム フィールド機能について説明しました。ご覧のとおり、独自の注釈を追加したり、表示すべきでない情報を編集したり、フォーム フィールドを追加/編集してインタラクティブな PDF フォームを作成したりすることが非常に簡単になりました。