CodeZine(コードジン)

特集ページ一覧

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

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

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

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...

バックナンバー

連載:ComponentZine(ActiveReports)
All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5