ActiveReportsJSのExcelインポート機能を使って、Excel帳票をWeb化する！

JavaScript帳票ライブラリ「ActiveReportsJS（アクティブレポートJS）」には、既存のExcelファイルを帳票デザイナに取り込み、レポート定義へ変換できるExcelインポート機能が用意されています。この機能を利用することで、使い慣れたExcel帳票のレイアウトを活用しながら、Web帳票を作成できます。

そこで今回は、毎月定期的に作成する社内向け資料を想定したExcel帳票「売上報告書」をActiveReportsJSにインポートします。さらに、Web APIからの取得を想定したJSON形式の売上データと連携し、Web帳票を作成する方法をご紹介します。

事前準備

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

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

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

また、作成した帳票をブラウザ上に表示するため、以下のクイックスタートを参考に、ActiveReportsJSの帳票ビューワを組み込んだWebアプリケーションをあらかじめ作成してください。

ActiveReportsJS V6J – ビューワの使用（JavaScript）

HTMLとJavaScript、Expressを使用して、ActiveReportsJSの帳票ビューワを組み込んだWebアプリケーションを作成する方法について説明します。

クイックスタート > JavaScript > ビューワの使用

Excel帳票をインポートする

ここからは、Excelで作成した「売上報告書」をActiveReportsJSの帳票デザイナにインポートし、Web帳票のレイアウトとして利用できるようにします。

「売上報告書」には全社の売上概要を表示し、「部門別明細」には部門ごとの売上実績を表形式で表示します。

使用するExcel帳票

今回は、以下のようなExcel形式の売上報告書を使用します。

Excelファイルは以下のGithubリポジトリの［Download raw file］ボタンより取得してください。

• 売上高報告書.xlsx

この売上報告書は、月次の売上状況を確認するための帳票を想定しており、次の項目で構成されています。

• 達成率に応じた評価基準
• 売上合計、目標金額、達成率、前年比をまとめた概要
• 部門ごとの売上高、目標、達成率、粗利益などをまとめた部門別実績
• 売上状況に関する備考

部門別明細には、営業第一部、営業第二部、営業第三部、法人営業部、海外事業部、EC事業部の売上実績が記載されています。

Excel帳票にはあらかじめ売上実績が入力されていますが、Web帳票化後はWeb APIから取得することを想定したJSON形式の売上実績データを表示します。そのため、Excelに入力されている値はレイアウトを確認するためのサンプルとして使用し、インポート後にデータフィールドへ置き換えていきます。

Excelファイルにテーブル領域を定義する

ActiveReportsJSのExcelインポート機能では、Excelファイル内の表として使用する領域に名前を定義することで、インポート時にActiveReportsJSのTableデータ領域へ変換できます。

Excelファイル内のテーブル領域を定義する

Excelインポート時にActiveReportsJSのTableデータ領域として取り込みたい表領域の定義方法を解説します。

レポート作成者ガイド > Excelインポート > Excelファイル内のテーブル領域を定義する

今回は、「売上報告書」シートの部門別実績と、「営業第一部」シートの売上明細をTableデータ領域として取り込みます。

「売上報告書」シートは、全社の売上概要と部門別の実績をまとめた集計ページとして使用します。「営業第一部」シートは、部門ごとの売上明細を表示するページの共通レイアウトとして使用します。

Excelファイル内に2つのテーブル領域を定義するため、「売上報告書シート.部門別実績」にはARTable1、「営業第一部.売上明細」にはARTable2から始まる名前を設定します。

売上報告書の部門別実績を定義する

はじめに、「売上報告書」シートの部門別実績にテーブル領域を定義します。

Excelの［数式］タブから［名前の管理］を開き、表全体と、表を構成する各領域に次の名前を設定します。

• 表全体：ARTable1
• 見出し行：ARTable1.TableHeader
• 明細領域：ARTable1.Detail
• 合計行：ARTable1.TableFooter

上記の設定により、部門別実績の表示領域を1つのTableデータ領域として取り込めます。

