ActiveReportsJSの帳票ビューワをカスタマイズしてみる

JavaScript帳票ライブラリ「ActiveReportsJS（アクティブレポートJS）」には、作成した帳票をブラウザ上に表示できる帳票ビューワが用意されています。印刷機能や拡大・縮小表示、ページ切り替えなどの基本機能に加え、PDFやExcelファイルへの出力など、帳票活用に必要な機能が備わっており、この帳票ビューワをWebアプリケーションに組み込むだけで、高機能なWeb帳票を手軽に実現できます。

一方で、既存システムのデザインに合わせたい、サイドバーを非表示にしたい、表示するレポートを切り替えたいなど、ビューワに独自の機能を追加したいケースもあるかと思います。そこで今回は、そのようなニーズに対応できるよう、帳票ビューワのカスタマイズ方法についてご紹介します。

事前準備
帳票ビューワの組込
ビューワのカスタマイズ
さいごに

事前準備

今回はActiveReportsJSの「V5.2J（v5.2.5）」を使用します。事前準備として、あらかじめ製品版、またはトライアル版をインストールしてください。トライアル版は無料で以下より入手可能です。

また、今回は以下の開発環境を使用します。事前にご準備ください。

Windows 11（24H2）
Visual Studio Code
Npm or Node.JS ※ LTS (長期サポート) バージョンのご利用をお勧め

帳票ビューワの組込

まず、はじめに基本的な帳票ビューワの組込みを行っていきます。ターミナル上で以下のコマンドを実行し、プロジェクトフォルダを作成します。

mkdir custom-reportsviewer-app

フォルダ作成後に、該当のフォルダへ移動します。

 cd custom-reportsviewer-app

次のコマンドで実行し、フォルダをVSCodeで開きます。

code .

VSCodeを開いたら、以下のようにターミナルも起動しておきます。

パッケージのインストール

続いて、以下のコマンドをターミナルで実行しpackage.jsonファイルを作成します。

npm init -y

さらに、以下のコマンドでExpressをインストールします。

npm install express

さいごに、以下のコマンドでActiveReportsJSのパッケージをインストールします。

npm install @mescius/activereportsjs@5.2.5 @mescius/activereportsjs-i18n@5.2.5

帳票レイアウトを追加

つぎに、「reports」フォルダを作成し、以下の2つの帳票レイアウトをフォルダ内に格納します。

ビューワページの追加

つぎに、帳票ビューワを組み込むために、以下のHTMLファイルをプロジェクトフォルダの直下に配置します。

<!DOCTYPE html>

<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>ActiveReportsJS Viewer</title>

        <link rel="stylesheet" href="./node_modules/@mescius/activereportsjs/styles/ar-js-ui.css" />
        <link rel="stylesheet" href="./node_modules/@mescius/activereportsjs/styles/ar-js-viewer.css" />
        <script type="text/javascript" src="./node_modules/@mescius/activereportsjs/dist/ar-js-core.js"></script>
        <script type="text/javascript" src="./node_modules/@mescius/activereportsjs/dist/ar-js-viewer.js"></script>
        <script type="text/javascript" src="./node_modules/@mescius/activereportsjs/dist/ar-js-pdf.js"></script>
        <script type="text/javascript" src="./node_modules/@mescius/activereportsjs/dist/ar-js-xlsx.js"></script>
        <script type="text/javascript" src="./node_modules/@mescius/activereportsjs/dist/ar-js-html.js"></script>
        <script type="text/javascript" src="./node_modules/@mescius/activereportsjs/dist/ar-js-tabular-data.js"></script>
        <script type="text/javascript" src="./node_modules/@mescius/activereportsjs-i18n/dist/ar-js-locales.js"></script>
        <style>
        #viewer-host {
            margin: 0 auto;
            width: 100%;
            height: 100vh;
          }
        </style>
    </head>

    <body>
        <div id="viewer-host"></div>
        <script>
            var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host", 
                { 
                    language: "ja" ,
                }
            );
            
            viewer.open("./reports/Invoice-sample1.rdlx-json");
        </script>
    </body>
