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