レポートシートを利用するメリット
SpreadJSのレポートシートは、帳票をWeb上に表示するだけでなく、既存のExcel資産を活用しながら帳票業務を効率化・自動化できる強力な機能です。
主なメリットは次のとおりです。
- Excel帳票をテンプレート化してそのまま再利用できる
- ノーコードで直感的に帳票を設計・編集できる
- データバインドによりWeb上で動的に帳票を表示できる
- 帳票システムの開発・保守の工数を大幅に削減できる
- そのままPDF出力や印刷もできる
このように、SpreadJSのレポートシートは、Excel資産の活用・開発工数の削減・紙とWebのハイブリッド運用といった観点から、実務での帳票開発を力強くサポートします。
既存のExcel帳票をWebに移行する方法
SpreadJSの「レポートシート」機能を活用すれば、既存のExcel帳票をそのままテンプレートとして読み込み、Webアプリ上で再利用することが可能です。
ここでは、無料でダウンロードした請求書テンプレートを例に、帳票テンプレートのインポートからWeb上での表示までの手順をご紹介します。
1. Excelファイルをインポート
レポートシートを開いた状態で、上部メニューから「デザイン」→「テンプレートをインポート」を選択し、インポート対象となるExcelファイルを読み込みます。
インポート後、SpreadJSデザイナ上に元のExcel帳票と同じレイアウトが表示されれば、取り込みは成功です。
元のExcelファイルに含まれる数式や関数も、SpreadJSのレポートシート上でそのまま利用可能です。明細行の2行目以降（計算式やサンプルデータを含む部分）は、テンプレートとして利用する際に不要なため、削除しておきましょう。
2. データソースの定義とバインド
帳票に差し込むデータは、あらかじめJSON形式で用意します。今回は請求明細データを10件含む「invoices.json」を作成し、json-serverを使ってローカルAPIとして提供できるようにします。
{
"invoices": [
{
"ID": 1,
"CustomerID": 1,
"CustomerName": "ABC株式会社",
"InvoiceNo": "1001",
"InvoiceDate": "2024/04/30",
"Subject": "ライティング案件（メディアA）",
"Description": "コラム記事執筆（SEO対応）",
"Quantity": 1,
"Unit": "式",
"UnitPrice": 8882
},
{
"ID": 2,
"CustomerID": 1,
"CustomerName": "ABC株式会社",
"InvoiceNo": "1001",
"InvoiceDate": "2024/04/30",
"Subject": "ライティング案件（メディアA）",
"Description": "軽微なWebデザイン調整",
"Quantity": 3,
"Unit": "本",
"UnitPrice": 18657
},
{
"ID": 3,
"CustomerID": 1,
"CustomerName": "ABC株式会社",
"InvoiceNo": "1001",
"InvoiceDate": "2024/04/30",
"Subject": "ライティング案件（メディアA）",
"Description": "サービス紹介ページのテキスト作成",
"Quantity": 2,
"Unit": "件",
"UnitPrice": 18424
},
{
"ID": 4,
"CustomerID": 1,
"CustomerName": "ABC株式会社",
"InvoiceNo": "1001",
"InvoiceDate": "2024/04/30",
"Subject": "ライティング案件（メディアA）",
"Description": "バナー文言提案",
"Quantity": 3,
"Unit": "件",
"UnitPrice": 18988
},
{
"ID": 5,
"CustomerID": 1,
"CustomerName": "ABC株式会社",
"InvoiceNo": "1001",
"InvoiceDate": "2024/04/30",
"Subject": "ライティング案件（メディアA）",
"Description": "LP原稿作成（構成案込み）",
"Quantity": 2,
"Unit": "本",
"UnitPrice": 14717
},
{
"ID": 6,
"CustomerID": 2,
"CustomerName": "テックワークス合同会社",
"InvoiceNo": "1002",
"InvoiceDate": "2024/05/10",
"Subject": "Webコンテンツ制作案件",
"Description": "軽微なWebデザイン調整",
"Quantity": 1,
"Unit": "本",
"UnitPrice": 12020
},
{
"ID": 7,
"CustomerID": 2,
"CustomerName": "テックワークス合同会社",
"InvoiceNo": "1002",
"InvoiceDate": "2024/05/10",
"Subject": "Webコンテンツ制作案件",
"Description": "コラム記事執筆（SEO対応）",
"Quantity": 1,
"Unit": "本",
"UnitPrice": 9154
},
{
"ID": 8,
"CustomerID": 2,
"CustomerName": "テックワークス合同会社",
"InvoiceNo": "1002",
"InvoiceDate": "2024/05/10",
"Subject": "Webコンテンツ制作案件",
"Description": "バナー文言提案",
"Quantity": 1,
"Unit": "件",
"UnitPrice": 11616
},
{
"ID": 9,
"CustomerID": 2,
"CustomerName": "テックワークス合同会社",
"InvoiceNo": "1002",
"InvoiceDate": "2024/05/10",
"Subject": "Webコンテンツ制作案件",
"Description": "コラム記事執筆（SEO対応）",
"Quantity": 1,
"Unit": "件",
"UnitPrice": 10135
},
{
"ID": 10,
"CustomerID": 2,
"CustomerName": "テックワークス合同会社",
"InvoiceNo": "1002",
"InvoiceDate": "2024/05/10",
"Subject": "Webコンテンツ制作案件",
"Description": "軽微なWebデザイン調整",
"Quantity": 2,
"Unit": "本",
"UnitPrice": 18132
}
]
}
次のコマンドでローカルサーバを起動してください。
json-server invoices.json -p 3000
ブラウザで「http://localhost:3000/invoices」にアクセスし、JSONデータが表示されれば準備完了です。
次に、SpreadJSデザイナを開き、レポートシートにデータソースを設定します。左側の「データソース」パネルから「テーブルの追加」を選び、以下の情報を入力してください。
- テーブル名：invoices
- 取得方法：GET（そのまま）
- URL：http://localhost:3000/invoices
設定が完了すると、データ項目をシート上にドラッグ＆ドロップできるようになります。明細行にあたる表部分のセルを選択し、右ペインの「セル型」を「リスト」に設定してください。これにより、複数行のデータを繰り返し表示できるようになります。
さらに、帳票レイアウトが固定行の明細表である場合は、「スピル時に上書きする」にもチェックを入れておきます。これでデータが流し込まれたときにレイアウトが伸長することなく、固定行の明細表を作成することができます。
各セルには、前半で作成した社員リストと同じ感覚で、データソースのパネルからDescription、Quantity、Unit、UnitPriceのフィールドをドラッグ＆ドロップしてデータバインドします。
最後に、1ページ単位で帳票を出力するため、コンテキスト（キー項目）を設定します。伝票番号を表示するセルを選び、右ペインの「拡張」タブから「コンテキスト」を「ユーザー設定」に変更し、「InvoiceNo」が入力されているセルを指定してください。
この設定により、請求書番号ごとに1ページとして帳票が生成され、複数の取引先への一括出力にも対応できます。
3. プレビューで確認して保存
レイアウトとデータバインドが完了したら、「デザイン」メニューの「プレビュー」ボタンで帳票の表示内容を確認します。請求書ごとにページが分かれ、明細やヘッダー、金額の計算式などが正しく表示されていればOKです。
問題がなければ、テンプレートを 「.sjs形式」で保存しておきましょう。
4. Webアプリ用ファイルを準備してWebで表示
作成した帳票テンプレート（.sjsファイル）をWebページ上に表示するには、プロジェクトファイル一式を準備する必要があります。
具体的な手順やファイル構成については、Page1「4.Webで表示準備」および技術記事を参照してください。また、サンプルが公式のGitHubでも公開されています。ページングや印刷、PDF出力などの実装方法もこちらをご参考ください。
準備が整ったら、index.html を右クリックして「Open with Live Server」を選択します。帳票テンプレートとJSONデータが正しくバインドされていれば、Webページ上に帳票が表示されます。
複数の請求書データがある場合は、コンテキスト設定に従ってページごとに分割表示されていれば成功です。