</html>

続いて、追加した「index.html」ページをサーバー上で動作させるために、次の「server.js」ファイルを作成します。

const express = require('express'); //import Express.js module
const app = express();
const path = require('path'); 
app.use(express.static(path.join(__dirname)));
app.listen(8085);

追加したファイルは以下の通りです。

Webアプリケーションの起動

ここまでで、基本的なビューワの組込みは完了となりますので、以下のコマンドでWebアプリケーションを起動します。

node server.js

コマンドを実行し、ブラウザより「http://localhost:8085/」へアクセスすると、以下のようにビューワが表示され、「Invoice-sample1.rdlx-json」の帳票レイアウトに基づき、請求書の帳票が表示されます。

ビューワのカスタマイズ

では、ここからビューワのカスタマイズを行っていきます。

ビューワの配色変更

既存のアプリケーションに帳票機能を追加するなどした場合は、既存のビューワのままでは配色が合わないことなどもあると思います。こうしたケースでは、以下のようにカスタマイズすることでビューワの配色を変更することができます。

すでに実装済みの「index.html」を以下の強調表示箇所のように、変更します。

<!DOCTYPE html>

<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>ActiveReportsJS Viewer</title>

    <link rel="stylesheet" href="./node_modules/@mescius/activereportsjs/styles/ar-js-ui.css" />
    <link rel="stylesheet" href="./node_modules/@mescius/activereportsjs/styles/ar-js-viewer.css" />
    <script type="text/javascript" src="./node_modules/@mescius/activereportsjs/dist/ar-js-core.js"></script>
    <script type="text/javascript" src="./node_modules/@mescius/activereportsjs/dist/ar-js-viewer.js"></script>
    <script type="text/javascript" src="./node_modules/@mescius/activereportsjs/dist/ar-js-pdf.js"></script>
    <script type="text/javascript" src="./node_modules/@mescius/activereportsjs/dist/ar-js-xlsx.js"></script>
    <script type="text/javascript" src="./node_modules/@mescius/activereportsjs/dist/ar-js-html.js"></script>
    <script type="text/javascript" src="./node_modules/@mescius/activereportsjs/dist/ar-js-tabular-data.js"></script>
    <script type="text/javascript" src="./node_modules/@mescius/activereportsjs-i18n/dist/ar-js-locales.js"></script>
    <style>
      #viewer-host {
        margin: 0 auto;
        width: 100%;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div id="viewer-host"></div>
    <script>
        const mesciusTheme = {
            name: "MESCIUS",
            type: "light",
            backgroundMain: "#EFEDEA", // ベースカラー(1)
            backgroundPanels: "#E6E2DD", // ベースカラー(3)
            primary: {
                veryLight: "#F0EFED",   // ベースカラー(1)をより明るく
                light: "#E6E2DD",       // ベースカラー(3)
                lighter: "#D4CFC8",     // ベースカラー系の中間
                lightMedium: "#A49B8F", // グレー系中間
                medium: "#80B1A0",      // サブカラー(1)
                base: "#697683",        // メインカラー
                darkMedium: "#5A6671",  // メインカラーを少し暗く
                darker: "#4B5659",      // さらに暗く
                dark: "#3C4641",        // 濃いグレー
                veryDark: "#2D3629"     // 最も濃い色
            },
            secondary: "#AF9D52", // アクセントカラー
            error: "#AC6D85", // サブカラー(2)をエラー色として使用
            warning: "#AF9D52", // アクセントカラーを警告色として使用
            fontFamily: "Segoe UI, Meiryo, Arial, sans-serif" // 日本語対応フォント
        };

        var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host", 
            { 
                language: "ja" ,
                themeConfig: {
                    initialTheme: 'MESCIUS',
                    themeSelector: {
                        // テーマピッカーの有効／無効を設定
                        isEnabled: false,
                        // テーマピッカーで利用可能なテーマ定義
                        availableThemes: [mesciusTheme]
                    }
                }
            }
        );
        
        viewer.open("./reports/Invoice-sample1.rdlx-json");
    </script>
  </body>
