CodeZine(コードジン)

特集ページ一覧

「ActiveReportsJS」とUIコンポーネントの組み合わせで帳票データの入力環境を強化しよう

JavaScript帳票ライブラリ「ActiveReportsJS」の活用事例

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

 グレープシティのJavaScript帳票ライブラリ「ActiveReportsJS」は、他のJavaScriptライブラリと組み合わせて、業務アプリケーションの帳票機能をより充実させることができます。本記事では、グレープシティのWebページ用コントロール(UI部品)ライブラリ「InputManJS」「Wijmo」とActiveReportsJSを組み合わせて、帳票へのデータ入力環境を強化する方法を説明します。

はじめに

 グレープシティのJavaScriptライブラリ「ActiveReportsJS」は、サーバー側処理ではなく、WebブラウザのJavaScript処理で帳票を出力できるライブラリです。帳票デザイナのWindows/Macアプリを利用して帳票デザインをGUIで作成でき、作成した帳票デザインをビューワのJavaScriptライブラリでWebページに表示できます。ActiveReportsJSの活用法は、CodeZineの連載記事「『ActiveReportsJS』ではじめるフロントエンド帳票開発」などで紹介されています。

 ActiveReportsJSは、単体でWebページでの帳票出力に利用できますが、他のライブラリと組み合わせて利用することもできます。本記事では、ActiveReportsJSと同じくグレープシティが提供するWebページ用コントロール(UI部品)ライブラリ「InputManJS」や「Wijmo」と組み合わせて、帳票へのデータ入力環境を強化する方法を説明します。

対象読者

  • Webページに帳票出力機能を実装したい方
  • ActiveReportsJSをより深く活用したい方
  • JavaScriptのUI部品に興味がある方

必要な環境

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

Windows 10 64bit版

  • ActiveReportsJS V1.2J
  • InputManJS V2.4J
  • Wijmo 2020J v2
  • Microsoft Edge 85.0.564.68
  • Node.js 12.18.4 64bit版

 サンプルコードを動作させるには、ActiveReportsJSのトライアル版が必要になります。InputManJS/Wijmoと組み合わせたサンプルコードでは、各ライブラリのトライアル版も必要です。トライアル版は、グレープシティのダウンロードページからダウンロードできます。

 トライアル版のZipファイルから、表1に示すフォルダを、サンプルコードのフォルダにコピーします。ActiveReportsJSは全てのサンプルコードでコピーが必要です。InputManJS/Wijmoと組み合わせたサンプルコードでは、それらのライブラリもコピーします。

表1 サンプルコードにコピーする各ライブラリのフォルダ
ライブラリ Zipファイルからのコピー元 サンプルコードへのコピー先
ActiveReportsJS dist配下のcss、scriptsフォルダ activereportsjsフォルダ
InputManJS css、scriptsフォルダ inputmanjsフォルダ
Wijmo Wijmo5EntEval_<バージョン番号>/Dist配下のcontrols、stylesフォルダ wijmoフォルダ

 ライブラリをコピー後、「npm install」コマンドでライブラリをダウンロードして「npm run start」コマンドを実行すると、WebブラウザでWebページが表示されます。

外部からActiveReportsJSへデータを渡す方法

 ActiveReportsJSと他ライブラリとの連携は、他のライブラリからActiveReportsJSにデータを渡して、その内容を帳票に反映することで行います。そこで本記事ではまず、外部からActiveReportsJSにデータを渡す方法を説明します。なお、ActiveReportsJSをWebページに導入して利用する基本的な方法は、過去記事を参照してください。

帳票パラメータを外部から設定する方法

 ActiveReportsJSでは、帳票表示時に帳票のビューワでデータを動的に設定できるパラメータ機能が利用できます。このパラメータは、ビューワの外部からJavaScriptの処理で設定することもできます。図1のサンプルでは、氏名や住所などをビューワの外部から設定して帳票を表示します。

図1 帳票パラメータを外部から設定するサンプル(p001-param)
図1 帳票パラメータを外部から設定するサンプル(p001-param)

 まず、ActiveReportsJSの帳票デザイナで、パラメータを設定します。帳票デザイナ右側の「データ」-「パラメータ」で「追加」ボタンをクリックして追加できます。

図2 帳票にパラメータを追加(p001-param/p001-param.rdlx-json)
図2 帳票にパラメータを追加(p001-param/p001-param.rdlx-json)

 追加したパラメータをクリックして、パラメータに名前を設定します。

図3 パラメータに名前を設定(p001-param/p001-param.rdlx-json)
図3 パラメータに名前を設定(p001-param/p001-param.rdlx-json)

 ここでは、表2のパラメータを帳票に追加します。

表2 帳票に追加するパラメータ(p001-param/p001-param.rdlx-json)
No. パラメータの名前 意味
1 paramName 氏名
2 paramZip 郵便番号
3 paramAddress 住所
4 paramTelephone 電話番号
5 paramCategory 契約種別
6 paramDate 申込日

 次に、パラメータを表示させるTextBoxを帳票に配置します。TextBoxの式エディタを表示させ、リストの「パラメータ」をダブルクリックして式に反映させます。

図4 パラメータを表示するTextBoxを設定(p001-param/p001-param.rdlx-json)
図4 パラメータを表示するTextBoxを設定(p001-param/p001-param.rdlx-json)

 JavaScriptには、パラメータを帳票に設定する処理を、リスト1の通り実装します。

[リスト1]パラメータを帳票に設定する実装(p001-param/index.js)
window.addEventListener('load', function () {
  // ビューワを生成 ...(1)
  const viewer = new ActiveReports.Viewer('#viewer', { language: 'ja' });
  // 帳票作成ボタンの処理 ...(2)
  document.getElementById('apply').addEventListener('click', function () {
    // ビューワをリセット ...(3)
    viewer.resetDocument();
    // パラメータ作成 ...(4)
    var params = [
      { Name: 'paramName', Value: [document.getElementById('name').value] },
      { Name: 'paramZip', Value: [document.getElementById('zip').value] },
      (略:他のパラメータも同様に設定)
    ];
    // 帳票デザインにパラメータを渡して帳票を表示 ...(5)
    viewer.open('p001-param.rdlx-json', { ReportParams: params });
  }, false);
}, false);

 Webページ表示時の処理で、ビューワを表示させるHTML要素のCSSセレクタ(#viewer)を指定してコンストラクタを実行して、ActiveReports.Viewerオブジェクトviewerを生成します(1)。コンストラクタの第2引数は日本語の言語設定です。

 帳票作成ボタンクリック時の処理(2)では、まず(3)のviewer.resetDocumentメソッドでビューワをリセットします。次に(4)で、帳票に与えるパラメータparamsを作成します。JavaScriptオブジェクトのNameプロパティにパラメータ名、Valueプロパティにパラメータ値を設定して1組のパラメータを記述し、それらを配列としてparamsに設定します。

 (5)のviewer.openメソッドで帳票を表示します。第1引数は帳票デザインのファイル名、第2引数はオプションで、ReportParamsオプションに(4)で作成したparamsを設定します。この処理により、パラメータが設定された帳票が表示されます。

データソースを外部から設定する方法

 ActiveReportsJSでは、帳票に表示するデータの情報源「データソース」にデータのJSONファイルを指定して、複数組のデータからなる表やチャートを帳票に表示できます。上述のパラメータ機能を利用すると、JSONファイルの代わりに外部からJSON文字列を指定してデータソースに設定できます。図5のサンプルでは、JavaScriptオブジェクトから変換したJSON文字列をデータソースに設定して、データを表に表示します。

図5 データソースを外部から設定するサンプル(p002-js-data)
図5 データソースを外部から設定するサンプル(p002-js-data)

 サンプルで利用するデータのJavaScriptオブジェクトはリスト2の通りです。携帯電話ショップの各月の販売台数と売上額を想定したデータで、携帯電話会社A社/B社/C社の販売台数と合計の売上額を、月ごとに配列にしています。

[リスト2]図5のサンプルで表示するデータ(p002-js-data/data.js)
var reportData = [
  {
    "date": "5月",      // データの月
    "count_a": 32,      // A社の販売台数
    "count_b": 10,      // B社の販売台数
    "count_c": 12,      // C社の販売台数
    "sales": 1500000    // 売上額
  },
(略)
]

 Webページロード完了時の処理にリスト3を記述します。リスト2のreportData変数を(1)でJSON文字列に変換してパラメータを作成し、(2)で帳票デザインに設定します。

[リスト3]パラメータを帳票に設定する実装(p002-js-data/index.js)
// パラメータ作成 ...(1)
var params = [
  { Name: 'paramReportData', Value: [JSON.stringify(reportData)] }
];
// 帳票デザインにパラメータを渡して帳票を表示 ...(2)
viewer.open('p002-js-data.rdlx-json', { ReportParams: params });

 帳票デザインではリスト3(1)のパラメータを受け取れるよう、図2/図3と同じ手順でパラメータ「paramReportData」を設定します。また、事前にリスト2と同じ形式のJSONファイル(サンプルコードに含まれるreport-data.json)をデータソースに設定して、データセットを作成しておきます。これは、データセットのフィールドを事前に設定するための手順です。データソースとデータセットの設定手順は過去記事を参照してください。

図6 事前に設定したデータセット(p002-js-data/p002-js-data.rdlx-json)
図6 事前に設定したデータセット(p002-js-data/p002-js-data.rdlx-json)

 次に、データソースの編集画面で「接続文字列」ボタンをクリックして、図7の通り入力します。「jsondata」に設定したJSON文字列(ここではparamReportDataパラメータの値)がデータソースの値になり、データセットを介して帳票に反映されます。

図7 パラメータをデータソースにする接続文字列の設定(p002-js-data/p002-js-data.rdlx-json)
図7 パラメータをデータソースにする接続文字列の設定(p002-js-data/p002-js-data.rdlx-json)

 帳票デザインは図8の通り、リスト2の配列要素に含まれる各データを表に表示するように設定します。

図8 リスト2のデータを表示する表の帳票デザイン(p002-js-data/p002-js-data.rdlx-json)
図8 リスト2のデータを表示する表の帳票デザイン(p002-js-data/p002-js-data.rdlx-json)

ActiveReportsJSを他のライブラリと組み合わせて活用

 以下では、外部からActiveReportsJSにデータを渡す方法を利用して、ActiveReportsJSと他のライブラリを組み合わせる例を紹介します。本記事では、グレープシティのJavaScriptライブラリ「InputManJS」と「Wijmo」をActiveReportsJSと組み合わせます。

フォーム入力部品ライブラリ「InputManJS」でリッチなフォームを実現

 InputManJSは、Webページのフォームで利用できるコントロールを提供するライブラリです。決められた形式で文字入力できるコントロールや、日付の入力に特化したコントロールなど、さまざまな入力形式に対応したコントロールが利用できます。ここでは、図1のサンプルで左側に配置していたフォームの入力部品を、InputManJSのコントロールに置き換えてみます(図9)。

図9 InputManJSとActiveReportsJSの組み合わせ(p003-inputmanjs)
図9 InputManJSとActiveReportsJSの組み合わせ(p003-inputmanjs)

 InputManJSの利用により、郵便番号/電話番号はフォーマットが指定され、住所は半角英数字が全角に自動変換されます。契約種別はリスト以外の任意値が設定できるようになり、申込日はカレンダーで日付を指定できるようになります。

図10 InputManJSによる入力フォームの機能(p003-inputmanjs)
図10 InputManJSによる入力フォームの機能(p003-inputmanjs)

 実装方法を以下で説明します。まず、index.htmlのhead要素内で、リスト4の通りInputManJSのJavaScriptとCSSを参照します。

[リスト4]InputManJSの参照(p003-inputmanjs/index.html)
<link rel="stylesheet" href="inputmanjs/css/gc.inputman-js.css">
<script src="inputmanjs/scripts/gc.inputman-js.ja.js"></script>

 次に、Webページロード時に、リスト5でInputManJSのコントロールを設定します。

[リスト5]InputManJSコントロールの設定(p003-inputmanjs/index.js)
// 氏名 ...(1)
const gcName
  = new GC.InputMan.GcTextBox(document.getElementById('name'));
// 郵便番号:フォーマット指定 ...(2)
const gcZip
  = new GC.InputMan.GcMask(document.getElementById('zip'), {
  formatPattern: '\\D{3}-\\D{4}' // フォーマット
});
// 住所:全角に自動変換 ...(3)
const gcAddress
  = new GC.InputMan.GcMultiLineTextBox(document.getElementById('address'), {
  format: 'Z',     // フォーマット(全角) ...(3a)
  autoConvert: true // 自動的に全角に変換 ...(3b)
});
// 電話番号:フォーマット指定 ...(4)
const gcTelephone
  = new GC.InputMan.GcMask(document.getElementById('telephone'), {
  formatPattern: '\\D{2,4}-\\D{2,4}-\\D{4}' // フォーマット
});
// 契約種別:リスト以外の任意値を許可 ...(5)
const gcCategory
  = new GC.InputMan.GcComboBox(document.getElementById('category'), {
  isEditable: true  // 任意値を許可
});
// 申込日:ドロップダウンカレンダーを表示 ...(6)
const gcDate
  = new GC.InputMan.GcDateTime(document.getElementById('date'), {
  displayFormatPattern: 'yyy年M月d日',  // 表示時のパターン
  formatPattern: 'yyyy/MM/dd',  // 入力時のパターン
  showDropDownButton: true, // ドロップダウンを表示 ...(6a)
  dropDownConfig: { // ドロップダウンはカレンダーを表示 ...(6b)
    dropDownType: GC.InputMan.DateDropDownType.Calendar
  }
});

 InputManJSのコントロールは、HTMLの入力フォーム要素を引数にコントロールのコンストラクタを実行して生成します。例えば(1)では、IDに「name」が設定された要素を引数にGC.InputMan.GcTextBoxのコンストラクタを実行して、テキストボックスを生成しています。

 郵便番号(2)と電話番号(4)はフォーマットを指定できるGcMaskコントロールを設定します。フォーマットはコンストラクタの第2引数にformatPatternで設定します。

 住所(3)は複数行テキストボックスを表示するGcMultiLintTextBoxコントロールを設定します。(3a)でフォーマット(全角)、(3b)で自動変換を設定しています。

 契約種別(5)はコンボボックスを表示するGcComboBoxコントロールを設定します。isEditableをtrueにすることでリスト以外の任意値を許可しています。

 申込日(6)は日付入力を表示するGcDateTimeコントロールを設定します。(6a)(6b)の指定でドロップダウンカレンダーが表示できるようになります。

 なお、入力値をパラメータに設定する際は、リスト6の通り、リスト5で生成したInputManJSコントロールから値を取得してパラメータを作成します。

[リスト6]InputManJSコントロールから取得した値をパラメータに設定(p003-inputmanjs/index.js)
var params = [
  { Name: 'paramName', Value: [gcName.getText()] },
  { Name: 'paramZip', Value: [gcZip.getText()] },
(以下略)
];

UIライブラリ「Wijmo」のグリッド部品FlexGridで表データを編集

 Wijmoは、Webページで利用できるコントロールを提供するライブラリです。InputManJSは入力部品に特化されていますが、Wijmoはチャートやゲージ、グリッドなど、より幅広い部品を提供します。

 ここでは、Wijmoのグリッド部品FlexGridを利用して、FlexGridに入力したデータを帳票作成ボタンクリック時に帳票のチャートと表に反映させるサンプル(図11)を説明します。図5のサンプルを改良して、FlexGridのデータをJSON文字列にしてデータソースに設定します。

図11 WijmoとActiveReportsJSの組み合わせ(p004-wijmo)
図11 WijmoとActiveReportsJSの組み合わせ(p004-wijmo)

 実装方法を以下で説明します。まず、index.htmlのhead要素内で、リスト7の通りWijmoのJavaScriptとCSSを参照します。(1)はCSSで、(2)はWijmoの基本機能、(3)はFlexGrid、(4)は日本語カルチャーのJavaScriptです。

[リスト7]Wijmoの参照(p004-wijmo/index.html)
<link rel="stylesheet" href="wijmo/styles/wijmo.min.css"> <!-- (1)-->
<script src="wijmo/controls/wijmo.min.js"></script> <!-- (2)-->
<script src="wijmo/controls/wijmo.grid.min.js"></script> <!-- (3)-->
<script src="wijmo/controls/cultures/wijmo.culture.ja.min.js"></script> <!-- (4)-->

 次に、Webページロード時に、リスト8の処理でFlexGridを設定します。

[リスト8]FlexGridの設定(p004-wijmo/index.js)
// データからCollectionViewを生成 ...(1)
var cvData = new wijmo.collections.CollectionView(reportData);
// CollectionViewを表示するFlexGridを定義 ...(2)
var flexGrid = new wijmo.grid.FlexGrid('#flex-grid', {
  allowAddNew: true,          // 行を追加できるようにする
  allowDelete: true,          // 行を削除できるようにする
  autoGenerateColumns: false, // 指定した以外の列を自動生成しないようにする
  columns: [  // 列の指定 ...(3)
    { binding: 'date', header: '月', width: '*' },
    { binding: 'count_a', header: 'A社', width: '*', format: 'n0' },
    { binding: 'count_b', header: 'B社', width: '*', format: 'n0' },
    { binding: 'count_c', header: 'C社', width: '*', format: 'n0' },
    { binding: 'sales', header: '売上額', width: '*', format: 'n0' }
  ],
  itemsSource: cvData // データの指定 ...(4)
});

 (1)で、データ変数reportDataを引数に、Wijmoが提供するデータクラスCollectionViewのコンストラクタを実行して、生成したCollectionViewをcvData変数に格納します。

 (2)で、CSSセレクタ(#flex-grid)を引数にFlexGridのコンストラクタを実行して、FlexGridを生成します。第2引数はオプションで、ここでは行の追加・削除ができるように設定し、(3)のcolumnsでデータ(reportData)の項目と表の列を対応付けます。データ項目名をbinding属性に、ヘッダに表示する内容をheader属性に設定します。width属性の「*」は列の幅を均等にする設定、format属性の「n0」はデータを数値として表示する設定です。(4)でCollectionView(cvData)をFlexGridのデータに指定します。

 帳票作成時にデータを反映するには、リスト9の通り、cvDataのitemsプロパティでデータ(JavaScriptオブジェクト)を取り出してパラメータを作成します。

[リスト9]CollectionViewからデータを取り出してパラメータに設定(p004-wijmo/index.js)
var params = [
  { Name: 'paramReportData', Value: [JSON.stringify(cvData.items)] }
];

 帳票デザインには、リスト9のパラメータを表示するチャートと表を設定します。チャートの設定方法は過去記事を参照してください。

まとめ

 本記事では、ActiveReportsJSをInputManJS/Wijmoと組み合わせて利用することで、帳票へのデータ入力環境を強化する方法を説明しました。優れたUIコンポーネントである両製品と組み合わせることにより、帳票におけるデータ入力から出力まで快適に実現できるWeb帳票アプリケーションが作成できます。

参考資料

関連リンク

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

著者プロフィール

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

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

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5