PDF編集プラグイン for kintone ではJavaScript API機能を提供しており、JavaScriptカスタマイズでAPIを利用することで、プラグイン単体で実現できる範囲をさらに拡張することができるようになります。
参考：PDF編集プラグイン JavaScript APIリファレンス
別記事では、 PDF編集ツールの作成例（kintoneにデータ登録不要 や テーブル内PDFファイルへの書き込み例 をご紹介していましたが、本記事では、プロセスのアクションのタイミング（例えば承認時）にPDF編集画面を表示して押印を行うカスタマイズ例をご紹介します。
目次
プロセス管理のアクション実行時にPDF編集画面を表示するカスタマイズ例
PDF編集プラグインの基本機能では、プロセス管理のアクション実行時にPDF編集画面を表示させるような機能は提供していません。プロセス管理の定義パターンが複数あることで、プラグイン設定が複雑化してしまうことを回避するためです。
そのため、プロセス管理とPDF編集プラグインを組み合わせて利用する場合は、プロセスが自分に回ってきたらPDF編集ボタンをクリックしてPDFを編集後、アクション実行（承認ボタンクリックなど）を行う、という形で実現します。
参考：PDF編集履歴と連動したkintoneプロセス管理アクションボタンの表示/非表示設定事例
一方、このようにプロセス管理と組み合わせてPDF編集プラグインを利用する際に、「承認者が承認ボタンを押したタイミングでPDF編集画面を表示させる」という形を実現したいことがよくあります。本記事では、このような使い方を行いたい場合として、API使ったカスタマイズ例を紹介します。具体的には、次のような操作を実現します。
- アプリではプロセス管理を利用。
- 申請者がPDFを添付して上長に申請。上長が承認ボタンをクリックしたタイミングでPDF編集画面を表示し、PDF内に押印。
- PDF編集画面で保存ボタンがクリックされたら、押印後のPDFが添付ファイルフィールドに保存される。
承認のアクションを行った際にPDF編集画面を表示
実現にあたっては、①プラグインの設定 ②APIを使ってカスタマイズ の順で構築をしていきます。
PDF編集プラグインの設定
PDF編集プラグインをアプリに追加後、プラグインの設定を行います。
この例では、プロセスのアクション実行時にPDF編集画面を表示させるため、プラグイン設定で行える「PDFを編集する」ボタンは表示させないようにする必要があります。そこで編集ボタン表示条件には、常に条件が一致しないような内容を設定しておきます。
※例えば以下のように、レコード番号＝-1の場合に表示、という設定にする。
プラグインの設定後、アプリを更新します。これでプラグイン側の設定は完了です。
カスタマイズでは「設定ID」を使用するため、メモしておきます。
プロセスの承認時にPDF編集画面を表示するJavaScriptカスタマイズ
次に、詳細画面での処理を作成します。大枠は次の通りです。
- アクションの実行時のPDFファイル読み込み
- PDF編集画面表示
- 編集後PDFファイルをkintoneにアップロードしfikeKeyをフィールドに保存
- 詳細画面表示にfikeKeyを元に添付ファイルフィールドへ保存
アクション実行時のPDFファイル読み込み処理の実装
プロセス管理のアクション実行時に、PDFファイルを読み込む処理をJavaScriptカスタマイズ実装します。この例では、ステータスが「作成中→承認中→承認済み」と流れるようなプロセスとしているので、次ステータスが「承認済み」となるようなアクションが実行された際に、PDFファイルを読み込む処理を起動させます。
PDF編集プラグインのAPI（PDF編集画面を開く関数）ではパラメーターとしてPDFのバイナリデータ（ArrayBuffer）を渡す必要があるため、必要なPDFファイルの数だけArrayBufferにして変数に保持しておきます。
どの添付ファイルフィールドのPDFなのかをここで保持しておきます。
PDF編集画面表示処理の実装
PDF編集プラグインの「PDF編集画面を開く」APIを呼び出す処理を実装します。パラメーターとしては「設定ID」「PDFファイル情報（ファイル名、バイナリデータ）」の2種類が必要となります。PDFファイル情報は複数ファイル分存在する可能性があるので、配列に設定して渡します。
参考：PDF編集プラグイン JavaScript APIリファレンス
この関数を呼び出すと、PDF編集画面が表示されます。戻り値がPromiseで返されるため、awaitを使って待ちます。
編集後PDFファイルをkintoneにアップロードしfikeKeyをフィールドに保存する処理の実装
PDF編集画面上で保存ボタンまたはキャンセルボタンをクリックされると戻り値が返ってきます。
参考：PDF編集プラグイン JavaScript APIリファレンス
「プロセス管理でアクションを実行するときのイベント（app.record.detail.process.proceed）」内では、戻り値の中にある編集後PDFのバイナリデータをkintoneにアップロードしてfileKeyを取得後、その内容をfileKeyフィールド（文字列（1行）フィールド）に保存する、ということを行います。
詳細画面表示にfikeKeyを元に添付ファイルフィールドへ保存する処理の実装
「プロセス管理でアクションを実行するときのイベント（app.record.detail.process.proceed）」の終了後は「レコード詳細画面を表示した後のイベント（app.record.detail.show）」が起動されます。このイベントにて、fileKeyに値がある場合に添付ファイルフィールドに保存する処理をkintone REST APIを用いて実装します。その際、fileKeyを保存していたフィールドの値をクリアする設定も忘れずに行います。こうすることで、編集後のPDFの保存処理完了時に1度だけ処理が動くようになるためです。
まとめ
PDF編集プラグインのJavaScript APIを使用したカスタマイズの例として、プロセスのアクション実行時にPDF編集画面を表示するカスタマイズ例をサンプルを交えてご紹介しました。本記事で紹介するように、APIを使うことでプロセス管理のアクション処理実行時にPDF編集を行わせることも可能になります。
社内にカスタマイズできるような方がいたり、開発が可能なパートナー様がいるような場合、ご相談してみてください。また、弊社でも本事例のようなカスタマイズ構築の対応も行っておりますので、ご質問やご希望がある場合は問い合わせフォームよりご相談ください。
