手っ取り早く使いたい人向け
「PDF生成器」プラグインダウンロードページ
ダウンロードしたプラグインをkintoneにインストールして、アプリにプラグイン追加して使ってください。
詳細な使用法はこちら
kintoneって便利だよね！でも...
kintoneを使っていて、レコードからPDFを生成したいと思ったことはありませんか？
「見積書をレコードからサクッと作りたい」とか「請求書をPDFで出力したい」とか「顧客情報のサマリーを作りたい」とか。
業務で使っていると、そういう要望って意外と多いです。
kintoneのレコードでPDF生成
標準機能では
残念ながら、kintoneの標準機能にはPDFを生成する機能がありません。
レコード印刷機能はあるんですが、あれだとPDF化してもデザインの調整が難しかったり、項目が多いと不要な項目までPDFにされてしまったり、そのまま使うにはちょっと使いづらいんです。
他のプラグインでは
もちろん、世の中には素晴らしいプラグインやサービスがたくさんあります。
PDF生成サービスもいくつか存在していて、どれも便利であります。
ただ、サービスである以上は当然有料のものになります。
また、プラグインでは標準機能部分の「レコード印刷機能」でレイアウトしやすくするというものもあります。
帯に短し、襷に長し
既存のサービスやプラグインには、それぞれメリット・デメリットがあるのは当たり前です。
だけど、欲しのはもっとシンプルで簡単にできれば無料で使えるものです。
他に公式情報はないのか？
jsPDFで帳票をPDF出力しよう
cybozu developer networkの記事にドンピシャの投稿がありました。
このTipsでは、ブラウザー上でPDFを生成するためのJavaScriptライブラリの jsPDF (External link) を使用してkintoneアプリから取得したデータをPDFとして表示する方法を紹介します。
各種のフィールドを取得して、座標を指定して、テキスト配置してという流れです。
これを基に実装していけばPDF生成はできそうです。
ただ…
やっぱり、調整するときはソースコードを触りたくない
PDFのデザインを調整するために、ちょっとコードを触る必要があるのはネックです。
エンジニアの自分が使えるだけ（使い方の習得に熟練が必要）では、社内のkintone利用促進の弊害となります。
実際、自分が調整する際も忘れた頃にコードを読んで、書いてというのは面倒です。
できれば、設定画面だけで完結したい！
無いなら作ってみよう
そう思ったのが、プラグイン開発を始めたきっかけです。
「楽をするために苦労する」 先行投資のような、本末転倒のような。。。
基本方針
まずはcybozu developer networkを漁る
まずは、プラグインの作り方がわからないので、先人の知恵を拝借するためにcybozu developer networkを漁りました。
create-plugin
create-pluginは、kintoneプラグインのテンプレートを作成できるCLIツールです。
npmパッケージとして提供されているため、Windows／macOS／Linux環境で利用できます。
こちらのパッケージを使うと、プラグインのテンプレートを作成～kintoneへアップロードが一気にできます。
まずは、これを使ってプラグインの大枠を作ります。
次に、PDFを生成する部分ですが、
jsPDFで帳票をPDF出力しよう
当然、参考になったのはこちらです。こちらを基にプラグイン実装を進めます。
Promiseのかわりにasync/awaitを使ってみよう
すでに紹介したPDF生成のほかにも、後述する背景画像読み込み部分で非同期処理の結果を次の処理で使用したい場面がありました。
本来、非同期で実行される部分を強制的に待たせる処理で使用しました。
kintone UI Component v1
プラグインには設定画面を設けることができますが、通常の入力フォーム(inputタグ)やドロップダウン(selectタグ)を使用すると見た目がちょっと浮いた感じになります。
主たる目的はPDFを生成することなので本筋からは外れるのですが、やっぱりUIはある程度近しいほうが使いやすいです。
フィールド形式
kintoneで指定できるカスタムフィールドは2025-08-01現在で19個以上あります。
各フィールドのvalueの例があり、わかりやすいです。
kintoneのプラグイン開発に関する情報や、サンプルコードがたくさんあって、本当に助かりました。 いつもありがとうございます、サイボウズさん！
巨人の肩に乗れたらあと少し
ここに味付けしたいことを整理します。
- 項目無限追加: 必要な項目を好きなだけ追加できるようにしたい
- 項目ラベル表示制御: フィールド名をそのまま出すだけだと困ることもあるからラベル名指定や完全非表示とかもしたい
- タイトル追加: 項目ごとにタイトルを追加して、見やすくしたい
- タイトルと項目の位置調整: ドラッグ＆ドロップで、直感的にレイアウトを調整したい
- フォントサイズ変更: フォントサイズも自由に変更できたら便利だよね
要件が固まれば、あとはひたすら実装です。
大体できたな。とは言うものの…
プラグインの形が見えてきた頃、ふと我に返りました。 「これで業務で使えるレベルか？」と。
タイトルと項目が出力されれば請求書なのだろうか？
業務で使うなら、会社ロゴくらいは必要か…
やっぱり、会社のロゴが入ってないと、正式な書類には見えないですよね。 ロゴの画像も設定できるようにします。
これは画像ファイルをアップロードし、拡大縮小設定、表示位置設定できるようにしました。
画像として罫線や枠線が含まれた背景データを読み込ませれば、それっぽくなります。
明朝体も使えるようにしたいな
デフォルトのゴシック体だけじゃなくて、明朝体も選べたら、より書類らしくなりますよね。
フォントの選択機能も追加しました。
利用できるフォントはIPAexゴシック、IPAex明朝、Noto Sans JP、Noto Serif JPの4種類です。
長すぎる項目ははみ出るやんけ
項目の値が長いと、PDFからはみ出してしまう問題が発生。特に複数行文字列（テキストエリア）が顕著にはみ出る。これはなんとかしないと。
自動で改行するように調整が必要です。
jsPDFのtext関数ではmaxWidthを指定できます。ということは、new JSPDF()で生成したPDFの横幅とテキスト出力しようとしている座標が分かれば、doc.text(output, x, y,{ maxWidth:doc.internal.pageSize.getWidth()-x })ではみ出さずに折り返すことができます。
横並びにするんだったら、横幅指定も必要だ
項目を横並び表示することもある場合は、項目の横幅指定をしておかないと文字が被って読めなくなります。
幸い、改行にまつわる話は上記で対応したばかりなので、設定画面で各項目に対して指定できるようにすればOKです。
配列くらいは単に列挙する方が見やすいな
チェックボックスや複数選択のフィールドの場合は、valueが配列で格納されています。
これらはJSON形式で表示するよりも、シンプルに並べた方が見やすいと思ったので中身を列挙するようにしました。
といった要望を叶えたのがこちら「PDF生成器」
そして、これらを実装したプラグインが、ついに完成しました。
PDF生成器
このプラグインを使えば、誰でも簡単に、自由にデザインできるPDFをkintoneから生成できます。
このプラグインが、皆さんの業務効率化に少しでも役立つことを願っています！
改善の旅は終わらない
まずは公開となりましたが、まだまだ追加したい機能はあります。
例えば、
- 数値フィールドなどの表示設定（カンマ区切り、前後に記号追加）を反映する
- 2ページ以上のPDFに対応する
- A4以外の用紙サイズに対応する
- PDF生成したデータをそのレコードの添付ファイルフィールドに保存する
- 一覧画面でまとめてPDF生成する
などなど。
思いつく「あったらいいな」はたくさんありますが、一旦はここで小休止して公開とします。