PDF編集プラグイン for kintone ではJavaScript API機能を提供しています。JavaScriptカスタマイズでAPIを利用することで、プラグイン単体で実現できる範囲をさらに拡張することができるようになります。
参考：PDF編集プラグイン JavaScript APIリファレンス
別記事では、 PDF編集ツールの作成例（kintoneにデータ登録不要 や テーブル内PDFファイルへの書き込み例、プロセスの承認時にPDF編集画面を表示する例をご紹介していましたが、本記事では、複数フィールドのPDFのまとめて編集を実現するカスタマイズ例をご紹介します。
目次
複数フィールドのPDFに対してまとめてPDF編集画面を表示するカスタマイズ例
プラグインの基本機能では、1つの添付ファイルフィールドに対して1つのPDF編集ボタンを表示することができます。そのため、アプリ内に複数の添付ファイルフィールドがあるような場合、各添付ファイルフィードに対応するPDF編集ボタン定義することになるので、1つ1つボタンをクリックしてPDFに書き込みをする、という操作が必要となります。
例えば、アプリ内に3つの添付ファイルフィールドがあり、それぞれのフィールドにPDFファイルが添付されている場合、PDF編集ボタンを3回クリックしてそれぞれのPDFに書き込みをする、ということを行います。
このようなケースでは、ボタンを複数回クリックしてPDF編集する操作が必要になるため、添付ファイルフィールドの数が多いほどユーザーの手間となります。これを、PDF編集ボタンを1回クリックしたら別々の添付ファイルフィールドﾉPDFもまとめて編集できるという形にするというのが、本記事で例として紹介するAPIを使ったカスタマイズです。
この例で紹介するアプリは、次のようなものです。
- アプリ内には、添付ファイルフィールドが2つある（「受領ファイル」フィールド、「受領ファイル2」フィールドとする）。
- PDF編集ボタンをクリックすると、「受領ファイル」フィールド、「受領ファイル2」フィールドに添付されたPDFがまとめて表示される。
- PDF編集画面の保存ボタンをクリックすると、編集後のPDFが「押印済みファイル」フィールドにまとめて保存される。
具体的には、次のような動きをするようなアプリです。
実現にあたっては、①プラグインの設定 ②APIを使ってカスタマイズ の順で構築をしていきます。
PDF編集プラグインの設定
PDF編集プラグインをアプリに追加後、プラグインの設定を行います。
この例では、「PDFを編集する」ボタンは表示させないようにするため、編集ボタン表示条件には、常に条件が一致しないような内容を設定しておきます。
※例えば以下のように、レコード番号＝-1の場合に表示、という設定にする。
プラグインの設定後、アプリを更新します。これでプラグイン側の設定は完了です。
カスタマイズでは「設定ID」を使用するため、メモしておきます。
APIを使った複数添付フィールドのPDFのまとめて編集JavaScriptカスタマイズ
次に、詳細画面での処理を作成します。大枠は次の通りです。
- PDF編集用ボタン表示
- 複数の添付ファイルフィールド内のPDFファイル読み込み
- PDF編集画面表示
- 編集後PDFファイルを複数の添付ファイルフィールドへ保存
PDF編集用ボタン表示の実装
プラグインの設定として、「PDFを編集する」ボタンは常に表示しないような設定としたため、代わりにJavaScriptカスタマイズでボタンを表示する実装を行います。スペースフィールドや詳細画面のヘッダーにボタンを表示させます。
ボタンクリック時は、次の処理を呼び出します。
複数の添付ファイルフィールド内のPDFファイル読み込み処理の実装
編集ボタンをクリックした際に、複数の添付ファイルフィールド内のPDFファイルデータを読み込む処理をJavaScriptカスタマイズで実装します。PDF編集プラグインのAPI（PDF編集画面を開く関数）ではパラメーターとしてPDFのバイナリデータ（ArrayBuffer）を渡す必要があるため、必要なPDFファイルの数だけArrayBufferにして変数に保持しておきます。
どの添付ファイルフィールドのPDFなのかをここで保持しておきます。
PDF編集画面表示処理の実装
PDF編集プラグインの「PDF編集画面を開く」APIを呼び出す処理を実装します。パラメーターとしては「設定ID」「PDFファイル情報（ファイル名、バイナリデータ）」の2種類が必要となります。この例の場合、PDFファイル情報は複数個存在する可能性があるので、配列に設定して渡します。
参考：PDF編集プラグイン JavaScript APIリファレンス
この関数を呼び出すと、PDF編集画面が表示されます。戻り値がPromiseで返されるため、awaitを使って待ちます。
編集後PDFファイルを複数の添付ファイルフィールドへ保存する処理の実装
PDF編集画面上で保存ボタンまたはキャンセルボタンをクリックされると戻り値が返ってきます。
参考：PDF編集プラグイン JavaScript APIリファレンス
戻り値の中には編集後PDFのバイナリデータがあるため、それを使用して各添付ファイルフィールドに保存する処理をkintone REST APIを用いて実装します。添付ファイルフィールドへの登録にあたっては、
- ファイルをkintoneにアップロードしてfileKeyを取得
- レコード更新REST APIでは、値としてfileKeyを設定
という処理が必要です。
処理が正常終了したら画面を更新すると、編集後のPDFファイルが表示されるようになります。
まとめ
PDF編集プラグインのJavaScript APIを使用したカスタマイズの例として、複数添付ファイルフィールドのPDFファイルに対してまとめてPDF編集＆保存するカスタマイズ例をサンプルを交えてご紹介しました。
1つの添付ファイルフィールドに複数ファイルを登録すれば本サンプルのようなカスタマイズは不要ですが、場合によっては添付ファイルフィールドを複数個に分けて定義しているようなアプリもあるかと思います。そのようなケースで「PDF編集ボタンのクリック回数を減らして勝手を良くしたい」という場合、本APIを使ったカスタマイズが改善案の1つになります。
社内にカスタマイズできるような方がいたり、開発が可能なパートナー様がいるような場合、ご相談してみてください。また、弊社でも本事例のようなカスタマイズ構築の対応も行っておりますので、ご質問やご希望がある場合は問い合わせフォームよりご相談ください。
