2025.11.25

kintoneから無料で帳票出力！AI活用で設定をスムーズに

kintoneを導入したものの、思うような帳票が出力できずにお困りではありませんか？
kintoneの標準機能だけでは自由度が低いため、企業独自の請求書や報告書のレイアウトに対応するのは困難です。

専用のプラグインや連携ツールはあるものの、費用面で導入をためらっているという声も多く聞かれます。

そんなときにおすすめなのが、JavaScriptとAIを活用した帳票カスタマイズです。
AIを使えば、プログラミングの知識が無くても、自然言語による指示だけで理想的な帳票を作成できます。

本記事では、AIを使った帳票出力カスタマイズの方法を詳しく解説しますので、「専用の帳票出力ツールを導入するほどではないから……」と帳票出力を諦めている方は是非ご覧下さい！

こちらの動画でも詳しく解説していますのであわせてご覧ください。

kintoneの標準機能だけで帳票出力するのは難しい

kintone(キントーン)はあらゆる業務管理アプリを作れる便利なツールですが、PDFやエクセルへの「決まった形で書類を出力する」いわゆる帳票出力があまり得意ではありません。
標準機能ではレコード詳細画面をそのまま印刷することになるため、使用する項目やレイアウトの設定には限界があるのです。
kintoneで思い通りの帳票を作成するためには、大きく2つの方法があります。

1つめは、プラグインや連携ツールの活用です。
高機能で本格的な帳票出力が可能で、設定も比較的簡単というメリットがありますが、導入費用や月額費用が発生するというデメリットもあります。

帳票出力におすすめのプラグイン･連携サービスについては、こちらの記事でも詳しく紹介していますので、あわせてご覧ください。

▼kintoneで帳票を簡単に作成･PDF出力したい！便利なプラグイン6つを徹底比較！

kintoneで帳票出力をする2つめの方法が、JavaScriptでの開発です。
JavaScripなら、費用をかけずに、自社の要件に合わせて柔軟にカスタマイズできるのがメリットです。
一方で、この方法にはプログラミングの知識が必要になるため、非エンジニアの人には難しい作業でした。

そこで役に立つのがAIです。
AIを使えば、人と会話するように「こんなシステムを作りたい」「ここをもっとこうしたい」と言葉で指示するだけで、ソースコードを書いてくれます。
これにより、追加のコストをかけることなく、kintoneで柔軟な帳票出力も可能になりました。

AIを使って帳票出力のJavaScriptを書く方法

ここからは、実際にAIを使って帳票出力のJavaScripを書く方法を2ステップで解説します。

ステップ1:サンプルコードをもとにAIでソースコードを生成

kintoneの提供元であるサイボウズ社は、開発者向けサイトの「cybozu developer network(サイボウズディベロッパーネットワーク)」で、APIドキュメントや開発Tips、構築運用Tipsなど、実務に役立つ情報を多数公開しています。

今回は、この中で「jsPDFで帳票をPDF出力しよう」というTipsにある「見積書」のサンプルコードをベースにして、「納品書」の帳票出力を実装していきます。

実際のサンプルコードがこちらです。

従来であれば、こちらのサンプルコードを元に、X座標、Y座標などを細かく手動で調整する作業が必要でしたが、これをAIにやってもらおうというわけです。

はじめに、帳票の元となるアプリと項目を決めます。
今回は「納品書アプリ」で管理する、宛名、納品書番号、納品日、明細、合計金額、備考などを使用しました。

表示項目が決まったら、AIでソースコードを書いてもらいます。
今回使用するAIツールは、Anthropic社が提供するClaude(クロード)です。

「プロジェクト」という機能を使って、「参考にするソースコード」と「コード生成の注意点」を入力していきます。
参考にするソースコードは、先ほどご紹介したサイボウズの開発者向けサイトで入手したサンプルコードです。

コード生成の注意点については、デモ環境で試したときに気付いた点を入力します。
例えば「太字は文字化けしやすいため使用しない」といった内容です。

さらに、プロジェクトの指示として帳票の仕様(A4サイズ、数値は右寄せ･文字列は左寄せ、など)を入力します。

最後に具体的な帳票のイメージ画像や、参照するkintoneのフィールドコードを指定して、データを参照するアプリと項目を入力します。

AIにひと通りの条件を入力したら、コード生成を実行してみます。

こうして出力された結果がこちらです。

ステップ2:生成したソースコードをkintoneに反映して調整

コードが生成できたら、実際にkintoneアプリに反映してみます。
kintoneの「納品書アプリ」の「アプリの設定」にある「JavaScript/CSSでカスタマイズ」にjsPDFのファイルをそのまま取り込み、その後CustomizeEditor等のJavaScriptを修正できるプラグインで先ほど生成したソースコードをそのまま貼り付けて保存します。