PDF編集プラグインAPIでkintoneのレコード登録せずに書き込むカスタマイズ例

PDF編集プラグイン for kintone のv2.0.0から、プラグインにJavaScript API機能が追加されました。PDF編集プラグインの基本機能では実現できないことも、API＋JavaScriptカスタマイズ をすることで実現できるようになります。
参考：
PDF編集プラグイン JavaScript APIリファレンス
PDF編集プラグインAPIでkintoneのレコード登録せずに書き込むカスタマイズ例
複数の添付ファイルフィールドのPDFをまとめて編集する例

本記事では、PDF編集プラグインのJavaScript APIを使った一例として、アプリにPDFファイルを登録しなくてもPDFの編集を実現する方法をご紹介します。

PDF編集プラグインJavaScript API＋カスタマイズで実現したアプリ例

PDF編集プラグインのJavaScript APIとカスタマイズを使用して実現したアプリ例として、次のような操作ができるものを作成してみました。

• アプリの一覧画面（表示形式がカスタマイズ）に、PDFファイル選択領域を表示する。
• PDFファイルを選択すると、プラグインのPDF編集画面が開く。
• PDF編集画面で押印し保存ボタンをクリックすると、編集後のPDFファイルがダウンロードされる。

画面のイメージは次のようなものです。

API＋カスタマイズで作成したアプリの例

kintoneの一覧画面をPDF編集ツールのように利用することができ、しかもPDFファイルはkintone上には保存されない、というようなことを実現することができます。

実現にあたってはプラグインの設定をしたうえで、APIを使ってカスタマイズを構築します。

PDF編集プラグインの設定

PDF編集プラグインをアプリに追加後、プラグインの設定を行います。

ここでは機能的な制限として3つの設定を行っています。（サンプルとして設定していますが、実運用ではこの制限は入れても入れなくてもどちらでもOKです。用途に応じて設定をします）

画像の挿入のみを許可する

プラグインでは文字、画像、手書き、円、四角形の5つを書き込みできますが、この例では画像のみ書き込みできるようにしたいので、画像以外は使えないような設定を行います。

機能制限の設定を行うエリア内に「利用しない編集機能」という項目がありますので、ここで”テキスト、四角形、円、手書き”を選択します。

これで、PDF編集画面では画像のみ追加できるようになります。

PCからのファイル参照をNGにする

続けて、この例ではPC内から画像を参照できないようにしたいので、その隣にある「PC内の画像ファイル参照」という項目を”許可しない”にします。

これで、PDF編集画面で画像をダブルクリックしても、ファイル選択ボタンが表示されなくなります。

ユーザーが画像を選べるようにする

PC内から画像を参照できないようにしたので、このままではユーザーが画像が選べません。ユーザーが事前に設定した画像を選べるように、「画像呼出の設定」タブを開き、画像を選べるように設定を行います。

まず、次のように別アプリ（この例では画像管理アプリ）に、選択させたい画像を登録しておきます。ここでは角印を使用します。

次に、プラグイン側ではその画像を参照するための条件設定を行います。

これで、PDF編集画面では角印を選択できるようになります。
プラグインの設定を保存後、アプリの更新を行えば、プラグイン側の設定は完了です。

APIを使ったJavaScriptカスタマイズ

次に、アプリ側の処理を作成します。大枠は次の通りです。

• PDFファイル選択
• PDFファイル読み込み
• PDF編集画面表示
• 編集後PDFファイル出力

PDFファイル選択処理の実装

以下のように、一覧画面でPDFファイルを選択できるように処理を作成します。HTMLとCSSで作成してもいいですし、JavaScriptで実装してもどちらでもよいですが、ドラッグ＆ドロップできるようにしておくと使い勝手が良いです。

PDFファイル読み込み処理の実装

PDFファイルが選択された際に、ファイルデータを読み込む処理をJavaScriptカスタマイズで実装します。「PDF編集画面を開く」APIではパラメーターとしてPDFのバイナリデータ（ArrayBuffer）を渡すので、ArrayBuffer変数に保持しておきます。

PDF編集画面表示処理の実装

PDF編集プラグインの「PDF編集画面を開く」APIを呼び出す処理を実装します。パラメーターとしては「設定ID」「PDFファイル情報（ファイル名、バイナリデータ）」の2種類が必要となります。

参考：PDF編集プラグイン JavaScript APIリファレンス

この関数を呼び出すと、PDF編集画面が表示されます。戻り値がPromiseで返されるため、awaitを使って待ちます。

編集後PDFファイル出力処理の実装

PDF編集画面上で保存ボタンまたはキャンセルボタンをクリックされると戻り値が返ってきます。

参考：PDF編集プラグイン JavaScript APIリファレンス

戻り値の中には編集後PDFのバイナリデータがあるため、それを使用してPDFファイルダウンロード処理を実装します。こうすることで、PDF編集画面で保存ボタンをクリックした際に、ファイル選択ダイアログが表示（またはブラウザ設定によっては所定のフォルダにファイルが出力）されます。

まとめ

PDF編集プラグインのJavaScript APIを使用したカスタマイズの例として、一覧画面上でPDF編集ツールを作るサンプルをご紹介しました。kintoneの一覧画面をPDF編集ツールのように利用することができ、しかもPDFファイルはkintone上には保存されない、という形を実現することができます。

用途は限れらるとは思いますが、

• kintoneにPDFファイルを保存する必要が無くプロセス管理も不要
• 単にPDFファイルに書き込みを行いたい
• 特定の画像を選択させたい

というケースでも利用したい場合、APIの利用が課題解決策の1つになるのではないかと思います。社内にカスタマイズできるような方がいたり、開発が可能なパートナー様がいるような場合、ご相談してみてください。

また、弊社でも本事例のようなカスタマイズ構築の対応も行っておりますので、ご質問やご希望がある場合は問い合わせフォームよりご相談ください。