</html>

先ほどと同様にアプリケーションを実行すると、次のように配色が変更されます。

コードを見るとわかるように、配色をテーマとして定義し、定義したテーマをviewerの初期テーマとして設定しています。今回はテーマを一つとして、切り替え可能にはしていませんが、複数の配色テーマを用意してテーマピッカーを有効化するとビューワ上で配色を変更することも可能です。

サイドバーの非表示

続いてのカスタマイズは、サイドバーの非表示です。PDFのエクスポートなど、ビューワにはデフォルトでさまざまな機能が実装されていますが、エクスポートを許可したくない場合や、帳票の表示領域を広げたい場合には、サイドバーを非表示にすることができます。

以下のコードの強調箇所を追加してください。

・・・（中略）・・・
            var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host", 
                { 
                    language: "ja" ,
                    themeConfig: {
                        initialTheme: 'MESCIUS',
                        themeSelector: {
                            // テーマピッカーの有効／無効を設定
                            isEnabled: false,
                            // テーマピッカーで利用可能なテーマ定義
                            availableThemes: [mesciusTheme]
                        }
                    }
                }
            );
            viewer.toggleSidebar();                     // サイドバーの非表示
            viewer.open("./reports/Invoice-sample1.rdlx-json");
        </script>
    </body>
</html>

アプリケーションを実行すると、次のようにサイドバーが非表示になっています。

カスタムボタンの追加

続いて、独自の機能を持ったカスタムボタンを追加していきたいと思います。

帳票レイアウト切替ボタン

最初に追加するカスタムボタンは、帳票レイアウトを切り替えるボタンです。

今回は、［レイアウト1］と［レイアウト2］のボタンを2つ追加し、それぞれのボタンに対してreportsフォルダに格納済みの帳票レイアウト「Invoice-sample1.rdlx-json」「Invoice-sample2.rdlx-json」を選択可能にします。

それぞれのボタンを押すと、対応した帳票レイアウトでプレビュー表示が行えるように実装します。

以下のコードの強調表示箇所を追加してください。

※ 本記事では、アイコン素材として Material Design Icons を CDN 経由で利用しています。Material Design Icons は Apache License 2.0 のもとで提供されており、商用利用を含め自由に使用可能です。
ライセンスの詳細は公式リポジトリをご確認ください：https://github.com/Templarian/MaterialDesign/blob/master/LICENSE

<!DOCTYPE html>

<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>ActiveReportsJS Viewer</title>

        <link rel="stylesheet" href="./node_modules/@mescius/activereportsjs/styles/ar-js-ui.css" />
        <link rel="stylesheet" href="./node_modules/@mescius/activereportsjs/styles/ar-js-viewer.css" />
        <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css" />        
・・・（中略）・・・
    </head>

    <body>
        <div id="viewer-host"></div>
        <script>
・・・（中略）・・・
            //カスタムボタン定義1(帳票レイアウト1への切り替え)
            var reports1Button = {
            key: "$reports1",
            icon: { type: 'font', iconCssClass: 'mdi mdi-numeric-1-box', fontSize: '24px' },    // アイコン指定(Material Design Icons)
            text: "レイアウト1",
            enabled: true,
            //ボタン動作定義の実装
            action: function (item) {
                viewer.open("./reports/Invoice-sample1.rdlx-json");            
                },
            };

            //カスタムボタン定義2(帳票レイアウト2への切り替え)
            var reports2Button = {
            key: "$reports2",
            icon: { type: 'font', iconCssClass: 'mdi mdi-numeric-2-box', fontSize: '24px' },    // アイコン指定(Material Design Icons)
            text: "レイアウト2",
            enabled: true,
            //ボタン動作定義の実装
            action: function (item) {
                viewer.open("./reports/Invoice-sample2.rdlx-json");            
                },
            };

            var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host", 
                { 
                    language: "ja" ,
                    themeConfig: {
                        initialTheme: 'MESCIUS',
                        themeSelector: {
                            // テーマピッカーの有効／無効を設定
                            isEnabled: false,
                            // テーマピッカーで利用可能なテーマ定義
                            availableThemes: [mesciusTheme]
                        }
                    }
                }
            );
            
            viewer.toggleSidebar();                     // サイドバーの非表示
            viewer.toolbar.addItem(reports1Button);     // カスタムボタン1をツールバーに追加
            viewer.toolbar.addItem(reports2Button);     // カスタムボタン2をツールバーに追加
            viewer.open("./reports/Invoice-sample1.rdlx-json");
        </script>
    </body>
</html>

実装後に、先ほど同じ手順で動作確認をしてみましょう。

ボタンの動作で、レイアウトが切替えできるようになりました。

PDF出力ボタン

さいごに、PDF出力機能を持つボタンを追加してみます。基本的な手順は先ほどと同様です。以下の強調表示箇所を追加してください。

<!DOCTYPE html>

<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>ActiveReportsJS Viewer</title>

        <link rel="stylesheet" href="./node_modules/@mescius/activereportsjs/styles/ar-js-ui.css" />
        <link rel="stylesheet" href="./node_modules/@mescius/activereportsjs/styles/ar-js-viewer.css" />
        <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css" />        
・・・（中略）・・・
    </head>

    <body>
        <div id="viewer-host"></div>
        <script>
・・・（中略）・・・
            //カスタムボタン定義3(PDF出力用)
            var pdfExportButton = {
            key: "$pdfExport",
            icon: { type: 'font', iconCssClass: 'mdi mdi-file-pdf-box', fontSize: '24px' },     // アイコン指定(Material Design Icons)
            text: "PDF出力",
            enabled: true,
            //ボタン動作定義の実装
            action: function (item) {
                viewer.export('pdf', { filename: "サンプルレポート" })
                .then(function (result) { result.download('サンプルレポート'); })
                .catch(function (error) { console.error(error); });
                },
            };

            var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host", 
                { 
                    language: "ja" ,
                    themeConfig: {
                        initialTheme: 'MESCIUS',
                        themeSelector: {
                            // テーマピッカーの有効／無効を設定
                            isEnabled: false,
                            // テーマピッカーで利用可能なテーマ定義
                            availableThemes: [mesciusTheme]
                        }
                    }
                }
            );
            
            viewer.toggleSidebar();                     // サイドバーの非表示
            viewer.toolbar.addItem(reports1Button);     // カスタムボタン1をツールバーに追加
            viewer.toolbar.addItem(reports2Button);     // カスタムボタン2をツールバーに追加
            viewer.toolbar.addItem(pdfExportButton);    // PDFボタンをツールバーに追加
            viewer.open("./reports/Invoice-sample1.rdlx-json");
        </script>
    </body>
</html>

動作確認をしてみましょう。

PDF出力機能が実装されているのが確認できました。

さいごに

今回は、帳票ビューワのカスタマイズ方法として、ビューワの配色変更やサイドバーの非表示、ツールバーに独自機能を持つボタンを追加する方法についてご紹介しました。

業務アプリケーションに帳票機能を組み込む際には、基本機能だけでなく、独自機能の実装やデザイン面への配慮も重要です。ActiveReportsJSでは、こうしたニーズにも柔軟に対応できます。ぜひ本記事を参考に、ActiveReportsJSを活用したWeb帳票開発をはじめていただけると幸いです。

ActiveReportsJSにはこの他にも日本の帳票開発のディープな要件に対応するための機能が多数搭載されていますので、ぜひWebサイトで詳しい情報をご覧ください。

Webサイトでは製品の機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼この記事をシェアする／