クイックスタート
最短で、最初の帳票を pdfme と ReportLab へ書き出すまでを追います。所要時間はおよそ 5 分です。
denReport はブラウザ内で完結して動作します。サーバー側の仕組みやアカウントはなく、デザイナー・中間表現・書き出し器のすべてがクライアントサイドで動きます。まずはリポジトリを手元で起動し、白紙のキャンバスから最初の帳票を組み立ててみましょう。
denReport はまだ 1.0 未満です。ここで扱う
@denreport/web は、リポジトリを実行すると得られるリファレンスアプリです。
必要なもの
次の 2 つが必要です。バージョンは固定してあり、これ以外は不要です。
- Node.js 24 以上
- pnpm（Corepack 経由で有効化）
インストール
リポジトリをクローンし、依存をインストールします。
git clone https://github.com/denreport/denreport.git
cd denreport
corepack enable
pnpm install
デザイナーを開く
開発サーバーを起動します。Ctrl + C で停止できます。
pnpm --filter @denreport/web dev
Vite が表示する URL（既定では http://localhost:5173）を開くと、デザイナーが起動します。左のパレットから要素をキャンバスへドラッグして配置します。
最初の帳票
denReport のレイアウトは、バージョン管理された JSON の**中間表現（IR）**として保存されます。座標は左上原点のミリメートル。次は最小の請求書レイアウトの例です。
{
"version": "1.1",
"page": { "width": 210, "height": 297 },
"font": { "name": "Noto Sans JP" },
"elements": [
{ "type": "text", "id": "title", "x": 15, "y": 18,
"w": 80, "h": 10, "text": "請求書",
"fontSize": 18, "align": "left", "lineHeight": 1.25 },
{ "type": "table", "id": "items", "x": 15, "y": 70,
"bind": "items",
"columns": [
{ "key": "name", "label": "品目", "width": 90 },
{ "key": "qty", "label": "数量", "width": 20 },
{ "key": "amount", "label": "金額", "width": 30 }
],
"rowHeight": 7, "headerHeight": 8, "minRows": 10 }
]
}
データは扱いません。 IR に持つのはレイアウトと結合キー（
bind）だけです。明細の実データは書き出し時に外から与えます。
書き出す
ツールバーの「書き出し」から、ターゲットを選びます。どちらも同じ IR から生成され、書き出し前に互換性の警告が示されます。
| 表現 | pdfme | ReportLab |
|---|---|---|
| テキスト・罫線・矩形 | 対応 | 対応 |
| 複数ページに分割される表 | 対応 | 対応 |
| 均等割付（justify） | 対応 | 対応 |
| 楕円 | 対応 | 対応 |
書き出しの成果物は、pdfme ではテンプレート＋入力データ（JSON）、ReportLab ではフォント同梱で単体動作する Python コードです。いずれも生成物に表示義務や開示義務はありません。
次に読む
- 主要な概念 — 中間表現・ターゲット・互換性マトリクスの関係（準備中）
- 表とページ分割 — 明細が複数ページにまたがる帳票の設計（準備中）
- 中間表現 IR の仕様 — 要素の型と属性の全リファレンス（準備中）