PDFビューワでグラフィカルな署名を追加する

今回は「DioDocs(ディオドック)」のPDFビューワに表示したPDFファイルにグラフィカルな署名を追加する機能を紹介します。こちらの機能は2021年5月26日(水)にリリースされた「DioDocs V4J SP1」でDioDocs for PDFに追加されています。

PDFビューワについて

DioDocs for PDFのPDFビューワはWebアプリケーション開発で利用できるJavaScriptライブラリとして提供しています。PDFビューワには大きく分けて2つの機能があります。

  1. PDFファイルの表示
    • PDFファイルの読み込み・ダウンロード・印刷
    • ページナビゲーション(先頭、前、次、最後、ページ指定)
    • テキストの選択、検索
    • 拡大・縮小・全画面表示
    • ビューモード(シングル・連続ページ、回転、幅にフィット)
    • サムネイル、アウトライン(ブックマーク)の表示
    • 注釈、フォームフィールドの表示
  2. PDFファイルの編集
    • テキストやスタンプなどさまざまな注釈を追加・編集
    • テキスト、コンボボックス、ラジオボタンやチェックボックスなどさまざまなフォームフィールドを追加・編集

グラフィカルな署名

今回紹介するグラフィカルな署名は上記の2番目の機能「PDFファイルの編集」の1つとして追加されています。署名の追加はビューワのツールバーに表示される[署名の追加]をクリックして実施することができます。

署名の追加

追加できる署名の種類は、「手書き」、「テキスト」、「画像」の3種類があります。

手書きの署名

表示されるダイアログでデフォルトで選択されている[描画]タブの状態ではマウスやペン、タッチによる手書きの署名を追加することができます。文字の太さや色を変更することも可能です。

テキストの署名

[入力]タブを選択している状態ではキーボード入力により追加したテキストを署名として追加することができます。フォントの種類やサイズ、色を変更することも可能です。

画像の署名

[画像]タブを選択している状態ではローカルに保存している画像を選択して追加することができます。

さいごに

今回紹介したV4J SP1の新機能、PDFビューワからグラフィカルな署名を追加するデモはこちらです。

上記のデモですが、署名のユースケースを紹介しているためデフォルトで署名を追加する位置が設定されています。また、署名のサイズ変更や移動なども出来ないようになっています。自由に署名を編集できるデモはこちらです。