営業第一部の売上明細を定義する

続いて、「営業第一部」シートの売上明細にもテーブル領域を定義します。

「営業第一部」シートは、各部門の売上明細を表示する共通レイアウトとして使用します。営業第二部以降のシートも同じレイアウトで構成されているため、今回は「営業第一部」シートを代表してインポートします。

Excelの［名前の管理］を開き、売上明細の表全体と各領域に次の名前を設定します。

• 表全体：ARTable2
• 見出し行：ARTable2.TableHeader
• 明細領域：ARTable2.Detail
• 合計行：ARTable2.TableFooter

上記の設定により、売上明細の表示領域を1つのTableデータ領域として取り込めます。

2つのテーブル領域への設定が完了したら、Excelファイルを上書き保存します。

帳票デザイナでExcelファイルを読み込む

Excelファイルの準備が完了したら、ActiveReportsJSの帳票デザイナを起動します。

［ファイル］メニューから［インポート］を選択し、Microsoft Excelインポートウィザードを開きます。［ファイルを開く］をクリックして、先ほどテーブル領域を定義したExcelファイルを選択してください。

続いて、出力するレポート形式に［ページレポート］を指定し、インポートするシートとして次の2つを選択します。

• 売上報告書
• 営業第一部

「営業第二部」以降のシートは「営業第一部」と同じレイアウトで構成されているため、今回のインポート対象には含めません。

また、［テキストとしてExcelの数式をインポートする］にはチェックを入れず、Excelに設定されている数式は計算結果として取り込みます。

設定内容を確認し、［インポート］をクリックします。詳しい操作手順は、以下の動画をご覧ください。

インポートが完了すると、「売上報告書」と「営業第一部」のレイアウトが、それぞれページレポートの異なるページとして表示されます。

• 1ページ目：売上報告書
• 2ページ目：営業第一部 売上明細

また、Excelファイルで名前を定義した「売上報告書」の部門別実績と、「営業第一部」の売上明細は、それぞれTableデータ領域として取り込まれます。

以上で、Excel帳票のインポートは完了です。作成したレポートを「sales-report.rdlx-json」というファイル名で保存します。

JSON形式の売上データを設定する

続いて、インポートした帳票で使用するJSON形式の売上データを設定します。今回は、Web APIから売上明細データを取得するケースを想定し、次のJSONファイルを使用します。

JSONファイルは、以下のGitHubリポジトリの［Download raw file］ボタンより取得してください。

• salesreports-data.jsonを開く

JSONファイルには、営業第一部からEC事業部までの売上明細データが配列形式で格納されています。各データには、部門情報、売上日、顧客名、案件名、売上金額、粗利益、粗利率、担当者が含まれています。

JSONデータソースを設定する

帳票デザイナで売上データを確認しながら編集するため、取得したsalesreports-data.jsonを埋め込みデータソースとして設定します。

［データ］タブの［データソース］から［追加］をクリックし、次の内容を設定します。

• 名前：SalesReportsData
• データ形式：［JSON］
• ソースの種類：［埋め込み］

［埋め込みデータ］の［読み込み］をクリックしてsalesreports-data.jsonを選択し、設定を保存します。

データセットを作成する

続いて、追加したSalesReportsDataデータソースに、次の2つのデータセットを作成します。

• 各部門の売上明細を取得するSalesDetails
• 全社および部門の基本情報を取得するDepartments

部門データセットを作成する

［データ］タブに表示されたSalesReportsDataの［追加］をクリックし、次の内容を設定します。

• 名前：Departments
• JSONパス：$.departments[*]

［検証］をクリックし、次のフィールドが取得されることを確認します。

• deptCode
• deptSort
• deptName
• yearMonth
• targetAmount
• previousYearAmount

Departmentsデータセットには、「全社」と各部門の基本情報、目標金額、前年実績が含まれています。「全社」はdeptCodeがD00、deptSortが0として定義されています。

フィールドが取得されたことを確認し、設定を保存します。

売上明細データセットを作成する

