HTML・JavaScriptの処理で表現力豊かな帳票を出力できる「ActiveReportsJS」の活用
JavaScript帳票作成ライブラリー「ActiveReportsJS」の紹介
ダウンロード サンプルファイル (19.5 MB)
帳票の表現力を高めるレポートコントロールの紹介
ActiveReportsJSには、帳票の表現力を高めるさまざまなレポートコントロールが用意されています。以下ではそれらのいくつかを抜粋して、概要を紹介していきます。より詳細な利用方法はレポートコントロールの公式ドキュメントを参照してください。
表、チャート
Tableレポートコントロールで表を、Chartレポートコントロールでチャートを、それぞれ帳票に表示できます（図14）。このサンプルでは、第1四半期～第4四半期の売り上げを年ごと、部署ごとに記述したJSONファイルをデータソースとして、表とチャートを表示します。データソースの詳細はサンプルコードを参照してください。
表を表示するには、Tableレポートコントロールを利用します。Tableレポートコントロールはヘッダー行、詳細行、フッター行より構成されており、ヘッダー行とフッター行は1行だけ、詳細行はデータの個数分だけ帳票に表示されます。それぞれのセルに、表示させたいデータ項目や文言を設定します。
チャートを表示するには、Chartレポートコントロールを利用します。カテゴリフィールドにカテゴリ（ここでは年）、データフィールドにデータ（ここでは四半期ごとの売り上げ）を設定します。
バーコード
Barcodeレポートコントロールを利用すると、QRコードなどのさまざまなバーコードを帳票に埋め込んで表示できます（図17）。
バーコードを表示するには、Barcodeレポートコントロールの「種類」にバーコードの種類、「値」にバーコードに反映する値をそれぞれ設定します。「種類」はQRコードのほか、郵便物に付与されるカスタマバーコードや、コンビニで利用されるバーコードなど、28種類の規格から選択できます。
TextBoxコントロールの日本語テキスト対応機能
文字列を配置するTextBoxレポートコントロールには、縦書きや禁則処理など、日本語固有の機能に対応したテキスト機能が備わっています（図19）。
均等割り付けを行うには、TextBoxレポートコントロールで「テキスト」の「水平方向の整列」を「Justify」、「均等割付」を「DistributeAllLines」にします。また、縦書きにするには「インターナショナル」の「文字表記の方向」を「tb-rl」にします。詳細はサンプルコードの帳票ファイル（p007-text.rdlx-json）を参照してください。
帳票のエクスポート
ActiveReportsJSでは、帳票をPDF・Excel・HTMLにエクスポートする機能が利用できます。ここでは、PDFにエクスポートする図20の例を紹介します。
エクスポート機能はプラグインとして提供されます。index.htmlのheadタグ内で、リスト5の通りプラグインのJavaScriptファイル（ar-js-pdf.js）を参照します。なお、ExcelエクスポートやHTMLエクスポートを利用する場合、対応するプラグインファイル（ar-js-xlsx.js、ar-js-html.js）を同様に参照します。
<script src="activereportsjs/scripts/ar-js-pdf.js"></script>
プラグインが参照されると、ビューワの左側に表示されるサイドバーに、エクスポートボタンが自動的に表示されます（図21）。
PDFで日本語を正しく表示するには、日本語フォントを設定する必要があります。サンプルでは、fonts/fontConfig.jsonファイルにIPAゴシックとIPA明朝のフォントを設定しています。詳細はサンプルコードを参照してください。
［補足］JavaScriptの実装でPDFを出力
ビューワが自動的に表示するエクスポートボタンを利用せず、PDF出力の処理をJavaScriptで実装することもできます。詳細は、サンプルコード（p008a-pdf-manual）を参照してください。
まとめ
本記事では、グレープシティの帳票出力ライブラリー「ActiveReportsJS」を紹介しました。GUIで帳票を作成できる帳票デザイナと、Webページに帳票を表示するビューワを組み合わせて、表現力豊かな帳票を、サーバーの処理に依存せずWebブラウザーのJavaScript処理だけで作成できます。
参考資料
この記事は参考になりましたか？
既に会員の方はを行ってください。
- ComponentZine（ActiveReports）連載記事一覧
- この記事の著者
-
WINGSプロジェクト 吉川 英一（ヨシカワ エイイチ）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社
この記事は参考になりましたか？
この記事をシェア
