10
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Day 10

ＡＲアドバンストテクノロジ株式会社（ARI） Advent Calendar 2025

@YYYYaMMaDDainＡＲアドバンストテクノロジ株式会社（ARI）

【有料プラグインなし】kintoneで帳票を出力しよう【jsPDF】

10
Last updated at Posted at 2025-12-10

ノーコード業務アプリの作成ツールとして超有名な kintone では、
kintone 自身の標準機能を拡張するための「プラグイン」を、数多くの企業が公開・販売しています。
これらのプラグインは、kintone と同じく ノーコードで手軽に利用できる点が魅力 です。

特によく公開されているプラグインの一つに、「帳票出力」があります。
kintone 上のデータを「領収書」や「売上管理表」として PDF / Excel 等の形式で出力できるもの で、
kintone 自身の標準出力機能では物足りない部分（配置・反映条件など）を細かく指定したうえで、
思い通りに帳票を出力できるよう、数多くのプラグインが公開されています。

image.png
画像1: 「kintone 帳票出力」で検索すると数多くのサービス（プラグイン）が公開されていることが分かる

このようにプラグインを上手く利用することで、
非 IT 系の方でも 管理の属人化を防ぎつつ、思い通りにカスタマイズできる幅が広がります。
ただし、次のような事情から プラグイン以外の選択肢を考えたいケース もあります。

  • 帳票のレイアウトや表示条件を、もう少し細かく制御したいとき
  • 有償プラグインの費用が、ちょっと重たく感じるとき

では、
「コードを書くのは少し大変だけど、無料で良い感じに帳票が出力できたら…？」

この記事では、その答えの一つとして 「jsPDF」 を使った
文字の挿入や図形描画（※①）の基本 を紹介します。

プラグインと比べると、初期の実装にはある程度の工数が必要になりますが、その分レイアウトや表示条件を細かく制御できるのがjsPDFの大きな魅力です。

「コードなんて書いたことないな…」という方でも、
kintoneライセンスと、対象アプリの管理（JavaScriptカスタマイズを設定できる）権限 、あとはメモ帳があれば試せる内容になっているので、是非一度チャレンジしてみてください。

1. まずはサイボウズ公式ドキュメントを読む・試す

実は、kintone画面に印刷ボタンを追加する方法や、 最低限のサンプルコードは、kintoneを開発しているサイボウズ公式の記事にて丁寧にまとめられています。

重要：まずは上記記事にて掲載されている内容を一通り実践してください。
この記事は「記事を読んだあと、PDFの中身をどう描くか」に特化しています。

※① で「文字の挿入」「図形描画」と記載したのはこのためで、
タイトルには「kintoneで」と書いていますが、
本記事のメインテーマは jsPDF そのものの使い方 になります。

本記事ではこの公式記事の内容を踏まえつつ、
「ではPDFの中身はどう描くのか？」 にフォーカスして紹介していきます。

2. jsPDFで記述してみる

上記「1.まずはサイボウズ公式ドキュメントを読む・試す」で公式ドキュメントを確認し、おおよその動作が分かったら、
次は描画する内容を変更していきます。

具体的には、上記 cybozu developer network のページの
サンプルコード 内

  • 18〜59行目
  • 68〜101行目

を修正していく作業になります。
当該行はすべて削除し、以下の手順を試してみてください。
（2025年12月10日執筆時点での情報であり、今後の更新により行番号は変わる可能性があります。）

要素IDが「preview」のスペースフィールドは、目一杯横に広げておくとよいです。

2-1. 前準備

以下の手順「1. jsPDF変数にjsPDFを分割代入」「2. jsPDFのインスタンスを作成」については、
すでにサンプルコード内に記載されているため、確認のみで問題ありません。

1. jsPDF変数にjsPDFを分割代入

const { jsPDF } = window.jspdf;

kintoneのJavaScriptカスタマイズ設定にてjsPDFを読み込むと、ブラウザ上では自動的にwindow.jspdfという場所に格納されます。
このコードでは、window.jspdf内から必要な要素のみを取ってきて、本ファイル内であらたにjsPDF変数として扱っています（分割代入）。

参考：
【JavaScript】windowオブジェクトとは #初心者 - Qiita
【JavaScript】「分割代入」について #初心者 - Qiita

