PDF編集プラグイン for kintoneのv2.0.0から、JavaScript API機能を追加しました。この機能は本プラグインの構想段階から実現しようと思っていたもので、ようやくリリースすることができました。
本記事では、JavaScript APIの概要と、APIが利用できる場面、APIを使ったサンプルについて解説を行います。カスタマイズでAPIを使用することで、PDF編集プラグインの活用の幅がさらに広がります。
目次
PDF編集プラグイン JavaScript APIについて
PDF編集プラグインとして用意したJavaScript APIとしては、次の4つの機能が用意されています(v2.0.0時点)。
追加したAPI
- PDF編集ボタンの要素を取得する
- PDF編集画面を開く
- PDF編集画面を閉じる
- PDF編集画面が開いているか確認する
各機能の詳細やサンプルコードは、JavaScript APIリファレンスご確認ください。
ここでは、各機能の概要をご紹介します。
PDF編集ボタンの要素を取得する
プラグインの設定として、PDF編集ボタンは複数個設定することができますが、各ボタンの要素をこの関数では取得することができます。パラメーターには設定IDを渡します。

このAPIは、ボタンの表示・非表示をする際の利用を想定しています。
プラグインの設定でボタン表示条件を指定することは可能ですが、条件指定では定義できないような条件を元に制御したい場合です。(例:ANDとORを組み合わせた条件でボタン表示・非表示制御をしたい場合)
PDF編集画面を開く
このAPIは、表示中のアプリのフィールドに添付されたPDFではなく、別の場所(例えばクラウドストレージや別アプリ、ローカルファイル)に保存されているPDFに対して編集を行いたい場合に利用することを想定しています。
PDF編集以外の部分(編集対象となるPDFファイルデータを取得する処理、編集後のPDFファイルデータを保存する処理 など)についてはカスタマイズで実装する形となりますが、そこが実装されればPDF編集はプラグイン側の機能が使えます。
PDF編集画面を閉じる
一応用意していますが、利用場面はあまりないと想定しています。
PDF編集画面が開いているか確認する
一応用意していますが、利用場面はあまりないと想定しています。
JavaScript APIを利用してファイル参照で取得したPDFに対する編集サンプル
プラグイン単体としては、設定画面で指定した添付ファイルフィールドからPDFファイルを読み込みますが、APIを使用するとその制限から外れます。ここではサンプルとして、ユーザーが指定したファイルに対してPDF編集画面を表示し、保存後に編集後ファイルをそのままダウンロードする、というような機能をAPIで作成してみました。
一覧画面にファイル参照ボタンを表示
まず、ファイル選択用の機能を作成します。このサンプルでは、レコード一覧画面(レコード一覧の表示形式=カスタマイズ)に、次のようにPDFファイル選択エリアを用意しました。

APIでPDF編集画面を表示
ファイルが選択された後は、PDFファイルを読み込んでarrayBufferを取得し、それをPDF編集画面表示APIのパラメータに渡すような処理を実装します。APIを呼ぶとPDF編集画面が表示されますので、編集後、保存ボタンをクリックします。

戻り値のPDFファイルデータをダウンロード
保存ボタンをクリック後はPDF編集画面表示APIから戻り値がPromiseで返る(編集後PDFファイルのarrayBufferが返される)ので、それをダウンローする処理を実装します。こうすることで、PDF編集画面で保存ボタンクリック後はファイル選択ダイアログが表示され、編集後のファイルをそのまま保存することができます。

このような機能をAPIとカスタマイズにて実現することができるようになります。「kintoneにPDFを登録するまでもないけれどPDF編集は行いたい」といったケースにも対応することができます。
まとめ
PDF編集プラグイン for kintoneのv2.0.0から追加された、JavaScript API機能について解説を行いました。
この機能を使ってカスタマイズをすることで、活用度の幅が広がります。
他にもいろいろ使い道は考えられると思いますので、支援先様の業務改善の1案として、ぜひPDF編集プラグインを是非活用してみてください。


