CodeZine(コードジン)

特集ページ一覧

画面表示・印刷・エクスポート時の表示有無を切り替えられる「ActiveReportsJS」V2Jのレイヤー機能

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

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

 本連載では、WebブラウザのJavaScriptで帳票を出力できるグレープシティのライブラリ「ActiveReportsJS」を活用した帳票アプリの利用法を紹介しています。前回はActiveReportsJSの新バージョンV2Jで追加されたデータソースの新機能を説明しました。今回は同じくV2Jで導入されたレイヤー機能を紹介します。レポートコントロールを複数のレイヤーに振り分けて、表示・印刷・エクスポート時の表示と非表示をレイヤー単位で切り替えられます。

はじめに

 グレープシティのJavaScriptライブラリ「ActiveReportsJS」は、サーバー側処理ではなく、WebブラウザのJavaScript処理で帳票を出力できるライブラリです。本連載では、ActiveReportsJSの活用法を複数回に分けて紹介しています。

 2020年12月に、ActiveReportsJSの新バージョンV2Jがリリースされ、さまざまな新機能が追加されました。すべての新機能はActiveReportsJSの公式ページで紹介されています。前回記事ではこのうち、データソース関連の新機能を紹介しました。

 今回紹介するActiveReportsJS V2Jの新機能は、レイヤー機能です。これはレポートに複数のレイヤーを定義してレポートコントロールを振り分けられる機能です。レポートを画面表示・印刷・エクスポートする際に、各レイヤーの表示と非表示を切り替えられるため、例えば印刷時にだけ特定の表示を追加・削除するといったことができます。

 本記事では、ActiveReportsJSのレイヤー機能について、サンプルとともに説明していきます。

対象読者

  • Webページに帳票出力機能を実装したい方
  • テンプレートが印刷された用紙に内容だけをはめ込み印刷したい方
  • 帳票の印刷やエクスポート時に、画面とは異なる表示を行いたい方

必要な環境

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

Windows 10 64bit版

  • ActiveReportsJS V2J
  • Microsoft Edge 88.0.705.63
  • Node.js v14.15.4 64bit版

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

ActiveReportsJSのエクスポート機能

 レイヤー機能を説明する前に、ActiveReportsJSのエクスポート機能について簡単に説明します。ActiveReportsJSでは、帳票をExcel・HTML・PDFファイルにエクスポートできます。エクスポート機能を利用するには、各ファイル形式に対応するエクスポート機能のJavaScriptファイルを、HTMLのhead要素内で参照します。

[リスト1]エクスポート機能のJavaScriptを参照(p001-basic/index.html)
<head>
(略)
  <script src="activereportsjs/scripts/ar-js-xlsx.js"></script><!-- Excel -->
  <script src="activereportsjs/scripts/ar-js-pdf.js"></script><!-- PDF -->
  <script src="activereportsjs/scripts/ar-js-html.js"></script><!-- HTML -->
(略)
</head>

 リスト1の通り参照すると、帳票表示画面の左側にエクスポートボタンが表示され、帳票をエクスポートできるようになります。

図1 帳票エクスポートボタンの表示(p001-basic/index.html)
図1 帳票エクスポートボタンの表示(p001-basic/index.html)

 なお、日本語を含む帳票をPDFファイルにエクスポートする場合、ページロード時のJavaScript処理でActiveReportsJSに日本語フォントを設定する必要があります(リスト2)。(1)でフォントを定義して、(2)のFontStore.registerFontsメソッドでフォントを登録します。registerFontsメソッドは非同期に実行されるため、戻り値promiseのthenメソッド(3)で、フォント登録完了後の処理(ここではビューワを生成してレポートファイルを開く処理)を記述します。

[リスト2]PDFエクスポート用のフォント登録処理(p001-basic/index.js)
window.addEventListener('load', function() {
  // PDFエクスポート用のフォントを定義 ...(1)
  const font = {
    name: 'IPAexGothic', // フォント名
    source: 'fonts/ipaexg.ttf', // フォントファイル
    useAsDefault: true // PDFエクスポート時のデフォルトフォントにする
  };
  // 定義したフォントを登録 ...(2)
  GC.ActiveReports.Core.FontStore.registerFonts(font)
  // フォント登録完了時に以下を実行 ...(3)
  .then(() => {
    // ビューワを生成
    const viewer = new ActiveReports.Viewer('#viewer', {language: 'ja'});
    // ビューワでレポートファイルを開く
    viewer.open('p001-basic.rdlx-json');
  });
}, false);

 本記事のサンプルでは、PDFエクスポート用の日本語フォントとして、fontsフォルダーにIPAexゴシックのフォントファイルipaexg.ttfを配置して利用しています。

レイヤー機能の基本的な挙動

 まず、レイヤー機能の基本的な挙動を、図2のサンプルで説明していきます。画面表示、印刷、エクスポートのそれぞれの場合で、レポートコントロールの表示・非表示が切り替わります。

