CodeZine(コードジン)

特集ページ一覧

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

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

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

ActiveReportJSで帳票を作って表示させてみよう

 最初に、ActiveReportsJSの開発環境を整えて帳票デザインを作成し、Webブラウザで表示させるまでの手順を説明します。

ActiveReportsJSの導入

 ActiveReportsJSのZipファイルには、以下が含まれています。

  • 帳票デザイナのインストーラー(Windows用/Mac用)
  • ビューワのライブラリ(JavaScript、CSS)
  • 各種サンプルコード
  • リリースノート、利用規約、ライセンスのドキュメント

 ActiveReportsJSでは、帳票デザイナで作成した帳票デザインファイルを、ビューワのライブラリを利用してWebページで表示します。帳票デザイナを利用するには、まず、インストーラー(Windows用またはMac用)を実行して、利用する環境に対応した帳票デザイナアプリをインストールします。ビューワのライブラリは後で利用します。

帳票デザイナで帳票のデザインを作成

 インストールした帳票デザイナを起動すると、図2の通り表示されます(図2はWindows版での表示です)。

図2 帳票デザイナの画面(Windows版)
図2 帳票デザイナの画面(Windows版)

 画面中央に帳票(デザイン面)が表示され、左側には帳票に表示できる部品(レポートコントロール)などが配置されたサイドバー、右側には帳票やレポートコントロールのプロパティと、帳票に表示するデータの設定が表示されます。「プレビュー」をクリックすると、編集した帳票をプレビューできます。画面要素の詳細は、公式ドキュメントも参考にしてください。

 帳票デザイナで帳票デザインを作成するには、まず、帳票にレポートコントロールを追加します。ここでは左側のサイドバーから「TextBox」を選択して、デザイン面にドラッグアンドドロップします。デザイン面に配置したTextBoxは、直接文字を入力したり、マウスドラッグでサイズを変更したりできます。

図3 デザイン面にレポートコントロールを配置
図3 デザイン面にレポートコントロールを配置

 デザイン面に配置されたTextBoxを選択すると、画面右側にプロパティが表示され、内容を変更できます。図4では、TextBoxの文字サイズを調整しています。

図4 レポートコントロールのプロパティを調整
図4 レポートコントロールのプロパティを調整

 このように、レポートコントロールをデザイン面に配置して、そのプロパティを調整する作業を繰り返すことで、帳票デザインを作成していきます。作成した帳票デザインは、「ファイル」-「保存」をクリックしてファイル(*.rdlx-json)に保存できます。

図5 帳票デザイナで作成した帳票デザイン(p001-basic/p001-basic.rdlx-json)
図5 帳票デザイナで作成した帳票デザイン(p001-basic/p001-basic.rdlx-json)

作成した帳票のデザインをWebブラウザで表示

 次に、作成した帳票デザインのファイルを、ビューワのライブラリを利用して、Webページ上に表示します。最終的に図6の通り表示できるようになります。

図6 図5の帳票デザインをWebブラウザで表示(p001-basic)
図6 図5の帳票デザインをWebブラウザで表示(p001-basic)

 まず、ビューワのライブラリを参照するHTMLファイル(index.html)を、リスト1の通り記述します。

[リスト1]ActiveReportsJSで帳票を表示するHTMLファイル(p001-basic/index.html)
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>P001Basic</title>
  <!-- IEに対応する場合のPolyfill ...(1)-->
  <script src="activereportsjs/scripts/ie-polyfills.js"></script>
  <!-- ActiveReportsJSのファイル群 ...(2)-->
  <link rel="stylesheet" href="activereportsjs/css/ar-js-viewer.css">
  <script src="activereportsjs/scripts/ar-js-core.js"></script>
  <script src="activereportsjs/scripts/ar-js-viewer.js"></script>
  <script src="activereportsjs/scripts/locales/ar-js-locales.js"></script>
  <!-- このページのJavaScriptとCSS ...(3)-->
  <script src="index.js"></script>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div id="viewer"></div> <!-- ビューワを表示する要素 ...(4)-->
</body>
</html>

 (1)は、Internet Explorer 11でActiveReportsJSを利用する場合のPolyfill(互換性ライブラリ)です。ActiveReportsJSのファイル群は(2)で、各ファイルの役割は表1の通りです。

表1 ActiveReportJSのファイル群
No. ファイル名 役割
1 ar-js-viewer.css ビューワの表示を定義するCSSファイル
2 ar-js-core.js ActiveReportsJSコア機能のJavaScriptファイル
3 ar-js-viewer.js ActiveReportsJSビューワのJavaScriptファイル
4 ar-js-locales.js ActiveReportsJSのロケールJavaScriptファイル

[補足]V2Jで増えたActiveReportsJSのCSSファイル

 V1.2Jまではビューワを表示するためのCSSは1ファイル(ar-js-viewer.css)でしたが、2020年12月にリリースされたV2J以降は共通UIのCSSファイル(ar-js-ui.css)も必要となりました。

 V2J以降のバージョンで使用する場合は、以下のようにHTMLファイルの<head>タグでar-js-viewer.cssとともに参照します。

V2J以降のActiveReportsJSのCSS参照
<link rel="stylesheet" href="activereportsjs/css/ar-js-ui.css"> 
<link rel="stylesheet" href="activereportsjs/css/ar-js-viewer.css">

 (4)の<div>タグ部に、ActiveReportsJSのビューワを表示します。ビューワを表示する処理は、(3)で参照しているindex.jsに、リスト2の通り記述します。

[リスト2]ActiveReportsJSで帳票を表示する処理(001-basic/index.js)
// Webページロード完了時の処理 ...(1)
window.addEventListener('load', function() {
  // ビューワを生成 ...(2)
  const viewer = new ActiveReports.Viewer('#viewer', {language: 'ja'});
  // ビューワでレポートファイルを開く ...(3)
  viewer.open('p001-basic.rdlx-json');
}, false);

 Webページロード完了時の処理(1)で、まずActiveReports.Viewerコンストラクタを実行してビューワを生成します(2)。第1引数はビューワを表示する要素(ここではリスト1(4)のdivタグ)、第2引数はビューワのオプションで、ここでは表示言語を日本語に設定しています。

 ビューワに帳票を表示するには、(3)の通り、ビューワに対応するviewerオブジェクトのopenメソッドに、帳票デザイナで作成した帳票ファイル名を指定して実行します。

[補足]ライセンスキーの設定

 ActiveReportsJSの帳票デザイナやビューワを製品版として利用するには、ライセンスキーを取得して設定します。ライセンスキーの取得方法は、公式ページを参照してください。

 帳票デザイナにライセンスキーを設定するには、「ファイル」-「製品情報」メニューから表示できる「ActiveReportsJS デザイナ ライセンス情報」にライセンスキーを入力します。ライセンスキーを設定しない場合、インストール後30日間はトライアル版として動作します。

図7 帳票デザイナにライセンスキーを設定する画面
図7 帳票デザイナにライセンスキーを設定する画面

 ビューワにライセンスキーを設定するには、JavaScriptでリスト3の通り実装します。

[リスト3]ライセンスキーの設定(001-basic/index.js)
GC.ActiveReports.Core.PageReport.LicenseKey = '<ライセンスキー>';

 ライセンスキーを設定しない場合はトライアル版として動作し、トライアル版である旨が帳票に表示されます。


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

修正履歴

  • 2021/01/29 15:18 ActiveReportsJSの新バージョンV2Jで新たに必要となったファイルについて追記いたしました。

バックナンバー

連載:「ActiveReportsJS」ではじめるフロントエンド帳票開発

著者プロフィール

  • 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