2024年9月10日にリリースされたJavaScriptスプレッドシートライブラリ「SpreadJS（スプレッドJS）」の最新バージョン「V17.1J」では、さまざまなレイアウトの帳票が開発できる「レポートシート」機能を追加しました。
このシリーズでは、レポートシートについて、基本的な使い方や便利な応用例などをご紹介します。今回はレポートシートを使用して行数が固定の明細を持つレイアウトの帳票を作成する方法を解説します。
固定行の帳票を作成する
帳票にはデータ件数に応じて明細行の行数が増加し、表部分が伸長する「可変帳票」と、データ件数に関わらず明細行の行数が固定（データが無い行は空行として出力）で、表部分のレイアウトが変わらない「固定帳票」があります。
第1回の記事では前者のデータの数に応じて表が伸長するレイアウト可変の帳票を作成しましたが、今回は後者の明細行の行数が固定のレイアウトにデータを流しこんでいくような帳票を作成していきます。
テンプレートシート（帳票レイアウト定義）の作成
デザイナの起動
まずは帳票レイアウトを定義するテンプレートシートを作成していきます。コードで組むことも可能ですが、GUIでデザインできる製品付属のSpreadJSデザイナや、オンラインデザイナを使用する方法がおすすめです。
今回はデスクトップアプリのSpreadJSデザイナを使用していきます。無償のトライアル版は以下よりダウンロード可能です。
インストール方法等は製品ヘルプをご覧ください。
デザイナを起動し、メニューから「挿入」-「レポートシート」を選択すると、ワークブックにレポートシートが追加され、帳票のデザインが可能になります。
データソース（テーブル）の追加
まずは帳票に表示するデータソース（テーブル）の設定を行います。今回はREST APIのモックサーバーを手軽に構築できるライブラリ「json-server」を使って連携を行います。json-serverの使用方法については以下の記事で解説しているのでこちらをご覧ください。
今回は以下のようなJSONデータを使用します。
{
"Invoices": [
{
"BillNo": "I-88392",
"ShopID": "S-00001",
"ShopName": "北日本株式会社",
"CustomerName": "島村康子",
"Address": "宮城県仙台市青葉区本町9-9-9",
"PostalCode": "980-0014",
"ProductName": "スイートアーモンド",
"UnitPrice": 90,
"QTY": 200,
"BillingDate": "2024/09/05",
"DueDate": "2024/09/19",
"ShippingCost": 900
},
{
"BillNo": "I-88392",
"ShopID": "S-00001",
"ShopName": "北日本株式会社",
"CustomerName": "島村康子",
"Address": "宮城県仙台市青葉区本町9-9-9",
"PostalCode": "980-0014",
"ProductName": "グレープシード",
"UnitPrice": 120,
"QTY": 100,
"BillingDate": "2024/09/05",
"DueDate": "2024/09/19",
"ShippingCost": 900
},
{
"BillNo": "I-88392",
"ShopID": "S-00001",
"ShopName": "北日本株式会社",
"CustomerName": "島村康子",
"Address": "宮城県仙台市青葉区本町9-9-9",
"PostalCode": "980-0014",
"ProductName": "えごま",
"UnitPrice": 150,
"QTY": 50,
"BillingDate": "2024/09/05",
"DueDate": "2024/09/19",
"ShippingCost": 900
},
{
"BillNo": "I-88393",
"ShopID": "S-00002",
"ShopName": "居酒屋ななべえ",
"CustomerName": "紫山一郎",
"Address": "宮城県仙台市泉区青山123-1",
"PostalCode": "981-0088",
"ProductName": "オタル白ラベル",
"UnitPrice": 350,
"QTY": 100,
"BillingDate": "2024/09/07",
"DueDate": "2024/09/21",
"ShippingCost": 900
},
{
"BillNo": "I-88393",
"ShopID": "S-00002",
"ShopName": "居酒屋ななべえ",
"CustomerName": "紫山一郎",
"Address": "宮城県仙台市泉区青山123-1",
"PostalCode": "981-0088",
"ProductName": "バードワイン",
"UnitPrice": 500,
"QTY": 30,
"BillingDate": "2024/09/07",
"DueDate": "2024/09/21",
"ShippingCost": 900
}
]
}プロジェクトのフォルダに上記JSONファイルを配置し、ターミナル等から以下のコマンドを起動してモックのAPIを立ち上げます。
json-server invoices.json -p 3000以下のような画面が立ち上がったらAPIの起動は成功です。
APIが起動したら、「テーブルの追加」のメニューから起動したAPIのURLを設定し、「Invoices」テーブルを追加します。
帳票をデザインする
テーブルが追加出来たら、帳票をデザインしていきます。Excelで帳票レイアウトを作成する感覚で以下のようなレイアウトを作成します。明細表の部分は固定行のレイアウトになっています。
データバインドとセル型の設定
先程レポートシートに追加したデータソースからデータを流し込むセルに対してデータバインドとセル型の設定を行います。データバインドは左側の「データソース」タブからテーブルのフィールドをドラッグ＆ドロップする、もしくは右側の「テンプレートセル」タブから設定します。
セル型は右側の「テンプレートセル」タブから設定可能です。
今回データバインドするセルとセル型は以下の通りです。一覧表示するデータは「リスト」型、請求書番号や請求先の情報など、一度しか表示しないデータは「グループ」型にします。
| セル番号 | バインドするフィールド | セル型 |
|---|---|---|
| B2 | PostalCode | グループ（通常のグループ） |
| B3 | Address | グループ（通常のグループ） |
| B4 | ShopName | グループ（通常のグループ） |
| B6 | CustomerName | グループ（通常のグループ） |
| F2 | BillNo | グループ（通常のグループ） |
| F3 | BillingDate | グループ（通常のグループ） |
| F4 | DueDate | グループ（通常のグループ） |
| A14 | ProductName | リスト |
| D14 | UnitPrice | リスト |
| E14 | QTY | リスト |
| F37 | ShippingCost | グループ（通常のグループ） |
スピル時の上書き設定
レポートシートにおける「スピル」とは、バインドしたデータを流し込んだ時に、明細データなど対象のデータが複数件存在する場合に、隣接するセルにそのデータが溢れて流れ込んでいくことを示します。
セル型を「リスト」に設定すると、「スピル時に上書きする」のオプションが使用できるようになり、これにチェックを入れると、流し込まれたデータはテンプレートシートのレイアウトを上書くようにデータが表示されます。
一方で、「スピル時に上書きする」のオプションにチェックを入れない場合は、流し込まれたデータの分、新規行を追加してデータが表示されます。
よって、データに応じて明細部分が伸長する可変帳票ではなく、行数が固定のレイアウトの帳票の明細部分を作成するには「スピル時に上書きする」のオプションにチェックを入れる必要があります。今回は以下のセルに対して、本オプションのチェックボックスにチェックします。
| セル番号 | スピル時に上書きする |
|---|---|
| A14 | True（チェックする） |
| D14 | True（チェックする） |
| E14 | True（チェックする） |
コンテキストの設定
もう1つレポートシートを使う上で重要な要素が「コンテキスト」です。レポートシートは指定されたコンテキストによってセルのデータをフィルタリングし、レポートのレイアウトを制御します。すべてのセルはコンテキストを1つのまとまりとして繰り返し出力されます。
セルを選択した時に、そのセルとは別に青く囲まれて表示されるのがそのセルのコンテキストのセルです。
コンテキストは自動的に設定されますが、一部のセルは手動で設定しないとうまくレイアウトが描画されません。今回の場合は以下のセルに対して、コンテキストをこのレポートのキー項目である請求書番号の「F2」セルを設定します。
| セル番号 | コンテキスト |
|---|---|
| A1 | ユーザー設定（F2） |
| A35:F45 | ユーザー設定（F2） |
関数と数式の設定
レポートシートではExcel互換の関数や数式を使って各種データの計算や集計が可能です。今回は以下のようにいくつかのセルに関数と数式を設定しています。
| セル番号 | 設定する関数と数式 |
|---|---|
| F14 | =D14*E14 |
| F35 | =SUM(F14:F34) |
| F36 | =F35*0.1 |
| F39 | =F35+F36+F37 |
帳票をプレビューする
以上で帳票レイアウトの作成は完了です。「デザイン」メニューから「プレビュー」を選択すると、デザイナ上でレポートシートをプレビュー表示できます。APIから取得したデータを固定の帳票レイアウト上に出力することが確認できます。
Webアプリケーションにレポートシートを組み込む
最後に仕上げとして作成したテンプレートシートを保存して、Webアプリケーションに組み込んでレポートシートを実行してみたいと思います。あらかじめ先ほど作成したテンプレートシートをsjs形式で保存しておいてください。ファイル名は「Fixed-Invoice.sjs」としました。
開発環境
今回は開発環境として以下を使用します。
Webアプリケーションの作成
「index.html」ファイルを作成し、製品版、またはトライアル版に含まれるSpreadJSの各種ライブラリをコピーして参照を追加し、加えてレポートシートを表示する領域を定義します。また、今回はページングを行うためのボタンも追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>レポートシートサンプル</title>
<link rel="stylesheet" type="text/css" href="css/gc.spread.sheets.excel2013white.17.1.5.css">
<script src="scripts/gc.spread.sheets.all.17.1.5.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.resources.ja.17.1.5.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.io.17.1.5.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.shapes.17.1.5.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.charts.17.1.5.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.print.17.1.5.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.pdf.17.1.5.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.report.reportsheet.17.1.5.min.js" type='text/javascript'></script>
<script src="scripts/app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="btn-container">
<button id="previous" class="btn btn-secondary">前のページ</button>
<span id="current"></span>ページ／<span id="all"></span>ページ
<button id="next" class="btn btn-secondary">次のページ</button>
</div>
<div class="show-area">
<div id="ss"></div>
</div>
</body>
</html>「scripts」フォルダ配下に「app.js」ファイルを作成し、先ほど保存したsjsファイルを読み込んでレポートシートを実行します。また、以下のレポートシートのAPIを使用してページングの処理も実装します。
※ ライセンスキーを設定しない場合、トライアル版を示すメッセージが表示されます。ライセンスキーの設定方法についてはこちらをご覧ください。
| API名 | 説明 |
|---|---|
| currentPage | 現在のページインデックスを取得または設定します。 |
| getPagesCount | レポートのページ数を取得します。 |
// 日本語カルチャー設定
GC.Spread.Common.CultureManager.culture("ja-jp");
GC.Spread.Sheets.LicenseKey = "ここにSpreadJSのライセンスキーを設定します";
// SpreadJSの設定
document.addEventListener("DOMContentLoaded", () => {
const previousButton = document.getElementById('previous');
const nextButton = document.getElementById('next');
const spread = new GC.Spread.Sheets.Workbook("ss");
let reportSheet;
//----------------------------------------------------------------
// sjs形式のテンプレートシートを読み込んでレポートシートを実行します
//----------------------------------------------------------------
const res = fetch('reports/Fixed-Invoice.sjs').then((response) => response.blob())
.then((myBlob) => {
spread.open(myBlob, () => {
console.log(`読み込み成功`);
reportSheet = spread.getSheetTab(0);
// レポートシートのオプション設定
reportSheet.options.renderMode = 'PaginatedPreview';
reportSheet.options.printAllPages = true;
// レポートシートの印刷設定
var printInfo = reportSheet.printInfo();
printInfo.showBorder(false);
printInfo.zoomFactor(1);
reportSheet.printInfo(printInfo);
reportSheet.refresh();
initPage();
}, (e) => {
console.log(`***ERR*** エラーコード（${e.errorCode}） : ${e.errorMessage}`);
});
});
//------------------------------------------
// 前のページボタン押下時の処理
//------------------------------------------
previousButton.onclick = function () {
const page = reportSheet.currentPage();
if (page != 0) {
reportSheet.currentPage(page - 1);
initPage()
}
}
//------------------------------------------
// 次のページボタン押下時の処理
//------------------------------------------
nextButton.onclick = function () {
const page = reportSheet.currentPage();
if (page < reportSheet.getPagesCount() - 1) {
reportSheet.currentPage(page + 1);
initPage()
}
}
//------------------------------------------
// 現在のページと全ページ数の表示
//------------------------------------------
function initPage() {
document.getElementById('current').innerHTML = reportSheet.currentPage() + 1;
document.getElementById('all').innerHTML = reportSheet.getPagesCount();
}
});
「css/styles.css」を作成し、スタイルの設定を追加します。
body {
width: 650px;
}
.btn-container{
margin: 15px;
}
.show-area {
margin: 15px;
border: solid black;
}
#ss{
width:615px;
height:900px
}以上でWebアプリケーションの作成は完了です。「index.html」を右クリックして「Open with Live Server」を実行し、開発サーバーでアプリケーションを起動します。
※ アプリケーションの実行前に、あらかじめjson-serverを実行してAPIを起動してください。
起動したアプリケーション上でレポートシートが実行され、デザイナで作成した固定行の帳票をブラウザ上に表示することができました。また、ページングも可能です。
今回作成したアプリケーションはこちらからダウンロード可能です。
さいごに
今回はSpreadJSの「レポートシート」で行数が固定の明細表を持つ帳票の作成方法を解説しました。レポートシートを使用することで、SpreadJSを使用した帳票開発が格段に楽になりますので、是非お試しいただけますと幸いです。
弊社Webサイトには、レポートシートで作成した数々の帳票サンプルが確認できるデモアプリケーションや、無料のトライアル版がございますので、こちらもご確認ください。