2019年12月11日に新しいJavaScriptライブラリ製品「ActiveReportsJS（アクティブレポートJS）」を発売しました。同製品は日本仕様のきめ細やかな帳票を手軽に作成できるJavaScriptライブラリです。
今回の記事では、スクラッチでActiveReportsJSの帳票定義ファイル（レポートファイル）を作成し、ブラウザ上の帳票ビューワに表示するまでの手順を一気にご紹介したいと思います。
帳票をデザインしてみよう！
帳票デザイナのインストール
まずはレポートファイルの作成からです。ActiveReportsJSはJavaScriptライブラリですが、帳票のデザインは開発環境にインストールした帳票デザイナ（単体のアプリケーション）から行います。
トライアル版、または製品版のzipファイルを解凍し、配下のdesignerフォルダの中に帳票デザイナのインストーラーがあります。exeファイルはWindows用、dmgファイルはMac用です。
ウィザードにしたがいインストールしてデザイナを起動します。
レイアウトの作成
それでは早速帳票のレイアウトを作成してみましょう。ActiveReportsJSには2種類のレポート形式がありますが、今回は「ページレポート」で単純な一覧表形式のレイアウトを作成してみます。表形式のレイアウトを作成するには、「Table（テーブル）」コントロールを使用します。
まずは左側のツールボックスからTableコントロールをドラッグ＆ドロップします。デフォルトでは、テーブルの1行目がテーブルヘッダ、2行目が詳細行、3行目がテーブルフッタになります。
表示する項目数にあわせてコンテキストメニューから列数を調整します。列は1列ずつ追加もできますが、追加する列数を指定して一気に追加することも可能です。
テーブルのヘッダやフッタは自由に追加／削除できます。今回はフッタは不要なので、テーブルを選択したときに左側に表示されるアイコンの周辺を右クリックし、コンテキストメニューから「フッタの削除」を選択してフッタを削除します。
次に、テーブルの大きさ（明細がどこまで描画されるのか）を設定します。テーブルを選択したときに表示されるグレーの丸ポチをテーブルの大きさ（明細の大きさ）の分、マウスでドラッグして拡げます。
このときのグレーの網掛けの部分が、明細がデータの数の分、繰り返し描画される領域になります。
帳票でよくある要件として、表示するデータの数が、1ページに表示できる明細行の数に満たない場合に空行で埋めたい、というのがあるかと思いますが、その場合は、テーブルのプロパティから「空行で埋める」を「はい」に設定するだけでOKです。
罫線も重要ですね。これもプロパティから簡単に設定できます。
JSONデータとの接続
次に帳票に表示するデータとの接続を行います。ActiveReportsJSでサポートされているデータの形式はJSON形式です。
データソースの追加
まずはデータソースの追加です。デザイナ右上の「データ」タブから「データソース」の横の「＋」アイコンをクリックします。
「新規データソース」ダイアログが表示されるので、ここでJSONデータとの接続を行います。JSONといえばWeb APIなどから設定する方法が一般的ですが、そちらはまた別の機会に紹介するとして、今回は以下のデータを埋め込みで設定したいと思います。
[
{
"県名": "岩手県",
"市町村名": "北上市",
"名前": "柚木 絢乃",
"年齢": "26",
"電話番号": "080-4978-9157"
},
{
"県名": "福島県",
"市町村名": "郡山市",
"名前": "宮澤 亜実",
"年齢": "36",
"電話番号": "090-7161-6252"
},
{
"県名": "島根県",
"市町村名": "松江市",
"名前": "大村 民雄",
"年齢": "20",
"電話番号": "080-8907-3577"
},
{
"県名": "徳島県",
"市町村名": "鳴門市",
"名前": "溝渕 瑞希",
"年齢": "52",
"電話番号": "090-2335-2492"
},
{
"県名": "兵庫県",
"市町村名": "姫路市",
"名前": "袴田 龍五",
"年齢": "62",
"電話番号": "090-6078-6700"
}
]以下のように設定したら、「データソースの追加」をクリックしてデータソースを追加します。
データセットの追加
次にデータセットを追加します。先ほど追加したJSONデータソースを選択し、右側に表示される「＋」アイコンをクリックします。
「データセットの編集」ダイアログが表示されるので、「クエリ」からJSONPathという形式で、どのフィールドをデータセットとして使用するか指定します。今回はすべてのフィールドを使うので、単純に*を設定し、「検証」ボタンをクリックします。
バウンドフィールドが5個追加されるので、あとは「OK」をクリックすれば、以下のようにデータセットが作成されます。
レポートコントロールとの接続
あとは、レポートコントロールと先ほど追加したデータセットのフィールド（テーブルに表示させたい項目）を接続します。Tableの詳細行のテキストボックスを選択すると表示される右側のアイコンから接続するフィールドを選択します。左から「県名」、「市町村名」、「名前」、「年齢」、「電話番号」の順に設定します。詳細行をフィールドに接続すると、ヘッダにはフィールド名が自動的にラベルとして設定されます。
プレビュー実行
仕上げとして、「TextBox」で帳票のタイトルを追加し、色や幅などを調整したら、「プレビュー」ボタンをクリックします。
帳票がプレビュー表示されます。テーブルはデザイン時に設定したグレーの網掛けの部分まで伸長し、先ほど設定したJSONデータもきちんと流し込まれていることがわかります。これでレポートファイルは完成です。
帳票ビューワで帳票を表示してみよう！
レポートファイルが完成したら、次は帳票ビューワを使ってブラウザ上で閲覧してみましょう。ここでやっとJavaScriptの登場です。
ActiveReportsJSを組み込んだWebアプリはIISだけでなく、ApacheやNginxなど様々なWebサーバー上にデプロイできますが、今回はVisual Studio Codeの拡張機能の「Live Server」を使ったローカル環境の開発サーバーを使用し、簡単にブラウザ上での表示を確認してみたいと思います。
HTMLファイルの作成
ActiveReportsJSは様々なWebアプリケーションに組み込むことができますが、今回はプレーンなHTMLを使ったミニマム構成で動作確認したいと思います。
適当なフォルダの中にindex.htmlを作成し、以下のようにJSファイルとCSSファイルの参照と、ビューワの定義を追加し、ActiveReportsJSの帳票ビューワを組み込みます。
/* Your code... */<html> <head> <title>ActiveReportsJS Viewer</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/ar-js-ui.css" /> <link rel="stylesheet" href="css/ar-js-viewer.css" /> <script type="text/javascript" src="./scripts/ie-polyfills.js"></script> <!--to run in IE--> <script type="text/javascript" src="./scripts/ar-js-core.js"></script> <script type="text/javascript" src="./scripts/ar-js-viewer.js"></script> <script type="text/javascript" src="./scripts/ar-js-pdf.js"></script> <script type="text/javascript" src="./scripts/ar-js-xlsx.js"></script> <script type="text/javascript" src="./scripts/ar-js-html.js"></script> <script type="text/javascript" src="./scripts/locales/ar-js-locales.js"></script> </head> <body onload="load()"> <div id="ARJSviewerDiv" style="height: 100vh"></div> <script> function load() { const viewer = new ActiveReports.Viewer('#ARJSviewerDiv', { language: 'ja' }); viewer.open('./reports/test.rdlx-json'); } </script> </body> </html>
JSファイル、CSSファイルの配置
同じフォルダの配下にscriptsとcssフォルダを作成し、scriptsフォルダの配下にはlocalesフォルダも作成します。
ActiveReportsJSの製品版、またはトライアル版のzipを解凍して出力されたdistフォルダから、必要なJSファイルとCSSファイル（下記の図を参照）を、これらのフォルダにコピーし、配置します。
また、reportsフォルダも作成し、先ほど作成したレポートファイル（rdlx-json形式）をコピーします。
最終的なファイル構成は以下のようになります。
Live Serverで実行
最後にLive Serverを使ってブラウザ上でビューワを表示させてみます。index.htmlを右クリックし、コンテキストメニューから「Open with Live Server」をクリックします。
開発サーバーが起動し、ブラウザ上の帳票ビューワに作成した帳票が表示されます。
作成したサンプルは以下で公開しています。
おわりに
いかがでしたでしょうか。今回はActiveReportsJSでの帳票開発の一連の流れを簡単にご紹介いたしましたが、今後はもっと実際の運用に近い使い方などをご紹介したいと思いますのでご期待ください。
製品Webサイトでは、製品を作って作成したサンプル帳票などが見れるデモアプリケーションや、実際に製品を試せるトライアル版を公開しておりますので、こちらも是非ご覧ください。