SHOEISHA iD

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

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

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

JavaScriptの処理でWebページに帳票出力できる「ActiveReportsJS」入門

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

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

帳票にデータを提供するデータソースとデータセット

 一般に帳票が固定文言のみで構成されることはなく、別のデータを反映して表示されます。帳票に反映するデータを設定するには、帳票デザイナの「データソース」と「データセット」機能を利用します。以下で利用方法を説明します。

データソースの登録

 データソースは、帳票に反映するデータの情報源です。ActiveReportsJSでは、ローカルやインターネット上のJSONファイルをデータソースにできます。本記事では、リスト4のJSONファイルをデータソースに設定します。

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

 リスト4には、表2のデータ項目を含むJavaScriptオブジェクトを配列にしたデータが記述されています。

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

 帳票デザイナ右側の「データ」-「データソース」で、「追加」をクリックして表示される「新規データソース」画面でリスト4のファイルを指定すると、帳票にデータソースが追加されます。

図8 帳票デザイナでデータソースを追加する手順
図8 帳票デザイナでデータソースを追加する手順

データソースからデータセットを作成

 データセットは、帳票に反映するデータの集合をデータソースから抽出したものです。データソースからデータセットを作成するには、データソースの「+」ボタンをクリックして「データセットの編集」画面を表示します。「全般」-「クエリ」に「$[*]」と入力して「検証」をクリックすると、表2のデータ項目が「フィールド」に反映されるので「OK」をクリックします。

図9 データソースからデータセットを作成する手順
図9 データソースからデータセットを作成する手順

 ここで指定した「$[*]」は、データソース(JSONファイル)から配列の全要素を取得するよう指示するクエリを「JSONPathクエリ言語」で記述したものです。JSONPathクエリ言語の詳細はドキュメントを参照してください。

データセットのデータを帳票に出力してみよう

 ここまでの操作で登録したデータソースとデータセットから、データを反映した帳票を出力していきます。本記事では、リスト4のような複数のデータを一覧表示するレポートコントロール「List」と「Table」を紹介します。

定義した表示形式で複数データを並べて表示するList

 Listは、1つのデータに対応する表示形式を定義すると、それをデータ数だけ並べて表示してくれるレポートコントロールです。リスト4のデータをListで表示する図10のサンプルで説明します。

図10 Listレポートコントロールの利用例(p002-data-list)
図10 Listレポートコントロールの利用例(p002-data-list)

 まず帳票デザイナで、Listレポートコントロールをデザイン面に配置します。Listの枠を調整すると、図11の通り、白い部分とグレー(網掛け)の部分、2種類の領域が表示されます。白い部分は1つのデータに対応する表示を定義する領域で、グレーの部分はページ内にリストを繰り返し表示する範囲の指定です。グレーの部分をページいっぱいに伸ばすと、ページ全体にリストが表示されるようになります。

図11 Listレポートコントロールの領域指定
図11 Listレポートコントロールの領域指定

 次に、白い部分に、1つのデータに対応する内容を表示するレポートコントロール(ここではTextBox)を配置します。TextBoxを配置後、マウスオーバーで右端に表示される「...」の部分をクリックすると、表示するデータ項目をリストから選択できます。

図12 TextBoxに表示するデータ項目を選択
図12 TextBoxに表示するデータ項目を選択

 ここで、表示項目ごとに細かい調整を行います。まず、priceは価格なので、プロパティの「テキスト」-「表示形式」で「通貨」を選び、小数点以下の「桁数」は「0」にします。なお、サンプルではこのほかに、「テキスト」-「水平方向の整列」を「Left」にして、テキストが左揃えになるようにしています。

図13 価格の表示形式を調整
図13 価格の表示形式を調整

 また、is5Gとstockはそのまま表示するのではなく、データ内容(trueまたはfalse)に基づいて文言を表示するように式を記述します。プロパティの「共通」-「値」の右側の四角形をクリックして、リストから「式」を選ぶと式エディタが表示されます。