2. jsPDFのインスタンスを作成

const doc = new jsPDF();

→これを行わない限りはPDFに描画することができません。
以下コードで描画していく際にはここで代入したdoc変数を使用していきます。

「doc」は「これから作るPDFそのもの」だと思ってもらえるとよいです。

3. 単位、用紙サイズを指定

手順2に書き足す形で以下を追加
→用紙のサイズや単位を指定します。

const doc = new jsPDF({
    unit: "mm", // 単位：ミリメートル
    format: "a4", // 用紙サイズ：A4
});

2-2. 実際に記述

ここからは実際にPDF内に文字や図形を挿入してみます。

重要：以下のすべての項目は、サンプルコード内の、 doc.setFont('ipaexg'); 下に追記する形で記載します。

1. text - 文字を入力

PDFに文字を書いてみます。

// Hello jsPDF"という文字列を(x,y)=(10,20)の位置に出力
doc.text("Hello jsPDF", 10, 20);

※挿入する文字や図形の位置は、座標で指定します。
　左上を原点(x,y)=(0,0)とし、右に行くほどxの値が大きくなり、下に行くほどyの値が大きくなります
　（前準備にて単位をmmで指定したので、今回であればx=210が紙面の右端、y=297が下端となります）。

2. line - 直線を引く

PDFに直線を引いてみます。

// 直線を(x1,y1)=(10,20)の点から(x2,y2)=(200,20)の点まで結んで出力
doc.line(10, 20, 200, 20);

この場合、紙面を横断するような直線を描くことが想像できます。

試しにtextとlineを描画した内容を確認してみましょう。
以下の手順で確認できます。

アプリ管理画面 > 「JavaScript / CSSでカスタマイズ」 > サンプルコードを差し替える > アプリを更新 > 任意のレコード詳細画面を開く

image.png

いい感じですね。
ここからは各メソッド（機能）をまとめて紹介します。
値等を調整しながら色々試してみてください。

3. rect - 四角形（枠）を描く

PDFに四角形を描画できます。

// (x, y) = (10, 30) を左上とし、横100mm × 縦20mm の四角形を描画
doc.rect(10, 30, 100, 20);

4. setFontSize - 文字サイズを変更する

doc.textで入力された文字のサイズを変更します。

// 文字サイズを20に変更
doc.setFontSize(20);
doc.text("御見積書", 10, 15);

// 文字サイズを10に変更
doc.setFontSize(10);
doc.text("株式会社●● 御中", 10, 25);

setFontSizeは 「以降に描画するすべての文字」 に影響します。

そのため、タイトルと本文で文字サイズを変えるなどの場合は、都度文字を描画する直前でサイズを切り替えるとよいでしょう。

5. setDrawColor - 線の色を変更する

罫線や枠線の色を変更したい場合は、setDrawColor を使用します。

// 線の色を赤に変更
doc.setDrawColor(255, 0, 0);
doc.line(10, 40, 200, 40);

色は RGB（0〜255） で指定します。
参考：RGB確認ツール

6. addPage - 次のページを追加する

doc.addPage();
doc.text("2ページ目", 10, 10);

7. 中央揃えで文字を配置する（align: "center"）

doc.text("中央揃えのタイトル", 105, 50, { align: "center" });

指定した座標を中心に文字が配置されます。右揃えの場合はcenter→rightにするとよいです。

8. ページの横幅を自動取得する（getWidth）

const pageWidth = doc.internal.pageSize.getWidth();

今回であれば用紙サイズをA4で指定しているため、pageWidthには210が代入されます。
用紙サイズが変更されると、pageWidthの値も変わります。
座標指定時に右端へ配置したい場合は、固定値の210（※A4）を使うのではなく、pageWidthを使うとよいです。

9. テーブルを描画する（autoTable）

line等を駆使してテーブルを自前で描画するのも可能ですが、列数が増えるほどとてつもなく大変になります。
jsPDF単体にはテーブル描画機能がないため、ここではAutoTableプラグインを利用します。
まずはプラグインの読み込み設定から。

9-1. AutoTable プラグインを読み込む

アプリ管理画面 > 「JavaScript / CSSでカスタマイズ」 > URL指定で追加 > 以下を追加

https://cdn.jsdelivr.net/npm/jspdf-autotable@3.5.28/dist/jspdf.plugin.autotable.min.js

最新バージョンは5.0.2ですが、日本語出力の関係上、本記事では3.5.28を使用しています。

kintoneに読み込ませる順番について
①jsPDF
②日本語フォントのbase64ファイル
③autoTable
④サンプルコード

9-2. AutoTable の基本サンプル
実際にPDFにテーブルを描画してみましょう。

doc.autoTable({
  head: [["品名", "単価", "数量", "小計"]],
  body: [
    ["りんご", "100", "2", "200"],
    ["みかん", "80", "5", "400"],
    ["ぶどう", "200", "1", "200"],
  ],
  startY: 20, // 表の開始位置

  // 表全体のスタイル
  styles: {
    font: "ipaexg",
    fontSize: 10,
    cellPadding: 2
  }
});

出力されたPDFを確認してみます。

image.png

おお～

10. 帳票サンプル

上記の内容を過不足なく無理やり詰め込んで帳票を作成してみました。

 /*
 * 1ページ目：請求書
 */
// ページ幅を取得（getWidth）
const pageWidth = doc.internal.pageSize.getWidth();

// タイトル（setFontSize + text + align:center）
doc.setFontSize(18);
// ページ幅 (getWidth) を2で割ることで、x座標の中央に文字を配置できる
doc.text("ご請求書", pageWidth / 2, 20, { align: "center" }); 

// 見出し下の区切り線（setDrawColor + line）
doc.setDrawColor(0, 0, 0);
doc.line(20, 25, pageWidth - 20, 25);

// 枠（rect）
doc.rect(20, 35, pageWidth - 40, 40);

// 文章（text）
doc.setFontSize(10);
doc.text("会社名：サンプル株式会社", 25, 45);
doc.text("請求日：2025/07/02", 25, 55);
doc.text("担当者：鈴木 太郎", 25, 65);

// テーブル（autoTable）
doc.autoTable({
  startY: 85,
  head: [["品名", "単価", "数量", "小計"]],
  body: [
    ["りんご", "100", "2", "200"],
    ["みかん", "80", "5", "400"],
    ["ぶどう", "200", "1", "200"],
  ],
  styles: {
    font: "ipaexg",
    fontSize: 10,
    cellPadding: 3,
  },
});

// 合計欄の囲み（rect）
doc.rect(pageWidth - 80, doc.lastAutoTable.finalY + 10, 60, 15);

// 合計文字（text）
doc.text("合計：800 円", pageWidth - 75, doc.lastAutoTable.finalY + 20);

// 改ページ（addPage）
doc.addPage();

/*
 * 2ページ目：備考ページ
 */
// ページタイトル（text + align:center）
doc.setFontSize(16);
doc.text("備考", pageWidth / 2, 20, { align: "center" });

// 備考用の大きな枠（rect）
doc.rect(20, 35, pageWidth - 40, 200);

// 備考テキスト（text）
doc.setFontSize(11);
doc.text("サンプル帳票です。", 25, 50);

// 下線（line）
doc.setDrawColor(0, 0, 0);
doc.line(25, 70, pageWidth - 25, 70);

// フッター（text + align:center）
doc.setFontSize(10);
doc.text("Sample generated by jsPDF", pageWidth / 2, 290, {
  align: "center",
});

出力結果はこちら。
1枚目：
image.png

2枚目：
image.png

3. まとめ

プラグインを使わずとも、
jsPDFで工夫すれば帳票らしい見た目はある程度作れそうな雰囲気が出てきましたね。

ただ、実際の業務では上記サンプル帳票における「りんご」「800円」のような固定値を出力したいわけではないはずなので、
さらなる工夫が必要になっていきます。

今回はここまでとしますが、
次回は 実際にレコードの内容を取得して表に連携し、件数に応じて自動改ページする方法が書ければと思います。

ありがとうございました！

＊＊＊追記＊＊＊
※ 記載されている会社名、製品名、サービス名などは、各社の登録商標または商標です。
※ 「kintone」はサイボウズ株式会社の登録商標です。
※jsPDFおよびjsPDF-AutoTableはOSS（MIT License）として公開されているライブラリです。
　実務システムで利用する場合は、必ず各ライブラリのライセンス条項を確認のうえご利用ください。

10
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
10
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?