• 名前：SalesDetails
• JSONパス：$.salesDetails[*]

［検証］をクリックし、次のフィールドが取得されることを確認します。

• deptCode
• date
• customer
• project
• amount
• grossProfit
• grossMargin
• owner

フィールドが取得されたことを確認し、設定を保存します。

SalesDetailsデータセットには、営業第一部からEC事業部までの売上明細が格納されており、deptCodeを使用して各部門と売上明細を関連付けます。

以上で、JSON形式の売上データを帳票から参照するための準備は完了です。

インポートした帳票を編集する

続いて、インポートした帳票にJSON形式の売上データを設定し、Web帳票として使用できるように編集します。

帳票レイアウトのサイズを調整する

はじめに、Excelから取り込んだ帳票レイアウトのサイズを調整します。

インポートした各コントロールは、既定の用紙設定に対して周囲に余白ができるため、ページ内の配置領域に合わせて位置とサイズを調整します。

詳細な設定値は、以下の表をご確認ください。

レポートに出力データを設定する

続いて、今回作成する帳票に表示するデータを、レポートに設定します。

今回作成する帳票では、基本的に1ページに1部門の売上明細を出力します。一方、最初に表示する「売上報告書」は、部門単位の明細ページではなく、全社の売上概要や各部門の集計値をまとめたページとして出力します。

帳票で使用するデータとして、あらかじめDepartmentsとSalesDetailsの2つのデータセットを追加しています。このうち、Departmentsには全社および各部門の基本情報、目標金額、前年実績が含まれているため、レポート全体のデータセットとして設定し、deptCodeを条件にデータをグループ化します。

設定するプロパティは、以下のとおりです。

部門コードに応じて表示するページを切り替える

レポート全体にDepartmentsデータセットを設定すると、全社を表すD00から各部門のデータまで、グループ単位で順番に処理されます。

このうち、D00を処理するときは「売上報告書」ページを表示し、D01以降の各部門を処理するときは「部門別売上明細」ページを表示します。

この動作を実現するため、「売上報告書」ページと「部門別売上明細」ページの［非表示］プロパティに、それぞれ次の式を設定します。

売上報告書ページを編集する

続いて、最初に表示する「売上報告書」ページを編集します。

売上報告書には、全社の売上概要と、各部門の売上高や目標金額などをまとめた部門別実績を表示します。

全社の目標金額や前年実績には、レポート全体に設定したDepartmentsデータセットのD00の値を使用します。一方、売上合計や粗利益などの実績値は、SalesDetailsデータセットに含まれる売上明細を集計して表示します。

売上報告書のヘッダと全社概要を設定する

売上報告書ページの上部には、帳票タイトル、対象年月、会社名、作成部門、作成日を表示します。

その下の概要欄には、SalesDetailsデータセットから集計した売上合計と、レポート全体に設定したDepartmentsデータセットの全社データを使用して、目標金額、達成率、前年比を表示します。

各TextBoxのプロパティを、以下のとおり設定します。

売上合計はSalesDetailsデータセット全体のamountを合計して算出します。売上報告書ページが表示されるとき、レポート全体では全社を表すD00を処理しているため、targetAmountとpreviousYearAmountは全社の値を参照します。

部門別実績を設定する

続いて、「売上報告書」ページの部門別実績に、各部門の集計値を表示します。

部門別実績TableにはSalesDetailsデータセットを設定し、deptCodeを条件に明細データをグループ化します。これにより、SalesDetailsに含まれる売上明細を部門単位で集計して表示できます。

部門別実績Tableでは、SalesDetailsのdeptCodeを基準にグループ化します。部門名、目標金額、前年実績はSalesDetailsに含まれていないため、Lookup関数を使用してDepartmentsデータセットから取得します。

Lookup

指定したデータセットから、指定したフィールドの最初に一致する値を返します。

レポート作成者ガイド > 式 > 関数 > その他

部門別実績Tableは、項目名を表示するヘッダー行、部門ごとの集計値を表示する詳細行、全部門の合計値を表示するフッター行で構成されています。

部門別実績Tableと各行に配置されたTextBoxのプロパティを、以下のとおり設定します。

{IIF(
  Sum(amount) / Lookup(deptCode, deptCode, targetAmount, "Departments") Is Nothing,
  "",
  IIF(
    Sum(amount) / Lookup(deptCode, deptCode, targetAmount, "Departments") >= 1.05,
    "◎",
    IIF(
      Sum(amount) / Lookup(deptCode, deptCode, targetAmount, "Departments") >= 1,
      "○",
      IIF(
        Sum(amount) / Lookup(deptCode, deptCode, targetAmount, "Departments") >= 0.95,
        "△",
        "×"
      )
    )
  )
)}

フッター行には、全部門の合計値を表示します。売上高と粗利益は SalesDetailsデータセット全体から集計し、目標金額と前年実績は、 Departmentsデータセットに含まれる全社データ D00から取得します。

そのため、目標金額、達成率、前年比、評価の式では、 Lookup関数の検索値にD00を指定します。

{IIF(
  Sum(amount) / Lookup("D00", deptCode, targetAmount, "Departments") Is Nothing,
  "",
  IIF(
    Sum(amount) / Lookup("D00", deptCode, targetAmount, "Departments") >= 1.05,
    "◎",
    IIF(
      Sum(amount) / Lookup("D00", deptCode, targetAmount, "Departments") >= 1,
      "○",
      IIF(
        Sum(amount) / Lookup("D00", deptCode, targetAmount, "Departments") >= 0.95,
        "△",
        "×"
      )
    )
  )
)}

部門別売上明細ページを編集する

続いて、各部門の売上明細を表示する「部門別売上明細」ページを編集します。

このページは、レポート全体に設定した Departments データセットの各部門レコードごとに繰り返し出力されます。現在処理中の部門コードを条件に SalesDetails データセットを絞り込み、部門ごとの売上明細を一覧表示します。

まずは、ページ上部に表示する部門情報を設定します。

部門情報を表示する

ページ上部には、部門名や対象年月に加えて、明細データの集計結果から算出した売上高や、Departments データセットの目標金額・前年比実績を基に計算した達成率、前年比、評価を表示します。

各TextBoxのプロパティを、以下のとおり設定します。

{IIF(
  Sum(LookupSet(deptCode, deptCode, amount, "SalesDetails")) / targetAmount Is Nothing,
  "",
  IIF(
    Sum(LookupSet(deptCode, deptCode, amount, "SalesDetails")) / targetAmount >= 1.05,
    "◎",
    IIF(
      Sum(LookupSet(deptCode, deptCode, amount, "SalesDetails")) / targetAmount >= 1,
      "○",
      IIF(
        Sum(LookupSet(deptCode, deptCode, amount, "SalesDetails")) / targetAmount >= 0.95,
        "△",
        "×"
      )
    )
  )
)}

売上高TextBoxでは、LookupSet 関数を使用して 現在処理中の部門コードに対応する SalesDetails データを取得し、 Sum 関数で集計した売上高を表示します。 一方、目標金額と前年実績は Departments データセットの値をそのまま利用しています。 そのため、達成率と前年比は 売上高と Departments の値を組み合わせて計算しています。

LookupSet

指定したデータセットから、指定したフィールドのすべての一致する値を返します。

レポート作成者ガイド > 式 > 関数 > その他

売上明細Tableを設定する

続いて、各部門の売上明細を一覧表示する売上明細Tableを設定します。

売上明細ページでは、レポート全体で処理中の部門コードに対応する売上明細のみを表示します。そのため、売上明細TableにはSalesDetailsデータセットを設定し、現在処理中の部門コードを条件にデータを絞り込みます。

また、売上明細の前には見出しを表示するため、見出しTextBoxの設定も行います。

売上明細見出しTextBox、売上明細Tableと各行に配置されたTextBoxのプロパティを、以下のとおり設定します。

売上報告書の備考欄を設定する

最後に、「売上報告書」ページの備考欄を設定します。

備考欄には、実行時に入力された内容を表示できるように、レポートパラメータを使用します。まず、複数行の文字列を入力できるレポートパラメータを作成し、その値を備考TextBoxに設定します。

備考入力用のレポートパラメータを作成する

［データ］タブの［パラメータ］から［追加］をクリックし、新しいレポートパラメータを作成します。

追加したパラメータを選択し、次の内容を設定します。

・全社売上高は123,640,000円、目標120,110,000円に対し達成率102.9%と目標を達成
・法人営業部が36,500,000円（全社比29.5%）と最大の貢献。達成率104.2%、前年比112.0%と好調
・EC事業部は達成率108.0%・前年比125.0%と全部門で最も高い伸長。粗利率35.0%も全社最高
・海外事業部は為替影響により達成率94.5%・前年比92.0%と唯一の未達。下期の挽回に注力
・営業第二部は達成率99.0%と僅かに未達。粗利率28.0%の改善が課題

備考欄にパラメータの値を表示する

続いて、作成した Notes パラメータの値を、売上報告書ページの備考欄に表示します。

備考TextBoxの［値］プロパティに Notes パラメータを設定します。これにより、レポート実行時に入力した内容が備考欄に表示されます。

また、備考欄の見出しと評価基準を表示する各TextBoxについても、以下のとおり設定します。

パラメータパネルをカスタマイズする

作成した Notes パラメータは、レポートをプレビューするとパラメータパネルに表示されます。備考を複数行で入力しやすくするため、パラメータパネルをフリーフォーム形式に変更し、入力欄とプレビューボタンの位置やサイズを調整します。

以下の動画を参考に、調整を行ってください。

Webアプリケーションで動作を確認する

最後に、作成したレポートをActiveReportsJSの帳票ビューワに表示して、動作を確認します。

保存したsales-report.rdlx-jsonを、事前に作成したWebアプリケーションのreportsフォルダに配置します。 次に、帳票ビューワで対象のレポートファイルを読み込むように、以下のコードを変更します。

<!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-xlsxAdv.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/sales-report.rdlx-json");
    </script>
  </body>
</html>

次に、以下のコマンドを実行して、Webアプリケーションを起動します。その他の行を表示する

node .\server.js

WebブラウザでWebアプリケーションを開き、パラメータパネルの［備考入力］に任意の内容を入力して、レポートをプレビューします。

レポートが表示されたら、入力した内容が売上報告書の備考欄に反映されていることを確認します。また、1ページ目には全社の売上概要と部門別実績、2ページ目以降には各部門の売上明細が表示されます。

さいごに

今回は、ActiveReportsJSのExcelインポート機能を使用して、毎月定期的に作成する社内向け資料を想定したExcel帳票「売上報告書」をレポート定義へ変換し、JSON形式の売上データと連携するWeb帳票を作成しました。Excelファイル内の表に名前を定義することで、表形式の領域をTableデータ領域として取り込み、Excelで作成したレイアウトを最大限に生かしながら帳票を開発できます。

Excel帳票をWeb帳票化することで、毎月のデータ入力や集計、部門別明細の作成といった定期作業を効率化できます。また、レポートパラメータを利用することで、帳票の実行時に入力した備考を出力内容へ反映できます。

さらに、Web APIから取得した最新のデータを帳票へ反映する仕組みに発展させることで、手作業による入力や集計の負担を軽減できます。

本記事で使用したExcelファイルやJSONデータ、レポートファイル、Webアプリケーションのソースコードは、GitHubリポジトリで公開しています。動作確認や帳票作成の参考として、あわせてご活用ください。

Excel帳票のレイアウトを生かしてWeb帳票を作成したい方は、ぜひ本記事を参考にしていただけると幸いです。

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

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

• デモアプリケーションを試す
• トライアル版をダウンロードして試す

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

• 問合せ先を確認する
• 個別相談会（Web会議）について確認する