SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ActiveReports)(AD)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

 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処理だけで作成できます。

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ActiveReports)連載記事一覧

もっと読む

この記事の著者

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 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本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/11912 2020/01/30 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング