CodeZine(コードジン)

特集ページ一覧

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

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

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

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

 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で送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ComponentZine(ActiveReports)

著者プロフィール

  • 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