帳票として、できること

いつもの請求書も、
業務に合わせた一枚も。

決まった位置に文字を入れる。罫線で明細を区切る。ロゴや印影を添える。Reports Webで作れる帳票と、その使い道をご紹介します。

業務の書式に合わせて、帳票を作る。

請求書や見積書で使う、細かな罫線や決まった位置の項目。デザイナーで書式を作り、プログラムから業務データを流し込みます。

請求書の構成例。宛名・ロゴ・印影を配置し、明細の数量と金額を右寄せにして合計欄を強調する。 — 帳票の構成例（説明用）。配置するもの、データに応じて変えるものを組み合わせます。

決まった書式を、そのまま作る

請求書・見積書・納品書など、項目の位置や明細の行数を揃えたい帳票に。文字・罫線・図形を配置して、業務に合ったレイアウトを作れます。

文字と罫線を細かく整える

見出しは中央に、数量や金額は右に。文字の位置・サイズ・色や、罫線・囲み・背景色を調整して、読みやすい帳票に仕上げます。

ロゴ・印影・写真を載せる

会社ロゴや角印、商品写真を帳票へ。固定の画像だけでなく、プログラムからデータに合わせて画像を差し替えられます。

明細とページをコードで制御する

データ件数に応じて明細を繰り返し、ページの区切りや出力順をプログラムで指定できます。表紙と明細など、異なる帳票をまとめた出力にも使えます。集計や業務上の計算はアプリケーション側で行い、その結果を帳票へ渡します。

バーコード・QRコードを載せる

商品番号や伝票番号を、読み取れるコードとして出力。JAN・CODE128・CODE39・NW-7・ITF・QRコード・DataMatrix・PDF417・郵便カスタマバーコードを扱えます。

確認して、印刷・PDF出力する

プレビュアーでページを送り、拡大して細部を確認。そのまま印刷したり、PDFにして配布したりできます。アプリにプレビュー部分を組み込み、ツールバーの表示を切り替える使い方もできます。

フォントや印刷設定、利用する方式によって対応範囲や出力結果が異なる場合があります。すべての環境で表示が無条件に一致するという意味ではありません。具体的な使い方・制限は各マニュアルで確認できます。

まずは請求書を表示してみる →ほかの帳票も試してみる →

A DOCUMENT YOU CAN PASS ON

完成した帳票を、あとからもう一度。

完成した印刷データを保存し、開き直して確認・再印刷したり、別のシステムへ渡したりできます。デザインは .prepdj、完成した印刷データは .prepej として保存します。

帳票定義PREPDJと業務データから印刷データPREPEJを作成し、保存・受け渡し・プレビュー・印刷・PDF出力につなぐ流れ。 — 印刷データを作る処理と、それを表示する処理を分けて組み込めます。

外部画像などの参照を含むファイルは、受け取る環境からその資源を読めることが必要です。ファイル一つで必ず完結するという意味ではありません。既存製品間の互換性は、対象バージョンと機能ごとに確認します。

WASM方式で試す

使う言語から、帳票を出してみましょう。

7言語にデモと実装ガイドを用意しています。請求書や見積書など、同じ帳票を各言語のコードから作る例です。

各言語の薄いラッパーが業務データを共通の印刷データへまとめ、JavaScriptを通してWASM帳票エンジンへ渡します。各言語にWASMエンジンを移植したものではありません。構成図で役割を見る →

BROWSER OR SERVER

WASM方式では、PDFを作る場所も選べます。

同じサンプルで、2つの方法を切り替えて体験できます。

BROWSER / FRONTEND

操作している、その場で。

ブラウザに届いた印刷データをWASMへ渡して、PDFを生成。利用者が内容を確認しながら出力する入口です。

サーバーが不要という意味ではありません。データ取得や認証は業務アプリケーション側で行います。

SERVER / BACKEND

画面を開かずに作る構成へ。

サーバー側のNode.jsでWASMを動かし、PDFを返します。この入口を使えば、定時処理やAPI連携への組み込みも設計できます。

スケジュール管理やメール送信そのものは、組み込むシステム側で用意します。

画面で確認して、そのまま印刷。

ブラウザ上でページを確認して印刷します。PDF表示は別の出力経路です。SVGもPDFもベクター表現を扱えますが、フォントやブラウザの印刷設定で結果が異なる場合があります。

この製品を、ひとつにまとめた理由

Webを基本に。つくる場所も、使う言語も、自由に。

当初は、WebAssemblyを使ったブラウザー版だけを作る予定でした。ただ、帳票をじっくり設計し、ファイルを開いたり保存したりする作業には、パソコン上で動くデザイナーもあった方が使いやすい。そう考えて、Windows・Mac・Linuxでの利用を見据え、WPF・Java・Pythonのデザイナーを用意しました。

そこで、「せっかく各言語で帳票を描画できるのなら、設計だけでなく、帳票の作成・プレビュー・印刷までできるようにしよう」と考えました。デザイナー・エンジン・プレビュアーが揃えば、それぞれの言語で帳票機能を備えたデスクトップアプリケーションを作れます。パソコン内で完結させることも、REST APIでサーバーと連携させることもできます。

さらに、ここまで帳票エンジンを揃えたなら、Webアプリケーションでも使えるはずです。当初はWebAssemblyに任せる予定だった帳票処理も、システム全体をJavaなどの同じ言語で統一したい場合があります。そこで、Java・Python・.NETのエンジンを直接使い、サーバー側で帳票を生成する方式にも対応しました。

こうして、WebAssemblyの帳票エンジンを各言語から薄いラッパーを通して使う基本構成に、Pure Java版・Pure Python版・WPF／.NET版が加わり、現在のReports Webの構成になりました。

帳票デザインと完成した印刷データは、それぞれ共通形式です。ブラウザーとパソコンの間でデザインを引き継いだり、帳票を作成する環境と閲覧する環境を分けたりして使えます。