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

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

　グレープシティのJavaScriptライブラリ「ActiveReportsJS」は、サーバーの処理に依存せず、WebブラウザのJavaScript処理だけで帳票を出力できるライブラリです。本連載では、ActiveReportsJSを利用したさまざまな帳票出力機能の活用法を、複数回に分けて紹介します。初回となる今回は、ActiveReportsJSで帳票を表示するまでの基本的な手順と、データをリストや表に表示する機能を説明します。

はじめに

　帳票出力は、特に業務系のWebページで重要になる機能です。帳票出力はサーバーの処理で行うのが一般的ですが、グレープシティのJavaScriptライブラリ「ActiveReportsJS」を利用すると、サーバーの処理ではなく、WebブラウザのJavaScript処理で帳票を出力できます。

図1　ActiveReportsJSの公式ページ（https://www.grapecity.co.jp/developer/activereportsjs）

　ActiveReportsJSでは、帳票をGUIでデザインできるWindows／Mac用の帳票デザイナアプリと、帳票デザイナで作成した帳票デザインをWebページで表示するビューワのJavaScriptライブラリが提供されます。ActiveReportsJSの概要は過去記事でも紹介しているので参考にしてください。

　本連載では、ActiveReportsJSを初めて利用する人を対象として、帳票を出力するWebページをActiveReportsJSで作成する方法を、複数回にわたって説明していきます。初回となる今回はまず、ActiveReportsJSで実際に帳票を出力するまでの手順を、順を追って説明します。次に、帳票にデータを反映するデータソースとデータセットについて説明後、そのデータを帳票にリスト表示できるList、表に表示できるTableの各レポートコントロールについて、サンプルを挙げながら利用法を説明します。

対象読者

• Webページに帳票出力機能を実装したい方
• サーバー開発よりもフロントエンド開発が得意な方
• ActiveReportsJSの利用法を、順を追って学びたい方

必要な環境

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

Windows 10 64bit版

• ActiveReportsJS 1.2.0
• Microsoft Edge 83.0.478.37
• Node.js v12.17.0 64bit版

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

　なお、ActiveReportsJSはAngularやReact、Vue.jsなどのJavaScriptライブラリ／フレームワークと組み合わせての利用や、TypeScriptでの開発に対応していますが、本記事のサンプルコードはActiveReportsJSを単体で利用して、JavaScriptで開発しています。