SalesforceデータからPDF帳票を作れるドラッグ&ドロップ型の帳票デザイナーを作った

はじめに

Salesforce で見積書や請求書のような PDF 帳票を扱うとき、意外と大変なのはデータ取得そのものよりもレイアウト調整です。

項目を少し追加したいだけでもテンプレートやコードの修正が必要になり、明細行や既存フォーマット対応まで入ると、運用コストはすぐに重くなります。

私自身も、ヘッダは親レコード、明細は子レコード、さらに既存の PDF フォーマットも活かしたい、という要件を何度か扱う中で、UI 上で帳票を組める仕組みが欲しくなりました。

そこで、私が開発している Salesforce 向けツール ForceKit に、Salesforce データを使って PDF 帳票を設計できる帳票デザイナー機能を追加しました。

この記事では、この機能でできることと、実装の考え方をまとめます。

• 試せるページ： https://www.forcekit.jp/report
  ※ ログイン後、対象画面が表示される形になります

背景

Salesforce まわりで帳票を扱うとき、よく次のような悩みがありました。

• レイアウト変更のたびに実装を触る必要がある
• 項目差し込みだけでなく、罫線や固定文言、ロゴも一緒に調整したい
• ヘッダは親レコード、明細は子レコード、という構成を作りたい
• 既存の PDF フォーマットの上に値を載せたい

単純なデータ出力ではなく、「業務帳票として整った見た目をどう維持するか」がボトルネックになりやすいと感じていました。

作ったもの

ForceKit の帳票デザイナーは、Salesforce のオブジェクトや項目を選び、キャンバス上でドラッグ&ドロップしながら PDF 帳票を設計できる機能です。

想定している主なユースケースは以下です。

• 見積書
• 請求書
• ラベル / カード形式の帳票
• 案内文や申込書のような業務 PDF
• 明細付きの PDF 帳票

できること

1. Salesforce 項目をそのまま配置できる

左側でオブジェクトと項目を選び、必要な項目をそのままキャンバスに配置できます。

単純なフィールドだけでなく、Lookup / Reference の親項目も辿れるので、関連オブジェクトの値も使えます。

「帳票のために API 名を調べて、別テンプレートに差し込む」という作業を減らすのが狙いです。

2. 静的要素も同じ画面で編集できる

動的項目だけでは帳票にならないので、静的要素も同じ画面で扱えるようにしています。

現在対応している主な要素は次の通りです。

• 項目
• テキスト
• 長方形
• 楕円
• 画像
• 横罫線
• 吹き出し
• 固定テーブル
• 子レコードテーブル

ロゴ、注意書き、罫線、固定文言、説明欄なども同じ画面で調整できるので、単なる差し込みテンプレートよりも帳票寄りの設計にしています。

3. 子レコードの明細テーブルを作れる

個人的に一番重要だったのが 子レコードテーブル です。

これを使うと、親レコードに紐づく子レコードを明細テーブルとして出力できます。

今のところ以下のような設定に対応しています。

• 子リレーションの選択
• 表示フィールドの選択
• where / order by / limit
• 列幅と寄せ方
• footer の集計 SUM / COUNT / AVG / MIN / MAX

見積書や請求書でよくある「ヘッダは親、明細は子」という構成を UI で組めるようにしたかったので、この機能はかなり中核です。

4. 背景 PDF の上に重ねて出力できる

既存の帳票フォーマットを使いたいケース向けに、背景 PDF をアップロードして、その上に Salesforce データや静的要素を重ねられるようにしています。

これで、

• 既存の帳票デザインを流用したい
• 完全に白紙から作り直したくない
• すでに業務で使っている見た目を維持したい

というケースにも対応しやすくなりました。

5. レコードをプレビューして選択生成できる

生成前に対象レコードをプレビューし、必要なレコードだけ選んで PDF を出力できます。

また、キャンバス側でもプレビュー切り替えができるので、実データを当てたときの崩れを事前に確認しやすくしています。

6. デザインの再利用ができる

作成したデザインは保存・再読込ができ、JSON の import / export にも対応しています。

さらに、最初から使える preset として次のテンプレートを用意しました。

• invoice
• label
• simple_list
• estimate

ゼロから始めるだけでなく、近いテンプレートをベースに帳票を作れるようにしています。

実装のざっくりした構成

構成はかなりシンプルです。

• バックエンド: Django
• フロントエンド: React + TypeScript
• デザインデータ: JSON レイアウト
• 出力: PDF 生成 + 背景 PDF 合成

レイアウトは、要素種別・座標・サイズ・スタイル・フィールド情報を含む JSON として保存しています。イメージとしては次のような形です。

{
  "version": 1,
  "pageSettings": {
    "paperSize": "A4",
    "orientation": "portrait"
  },
  "elements": [
    {
      "type": "field",
      "fieldName": "Name",
      "x": 10,
      "y": 20,
      "width": 80,
      "height": 8
    },
    {
      "type": "subquery_table",
      "childRelationship": "OpportunityLineItems",
      "x": 10,
      "y": 60,
      "width": 120,
      "height": 40
    }
  ]
}

PDF 生成時は、このレイアウトから必要な Salesforce 項目を集め、必要なら子クエリも組み立ててデータを取得し、PDF generator 側に渡しています。

実装上は次の点を意識しました。

• 画面上の配置情報をそのまま出力に使えること
• 静的要素と Salesforce 項目を同じキャンバスで扱えること
• 子明細テーブルのような帳票要件を後から足しやすいこと
• 背景 PDF とデザインレイヤーを分離して扱えること

向いているケース

この機能は特に次のようなケースに向いています。

• Salesforce データから見積書や請求書を素早く出したい
• レイアウト変更のたびに実装を増やしたくない
• 既存 PDF フォーマットを活かしたい
• ヘッダ + 明細の帳票を Web UI で組みたい

逆に、かなり複雑な承認フローや周辺業務ロジックまで含めた帳票運用は、まだこれから詰めていく余地があります。

まとめ

Salesforce の帳票は、データ取得だけでなく「見た目をどう作るか」で運用コストが増えやすいと思っています。

そこで今回は、項目配置・静的レイアウト・子明細・背景 PDF 合成をまとめて扱える帳票デザイナーを ForceKit に追加しました。

Salesforce データから PDF 帳票を作る運用に課題がある方は、試してみてもらえるとうれしいです。

🚀 ForceKit 公式サイト
https://www.forcekit.jp

ログイン後、Report Output から利用できます。