← Designer に戻る
PDF 上にフィールドを配置し、設定 JSON を書き出すために使う各コントロールの意味と使い方。
出力される設定 JSON の各キーの詳細は
config-spec.md、レイアウト挙動の詳細は pdf-positioner.behavior.md を参照してください。画面構成
┌───────────────── ツールバー ─────────────────┐
├──────────────────────┬───────────────────────┤
│ │ side-panel │
│ キャンバス │ Config（設定パネル） │
│ （PDF＋配置） │ ＋ 配置要素のリスト │
│ │ /プロパティ │
└──────────────────────┴───────────────────────┘1. ツールバー（上部）
| 項目 | 説明 |
|---|---|
| Gariban Designer ロゴ | ブランドマーク（クリック動作なし） |
| Config | 設定エディタを開く。設定 JSON を直接編集・貼り付け・コピー・エクスポート |
| + Add ▾ | 配置要素を追加するメニュー（下表） |
| ├ Field | レコードの単一フィールド値を配置 |
| ├ Row Field | 一覧/明細モードの行フィールド（index/combined 時に表示） |
| ├ Subtable | kintone のテーブル（サブテーブル）を配置 |
| ├ Related | 関連レコード一覧を配置 |
| ├ Text | 固定文字（静的テキスト）を配置 |
| ├ Image | 画像（添付ファイル等）を配置 |
| └ FlowBox | 自動折返しの可変ボックスを配置 |
| Grid | グリッド線の表示 ON/OFF |
| Spacing | グリッド間隔（5 / 10 / 20 mm） |
| Snap / snap size | ドラッグ時のスナップ ON/OFF と単位（0.5〜5 mm） |
| Zoom | 表示倍率（50%〜200%） |
| X: -- mm, Y: -- mm | カーソルの現在座標（mm） |
| Align L（Alt+L） | 複数選択した要素を左揃え |
| Align T（Alt+T） | 複数選択した要素を上揃え |
| Reset | 編集中の内容を初期化 |
| Home | トップページへ移動 |
| About | バージョン/開発元情報 |
2. キャンバス & ページ操作
- キャンバス: 読み込んだ PDF を表示し、その上に配置要素をドラッグで置く。
- オーバーレイ: 配置した要素の枠・座標を重ねて表示。
- ← / →（ページ送り）: 複数ページ PDF のページ移動。
pageプロパティで各ページに割り当て。 - 座標系は 左上原点・mm 単位。
3. 設定パネル（Config）
帳票テンプレート
名前付きのレイアウト（設定の型）を複数管理する。kintone 側で「どの帳票を出すか」を選ぶ単位。
- ドロップダウン: 編集対象のテンプレート（キー）を切替。
- ＋ / ✎ / ×: テンプレートの 追加 / 改名 / 削除。
- ja / en: 表示ラベル（多言語）。
PDF Source（PDFソース）
帳票の元 PDF を選ぶ。
- host / key: 配信元（Manager で発行した値）。
- file: ソースの選択。host・key が有効なら配信ファイル一覧、未設定/無効ならデフォルトテンプレート（
/templates/*）と白紙が file として表示される。 - ↻: ファイル一覧の再取得。
- Load Source: 選択中ソース（templateUrl）の PDF を読み込み直す。
mode（出力モード）
- detail: レコード詳細（1レコード→1帳票）。
- index: 一覧（複数レコードを行として並べる）。
- combined: 複合（詳細＋繰り返しの組合せ）。
Buttons（features）
kintone に表示する出力ボタンの種類：detail / index / batch（個別PDF一括）/ combined。
その他のフィールド
| 項目 | 説明 |
|---|---|
templateUrl | 元 PDF の配信 URL（PDF Source で選ぶと自動入力。直接入力も可） |
font / fontUrl | 同梱フォントの選択 / フォントの配信 URL |
fileName | 出力 PDF のファイル名（{レコード番号} 等のプレースホルダ可） |
index / combined 用パラメータ（該当モード時のみ）
| 項目 | 説明 |
|---|---|
rowPitch | 行の縦間隔（mm） |
rowCount | 1ページあたり行数（0=自動） |
columns / colPitch | 列数 / 列の横間隔（mm） |
| override for page N | 特定ページだけ rowPitch/rowCount を上書き、record 1 から振り直し |
4. 配置要素の種別
「+ Add」で追加。キャンバス上にドラッグで配置し、右パネルのリスト/プロパティで調整する。
| 種別 | 用途 |
|---|---|
| Field | レコードの単一フィールド値（取引先名・金額など） |
| Row Field | index/combined の各行に展開されるフィールド |
| Subtable | kintone テーブルの各行を縦に展開 |
| Related Records | 関連レコード一覧を展開 |
| Static Text | 固定の文字列（見出し・注記など） |
| Image | 画像（添付ファイル/固定画像） |
| FlowBox | 内容量に応じて自動で折返す可変ボックス |
セクション見出し横の数字は配置数。セクション上部の既定値（fontSize/align/maxWidth）は、その種別の新規要素の初期値。
5. 要素のプロパティ（Properties パネル）
要素を選択すると表示される。Field の主な項目（他種別も概ね共通＋固有項目）：
| 項目 | 説明 |
|---|---|
fieldCode | 値を取得する kintone フィールドコード |
page | 配置するページ番号（0始まり） |
x / y (mm) | 左上からの座標 |
fontSize | 文字サイズ |
align | 水平揃え（left / center / right） |
vAlign | 垂直揃え（top / middle / bottom） |
maxWidth / maxHeight (mm) | 描画領域の上限（未指定=無制限） |
overflow | はみ出し処理：hidden(切詰) / wrap(折返し) / shrink(自動縮小) |
format | 値の整形：currency / number / dateSlash / dateJP / postcode |
prefix / postfix | 値の前後に付ける固定文字 |
color | 文字色 |
decoration | B（太字）/ I（斜体）/ U（下線）/ S（取消線） |
操作ボタン: Duplicate（複製）/ → Row Field（変換）/ Copy Style・Paste Style（書式コピー）/ Delete Field（削除）
各種別の固有プロパティ（Subtable の行設定、Image のサイズ、FlowBox のアイテム等）と JSON 上の全キーは
config-spec.md を参照。6. キーボードショートカット
| キー | 動作 |
|---|---|
| Ctrl+Z | 元に戻す（Undo） |
| Ctrl+Shift+Z / Ctrl+Y | やり直し（Redo） |
| Ctrl+C / X / V | コピー / 切り取り / 貼り付け |
| Delete / Backspace | 選択要素を削除 |
| 矢印キー | 選択要素を 0.5 mm 移動（Shift＋で 5 mm） |
| Alt+L / Alt+T | 複数選択の 左揃え / 上揃え |
| Ctrl（押下中） | キャンバスのパン（移動） |
7. 作業の流れ
- PDF Source で元 PDF を読み込む（Load Source）。
- 必要なら 帳票テンプレートを追加し、mode と Buttons を設定。
- + Add で要素を置き、ドラッグ＆Propertiesで位置・書式を調整。
- Config から設定 JSON をエクスポート。
- その JSON を kintone の拡張設定プラグインに登録（導入手順は setup-guide 参照）。