JavaScript/SpreadJS/レポートシート入門

SpreadJS レポートシート入門4 – チャート（2） –

by MESCIUS-dev

JavaScriptスプレッドシートライブラリ「SpreadJS（スプレッドJS）」ではExcel互換のスプレッドシート機能だけでなく、さまざまなレイアウトの帳票が開発できる「レポートシート」機能が利用可能です。

今回は前回に引き続き「データチャート」を使用した帳票の作成方法の解説です。レポートシートの特定のセルにバインドしてチャートを生成する「セルバインディング」を使用して、以下のようなレーダーチャートを含む模試の成績表を作成する方法をご紹介します。

成績表

データチャートを使用した帳票の作成方法については前回の記事もご覧ください。

テンプレートシート（帳票レイアウト定義）の作成

デザイナの起動

まずは帳票レイアウトを定義するテンプレートシートを作成していきます。コードで組むことも可能ですが、GUIでデザインできる製品付属のSpreadJSデザイナや、オンラインデザイナを使用する方法がおすすめです。

今回はデスクトップアプリのSpreadJSデザイナを使用していきます。無償のトライアル版は以下よりダウンロード可能です。

インストール方法等は製品ヘルプをご覧ください。

SpreadJSデザイナ

デザイナを起動し、メニューから「挿入」-「レポートシート」を選択すると、ワークブックにレポートシートが追加され、帳票のデザインが可能になります。

データソース（テーブル）の追加

まずは帳票に表示するデータソース（テーブル）の設定を行います。今回はREST APIのモックサーバーを手軽に構築できるライブラリ「json-server」を使って連携を行います。json-serverの使用方法については以下の記事で解説しているのでこちらをご覧ください。

今回は以下のようなJSONデータ（scoreData.json）で4種類のエンドポイントを持つAPIを作成し、4つのテーブルでリレーションを設定する方法も解説します。JSONファイルはこちらよりダウンロード可能です。

4つのテーブルは以下のようなリレーションになっています。

4つのテーブルのリレーション

「score」エンドポイントには受験番号（id）や模試の総合点数、平均点数、偏差値、順位、そして外部キーとなる受験生番号（takerId）、試験番号（examId）を記載します。

{
    "score":[
    {
      "id": 2025001001,
      "takerId": 1,
      "examId": 2025001,
      "totalScore": 360,
      "totalAverage": 354,
      "totalDeviationValue": 60,
      "totalRank": 14
    },
    {
      "id": 2025001002,
      "takerId": 2,
      "examId": 2025001,
      "totalScore": 367,
      "totalAverage": 354,
      "totalDeviationValue": 62,
      "totalRank": 10
    },
    {
      "id": 2025001003,
      "takerId": 3,
      "examId": 2025001,
      "totalScore": 410,
      "totalAverage": 354,
      "totalDeviationValue": 78,
      "totalRank": 3
    }
  ],
・・・（中略）・・・

「scoreDetail」エンドポイントには5教科それぞれの得点や平均点、偏差値、順位を記載します（一部省略）。

・・・（中略）・・・
    "scoreDetail":[
    {
      "id": 2025001001,
      "subject": "国語",
      "score": 94,
      "average": 70,
      "deviationValue": 60,
      "rank": 5
    },
    {
      "id": 2025001001,
      "subject": "数学",
      "score": 32,
      "average": 66,
      "deviationValue": 40,
      "rank": 35
    },
    {
      "id": 2025001001,
      "subject": "英語",
      "score": 76,
      "average": 72,
      "deviationValue": 52,
      "rank": 18
    },
    {
      "id": 2025001001,
      "subject": "社会",
      "score": 69,
      "average": 75,
      "deviationValue": 49,
      "rank": 22
    },
    {
      "id": 2025001001,
      "subject": "理科",
      "score": 89,
      "average": 71,
      "deviationValue": 58,
      "rank": 8
    },
・・・（中略）・・・
  ],
・・・（中略）・・・

「exam」エンドポイントには模試の名称や実施日などの情報を記載します。

・・・（中略）・・・
  "exam": [
    {
      "id": 2025001,
      "name": "2025年度 第1回 模擬試験",
      "date": "2025-07-14"
    },
    {
      "id": 2025002,
      "name": "2025年度 第2回 模擬試験",
      "date": "2025-08-30"
    },
    {
      "id": 2025003,
      "name": "2025年度 第3回 模擬試験",
      "date": "2025-10-25"
    }
  ],
・・・（中略）・・・

「taker」エンドポイントには受験者の氏名などの情報を記載します。

・・・（中略）・・・
    "taker": [
        {
            "id": 1,
            "name": "高岡香帆",
            "grade": "2年"
        },
        {
            "id": 2,
            "name": "山本雅治",
            "grade": "2年"
        },
        {
            "id": 3,
            "name": "加藤泰江",
            "grade": "2年"
        }
    ]
}

プロジェクトのフォルダに上記JSONファイルを配置し、ターミナル等を立ち上げ以下のコマンドを実行してモックのAPIを立ち上げます。

json-server scoreData.json -p 3000

以下のような画面が立ち上がったらAPIの起動は成功です。

APIの起動

APIが起動したら、「テーブルの追加」のメニューから起動した各APIのURLを設定し、「score」テーブル、「scoreDetail」テーブル、「exam」テーブル、「taker」テーブルをそれぞれ追加します。

成績表を作成する

テーブルが追加出来たら、帳票をデザインしていきます。まずはレーダーチャート以外の表の部分を作成します。

Excelを操作する感覚でセル結合や罫線などの設定を行い、以下のようなレイアウトを作成します。

成績表の作成

次にデータバインドの設定を行っていきます。

まずは受験番号などを表示するヘッダー部分を設定します。以下の表に示したフィールドを対応する項目のセルにドラッグ＆ドロップで設定していきます。

項目（ラベル名）テーブル名フィールド名
受験番号scoreid
氏名takername
試験名examname
実施日examdate

上記のnameのように同じフィールド名で異なるテーブルの項目があるとわかりにくくなるので、テンプレートセルのパネルから「エイリアス」を使用して和名の項目名を設定できます（エイリアスの設定は必須ではありません）。

エイリアスの設定
レイアウトの調整

次に成績を表示する表の部分のデータバインドを設定します。以下の表に示したフィールドを対応する項目のセルにドラッグ＆ドロップで設定していきます。

項目（ラベル名）テーブル名フィールド名
教科scoreDetailsubject
得点scoreDetailscore
平均点scoreDetailaverage
偏差値scoreDetaildeviationValue
順位scoreDetailrank

データバインドした5つのセルはそれぞれセル型を「リスト」に設定し、「スピル時に上書きする」のオプションにチェックを入れます。これにより、行数固定の表が作成できます。

セル型の設定とスピル上書き

次に総合の得点、平均点、偏差値、順位の項目のデータバインドを設定します。以下の表に示したフィールドを対応する項目のセルにドラッグ＆ドロップで設定していきます。

項目（ラベル名）テーブル名フィールド名
得点scoretotalScore
平均点scoretotalAverage
偏差値scoretotalDeviationValue
順位scoretotalRank

レーダーチャートを追加する

次に5教科の得点と平均点を比較して確認できるレーダーチャートを追加します。今回は前回作成したデータチャートで使用した「テーブルバインディング」ではなく、「セルバインディング」というバインディングモードを使用します。セルバインディングではデータマネージャーのテーブルではなく、レポートシートの特定のセルにバインドしてチャートを生成します。

レーダーチャートを表示する領域のセルを1つのセルに結合し、セル型を「チャート」に設定します。その後に表示されるデータチャートのパネルからチャートの種類に「エリアレーダーチャート」を選択します。

「バインディングモード」に「セルバインディング」を選択し、「値」の項目には「得点」と「平均点」をバインドしたセルをそれぞれ指定します。また、「カテゴリ」の項目には「教科」の項目をバインドしたセルを指定します。

データバインドが完了したら「インスペクター」のメニューからチャートの各種スタイルを調整します。

データチャートのスタイルを調整

フィルターとコンテキストの設定

以上でレイアウトの作成とデータバインドの設定が完了したので、最後に仕上げとして受験番号ごとのデータが表示できるようにフィルターとコンテキストの設定を行います。

まずは各種表示項目に対して受験番号に紐づくデータが表示されるように以下のようなフィルターを追加します。パネルの「フィルター」のメニューからダイアログを開き、条件を設定します。

フィルター
フィルターの設定

ヘッダー部分

フィルターを設定する項目（ラベル名）データ列オペレーター値
氏名id次の値に等しいデータ列, score, takerId
試験名id次の値に等しいデータ列, score, examId
実施日score次の値に等しいデータ列, score, examId

表部分

表の部分は一番左の「教科」の項目にだけフィルタを設定します。その他の項目はコンテキストの設定にしたがって対応するデータが表示されます。

フィルターを設定する項目（ラベル名）データ列オペレーター値
教科id次の値に等しいデータ列, score, id

次にコンテキストの設定を行います。「氏名」、「試験名」、「実施日」、「教科」を表示するセル、およびデータチャートを表示するセルの「コンテキスト」の項目を「受験番号」を表示するセル（今回の例ではC6セル）に設定します。

また、タイトル部分やフッタの余白部分なども受験番号ごとに描画されるように、コンテキストに同じセルを設定します。

プレビューで動作を確認する

以上でテンプレートシートの作成は完了です。デザイナからプレビューを実行すると3人分の成績表が表示できます。

Webアプリケーションにレポートシートを組み込む

最後に仕上げとして作成したテンプレートシートを保存して、Webアプリケーションに組み込んでレポートシートを実行してみたいと思います。あらかじめ先ほど作成したテンプレートシートをsjs形式で保存しておいてください。ファイル名は「exam-results.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.18.1.4.css">
    <script src="scripts/gc.spread.sheets.all.18.1.4.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.resources.ja.18.1.4.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.io.18.1.4.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.shapes.18.1.4.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.charts.18.1.4.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.datacharts.18.1.4.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.print.18.1.4.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.pdf.18.1.4.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.report.reportsheet.18.1.4.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">前のページ</button>
        <span id="current"></span>ページ／<span id="all"></span>ページ
        <button id="next">次のページ</button>
        <button id="print">印刷</button>
    </div>
    <div class="show-area">
        <div id="ss"></div>
    </div>
</body>

「scripts」フォルダ配下に「app.js」ファイルを作成し、先ほど保存したsjsファイルを読み込んでレポートシートを実行します。
※ ライセンスキーを設定しない場合、トライアル版を示すメッセージが表示されます。ライセンスキーの設定方法についてはこちらをご覧ください。

// 日本語カルチャー設定
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 printButton = document.getElementById('print');
    const spread = new GC.Spread.Sheets.Workbook("ss");
    let reportSheet;
    //----------------------------------------------------------------
    // sjs形式のテンプレートシートを読み込んでレポートシートを実行します
    //----------------------------------------------------------------
    const res = fetch('reports/exam-results.sjs').then((response) => response.blob())
        .then((myBlob) => {
            spread.open(myBlob, () => {
                console.log(`読み込み成功`);
                reportSheet = spread.getSheetTab(0);

                // レポートシートのオプション設定
                reportSheet.renderMode('PaginatedPreview');
                reportSheet.options.printAllPages = true;

                // レポートシートの印刷設定
                var printInfo = reportSheet.printInfo();
                printInfo.showBorder(false);
                printInfo.zoomFactor(1);
                reportSheet.printInfo(printInfo);
                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()
        }
    }

    //------------------------------------------
    // 印刷ボタン押下時の処理
    //------------------------------------------
    printButton.onclick = function () {
        spread.print();
    }

    //------------------------------------------
    // 現在のページと全ページ数の表示
    //------------------------------------------      
    function initPage() {
        document.getElementById('current').innerHTML = reportSheet.currentPage() + 1;
        document.getElementById('all').innerHTML = reportSheet.getPagesCount();
    }
});

「css/styles.css」を作成し、スタイルの設定を追加します。

body {
    width: 1130px;
}

.btn-container {
    margin: 15px;
 }

.show-area {
    margin: 15px;
    border: solid black;
    height: 670px;
}

#ss {
    width: 1095px;
    height: 670px;
}

以上でWebアプリケーションの作成は完了です。「index.html」を右クリックして「Open with Live Server」を実行し、開発サーバーでアプリケーションを起動します。
※ アプリケーションの実行前に、あらかじめjson-serverを実行してAPIを起動してください。

Live Serverで実行

起動したアプリケーション上でレポートシートが実行され、成績表をブラウザ上に表示することができました。

ブラウザでレポートシートを表示

今回作成したアプリケーションは以下よりダウンロード可能です。

さいごに

今回はSpreadJSの「レポートシート」でデータチャートを使用して成績表を作成する方法を解説しました。レポートシートを使用することで、SpreadJSを使用した帳票開発が格段に楽になりますので、是非お試しいただけますと幸いです。

弊社Webサイトには、レポートシートで作成した数々の帳票サンプルが確認できるデモアプリケーションや、無料のトライアル版がございますので、こちらもご確認ください。

＼  この記事をシェアする  ／