図2 基本的なレイヤー機能のサンプル(p001-basic)
図2 基本的なレイヤー機能のサンプル(p001-basic)

 このサンプルには表1のレイヤーが設定されています。各レイヤーには画面表示、印刷、エクスポートのそれぞれの場合における表示・非表示を設定しています。

表1 図2のサンプルに設定されたレイヤー(p001-basic)
No. レイヤー名 表示有無
1 default 画面表示、印刷、エクスポートの場合に表示
2 previewAndExport 画面表示、エクスポートの場合に表示
3 exportAndPrint 印刷、エクスポートの場合に表示

 レイヤーの設定方法を以下で説明します。まず、帳票デザイナでレポートを選択します。デザイン面の余白部をクリックするか、画面左の「エクスプローラ」を開いてツリー最上部の「レポート」をクリックします。

図3 レポートを選択する方法
図3 レポートを選択する方法

 レポートを選択して表示される「レイアウト」-「レイヤー」プロパティで新しいレイヤーを追加します。レイヤーには名前を付けることができます。

図4 レポートにレイヤーを追加(p001-basic/p001-basic.rdlx-json)
図4 レポートにレイヤーを追加(p001-basic/p001-basic.rdlx-json)

 レイヤー名の右に表示されるアイコンをクリックすると、図5の通り、各レイヤーのプロパティが表示され、設定を行えます。

図5 レイヤーのプロパティ表示(p001-basic/p001-basic.rdlx-json)
図5 レイヤーのプロパティ表示(p001-basic/p001-basic.rdlx-json)

 各設定項目の意味は表2の通りです。「表示」と「透過」は帳票デザイナ上での設定で、出力される帳票の設定ではないことに注意してください。

表2 レイヤーの設定項目
No. 設定 意味
1 ロック 有効にするとレイヤーがロックされ、帳票デザイナで編集できなくなる
2 表示 帳票デザイナでの表示有無を設定
3 透過 帳票デザイナで表示する際の透過度を設定
4 出力デバイス 画面表示、印刷、エクスポート時の表示・非表示を設定

 サンプルでは最初から存在するdefaultレイヤーに加えてpreviewAndExport、exportAndPrintの2レイヤーを追加し、「出力デバイス」で表1の通り表示・非表示を設定します。

 次に、レポートコントロールをレイヤーに設定します。レポートコントロールを選択して「レイアウト」-「レイヤー名」でレイヤーを選択します。

図6 レポートコントロールのレイヤー設定(p001-basic/p001-basic.rdlx-json)
図6 レポートコントロールのレイヤー設定(p001-basic/p001-basic.rdlx-json)

 ここまでの設定により、画面表示、印刷、エクスポートのそれぞれで、図1の通り、レイヤーを設定したレポートコントロールが出し分けされるようになります。

レイヤー機能のより実践的な利用法

 ActiveReportsJSのレイヤー機能は、帳票出力のさまざまな場面で活用できます。以下ではレイヤー機能を利用した、より実践的なサンプルを紹介します。

テンプレートが印刷された用紙にはめ込み印刷

 ここでは、すでにテンプレートが印刷された用紙に、内容だけをはめ込み印刷するケースを考えます。図7は、本サンプルで想定する送付状のテンプレートです。

図7 送付状のテンプレート(p002-template/送付状.png、送付状.docx)
図7 送付状のテンプレート(p002-template/送付状.png、送付状.docx)

 このテンプレートに内容をはめ込んで印刷するサンプルが図8と図9です。画面表示時(図8)はテンプレートと入力内容の両方が表示されます。

図8 テンプレートに内容をはめ込み印刷するサンプルの画面表示(p002-template)
図8 テンプレートに内容をはめ込み印刷するサンプルの画面表示(p002-template)

 一方、印刷やエクスポート時(図9)はテンプレートが表示されず、入力内容だけが反映されます。

図9 テンプレートに内容をはめ込み印刷するサンプルの印刷結果(p002-template)
図9 テンプレートに内容をはめ込み印刷するサンプルの印刷結果(p002-template)

 以下で設定方法を説明します。まず、レポートいっぱいにテンプレートの画像を表示するため、レポートの余白をゼロに、用紙サイズをA4に設定します。

図10 レポートの用紙設定(p002-template/p002-template.rdlx-json)
図10 レポートの用紙設定(p002-template/p002-template.rdlx-json)

 レポートにtemplateレイヤーを追加後、画面全体にテンプレート画像を表示するImageレポートコントロールを追加し、レイヤーをtemplateに設定します。

 次に、templateレイヤーを設定します。出力デバイスは「画面に表示」のみを有効にし、「ロック」と「透過」(50%)を設定します。この設定により、帳票デザイナ上でtemplateレイヤーは透過して(薄い色で)表示され、また、誤って編集されることがなくなります。

図11 templateレイヤーの設定(p002-template/p002-template.rdlx-json)
図11 templateレイヤーの設定(p002-template/p002-template.rdlx-json)

 帳票エディタに透過表示されるテンプレートを頼りに、図12の通りレポートコントロールを配置していきます。

