2024年9月10日にリリースされたJavaScriptスプレッドシートライブラリ「SpreadJS（スプレッドJS）」の最新バージョン「V17.1J」では、さまざまなレイアウトの帳票が開発できる「レポートシート」機能を追加しました。
このシリーズでは、「レポートシート」について、基本的な使い方や便利な応用例などをご紹介します。
目次
レポートシートとは？
「レポートシート」はExcelライクなデザイナで見積書や請求書などさまざまな帳票の作成ができる用途特化型のシートです。
従来のSpreadJSを使った帳票開発と何が違う？
これまでもSpreadJSでは「セルバインディング」や「テーブルバインディング」といった機能を使用して、いわゆるExcel帳票のような感覚で帳票開発が可能でした。
ワークシートにデータを流し込むことでシンプルに帳票開発ができる反面、コーディング量が多くなる、セル番号をハードコードするのでレイアウトの仕様変更に弱い、実現できるレイアウトが限られる、といった、いわゆるExcel帳票が内包するマイナス面を同様に持ち合わせていました。
レポートシートでは、製品付属のSpreadJSデザイナを帳票デザイナとして使用できます。Excel感覚で帳票がデザインできるほか、データバインドもGUIで設定できるので、帳票レイアウトの定義をノンコーディングで作成することも可能です。
また、流し込んだデータに応じてレイアウトが伸長（もしくは固定のレイアウトの上に上書き）していくので、Excelライクながらも本格的な帳票開発ツールのような機能性を提供します。
単票や一覧表のような基本的な帳票はもちろん、行列の両方にデータを展開するクロス集計表や、カラム形式（多段組）の帳票など、従来のSpreadJSでは作成が難しかったレイアウトの帳票も簡単に作成できます。
レポートシートの仕組み
レポートシートを使うには、帳票レイアウトの定義体を「テンプレートシート」という形式で用意します。これは前述のとおりSpreadJSデザイナで作成できるほか、コードで組むことも可能です。
さらにレポートシートをはじめとした用途特化型シートで使えるデータ管理機能である「データマネージャー」と連携することで、サーバー（Web API）から取得したデータソースを使用して手軽にWeb帳票の作成ができます。
レポートシートを使ってみよう！
ここからは実際にレポートシートを使って帳票作成を行う手順をご紹介します。今回は以下のようなシンプルな一覧表の帳票を作成してみたいと思います。
テンプレートシート（帳票レイアウト定義）の作成
デザイナの起動
まずは帳票レイアウトを定義するテンプレートシートを作成していきます。コードで組むことも可能ですが、GUIでデザインできる製品付属のSpreadJSデザイナや、オンラインデザイナを使用する方法がおすすめです。
今回はデスクトップアプリのSpreadJSデザイナを使用していきます。無償のトライアル版は以下よりダウンロード可能です。
インストール方法等は製品ヘルプをご覧ください。
デザイナを起動し、メニューから「挿入」-「レポートシート」を選択すると、ワークブックにレポートシートが追加され、帳票のデザインが可能になります。
データソース（テーブル）の追加
まずは帳票に表示するデータソース（テーブル）の設定を行います。今回はREST APIのモックサーバーを手軽に構築できるライブラリ「json-server」を使って連携を行います。json-serverの使用方法については以下の記事で解説しているのでこちらをご覧ください。
今回は以下のようなJSONデータを使用します。
{
"products":[
{
"ProductID": 1,
"ProductName": "果汁100% オレンジ",
"QuantityPerUnit": "200g×12瓶",
"UnitPrice": 2000
},
{
"ProductID": 2,
"ProductName": "果汁100% グレープ",
"QuantityPerUnit": "200g×12瓶",
"UnitPrice": 2000
},
{
"ProductID": 3,
"ProductName": "果汁100% レモン",
"QuantityPerUnit": "200g×12瓶",
"UnitPrice": 2000
},
{
"ProductID": 4,
"ProductName": "コーヒーマイルド",
"QuantityPerUnit": "195g×10缶",
"UnitPrice": 1900
},
{
"ProductID": 5,
"ProductName": "コーヒービター",
"QuantityPerUnit": "195g×10缶",
"UnitPrice": 1900
},
{
"ProductID": 6,
"ProductName": "ピリピリ ビール",
"QuantityPerUnit": "350ml×24本",
"UnitPrice": 3000
},
{
"ProductID": 7,
"ProductName": "オタル白ラベル",
"QuantityPerUnit": "350ml×24本",
"UnitPrice": 3500
},
{
"ProductID": 8,
"ProductName": "バードワイン",
"QuantityPerUnit": "500ml×12瓶",
"UnitPrice": 6000
},
{
"ProductID": 9,
"ProductName": "ホワイトソルト",
"QuantityPerUnit": "1kg×12袋",
"UnitPrice": 2600
},
{
"ProductID": 10,
"ProductName": "ブラックペッパー",
"QuantityPerUnit": "30g×30本",
"UnitPrice": 2100
}
]
}プロジェクトのフォルダに上記JSONファイルを配置し、ターミナル等から以下のコマンドを起動してモックのAPIを立ち上げます。
json-server products.json -p 3000以下のような画面が立ち上がったらAPIの起動は成功です。
APIが起動したら、「テーブルの追加」のメニューから起動したAPIのURLを設定し、「products」テーブルを追加します。
帳票をデザインする
テーブルが追加出来たら、帳票をデザインしていきます。「products」テーブルのフィールドをドラッグ＆ドロップして一覧表に表示する項目を設定します。
レポートシートでは表示する項目に合わせてセル型を設定します。セル型は以下の4種が使用可能です。
| セル型名 | 説明 |
|---|---|
| スタティック | 静的な文字列等を表示する項目に使用します |
| リスト | 一覧データを表示する項目に使用します |
| グループ | グループ化を行う項目に使用します |
| サマリー | 集計を行う項目に使用します |
今回配置した項目は製品の一覧表として表示する項目なので、各項目のセル型を「リスト」に変更します。
あとはExcel感覚で見出しの追加や罫線の設定を行います。
書式の変更もExcelライクに設定可能です。
帳票をプレビューする
以上で帳票レイアウトの作成は完了です。「デザイン」メニューから「プレビュー」を選択すると、デザイナ上でレポートシートをプレビュー表示できます。APIから取得したデータに応じてフィールドを設定した行が伸長し、商品の一覧表を作成することができました。
テンプレートシートを保存する
作成した帳票レイアウト定義を含むテンプレートシートはsjs形式のファイルとして保存可能です。デザイナのメニューから「products.sjs」ファイルとして保存します。
Webアプリケーションにレポートシートを組み込む
最後に仕上げとして作成したテンプレートシートを保存して、Webアプリケーションに組み込んでレポートシートを実行してみたいと思います。
開発環境
今回は開発環境として以下を使用します。
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.excelio.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="show-area">
<div id="ss" style="width:580px;height:700px"></div>
</div>
</body>
</html>「scripts」フォルダ配下に「app.js」ファイルを作成し、先ほど保存したsjsファイルを読み込んでレポートシートを実行します。
※ ライセンスキーを設定しない場合、トライアル版を示すメッセージが表示されます。ライセンスキーの設定方法についてはこちらをご覧ください。
// 日本語カルチャー設定
GC.Spread.Common.CultureManager.culture("ja-jp");
GC.Spread.Sheets.LicenseKey = "ここにSpreadJSのライセンスキーを設定します";
// SpreadJSの設定
document.addEventListener("DOMContentLoaded", () => {
const spread = new GC.Spread.Sheets.Workbook("ss");
let reportSheet;
//----------------------------------------------------------------
// sjs形式のテンプレートシートを読み込んでレポートシートを実行します
//----------------------------------------------------------------
const res = fetch('reports/products.sjs').then((response) => response.blob())
.then((myBlob) => {
spread.open(myBlob, () => {
console.log(`読み込み成功`);
reportSheet = spread.getSheetTab(0);
// レポートシートのオプション設定
reportSheet.options.renderMode = 'Preview';
reportSheet.options.printAllPages = true;
// レポートシートの印刷設定
var printInfo = reportSheet.printInfo();
printInfo.showBorder(false);
printInfo.zoomFactor(1);
reportSheet.printInfo(printInfo);
reportSheet.refresh();
}, (e) => {
console.log(`***ERR*** エラーコード（${e.errorCode}） : ${e.errorMessage}`);
});
});
});
「css/styles.css」を作成し、スタイルの設定を追加します。
body {
width: 610px;
}
.show-area {
margin: 15px;
border: solid black;
}以上でWebアプリケーションの作成は完了です。「index.html」を右クリックして「Open with Live Server」を実行し、開発サーバーでアプリケーションを起動します。
起動したアプリケーション上でレポートシートが実行され、デザイナで作成した商品一覧の帳票をブラウザ上に表示することができました。
さいごに
今回はSpreadJSの「レポートシート」機能について、その概要と基本的な帳票デザインの方法、そしてWebアプリケーションへの組み込み方法についてご紹介しました。レポートシートを使用することで、SpreadJSを使用した帳票開発が格段に楽になりますので、是非お試しいただけますと幸いです。
なお、今回ご紹介した内容はレポートシート機能のほんの一部です。本シリーズでは追って、さまざまな機能をご紹介していくほか、弊社Webサイトには、レポートシートで作成した数々の帳票サンプルが確認できるデモアプリケーションや、無料のトライアル版がございますので、こちらもご確認ください。