印刷屋プラグイン（rex0220 Print craft）の帳票を、Claude Desktop と MCP サーバーで作る試みの 4 本目です。今回は、ふだんと順番を逆にしました。
-
ふだん: アプリを作る → レコードを帳票にする
-
今回: 帳票（組織図）を先に設計する → それに合わせて kintone アプリを作る → テストデータで確かめる
社長・部長・課長の箱と線、組織の TEL・メール・メンバーを、アプリのテーブル（組織コード / 親組織コード）から組み立てています。作成・修正の依頼は 9 回で、CSS や計算式は手で書いていません。
使った仕組み
| 操作 | 使う仕組み |
|---|---|
| 帳票の HTML・CSS・計算式を書く、設定ファイルを作る・検査する | 印刷屋 設定オーサリング（MCP サーバー） |
| アプリを作る、項目を足す、テストデータを入れる | kintone MCP サーバー |
| プラグインの追加、設定ファイルの取り込み | 手で操作 |
わかったこと
-
組織図の線は CSS の
::before/::afterで引ける。 印刷屋は html2canvas でページを画像にして PDF にしますが、疑似要素の線も PDF に出ました -
PDF でだけ文字が消えることがある。 濃い背景の箱の文字が、プレビューでは見えるのに PDF で消えました。今回は
display: inline-blockをやめたら直りました -
親子関係のテーブルから、階層の図を組み立てられる。
ARRAY_FILとARRAY_MAPを入れ子にし、内側から外側の変数（今の部）を参照しています -
TABLE_DICのキーは数字だけにしない。"100"のような数字だけのキーは、JavaScript の仕様で数値の順に並びます。"k" & 組織コードにして、テーブルの行の順を保ちました -
テストデータに「変化」を入れる。 組織の新設・統合・移動を版（レコード）として足すと、帳票の限界（部が 5 つになるとはみ出す、など）が見えました
記事
詳しい手順、計算式、つまずいたところは Qiita に書きました。
シリーズ: