コードの座標手打ちに、 設計画面を
帳票のレイアウトをコードの座標指定で書く必要はもうありません。キャンバスで設計し、結果をコードとして受け取れます。
帳票デザイナー · OSS
帳票をブラウザで設計し、
いつものライブラリへ 書き出す。
請求書や納品書のレイアウトをブラウザで設計し、様々な PDF ライブラリのテンプレートやコードとして書き出せます。レイアウトはオープンな JSON 中間表現。Git で管理でき、特定のライブラリにロックインされません。
- 01アカウント不要・ブラウザ完結
- 02レイアウトは Git で差分管理
- 03適格請求書の記載チェック内蔵
書き出し
デザインから、動くコードへ
デザイナーからいつものライブラリに書き出し可能。
※現在は pdfme / ReportLab のみ
import os import sys from reportlab.lib.units import mm from reportlab.pdfbase import pdfmetrics from reportlab.pdfbase.ttfonts import TTFont from reportlab.pdfgen.canvas import Canvas FONT_NAME = "NotoSansJP" FONT_FILE = "NotoSansJP.ttf" FONT_ASCENT_EM = 1.16 PAGE_WIDTH = 210 * mm PAGE_HEIGHT = 297 * mm PAGE_COUNT = 1 …
Principles
設計の柱
オープンな中間表現
レイアウトはバージョン管理された JSON。パーサと検証機能が付属し、denReport 自体にロックインされません。Git で差分を追えます。
ブラウザ完結
サーバーもアカウントも不要。デザイナー・中間表現・書き出し器のすべてが手元のブラウザで動き、帳票のデータは環境から出ません。
Everything you need
主な機能
ここに挙げた機能はすべて実装済みで、無料で使えます。
ビジュアルデザイナー
テキスト・図形・画像・バーコード / QR・複数ページに分割される表を、絶対座標のキャンバスに配置できます。行・列の flex コンテナで繰り返しのレイアウトも組めます。
日本語組版の基礎
書き出しに使うフォントを編集画面にも埋め込むため、字幅の計算が設計と出力で一致します。行頭禁則処理と均等割付に対応します。
適格請求書の記載チェック
文書を適格請求書（インボイス）に指定すると、法律で求められる記載事項が揃っているかを検証パネルで確認できます。
検証できる文書形式
レイアウトはバージョン管理された JSON。パーサとスキーマ検証が付属し、denReport の外のプログラムからも扱えます。
pdfme / ReportLab 書き出し
pdfme のテンプレート＋入力データと、フォント同梱で単体実行できる ReportLab の Python コードを、同じ IR から生成します。
互換性警告
書き出す前に、選んだターゲットで近似される・非対応になる箇所を一覧で示します。PDF を開いてからではなく、設計の時点で分かります。
組み込む · セルフホストする
自分の環境で動かす
ホスト型サービスに預けず、あなたのアプリや社内環境の中で完結させられます。
製品に組み込む
@denreport/designer は、小さな Designer クラスで自分のアプリに組み込めます。
import { Designer } from "@denreport/designer"; import "@denreport/designer/styles/tokens.css"; import "@denreport/designer/styles/app.css"; const designer = new Designer( document.getElementById("app")! );
ライセンス: MIT。すべての機能を無償で使えます。
ソースから動かす
リポジトリをクローンして、手元で開発サーバーを起動します。Node.js 24 以上と pnpm が必要です。
git clone https://github.com/denreport/denreport.git cd denreport corepack enable pnpm install pnpm --filter @denreport/web dev
Vite の開発サーバーが起動します。表示された URL を開いてください。