図14 式エディタの表示
図14 式エディタの表示

 たとえばis5Gの場合は、リスト5の式を式エディタに記述します。

[リスト5]表示内容を式で記述する例(p002-data-list/p002-data-list.rdlx-json)
=IIF(Fields!is5G.Value, "対応", "非対応")

 IIFは条件分岐を表す関数で、第1引数(is5Gのデータ値)がtrueの時は第2引数、falseの時は第3引数の値を返します。このようにActiveReportsJSには、表示データを加工する関数や演算子が用意されており、式エディタ左側の「フィールド」から選択できます。

 出来上がった帳票デザインは図15の通りです。この帳票デザインをビューワで表示すると、図10の通り、各データの内容がリストに繰り返し表示されます。データが1ページで収まらない場合、自動的に改ページされて、次ページに続きが表示されます。

図15 Listを利用した帳票デザイン(p002-data-list/p002-data-list.rdlx-json)
図15 Listを利用した帳票デザイン(p002-data-list/p002-data-list.rdlx-json)

複数データを表形式で表示できるTable

 Tableは、複数データを表形式で表示してくれるレポートコントロールです。リスト4のデータをTableで表示する図16のサンプルで説明します。

図16 Tableレポートコントロールの利用例(p003-data-table)
図16 Tableレポートコントロールの利用例(p003-data-table)

 帳票デザイナで、Tableレポートコントロールをデザイン面に配置すると、図17の通り、3行分の表が表示されます。上はヘッダ行、下はフッタ行、真ん中は詳細行です。詳細行は1つのデータに対応しており、データの数だけ繰り返して表示されます。またList同様、表を表示する範囲を、グレー(網掛け)の領域で指定します。

図17 Tableレポートコントロールの構成
図17 Tableレポートコントロールの構成

 各セルに、文字の配置や背景色などのプロパティを設定して表示を整えるとともに、表示する文言や表示データを設定していきます。セルに表示データを設定するには、TextBox同様、マウスオーバーして表示される「...」をクリックしてデータを選択するか、プロパティの「共通」-「値」で式エディタを起動して、式を設定します。

図18 セルに表示データを設定
図18 セルに表示データを設定

 出来上がった帳票デザインは図19の通りです。この帳票デザインをビューワで表示すると、図16の表が表示されます。

図19 Tableを利用した帳票デザイン(p003-data-table/p003-data-table.rdlx-json)
図19 Tableを利用した帳票デザイン(p003-data-table/p003-data-table.rdlx-json)

[補足]ActiveReports for .NETの帳票デザインをActiveReportsJSで利用する方法

 ActiveReportJSとは別に、グレープシティは.NET向け帳票ライブラリ「ActiveReports for .NET」を提供しています。ActiveReports for .NETの帳票デザインファイル(*.rdlx)は、AcriveReportsJSの帳票デザイナで読み込んで、ActiveReportsJSのファイル形式(*.rdlx-json)で保存し直すことで、ActiveReportsJSで利用できます。ただし、*.rdlx形式以外のレポート(セクションレポート)ではこの方法を利用できず、レポートを移行できません。

 なお、ActiveReports for .NETの帳票デザインファイルは、SQL ServerやXMLなどのさまざまなデータソースに対応していますが、JSON形式かCSV形式以外のデータソースを使用した帳票デザインファイルを移行した場合、データソースが正しく動作しません(レイアウト自体は正常に移行されます)。

まとめ

 本記事では、グレープシティの帳票出力ライブラリ「ActiveReportsJS」の活用法を紹介する連載の初回として、ActiveReportsJSで実際に帳票を表示するまでの基本的な利用法と、複数個のデータをリストや表で表示するList、Tableレポートコントロールの利用法を説明しました。

 次回は、今回説明したTableについて、データをグループに分けて表示したり、グループごとに集計を表示したりできる、より便利な機能を説明していきます。

参考資料

修正履歴

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
「ActiveReportsJS」ではじめるフロントエンド帳票開発連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/12503 2021/01/29 15:18

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング