SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

「ActiveReportsJS」ではじめるフロントエンド帳票開発(PR)

帳票出力でデータの集計や分類を行える「ActiveReportsJS」のテーブル機能

「ActiveReportsJS」ではじめるフロントエンド帳票開発 第2回

  • このエントリーをはてなブックマークに追加

 本連載では、WebブラウザのJavaScriptで帳票を出力できるグレープシティのライブラリ「ActiveReportsJS」を活用した帳票アプリの開発を、複数回に分けて紹介しています。前回は基本的な利用法として、ActiveReportsJSを初めて使うための基本的な利用法と、データをリストや表に表示する方法を説明しました。今回は、表を表示するTableレポートコントロールの機能を利用して、データの集計やグループ化、フィルタ処理などを行う方法を説明していきます。

  • このエントリーをはてなブックマークに追加

はじめに

 グレープシティのJavaScriptライブラリ「ActiveReportsJS」は、サーバー側処理ではなく、WebブラウザのJavaScript処理で帳票を出力できるライブラリです。本連載では、ActiveReportsJSの活用法を複数回に分けて紹介しています。

 前回記事では、ActiveReportsJSの基本的な利用法とともに、帳票に表を表示するTableレポートコントロールを紹介しました。前回は単純な表を表示するだけでしたが、Tableレポートコントロールにはデータ処理や表示のさまざまな機能が備わっています(表1)。これらの機能を利用すると、データそのものを加工しなくても、帳票出力時にデータ処理を行って表示できます。

表1 本記事で紹介するTableレポートコントロールのデータ処理・表示機能
No. 機能 説明
1 データ集計 複数データの平均や合計などを計算して表示
2 グループ化 データをグループ分けして表示
3 フィルタ 表示するデータを絞り込み
4 セルの結合 同一値の隣接セルを結合して表示
5 データの並び替え 特定条件でデータを並び替え

 本記事では、表1に挙げたTableレポートコントロールの機能を利用する手順を、サンプルとともに説明していきます。

対象読者

  • Webページに帳票出力機能を実装したい方
  • ActiveReportsJSの利用法を順を追って学びたい方
  • 元のデータは加工せず、データ処理はライブラリに任せたい方

必要な環境

 本記事のサンプルコードは、以下の環境で動作を確認しています。Node.jsは、ActiveReportsJSの動作に必ずしも必要ではありませんが、ローカルでWebサーバーを動作させるために利用しています。

Windows 10 64bit版

  • ActiveReportsJS 1.2.0
  • Microsoft Edge 83.0.478.61
  • Node.js v12.18.2 64bit版

 サンプルコードを動作させるには、ActiveReportsJSのトライアル版が必要になります。公式ページからダウンロードしてください。トライアル版のZipファイルから、distフォルダーの内容をサンプルコードのactivereportsjsフォルダーにコピーします。次に「npm install」コマンドを実行してライブラリをダウンロード後、「npm run start」コマンドを実行すると、Webブラウザが開いてWebページが表示されます。

基本とするデータと表

 ActiveReportsJSでデータを帳票に反映するには、JSON形式のデータを帳票の「データソース」に登録して、そこから作成した「データセット」をレポートコントロールに設定します。詳細な手順は前回記事を参照してください。

 本記事で利用するデータのJSONファイルを、リスト1に示します。

[リスト1]データのJSONファイル(p000-table-basic/report-data.json)
[
  {
    "name": "Galaxy S20 5G",
    "vendor": "Samsung",
    "price": 117480,
    "is5G": true,
    "stock": 5,
    "comment": "5Gハイスペックをお手頃サイズで実現"
  },
  {
    "name": "Galaxy S20+ 5G",
    "vendor": "Samsung",
    "price": 133280,
    "is5G": true,
    "stock": 2,
    "comment": "大画面とミリ波対応に注目"
  },
(略)
]

 このデータはスマートフォンの機種情報で、データ項目は表2の通りです。前回記事で利用したデータとほぼ同じ内容ですが、No.5のstockを、在庫の有無(true/false)から在庫数(数値)に変更しています。

表2 リスト1のJSONファイルに含まれるデータ項目
No. 項目名 内容
1 name 製品名
2 vendor メーカー
3 price 価格
4 is5G 5G対応(true:対応、false:非対応)
5 stock 在庫数(台数を整数で指定)
6 comment 製品の特長を記述したコメント

 Tableレポートコントロールを利用して、リスト1のデータを図1の通り表示できます。基本的な実装方法については、前回記事やサンプルコード(p000-table-basic)を参照してください。

図1 Tableレポートコントロールを利用した基本的な表の表示(p000-table-basic)
図1 Tableレポートコントロールを利用した基本的な表の表示(p000-table-basic)

 これらの内容をベースとして、Tableレポートコントロールの機能を利用したさまざまな表の表示方法を説明していきます。

表に表示したデータの集計

 Tableレポートコントロールでは、表に表示したデータの合計や平均などを集計して表示できます。図2のサンプルでは、表に表示した機種数、在庫総数、価格の平均/最大値/最小値を表示します。

図2 データを集計して表示するサンプル(p001-aggregate)
図2 データを集計して表示するサンプル(p001-aggregate)

 Tableレポートコントロールでは、複数のデータから集計を行うさまざまな関数が利用できます。図2のサンプルで利用する関数とその役割、セルに指定する式は、表3の通りです。

表3 図2のサンプルで利用する集計の式
No. 関数 内容 指定する式 式の意味
1 Count データ数 =Count(Fields!name.Value) 機種数(nameの数)
2 Sum 合計 =Sum(Fields!stock.Value) 在庫総数(stockの合計)
3 Avg 平均 =Avg(Fields!price.Value) 平均価格(priceの平均)
4 Max 最大値 =Max(Fields!price.Value) 最高値(priceの最大値)
5 Min 最小値 =Min(Fields!price.Value) 最安値(priceの最小値)

 式を設定するには、帳票デザイナの式エディタが利用できます。前回記事ではセルを選択して表示されるプロパティから式エディタを表示しましたが、セルを右クリックして表示されるコンテキストメニューの「式」を選択して式エディタを表示させることもできます(図3)

図3 コンテキストメニューから式エディタを表示する操作(p001-aggregate/p001-aggregate.rdlx-json)
図3 コンテキストメニューから式エディタを表示する操作(p001-aggregate/p001-aggregate.rdlx-json)

 表示された式エディタでは、まず関数を選択します。「共通の関数」-「集計」-「Count」をダブルクリックすると、式エディタにCount関数が入力されます。

図4 式エディタで関数を選択(p001-aggregate/p001-aggregate.rdlx-json)
図4 式エディタで関数を選択(p001-aggregate/p001-aggregate.rdlx-json)

 次に関数の引数を設定します。「データセット」-「データセット1」-「name」をダブルクリックすると、関数の引数にnameが反映されます。

図5 式エディタで関数の引数を設定(p001-aggregate/p001-aggregate.rdlx-json)
図5 式エディタで関数の引数を設定(p001-aggregate/p001-aggregate.rdlx-json)

 この手順で、各セルに集計関数の式を設定します。操作に慣れた方は、セルやプロパティのテキストボックス、式エディタの入力欄に、表3の「指定する式」を直接入力することもできます。最終的に、集計関数の式を設定した帳票デザインは図6となります。

図6 集計関数の式を設定した帳票デザイン(p001-aggregate/p001-aggregate.rdlx-json)
図6 集計関数の式を設定した帳票デザイン(p001-aggregate/p001-aggregate.rdlx-json)

[補足]表に複数行を設定する方法

 図6の帳票デザインでは、フッタ行を3行にしています。このように表に行を挿入するには、行を挿入する位置をマウスで右クリックして表示されるメニューから「行」を選択します。このとき、挿入場所(上/下)や、挿入する行数を指定できます。また、同じメニューから行を削除することもできます。なお、列についても同様の操作で挿入や削除を行えます。

図7 Tableに行を挿入する操作
図7 Tableに行を挿入する操作

データのグループ化

 Tableレポートコントロールでは、特定の条件でデータを集めて、グループ単位で表示できます。図8のサンプルでは、メーカー(データ項目「vendor」)が同じデータをグループ化して表示します。また、前述の集計機能で、グループ単位と、全体での平均価格/在庫数を表示します。

図8 データをグループ表示するサンプル(p002-group)
図8 データをグループ表示するサンプル(p002-group)

 グループを設定するには、まず表を右クリックして、「グループ」-「グループの挿入」を選択します。

図9 表にグループを挿入(p002-group/p002-group.rdlx-json)
図9 表にグループを挿入(p002-group/p002-group.rdlx-json)

 次に、グループの基準とするデータ項目を設定します。表の右側に表示される「グループ」欄からグループを選択して、「プロパティ」の「式」で、グループの基準とするデータ項目(ここでは「vendor」)を選択します。

図10 グループの基準とするデータ項目の設定(p002-group/p002-group.rdlx-json)
図10 グループの基準とするデータ項目の設定(p002-group/p002-group.rdlx-json)

 グループを追加すると、グループに対応するヘッダ行とフッタ行が1組増えて表示されるので、グループ単位で表示したい内容(ヘッダ行のタイトルやフッタ行の集計式など)を設定できます。グループ単位とは別に、表全体のヘッダ行とフッタ行も設定できます。

図11 グループと表全体のヘッダ行・フッタ行(p002-group/p002-group.rdlx-json)
図11 グループと表全体のヘッダ行・フッタ行(p002-group/p002-group.rdlx-json)

 なお、グループは入れ子にして複数設定できます。図12は、メーカー(vendor)の下位に、5G対応(is5G)のグループを設定した例です。基本的な設定方法は1グループの場合と変わりません。詳細はサンプルコード(p003-group-multi/p003-group-multi.rdlx-json)を参照してください。

図12 複数のグループを設定したサンプル(p003-group-multi)
図12 複数のグループを設定したサンプル(p003-group-multi)

[補足]Tableを操作するメニュー

 Tableの操作時は、帳票デザイナの上部(リボン部分)に「Table」というメニューが表示されます。このメニューは、表、行、列、セルの各選択時で異なる内容が表示され、選択している要素に対する操作が行えます。

図13 帳票デザイナのTableメニュー(上から表、行、列、セルの選択時)
図13 帳票デザイナのTableメニュー(上から表、行、列、セルの選択時)

フィルタでデータを絞り込み

 Tableレポートコントロールでは、特定の条件でデータをフィルタして表示できます。図14のサンプルでは、画面左のリストから選択したメーカーのデータをフィルタで絞り込んで表示できます。

図14 フィルタでデータを絞り込むサンプル(p004-filter)
図14 フィルタでデータを絞り込むサンプル(p004-filter)

 このサンプルの実装方法を説明します。まず、フィルタとして指定するメーカーのリストを、ActiveReportsJSの「パラメータ」機能で作成します。帳票デザイナの右側に「データ」を表示させて、「パラメータ」の「追加」をクリックします。追加したパラメータをクリックすると「パラメータの編集」が表示されます。

図15 帳票デザインにパラメータを追加して編集(p004-filter/p004-filter.rdlx-json)
図15 帳票デザインにパラメータを追加して編集(p004-filter/p004-filter.rdlx-json)

 パラメータ機能では、帳票のパラメータを設定する入力フォームを作成できます。このサンプルではメーカーのリストを入力フォームに表示するため、「パラメータの編集」に表4の通り設定します。この設定で、「paramVendor」という名前のパラメータが帳票デザインに設定されます。

表4 メーカーのリストを表示するパラメータの設定
No. 設定項目 設定内容 意味
1 名前 paramVendor パラメータを識別する名前
2 ダイアログの表示文字列 メーカー 入力フォームに表示される名前
3 データタイプ String パラメータのデータ型
4 複数の値を許可する はい 複数メーカーを選択できるようにする
5 使用できる値 クエリから値を取得 メーカーリストをデータから取得
6 データセットの名前 データセット1 データセットの指定
7 値フィールド vendor フィルタに設定するvendorの文字列
8 ラベルフィールド vendor 入力フォームに表示されるメーカーの文言

 次に、このパラメータをフィルタとして表に設定します。表をマウスで選択して、プロパティから「フィルタ」を選択して追加し、その右端に表示されるボタンをクリックして、フィルタの設定画面を表示させます。設定画面では、「式」にフィルタの対象とするデータ項目「vendor」、「演算子」は、複数項目のどれかに合致することを表す「in」を設定します。

図16 表にフィルタを追加して設定(p004-filter/p004-filter.rdlx-json)
図16 表にフィルタを追加して設定(p004-filter/p004-filter.rdlx-json)

 「フィルタする値」は、先ほど作成したパラメータを参照させるため、「項目の追加」をクリックして追加された項目の右側ボタンをクリックして式エディタを表示させ、「パラメータ」から「paramVendor」を追加します。

図17 フィルタする値を設定(p004-filter/p004-filter.rdlx-json)
図17 フィルタする値を設定(p004-filter/p004-filter.rdlx-json)

 以上の設定を行った後で帳票を表示すると、図14の通りフィルタ機能が利用できるようになります。

同一データのセルを結合して表示

 Tableレポートコントロールでは、縦方向に同じデータが連続した場合に、図18の通りセルを自動的に結合して表示できます。ここでは「メーカー」と「5G対応」の列にセルの結合を設定しています。

図18 セルを結合して表示させるサンプル(p005-merge1)
図18 セルを結合して表示させるサンプル(p005-merge1)

 セルの結合を設定するには、帳票デザイナで結合させたいセルを選択して「自動でマージ」プロパティを設定します。

図19 セルの結合を設定する操作(p005-merge1/p005-merge1.rdlx-json)
図19 セルの結合を設定する操作(p005-merge1/p005-merge1.rdlx-json)

 このプロパティは、表5の選択肢から設定できます。

表5 「自動でマージ」の設定内容
No. 設定 意味
1 Never 結合しない
2 Always 常に結合する
3 Restricted 左側のセルが結合されている場合のみ結合する

 図19のサンプルでは「メーカー」の「自動でマージ」に「Always」、「5G対応」には「Restricted」を設定しています。この場合、「5G対応」の列は、左側の「メーカー」列のセルが結合されている場合のみ結合されます。「5G対応」に「Always」を設定すると、左側の「メーカー」列が結合されているかどうかにかかわらず結合されるため、図20の通り表示が変わります。

図20 「5G対応」列の「自動でマージ」を「Always」に設定した場合(p006-merge2)
図20 「5G対応」列の「自動でマージ」を「Always」に設定した場合(p006-merge2)

[補足]データを並び替える設定

 セルを結合させるサンプル(p005-merge1、p006-merge2)では、同一データを連続させるために、メーカー(vendor)と5G対応(is5G)でデータを並び替えるように設定しています。

 データの並び替えを行うには、表を選択して表示されるプロパティの「データ」-「並び替えの式」で、並び替えるデータ項目を追加します。複数データ項目の適用順を調整したり、並び替えの昇順・降順を設定したりできます。

図21 データの並び替え設定(p005-merge1/p005-merge1.rdlx-json、p006-merge2/p006-merge2.rdlx-json)
図21 データの並び替え設定(p005-merge1/p005-merge1.rdlx-json、p006-merge2/p006-merge2.rdlx-json)

まとめ

 本記事では、グレープシティの帳票出力ライブラリ「ActiveReportsJS」で表を表示するTableレポートコントロールのさまざまな機能を説明しました。これらの機能を利用することで、元のデータを加工することなく、集計/グループ化/フィルタ/並び替えといったデータ処理を行えます。また、グループ化やセル結合の機能を活用して、データを分かりやすく帳票に表示できます。

 次回は、さらに複雑な表を柔軟に表示できる、Tablixレポートコントロールの利用法を説明していきます。

参考資料

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/12632 2020/08/06 12:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング