CodeZine(コードジン)

特集ページ一覧

HTML・JavaScriptの処理で表現力豊かな帳票を出力できる「ActiveReportsJS」の活用

JavaScript帳票作成ライブラリー「ActiveReportsJS」の紹介

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

 グレープシティの「ActiveReportsJS」は、サーバーの処理に依存せず、WebブラウザーのJavaScript処理だけで帳票を出力でできるライブラリーです。帳票のデザインを作成する帳票デザイナと、それをWebブラウザーで表示するビューワのJavaScriptライブラリーが利用できます。本記事では、ActiveReportsJSの機能や利用方法を紹介します。

はじめに

 「ActiveReportsJS」は、帳票出力機能を実現するグレープシティのJavaScriptライブラリーで、2019年12月にリリースされました。

図1 「ActiveReportsJS」の公式ページ
図1 「ActiveReportsJS」の公式ページ

 ActiveReportsJSには、以下の特徴があります。

GUIで帳票をデザインできる帳票デザイナ

 帳票のデザインをGUIで作成できる「帳票デザイナ」が利用できます。テキストボックスや表、チャートの部品(レポートコントロール)を画面に貼り付けて、帳票デザインを直感的に作成できます。帳票デザイナはWindowsとMacの環境で利用できます。

WebブラウザーのJavaScriptで動作するビューワ

 ActiveReportsJSでは、帳票デザイナで作成した帳票のファイルを、ビューワのJavaScriptライブラリーを利用してWebブラウザーで表示します。処理はすべてJavaScriptで行われ、サーバー側の処理を必要としません。ビューワはJavaScriptライブラリー単体で動作できるほか、AngularやReact、Vue.jsといったJavaScriptライブラリー・フレームワークと組み合わせての利用にも対応します。TypeScriptを利用した開発もできます。動作対象ブラウザーは公式ページを参照してください。

日本独自のニーズに対応した帳票機能

 均等割り付けや縦書き、禁則処理といった、帳票に関する日本の独自文化に対応するので、帳票に関する要件が厳しい案件にも適用できます。

エクスポート機能

 帳票をPDFやExcel、HTML形式でエクスポートできます。エクスポート機能もWebブラウザー上のJavaScriptだけで動作し、サーバー側の処理は不要です。

 本記事では、ActiveReportsJSを利用した帳票の作成と出力について、サンプルとともに説明していきます。

対象読者

  • Webページに帳票出力機能を実装したい方
  • 表やチャートなどを含むリッチな帳票を手軽に作りたい方
  • 帳票機能のために極力サーバー側に手を入れたくない方

必要な環境

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

Windows 10 64bit版

  • ActiveReportsJS 1.1.0(2019年12月11日リリース版)
  • Microsoft Edge 44.18362.449.0
  • Node.js v12.14.1 64bit版

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

 なお、本記事のサンプルコードはActiveReportsJSを単体で利用しており、それ以外のJavaScriptライブラリー・フレームワークは利用していません。また、JavaScriptで記述されており、TypeScriptは利用していません。

帳票を作成して表示するまでの流れ

 ActiveReportsJSで帳票を表示するには、まず、表示する帳票のデザインを帳票デザイナで作成します。次に、作成した帳票のデザインを、Webページで動作するビューワのJavaScriptで読み込んで表示させます。この流れで帳票を表示させる手順を、以下で説明していきます。

帳票デザイナで帳票のデザインを作成

 ActiveReportsJSの帳票デザイナは、Windows用とMac用にそれぞれインストーラーが提供されるので、利用する環境に合わせてインストールします。

 帳票デザイナの画面を図2に示します。

図2 帳票デザイナの画面(Windows版)
図2 帳票デザイナの画面(Windows版)

 画面中央に帳票(デザイン面)が表示され、左側には帳票に表示できる部品(レポートコントロール)などが配置されたサイドバー、右側には帳票やレポートコントロールのプロパティと、帳票に表示するデータの設定が表示されます。「プレビュー」をクリックすると、編集した帳票をプレビューできます。画面要素の詳細は、公式ドキュメントも参考にしてください。

 帳票デザイナでは、レポートコントロールをデザイン面にドラッグアンドドロップで配置して、そのプロパティを調整する手順で、帳票を作成していきます。「ファイル」-「保存」をクリックすると、帳票をファイル(*.rdlx-json)に保存できます。

作成した帳票のデザインをWebブラウザーで表示

 帳票デザイナで保存したファイルは、ActiveReportsJSのビューワを利用して、図3の通りWebページに表示できます。画面上部ボタンで、ページ遷移や更新、印刷などの操作が行えます。画面要素の詳細は、公式ドキュメントも参考にしてください。

図3 帳票デザイナで作成した帳票をWebブラウザーで表示(p001-basic)
図3 帳票デザイナで作成した帳票をWebブラウザーで表示(p001-basic)

 図3の帳票を表示するHTMLファイル(index.html)をリスト1に示します。

[リスト1]ActiveReportsJSで帳票を表示するHTMLファイル(p001-basic/index.html)
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>P001Basic</title>
  <!-- IEに対応する場合のPolyfill ...(1) -->
  <script src="activereportsjs/scripts/ie-polyfills.js"></script>
  <!-- ActiveReportsJSのファイル群 ...(2) -->
  <link rel="stylesheet" href="activereportsjs/css/ar-js-viewer.css">
  <script src="activereportsjs/scripts/ar-js-core.js"></script>
  <script src="activereportsjs/scripts/ar-js-viewer.js"></script>
  <script src="activereportsjs/scripts/locales/ar-js-locales.js"></script>
  <!-- このページのJavaScriptとCSS ...(3)-->
  <script src="index.js"></script>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div id="viewer"></div> <!-- ビューワを表示する要素 ...(4) -->
</body>
</html>

 (1)は、Internet Explorer 11でActiveReportsJSを利用する場合のPolyfill(互換性ライブラリー)です。ActiveReportsJSのファイル群は(2)で、各ファイルの役割は表1の通りです。

表1 ActiveReportJSのファイル群
No. ファイル名 役割
1 ar-js-viewer.css ビューワの表示を定義するCSSファイル
2 ar-js-core.js ActiveReportsJSコア機能のJavaScriptファイル
3 ar-js-viewer.js ActiveReportsJSビューワのJavaScriptファイル
4 ar-js-locales.js ActiveReportsJSのロケールJavaScriptファイル

 (4)の<div>タグ部に、ActiveReportsJSのビューワを表示します。表示させるための処理は、(3)で参照しているindex.jsに、リスト2の通り記述します。

[リスト2]ActiveReportsJSで帳票を表示する処理(001-basic/index.js)
// Webページロード完了時の処理 ...(1)
window.addEventListener('load', function() {
  // ビューワを生成 ...(2)
  const viewer = new ActiveReports.Viewer('#viewer', {language: 'ja'});
  // ビューワでレポートファイルを開く ...(3)
  viewer.open('p001-basic.rdlx-json');
}, false);

 Webページロード完了時の処理(1)で、まずActiveReports.Viewerコンストラクターを実行してビューワを生成します(2)。第1引数にはビューワを表示する要素(ここではリスト1(4)のdivタグ)を、第2引数にはビューワのオプション(ここでは表示言語を日本語に設定)を指定します。

 (2)で生成したビューワに帳票を表示するには、viewerオブジェクトのopenメソッドに、帳票デザイナで作成した帳票ファイル名を指定して実行します(3)。

[補足]ライセンスキーの設定

 ActiveReportsJSを製品版として利用するには、ライセンスキーを取得して設定する必要があります。ビューワにライセンスキーを設定するには、リスト3の通り実装します。

[リスト3]ライセンスキーの設定(001-basic/index.js)
GC.ActiveReports.Core.PageReport.LicenseKey = '<ライセンスキー>';

 ライセンスキーの取得方法は、公式ページを参照してください。ライセンスキーを設定しない場合は体験版として動作し、体験版である旨が帳票に表示されます。

帳票にデータを反映

 図3の帳票は常に同じ内容を表示しますが、一般的な帳票は、何らかのデータを反映して表示します。以下では、ActiveReportsJSで帳票にデータを反映する方法を説明します。

「共通の値」で出力日時やページ番号を表示

 出力日時やページ番号など、帳票で利用頻度の高いデータ項目は、ActiveReportsJSの帳票デザイナで「共通の値」として定義されています。帳票デザイナの右側で「データ」を選択して「共通の値」を表示させ、ドラッグアンドドロップで帳票に配置できます。

図4 共通の値を帳票に配置する操作
図4 共通の値を帳票に配置する操作

 例として、共通の値から「ページ番号 / 総ページ」と「日付と時刻」を配置した帳票を図5に示します。

図5 共通の値から「ページ番号 / 総ページ」と「日付と時刻」を出力した帳票(p002-common-value)
図5 共通の値から「ページ番号 / 総ページ」と「日付と時刻」を出力した帳票(p002-common-value)

データソースとデータセット

 複数個のデータをもとに、複数ページの帳票を出力するには、帳票デザイナの「データソース」と「データセット」機能を利用します。図6のサンプルで利用方法を説明します。このサンプルでは、宛先を変えながら複数ページの帳票を表示します。

図6 データソースとデータセットを利用した帳票の例(p003-data)
図6 データソースとデータセットを利用した帳票の例(p003-data)

 データソースは、帳票に表示するデータの情報源を表します。ActiveReportsJSでは、ローカルやインターネット上に存在するJSONファイルをデータソースにできます。

 ここでは、宛先の部署(department)、役職(position)、氏名(name)をJavaScriptオブジェクトの配列にした、リスト4のローカルJSONファイルをデータソースとして利用します。groupは帳票の1ページに表示するデータの範囲を指定するため、配列の各要素で異なる値を設定します(詳細は後述します)。

[リスト4]データソースのJSONファイル(p003-data/p003-persons.json)
[
  {
    "group": 1,
    "department": "札幌ブランチ",
    "position": "所長",
    "name": "木村 太郎"
  },
  {
    "group": 2,
    "department": "東日本統括事業部",
    "position": "統轄役員",
    "name": "山田 広重"
  },
(略)
]

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

図7 帳票デザイナでデータソースを追加
図7 帳票デザイナでデータソースを追加

 次に、データソースからデータセットを作成します。データソースの「+」ボタンをクリックして「データセットの編集」画面を表示します。「全般」-「クエリ」に「$[*]」と入力して「検証」をクリックすると、JSONのデータ項目が「フィールド」に表示されるので「OK」をクリックします。クエリに指定した「$[*]」は、配列の全データを表す「JSONPathクエリ言語」の記述です。JSONPathクエリ言語の詳細はドキュメントを参照してください。

図8 データセットの作成手順
図8 データセットの作成手順

 データセットが作成されると、レポートコントロールの「値」プロパティで、表示するデータ項目名を指定できるようになります。また「式」を選択すると、式エディタが表示されて、表示内容を式で記述できるようになります。

図9 表示するデータセットの項目を選択
図9 表示するデータセットの項目を選択

 例えば、名前の後ろに「殿」をつけて表示する場合、式エディタで図10の通り式を記述します。

図10 式エディタで表示内容を設定
図10 式エディタで表示内容を設定

 最後に、帳票1ページに表示するデータの単位を「グループ」に設定します。レポートの「グループ」プロパティで「group」項目を選択します。データソース(リスト4)で、groupは配列要素ごとに異なる値になっているため、1配列要素あたり1ページの帳票が出力されます。

図11 帳票にグループを設定
図11 帳票にグループを設定

パラメータの利用

 帳票デザイナの「パラメータ」を利用すると、入力した値を帳票上に表示したり、表示するデータをフィルタリングしたりできます。

図12 パラメータを利用した帳票出力(p004-parameter)
図12 パラメータを利用した帳票出力(p004-parameter)

 パラメータを設定するには、帳票デザイナの「データ」-「パラメータ」でパラメータを追加します。追加したパラメータは帳票で参照して表示させます。

図13 パラメータの追加と参照
図13 パラメータの追加と参照

帳票の表現力を高めるレポートコントロールの紹介

 ActiveReportsJSには、帳票の表現力を高めるさまざまなレポートコントロールが用意されています。以下ではそれらのいくつかを抜粋して、概要を紹介していきます。より詳細な利用方法はレポートコントロールの公式ドキュメントを参照してください。

表、チャート

 Tableレポートコントロールで表を、Chartレポートコントロールでチャートを、それぞれ帳票に表示できます(図14)。このサンプルでは、第1四半期~第4四半期の売り上げを年ごと、部署ごとに記述したJSONファイルをデータソースとして、表とチャートを表示します。データソースの詳細はサンプルコードを参照してください。

図14 表やチャートを帳票に表示するサンプル(p005-table-chart)
図14 表やチャートを帳票に表示するサンプル(p005-table-chart)

 表を表示するには、Tableレポートコントロールを利用します。Tableレポートコントロールはヘッダー行、詳細行、フッター行より構成されており、ヘッダー行とフッター行は1行だけ、詳細行はデータの個数分だけ帳票に表示されます。それぞれのセルに、表示させたいデータ項目や文言を設定します。

図15 Tableレポートコントロールの設定(p005-table-chart)
図15 Tableレポートコントロールの設定(p005-table-chart)

 チャートを表示するには、Chartレポートコントロールを利用します。カテゴリフィールドにカテゴリ(ここでは年)、データフィールドにデータ(ここでは四半期ごとの売り上げ)を設定します。

図16 Chartレポートコントロールの設定(p005-table-chart)
図16 Chartレポートコントロールの設定(p005-table-chart)

バーコード

 Barcodeレポートコントロールを利用すると、QRコードなどのさまざまなバーコードを帳票に埋め込んで表示できます(図17)。

図17 QRコードなどのバーコードを帳票に表示するサンプル(p006-barcode)
図17 QRコードなどのバーコードを帳票に表示するサンプル(p006-barcode)

 バーコードを表示するには、Barcodeレポートコントロールの「種類」にバーコードの種類、「値」にバーコードに反映する値をそれぞれ設定します。「種類」はQRコードのほか、郵便物に付与されるカスタマバーコードや、コンビニで利用されるバーコードなど、28種類の規格から選択できます。

図18 Barcodeレポートコントロールの設定
図18 Barcodeレポートコントロールの設定

TextBoxコントロールの日本語テキスト対応機能

 文字列を配置するTextBoxレポートコントロールには、縦書きや禁則処理など、日本語固有の機能に対応したテキスト機能が備わっています(図19)。

図19 さまざまなテキスト表示の例(p007-text)
図19 さまざまなテキスト表示の例(p007-text)

 均等割り付けを行うには、TextBoxレポートコントロールで「テキスト」の「水平方向の整列」を「Justify」、「均等割付」を「DistributeAllLines」にします。また、縦書きにするには「インターナショナル」の「文字表記の方向」を「tb-rl」にします。詳細はサンプルコードの帳票ファイル(p007-text.rdlx-json)を参照してください。

帳票のエクスポート

 ActiveReportsJSでは、帳票をPDF・Excel・HTMLにエクスポートする機能が利用できます。ここでは、PDFにエクスポートする図20の例を紹介します。

図20 帳票をPDFエクスポートするサンプル(p008-pdf)
図20 帳票をPDFエクスポートするサンプル(p008-pdf)

 エクスポート機能はプラグインとして提供されます。index.htmlのheadタグ内で、リスト5の通りプラグインのJavaScriptファイル(ar-js-pdf.js)を参照します。なお、ExcelエクスポートやHTMLエクスポートを利用する場合、対応するプラグインファイル(ar-js-xlsx.js、ar-js-html.js)を同様に参照します。

[リスト5]PDFエクスポートプラグインの読み込み(p008-pdf/index.html)
<script src="activereportsjs/scripts/ar-js-pdf.js"></script>

 プラグインが参照されると、ビューワの左側に表示されるサイドバーに、エクスポートボタンが自動的に表示されます(図21)。

図21 サイドバーに表示されるPDFエクスポートボタン(p008-pdf)
図21 サイドバーに表示されるPDFエクスポートボタン(p008-pdf)

 PDFで日本語を正しく表示するには、日本語フォントを設定する必要があります。サンプルでは、fonts/fontConfig.jsonファイルにIPAゴシックとIPA明朝のフォントを設定しています。詳細はサンプルコードを参照してください。

[補足]JavaScriptの実装でPDFを出力

 ビューワが自動的に表示するエクスポートボタンを利用せず、PDF出力の処理をJavaScriptで実装することもできます。詳細は、サンプルコード(p008a-pdf-manual)を参照してください。

まとめ

 本記事では、グレープシティの帳票出力ライブラリー「ActiveReportsJS」を紹介しました。GUIで帳票を作成できる帳票デザイナと、Webページに帳票を表示するビューワを組み合わせて、表現力豊かな帳票を、サーバーの処理に依存せずWebブラウザーのJavaScript処理だけで作成できます。

参考資料

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

著者プロフィール

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

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

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

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

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