1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

rex0220 印刷屋プラグイン - AI(Claude Code)に帳票を作らせる

1
Last updated at Posted at 2026-10-06

kintone の帳票(PDF)を、日本語の要件を伝えるだけで AI に作らせる環境を公開しました。

アプリ 3740(見積書)に、A4 縦 2 ページの「ご提案書」ボタンを作って。
1 ページ目は表紙(中央に「ご提案書」、宛名(御中)、提出日、自社名と担当者)。
2 ページ目は「ご提案内容」に備考、「お見積り概要」に見積明細の表と小計・消費税・合計。
各ページの右下にページ番号(1 / 2)。押したらプレビューを表示、PDF はダウンロード。

これだけで、AI が実アプリの項目定義と実データを確かめながら帳票の HTML・CSS・計算式を組み、印刷屋プラグインにそのまま取り込める設定 JSON を書きます。手元で帳票の見た目を確かめてから、プラグインの設定画面でアップロードして保存するだけです。

完成した PDF(表紙と本文の 2 ページ)

完成した PDF(表紙と本文の 2 ページ)

テンプレートリポジトリ(public): https://github.com/rex0220/print-craft-authoring

プラグイン本体の機能は 製品紹介記事 と FAQ を、帳票を設定画面で作る手順は 見積書の作成手順 を参照してください。
本記事は「AI に作らせる」環境の構築と使い方に絞ります。


仕組み

印刷屋プラグイン Ver.6 の設定は、設定画面の設定のダウンロード / アップロードで、JSON のファイルとしてまるごと受け渡しできます。テンプレートは、AI(Claude Code)がこの JSON を書くための文書と道具をそろえたものです。

ポイントは 3 つです。

  • ① AI は、kintone 公式 MCP と tools でアプリの項目コードと型、実際のレコードを見てから帳票を組み、要件の言葉とフィールドコードの対応を表で示します。対応する項目が無いもの(今回は「提出日」と「自社名」)は、仮に使った項目や値を明示して、確認を求めてきます。
  • ③ 設定画面が保存のときに作る値(計算式が使う項目の一覧など)を、tools が手元の印刷屋プラグインの zip の計算式エンジンで作り、設定を検査します。エラーが 0 になるまで AI が直します。
  • ④ 帳票を HTML にして out/ に書き出すので、取り込む前に見た目をブラウザーで確かめられます。

生成した設定は settings/ のファイルとして残るので、git で履歴管理できます。


前提

項目 本記事の前提
プラグイン 印刷屋プラグイン Ver.6(製品版または試用版)。アプリに入れたものと同じ版の zip ファイルを手元に置く
tools / MCP @rex0220/print-craft-authoring-tools 1.0.0 と kintone 公式 MCP サーバー(@kintone/mcp-server)1.8.2。どちらも npm ci で入ります
Node.js 20 以上
エディター VSCode + Claude Code(Claude のサブスクリプションか、Claude Console の API の従量課金。本記事はサブスクリプションで確かめました)
kintone アカウント ログインユーザー認証(2 要素認証なしのアカウント。閲覧専用のアカウントがあればベスト)。ログイン名とパスワードで API を使えない環境では、対象アプリのレコード閲覧だけの API トークンを設定することもできます(テンプレートの README の手順 3。本記事はログインユーザー認証で確かめました)
対象アプリ 記事の例は見積書アプリ(アプリ番号 3740。見積明細のテーブルと、小計・消費税・合計の計算項目がある)

本記事の手順は、Windows 11、VSCode、Claude Code 2.1.289 で確かめました。

このテンプレートでは、kintone MCP の書き込みツールを拒否し、tools の通信を GET に限っています。AI への常設指示でも kintone の変更を禁じています(「安全のしくみ」で後述)。

AI(Claude Code)が読んだ項目定義とレコードの内容は、Claude の処理に使われます。実データを使えない場合は、検証用のアプリとサンプルのデータで試してください。


環境構築(初回だけ)

1. テンプレートから自分のリポジトリを作る

テンプレートページ右上の Use this template → Create a new repository で、自分のアカウントに private で作成して clone します。

Use this template → Create a new repository を選ぶ

Use this template → Create a new repository を選ぶ

作成画面 — visibility を Private に切り替えて作成する

作成画面 — visibility を Private に切り替えて作成する

作成画面の visibility は Public が初期値です。必ず Private に切り替えてください。
設定 JSON にはアプリ番号・項目コード・業務用語が入ります。

GitHub CLI なら 1 行です:

gh repo create my-print-craft-settings --template rex0220/print-craft-authoring --private --clone

2. 依存を入れる

npm ci

tools(@rex0220/print-craft-authoring-tools)と kintone 公式 MCP サーバーが入ります。本記事の確認時(2026-10)には、kintone 公式 MCP の依存(axios、qs)について npm audit の警告が出ました。

3. 接続先と zip の場所を書く

.env.example をコピーして .env を作り、接続先と印刷屋プラグインの zip の場所を書きます。

KINTONE_BASE_URL=https://<自分の環境>.cybozu.com
PCRAFT_PLUGIN_ZIP="C:\Users\you\Downloads\print-craft-plugin6.zip"

zip の場所は、エクスプローラーで zip を右クリック →「パスのコピー」で貼り付けた形のままでかまいません。tools はこの zip から計算式エンジンを読みます(tools 自体には入っていません)。

ログイン名・パスワードは OS のユーザー環境変数に置くのがおすすめです(プロジェクト内のファイルに残りません。値はユーザーの環境変数としてレジストリに保存されます)。Windows ならコマンドプロンプトで:

setx KINTONE_USERNAME "<ログイン名>"
setx KINTONE_PASSWORD "<パスワード>"

を実行して、VSCode のウィンドウをすべて閉じて起動し直します(「Reload Window」では反映されません)。反映の確認は VSCode のターミナルで $env:KINTONE_USERNAME と打ち、ログイン名が出れば OK です。

手早く試すだけなら、.env の KINTONE_USERNAME / KINTONE_PASSWORD の 2 行のコメントを外して書いても動きます(.env は git 管理外です)。

4. VSCode で開いて Claude Code を起動

手順 2・3 の後に、フォルダーを VSCode で開いて Claude Code を起動します。kintone MCP は node_modules と .env を使って起動するので、順番が逆だと MCP がつながりません(そのときはセッションを始め直します)。

Claude Code で /mcp と打ち、Project の欄に kintone が Connected と出れば OK です。

/mcp — Project の kintone が Connected

作業中に、kintone の読み取りや npx @rex0220/print-craft-authoring-tools の実行で確認が出たら、「2 Yes, allow … for this session」 を選びます。そのセッションの間は、同じ操作で聞かれなくなります。

補足: 確認を出さないようにする(任意)

テンプレートの .claude/settings.json には、kintone の読み取りと tools の実行を確認なしで通す許可が入っています。ただし、この許可は Claude Code でそのフォルダーを信頼したときだけ効きます。Windows の VSCode では、ターミナルで次のようにします。

cmd
cd /d c:\Users\you\Projects\my-print-craft-settings
claude
  • cd /d のパスは、ドライブ文字を小文字の c: で打ちます
  • 英語の確認が出ます。フォルダーを信頼するかの確認は、上下キーで Yes に移ってから Enter(既定は No です)。.mcp.json の kintone サーバーを使うかの確認も、使うほうを選びます
  • /exit で終え、exit で cmd を抜けます。この後に始めた VSCode のセッションから効きます

信頼の確認 — 上下キーで Yes に移ってから Enter

信頼の確認 — 上下キーで Yes に移ってから Enter

なぜ cmd か(Claude Code 2.1.289 で確かめた回避策です): VSCode は Windows でフォルダーを c:\…(小文字)で扱い、PowerShell は C:\…(大文字)に直します。筆者の環境では、PowerShell から起動した claude で信頼すると C: の形で記録され、VSCode では許可が効きませんでした。PowerShell のターミナルで cmd と打っただけでも C: のままなので、cd /d c:\… が要ります(anthropics/claude-code#99828 で報告済みです)。

5. 疎通確認

VSCode のターミナルで:

npx @rex0220/print-craft-authoring-tools version

tools の版、zip から読んだ印刷屋の版、計算式エンジンの SHA-256 と「zip の中身は既知」が出れば OK です。zip の場所が違う、版が合わないときは、ここで止まります。

npx @rex0220/print-craft-authoring-tools version の結果

Claude Code にも頼みます(番号は自分のアプリ):

kintone-get-app でアプリ 3740 を見て

アプリ名が返れば準備完了です。AI の返答(抜粋):

アプリ 3740 の情報です。

項目 値
アプリ名 見積書(印刷屋)
アプリコード (なし)

アプリの説明によると、商品の見積書を作るアプリです。商品リストアプリとルックアップでつながっていて、型番・商品名・単価などをコピーして見積を作れます。


作らせる

事前準備(手作業)

このテンプレートでは AI に kintone を変更させないので、次は人が済ませておきます。

  • 対象アプリに印刷屋プラグイン Ver.6 を追加する
  • PDF を添付ファイル項目に保存するなら、その項目をアプリに作っておく(今回の例はダウンロードなので不要)

指示する

冒頭の指示文を Claude Code に貼ります。コツは 3 つです。

  • アプリは番号で指定する(アプリの URL /k/番号/ の数字)。同じ名前のアプリの取り違えを防ぎます
  • 用紙と向き、ボタンを押したときの動き(プレビューを表示 / 確認してから作成 / すぐに作成)、保存先(添付ファイル項目か、ダウンロードか)を伝える
  • 長い要件は requirements/ にファイルで書いて、「requirements/〇〇.md の要件で作って」と頼んでもかまいません

この例は 2 ページ固定の帳票です。1 ページは用紙に固定で、明細や備考が多いとはみ出した分は切れます。明細が多くなるなら「表を複数ページに分けて」と頼んでください。最終的な PDF は、明細がいちばん多い、商品名や備考が長いレコードでも確かめてください。

すると AI は、おおむねこう動きます(全部自動です):

  1. kintone-get-app — アプリを確かめる
  2. npx @rex0220/print-craft-authoring-tools fields --app 3740 → --summary — 項目コードと型、レイアウトの順を確かめる
  3. テンプレートの帳票レシピ集と雛形を読む
  4. kintone-get-records — プレビューに使うレコードを選ぶ(明細が複数行、備考に改行があるもの)
  5. settings/APP3740-見積書-ご提案書.json に設定を書く
  6. npx @rex0220/print-craft-authoring-tools normalize — 派生値を作って検査する(エラーが 0 になるまで直す)
  7. npx @rex0220/print-craft-authoring-tools record → preview — out/ご提案書.html に帳票を書き出す

AI の返答

終わると、AI はこう返してきます(実際の返答。最後の「確かめ方と反映の手順」は省略):

A4 縦 2 ページの「ご提案書」ボタンを作りました。normalize はエラー 0、プレビューはレコード 3 で 2 ページ、ファイル名「ご提案書-S-0000003.pdf」です。ページ番号が「1 / 2」「2 / 2」に置き換わることも出力で確かめました。見た目はまだ確かめていないので、下の手順で見てください。

設定ファイル: settings/APP3740-見積書-ご提案書.json

要件と項目の対応

要件 使った項目・内容
宛名(御中) 宛名 +「御中」
提出日 見積日(「2026年2月12日」の形)
自社名 固定の文字「株式会社サンプル」
担当者 担当者(ユーザー選択の表示名)
ご提案内容 備考(改行はそのまま改行)
見積明細の表 見積明細 の #・商品名・数量・単価・金額
小計・消費税・合計 小計・消費税・合計(表の右下)
  • 1 ページ目(表紙): 左上に宛名、中央に「ご提案書」、右下に提出日・自社名・担当者です。
  • 2 ページ目: 「ご提案内容」と「お見積り概要」の見出しの下に、それぞれ備考と明細の表、その下に小計・消費税・合計を置きました。
  • ボタン: 押すとプレビューを表示し、PDF はダウンロードです(添付ファイルには保存しません)。

決めてほしい点

  1. 提出日: 「提出日」という項目が無いので 見積日 を使いました。PDF を作った日にするなら TODAY() に変えます。
  2. 自社名: 項目が無いので、既存の見積書と同じ「株式会社サンプル」を仮に入れています。正しい社名を教えてください。
  3. 表の列: 既存の見積書と同じ列にしたので、型番 は入れていません。要るなら足します。
  4. 消費税の見出し: 税率は付けず「消費税」だけにしました。
  5. 出す画面: 詳細画面だけにしています(viewsCsv: "-")。

注意

  • 警告 formula.rawHtml: TABLE_HTML は、明細の値(商品名など)をエスケープせずに HTML として入れます。既存の見積書と同じ使い方で、想定どおりです。
  • 2 ページ目の行数: 2 ページ目は 1 ページに収める作りなので、明細がおよそ 20 行を超えるとページからはみ出した分が切れます(備考が長いともっと少なくなります)。行数が多い見積があるなら、表を複数ページに分ける形に変えます。

要件の言葉に対応する項目が無いもの(提出日、自社名)は、仮に使った項目や値を明示して、確認を求めてきます。答えるときは、後述の「作った後 — 変更も AI に頼む」と同じ頼み方です。

注意の 1 つ目(TABLE_HTML)は、明細のセルの値(商品名など)がエスケープされずに HTML として入る、という意味です。tools の検査が見るのは設定の HTML と計算式で、差し込まれるレコードの値までは見ません。商品名などに < や & が入りうるなら、そういうデータでも PDF を確かめてください(印刷屋 Ver.6 は、描画の前に kintone 以外への読み込みとスクリプトを除きます)。

生成された設定

生成された設定は、たとえば表紙のページならこうなっています(HTML 欄):

<div class="rex0220-pcraft-page">
  <div class="pcraft-prop-to">${ESC_HTML(宛名)} 御中</div>
  <div class="pcraft-prop-title">ご提案書</div>
  <div class="pcraft-prop-from">
    <p>${DATE_FORMAT(見積日, "YYYY年M月D日")}</p>
    <p class="pcraft-prop-company">株式会社サンプル</p>
    <p>担当: ${ESC_HTML(担当者)}</p>
  </div>
  <div class="pcraft-page-no">#{&p} / #{&n}</div>
</div>

2 ページ目の明細の表は、計算式で目印 ##table## に差し込みます:

LET(
  table, TABLE_HTML(見積明細,
    OPT("pref", "pcraft-inv-item-"),
    ARRAY("#", ROWNO(見積明細) + 1),
    商品名, 数量, 単価, 金額
  ),
  REPLACE($html, "##table##", table)
)

文字列の項目は ESC_HTML で囲む、ページ番号は #{&p} / #{&n} で書く、といった印刷屋の書き方は、テンプレートの帳票レシピ集と AI への常設指示(CLAUDE.md)に書いてあり、AI はそれに沿って書きます。

見た目を確かめる

out/ご提案書.html を Chrome で開きます。

out/ご提案書.html を Chrome で開いたところ

近似のプレビューです(添付ファイルの画像と QR はダミーです)。最終的な見た目は、印刷屋プラグインの PDF で確かめます。

取り込む

  1. アプリの設定 → プラグイン → 印刷屋プラグインの 設定
  2. 設定をアップロード で settings/APP3740-見積書-ご提案書.json を選ぶ
  3. 取り込み方を選ぶ
    • 印刷屋の設定がまだ無いアプリ → 全置換
    • 既にボタンがあるアプリに足す → 追加
    • 既にあるボタンを差し替える → 一部置換(ボタンごとに置き換え先を選ぶ)
  4. 保存する → 運用環境に反映

設定のアップロード — 取り込み方を選ぶ

設定のアップロード — 取り込み方を選ぶ

取り込んだボタンに、このアプリで使えない設定(無い項目など)があると、保存のときにエラーになり保存されません。

詳細画面に「ご提案書」ボタンが出るので、押すとプレビューが表示され、PDF をダウンロードできます(冒頭の画像)。

詳細画面の「ご提案書」ボタンとプレビュー

詳細画面の「ご提案書」ボタンとプレビュー


作った後 — 変更も AI に頼む

2 回目からは「対象ファイル名 + 変更内容 + 更新して」の形で頼みます。

settings/APP3740-見積書-ご提案書.json を更新して。
自社名を「株式会社〇〇」に、明細の表に型番の列を足して。
  • 変更は同じファイルへの上書きで返ってきます。AI は変更前と比べた差分(HTML / CSS / 計算式の行の差分。npx @rex0220/print-craft-authoring-tools diff)を見せるので、確かめてから「一部置換」で取り込めます。自社名を変えたときの差分は、たとえばこうなります:

    ボタン ご提案書 / HTML 設定 3 行目 / html:
      …
        <div class="pcraft-prop-from">
          <p>${DATE_FORMAT(見積日, "YYYY年M月D日")}</p>
    -     <p class="pcraft-prop-company">株式会社サンプル</p>
    +     <p class="pcraft-prop-company">株式会社〇〇</p>
          <p>担当: ${ESC_HTML(担当者)}</p>
        </div>
      …
    (派生値 formula / usedFields / id / views / pluginUOG は除く。--derived で含める)
    
  • 設定画面で直した設定を AI に直させるときは、設定画面の 設定をダウンロード で落としたファイルを settings/ に置いて頼みます

指示文の例は、テンプレートの docs/AI設定オーサリング手順.md にまとめてあります。


安全のしくみ

帳票の HTML はレコードの値と混ざってブラウザーで描かれるので、テンプレートは次のように守っています。

  • kintone への書き込みを防ぐ: Claude Code の設定(.claude/settings.json)で kintone MCP の書き込みツールを拒否し(拒否の設定は、フォルダーを信頼していなくても効きます)、tools は GET しか送りません。AI への常設指示(CLAUDE.md)でも禁じています
  • 値の差し込み: 印刷屋の ${式} は値をエスケープしないので、AI は文字列の項目を ${ESC_HTML(項目)} で書きます。tools の検査(normalize)は、エスケープしない差し込みや、HTML をそのまま入れる関数(TABLE_HTML など)を警告で知らせます。検査が見るのは設定の HTML と計算式で、差し込まれるレコードの値は見ません
  • 許可したものだけ: normalize は許可した要素と属性だけを通し、スクリプト、イベント属性、javascript: の URL などはエラーで止めます。新しい設定は外部参照を「除く」にするので、印刷屋 Ver.6 が描画の前に kintone 以外への読み込みとスクリプトを除きます
  • zip の照合: tools は、zip の中身(計算式エンジンなど)が既知のものと一致しなければ実行しません
  • 認証情報とレコードの値: AI は .env を読みません。records/ と out/ にはレコードの値が入るので、git の管理外にしてあります。git に入らないことと、AI に渡らないことは別です。AI が kintone-get-records で見たレコードの内容は、Claude の処理に使われます

サーバー側からも書き込みを防ぎたい場合は、閲覧専用のアカウントか、レコード閲覧だけの API トークンを使ってください(テンプレートの README)。


つまずいたら

症状 確認すること
/mcp に kintone が出ない、AI が kintone のツールが無いと言う npm ci と .env の前にセッションを始めた → 始め直す。補足の手順で kintone サーバーを使わないほうを選んだ → .claude/settings.local.json の disabledMcpjsonServers から kintone を消して始め直す(ほかの設定が無ければファイルごと消してよい。VSCode の /mcp には、無効にしたサーバーが出ません)
Need to install the following packages と出る このフォルダーで npm ci をしていない。n で止め、npm ci してから実行する
毎回確認が出る 「2 Yes, allow … for this session」を選ぶか、補足の信頼の手順をする
印刷屋の zip の場所が分からない / 版 … には対応していない .env の PCRAFT_PLUGIN_ZIP のパス。Ver.6 の zip か
KINTONE_BASE_URL が無い、認証情報が届かない setx の後に VSCode を完全に再起動したか(Reload Window では反映されません)
401 / 権限エラー ログイン名・パスワードの誤り。2 要素認証が有効なアカウントは使えません。そのユーザーにアプリの閲覧権限があるか
2 ページ目の下が切れる 1 ページは用紙に固定で、はみ出した分は切れます。明細が多いなら「表を複数ページに分けて」と頼む

まとめ

1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?