「印刷屋プラグイン」は、kintone のレコードから HTML・CSS・計算式で帳票を組み立てて、PDF にするプラグインです。
本記事では、組織図を例にして、次の 2 つを紹介します。
- 詳細画面から組織図の PDF を作る手順
- 組織図を作っているプラグイン設定画面の見方
下は、kintone アプリのテーブルから組み立てた組織図です。社長・部・課の箱と線、組織ごとの TEL・メール・メンバーが入っています。
この組織図の設計とアプリの作り方（AI に設計させてから、アプリを作らせた流れ）は、rex0220 印刷屋プラグイン - AI(Claude Desktop)に組織図を設計させてから、アプリを作らせる にまとめています。本記事は、できあがった組織図を使う側と、設定を読む側の入門です。
使うアプリ
アプリ「組織図(印刷屋)」は、1 レコードが 1 つの版（〇年〇月〇日現在の組織図） です。異動のたびにレコードを足していけば、過去の組織図も残ります。
| 項目 | 型 | 組織図での使い道 |
|---|---|---|
| 基準日 | 日付 | 見出しの「〇年〇月〇日現在」、PDF のファイル名 |
| 会社名・作成部署 | 文字列（1行） | 右下の「株式会社サンプル 総務部作成」 |
| 組織（テーブル） | テーブル | 1 行が 1 つの組織（社長・部・課） |
| 組織コード・親組織コード | 文字列（1行） | 箱の親子関係。親組織コードが空の行が最上位 |
| 組織名・役職・氏名 | 文字列（1行） | 箱の見出しと「部長 佐藤 一郎」 |
| TEL・メール | リンク | 箱の連絡先 |
| メンバー（1行1名） | 文字列（複数行） | 箱の下の段に並べる名前 |
氏名・電話番号・メールは、すべて架空です（番号は 03-0000-xxxx、ドメインは例示用の example.jp）。
詳細画面から PDF を作る
手順
-
一覧から、PDF にしたい版のレコード（例: 基準日 2027-01-01）を開く
-
詳細画面の上にある「組織図」ボタンを押す
-
プレビューが開くので、組織図を確かめる。上の段には、左から「キャンセル」、PDF を作るボタン（ボタン名と同じ「組織図」）、ボタンの概要（組織図の PDF を作ります）、PDF の行き先（pdf ダウンロード）が並ぶ
-
上の段の「組織図」ボタンを押すと PDF（A4 横の 1 ページ）ができて、ダウンロードされる。ファイル名は基準日から作る
組織図-20270101.pdf。PDF ができると、プレビューが閉じて詳細画面に戻る -
作らずに戻るときは「キャンセル」
このアプリの組織図は PDF の保存先（添付ファイル項目）を決めていないので、ダウンロードになります。保存先を決めたボタンでは、PDF がレコードの添付ファイル項目に保存されます。
「組織図」と「組織図 (2)」の違い
詳細画面には、ボタンが 2 つあります。基準日 2027-01-01 のレコードは部が 5 つあるので、プレビューで比べると違いがわかります。
「組織図」のプレビューでは、右端の経理部の箱が用紙からはみ出て、切れています。PDF にしても、同じように切れます。
「組織図 (2)」は、部・課の箱の幅に上限（220px）を付けて、列が狭いときは箱が縮むようにした版です。5 つの部が用紙に収まります（記事の先頭の画像）。
印刷屋の帳票は、1 ページが用紙の大きさに固定で、はみ出た部分は切れます。組織の数が増えたときは、PDF を作る前にプレビューで端まで入っているかを確かめてください。
プラグイン設定画面
ここからは、組織図を作っている設定を見ていきます。設定画面はアプリの管理者が開きます。
開き方
アプリの設定 → 「プラグイン」で、印刷屋の行の「設定」（歯車）を押します。
プラグインを kintone に読み込んでアプリに追加するまでの手順と、機能の全体は rex0220 印刷屋プラグイン を参照してください。
画面の全体
上から、タイトル行、ツールバー、ボタンの一覧、保存の行です。画面右上の「?」で、各部の説明を開けます。
タイトル行（すべてのボタンに共通）
| 部分 | 内容 |
|---|---|
| NOTE | 設定の一言メモ。この組織図では「テーブル「組織」の親子関係（組織コード / 親組織コード）から社長・部・課を組み立てる」 |
| 説明 | 設定の説明の文章（「説明」ボタンで編集） |
| 外部参照を許可 | チェックしないと、kintone 以外への読み込み（画像・CSS・iframe・リンク）とスクリプトを、描画の前に外す。組織図はチェックなし |
ツールバー（すべてのボタンに共通）
| 部分 | 内容 |
|---|---|
| プラグイン有効 | 外すと、全部のボタンが出ない |
| 列 | 表に出す列のグループを切り替える（標準・行制御・多言語・画面・権限）。表示の切り替えだけで、設定には入らない |
| 共通CSS | チェックすると、「共通CSS」ボタンで設定した CSS を全部のボタンの帳票に使う |
| Web フォント | PC・Mac・スマホで同じ書体にしたいときに使う。スマホの詳細画面のボタンは、これが有効なときだけ出る |
| 一覧: 選択レコードのみ | 一覧の一括処理で、チェックしたレコードだけを対象にする初期値 |
| メニュー | チェックしたボタンを「印刷屋」メニューにまとめる |
ボタンの一覧（1 行が 1 つのボタン）
| 列 | 内容 |
|---|---|
| 左端のチェック | このボタンを使う。外した行のボタンは出ない（設定は残る） |
| ボタン名 | 詳細画面に出るボタンの名前（「組織図」「組織図 (2)」） |
| 概要 | プレビューの上の段に出る説明（「組織図の PDF を作ります」） |
| 備考 | 設定者のメモ（利用者の画面には出ない） |
| 一覧 | 一覧画面のボタンにする（表示中のレコードをまとめて 1 つの PDF に）。組織図は詳細画面のボタンなのでチェックなし |
| HTML | 帳票の HTML・CSS・計算式と、用紙・PDF の保存先。セルを押すと HTML 設定が開く |
| 更新項目（計算式） | PDF を作るときに更新するレコードの項目。組織図では使っていない |
このアプリには、ほかの試しのボタン（3〜5 行目）も残っていますが、左端のチェックを外しているので詳細画面には出ません。
保存の行
「保存する」で設定を保存します。「運用環境に反映」をチェックしておくと、保存した後にアプリも更新されます。右の 3 つのアイコンは、「設定をダウンロード」「設定をアップロード」「設定をクリップボードにコピー」（Markdown の文章で、人が読む用）です。
HTML 設定（組織図の中身）
ボタンの一覧で、「組織図」の行の HTML のセルを押すと、HTML 設定が開きます。
上の段
| 部分 | 組織図の設定 | 内容 |
|---|---|---|
| ページサイズ・向き・解像度(DPI) | A4・横・96 | 右に画面上の大きさ（1123x794 px）が出る。帳票の CSS の幅と余白は、この大きさに合わせる |
| ファイル | --- | PDF を保存する添付ファイル項目。「---」ならダウンロード |
| ボタンを押したとき | プレビューを表示する | ほかに「確認してから作成する」「すぐに作成する」（プレビューを出さずに PDF を作る） |
行（チェックした行を上から使う）
| 行 | 組織図の設定 |
|---|---|
| 1. ボタン表示条件 | 空（いつもボタンを出す）。計算式を書くと、結果が真のレコードだけにボタンを出す |
| 2. ファイル名 | "組織図-" & DATE_FORMAT(基準日, "YYYYMMDD") & ".pdf" |
| 3. 本文 | CSS・HTML・計算式で組織図を組み立てる |
3 行目の HTML 欄は、ページの枠だけのテンプレートです。class="rex0220-pcraft-page" の要素 1 つが、PDF の 1 ページになります。
<div class="rex0220-pcraft-page">
<div class="oc-head"><div class="oc-title">組織図</div><div class="oc-date">${DATE_FORMAT(基準日, "YYYY年M月D日")}現在</div></div>
##chart##
<div class="oc-foot">${ESC_HTML(会社名)} ${ESC_HTML(作成部署)}作成</div>
</div>
-
${…}は、レコードの値（計算式の結果）で置き換わります。文字列の項目はESC_HTMLを通して差し込みます -
##chart##は目印です。計算式欄で組み立てた組織図の HTML に置き換えます
計算式欄の骨組みは次のとおりです（中身は省略しています）。
LET(orgs, …テーブル「組織」の行を、辞書の配列にする…,
LET(root, …親組織コードが空の行（最上位）…,
LET(chart, TAGS_HTML(…社長の箱の下に部の箱、部の箱の下に課の箱を並べる…),
REPLACE($html, "##chart##", chart))))
計算式欄では、HTML 欄の結果を $html で受け取れます。最後の REPLACE で、目印の ##chart## を組み立てた組織図に置き換えて、この行の出力にしています。箱をつなぐ線は、CSS 欄の ::before / ::after で引いています（3 行目の備考より）。
設定を変えるとき
設定画面の「?」には、設定を変えるときのおすすめの運用が載っています。
- 変える前に「設定をダウンロード」で JSON を控える（戻すときは「設定をアップロード」で読み込む）
- NOTE に変更の要点を書く
- 保存した後、「設定をクリップボードにコピー」した Markdown を変更の記録として残す
「組織図 (2)」のように、ボタンを 1 つ増やして直した版を並べておくと、同じレコードのプレビューで前と後を比べられます。
まとめ
- 組織図の PDF は、詳細画面のボタン → プレビューで確かめる → 上の段のボタン、の 3 ステップで作れる
- 1 ページは用紙の大きさに固定。組織が増えたら、プレビューで端まで入っているかを確かめる
- 設定画面は、1 行が 1 つのボタン。HTML のセルから、用紙・保存先・押したときの動きと、帳票の CSS・HTML・計算式を開ける
- 組織図は、HTML 欄のテンプレートの目印（
##chart##）を、計算式で組み立てた図に置き換えて作っている