図12 レポートコントロールの配置(p002-template/p002-template.rdlx-json)
図12 レポートコントロールの配置(p002-template/p002-template.rdlx-json)

 帳票に表示するデータはリスト3のJSONファイルです。JSONファイルにはコメントを入れられませんが、リスト3では便宜上、コメントでデータ内容を説明しています。

[リスト3]図8、9のサンプルで表示するデータのJSONファイル(p002-template/report-data.json)
[
  {
    "id": 1, // ID ...(1)
    "receiver": { // お届け先の名前、郵便番号、住所、電話番号 ...(2)
      "name": "北村隆司",
      "zip": "000-0000",
      "address": "北海道札幌市中央区南〇条西□丁目 コーポ山本301",
      "tel": "011-151-00〇〇"
    },
    "sender": { // ご送付元の名前、郵便番号、住所、電話番号 ...(3)
      "name": "山本権兵衛",
      "zip": "999-9999",
      "address": "東京都港区中央〇丁目〇-〇",
      "tel": "03-3123-45〇〇"
    },
    "products": // 送付物(No、商品名、数量) ...(4)
    [
      {
        "number": 1, "name": "モバイルバッテリー", "quantity": 5
      },
      {
        "number": 2, "name": "スマホケース", "quantity": 10
      },
      {
        "number": 3, "name": "画面保護フィルム", "quantity": 3
      }
    ]
  },
(略)
]

 (1)がデータのIDで、送付状1ページのデータごとに一意の値を設定します。(2)と(3)はお届け先とご送付元の情報(名前、郵便番号、住所、電話番号)です。(4)は送付物のリストで、データが階層構造になっています。階層構造をもつJSONデータの表示方法については前回記事で説明していますので参考にしてください。

 なお、1ページに1データを表示するため、レポートの「グループ」にリスト3(1)のidを設定しています。idはデータごとに一意の値を設定するので、1ページに1データが表示されるようになります。

図13 レポートのグループ設定(p002-template/p002-template.rdlx-json)
図13 レポートのグループ設定(p002-template/p002-template.rdlx-json)

印刷時やエクスポート時に透かしとQRコードを追加表示

 テンプレートへのはめ込み印刷は「印刷時やエクスポート時に要素を表示させなくする」処理でしたが、今度は逆に「印刷時やエクスポート時に要素を追加表示する」処理の例として、図14と図15のサンプルを説明します。画面表示は図14の通りで、社員IDを入力するとプレビューを表示します。

図14 透かしとQRコードを追加表示するサンプルの画面表示(p003-confidential)
図14 透かしとQRコードを追加表示するサンプルの画面表示(p003-confidential)

 一方、印刷時やエクスポート時(図15)は、「Confidential」の透かしと、入力された社員IDのQRコードを追加します。

図15 透かしとQRコードを追加表示するサンプルの印刷結果(p003-confidential)
図15 透かしとQRコードを追加表示するサンプルの印刷結果(p003-confidential)

 このように動作させるには、まず、社員IDを入力するパラメータemployeeIdを図16の通り設定します。

図16 社員IDのパラメータ(p003-confidential/p003-confidential.rdlx-json)
図16 社員IDのパラメータ(p003-confidential/p003-confidential.rdlx-json)

 次に、レポートにconfidentialレイヤーを追加します。出力デバイスは「印刷」と「エクスポート」を指定して、画面には表示されないようにします。

図17 confidentialレイヤーの追加(p003-confidential/p003-confidential.rdlx-json)
図17 confidentialレイヤーの追加(p003-confidential/p003-confidential.rdlx-json)

 帳票の表示内容やデータは、前回記事で説明した階層JSONデータのサンプルと同じものです。この帳票デザインに「Confidential」の文言を表示するTextBoxレポートコントロールと、QRコードを表示するBarcodeレポートコントロールを追加し、それぞれにconfidentialレイヤーを設定します。

図18 図14、15に対応する帳票デザイン(p003-confidential/p003-confidential.rdlx-json)
図18 図14、15に対応する帳票デザイン(p003-confidential/p003-confidential.rdlx-json)

 Barcodeレポートコントロールは、設定された値に対応するさまざまな種類のバーコードを表示できるレポートコントロールで、このサンプルではQRコードの表示に利用しています。「値」プロパティに、図16で設定したパラメータemployeeIdを設定して、社員IDを埋め込んだQRコードを表示させます。

図19 Barcodeレポートコントロールにパラメータを設定(p003-confidential/p003-confidential.rdlx-json)
図19 Barcodeレポートコントロールにパラメータを設定(p003-confidential/p003-confidential.rdlx-json)

まとめ

 本記事では、2020年12月にリリースされたActiveReportsJSの新バージョンV2Jで新たに追加された、帳票デザインのレイヤー機能について説明しました。レポートコントロールをレイヤーに振り分けて、各レイヤーの表示と非表示を設定することで、画面表示・印刷・エクスポートのそれぞれに適した形式で帳票を生成できます。

参考資料

関連リンク

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

著者プロフィール

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

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5