ActiveReportsJSとWijmoを使って業務システムへ帳票機能を組み込む

第2回

2026/05/22 11:00

ポスト

　前回はNext.jsアプリケーションにWijmoとActiveReportsJS Viewerを組み込み、仮データを使ってUIの表示を確認しました。今回は、業務データを帳票に反映する「データバインド」の仕組みと、WijmoコンポーネントからActiveReportsJSへデータを連携させるパターンを解説します。

ポスト

対象読者

Next.jsで業務システムを開発している方
帳票機能の組み込みを検討している方
ActiveReportsJSやWijmoに興味がある方

前提環境

　筆者の検証環境は以下の通りです。

macOS Tahoe 16.1
Node.js 25.2.1
npm 11.6.2
Next.js 16.1.3
React 19.2.3
Wijmo 5.20252.44
ActiveReportsJS 6.0.1
Firebase 12.8.0

はじめに

　前回は、Next.js + Firebase + Wijmo + ActiveReportsJSの4つの技術スタックを組み込み、FlexGridやTreeViewといったWijmoコンポーネントと、ActiveReportsJS Viewerによる基本的な帳票表示を確認しました。ただし、データは仮のモックデータを使い、帳票にはまだ業務データが反映されていない状態でした。

　今回は、データバインドの仕組みを理解した上で、以下の2つを実現します。

業務データをActiveReportsJSの帳票に反映する（データバインド）
WijmoのFlexGridで選択したデータを帳票に連携する（Wijmo → ActiveReportsJS連携）

　これにより、UIで操作した内容がそのまま帳票に反映される、実践的な業務システムの姿を構築します。

ActiveReportsJSのデータバインド

　ActiveReportsJSでJSONデータを帳票に反映するには、「データソース（DataSource）」と「データセット（DataSet）」という2つの概念を理解する必要があります。まずDesignerを使ってこれらの概念と設定手順を確認し、続いてプログラムから実行時にデータをバインドする実装を見ていきます。

Designerでのデータソース設定

　ActiveReportsJS Designerを使って、データソースとデータセットを設定しましょう。
　Designerのデータタブを開き、データソース右側の「+追加」アイコンをクリックすると、データソース編集ダイアログが表示されます（図1）。ダイアログで以下を設定します。

名前：ProductsDataSource（任意）
種類：JSON
形式：埋め込み

　「埋め込み」形式は、実行時にプログラムからデータを渡す際に使用します。サンプルとなるJSONデータをあらかじめ入力しておくことで、設計時にフィールド構造を確認できます。ここでは、サンプルプロジェクトに含まれている「products.json」を入力しています。

　次に、データソース名横の「+」アイコンをクリックします（図2）。

　データセットダイアログが表示されるので、以下のように設定します（図3）。

名前：Products（任意）
クエリ（JSONPath式）：$.*（配列のルートから各要素を取得する指定）

　「検証」ボタンをクリックすると、サンプルデータからフィールドが自動検出されます。code、name、price、stock、unitといったフィールドがデータセットに追加されます。フィールドをレポートアイテムにバインドする際はDataFieldを指定します（Valueを直接指定するとデータがバインドされず、フィールド名がそのまま表示されてしまいます）。

実行時のデータバインド

　ReportViewerWithDataコンポーネントでは、レポート定義を取得した後にConnectStringを書き換えることで、任意のJSONデータをレポートにバインドしています（リスト1）。

［リスト1］src/components/reports/ReportViewerWithData.tsx（データバインド部分）

// レポート定義を取得
const response = await fetch(reportUri);
const reportDef = await response.json();

// データソースにデータをバインド
if (reportDef.DataSources && reportDef.DataSources.length > 0) {
  reportDef.DataSources[0].ConnectionProperties.ConnectString =
    "jsondata=" + JSON.stringify(data);
}

// Viewer を動的インポートして初期化
const ArViewer = await import("@mescius/activereportsjs/reportviewer");
if (!viewerRef.current) {
  viewerRef.current = new ArViewer.Viewer(hostRef.current);
}

// レポートを開く
await viewerRef.current.open(reportDef);

　"jsondata="プレフィックスに続けてJSON文字列を設定することで、外部ファイルではなくプログラムから渡したデータをレポートに反映できます。レポート定義のJSON取得 → ConnectString書き換え → Viewerでオープン、という3ステップがデータバインドの基本フローです。

　図3は、この仕組みで商品データをバインドした帳票の表示例です。

Server Componentからのデータ受け渡し

　前回のサンプルでは、各ページがクライアントコンポーネントとしてモックデータを直接インポートしていました。実際の業務システムでは、データベースからデータを取得してUIに渡す構造が必要です。Next.jsのApp Routerでは、Server Componentでデータを取得し、Client Componentにpropsで渡すパターンが推奨されています。リスト2、リスト3にこのパターンの実装例を示します。

［リスト2］src/app/reports/page.tsx（Server Component）

import { mockProducts, mockPartners, mockOrders } from "@/lib/mockData";
import ReportsPageClient from "@/components/reports/ReportsPageClient";

export default function ReportsPage() {
  const products = mockProducts.map((p) => ({
    ...p,
    createdAt: p.createdAt.toISOString(),
    updatedAt: p.updatedAt.toISOString(),
  }));
  // …中略…
  return (
    <ReportsPageClient products={products} partners={partners} orders={orders} />
  );
}

［リスト3］src/components/reports/ReportsPageClient.tsx（Client Component）

"use client";
import dynamic from "next/dynamic";
const ReportViewerWithData = dynamic(
  () => import("@/components/reports/ReportViewerWithData"),
  { ssr: false }
);

export default function ReportsPageClient(
  { products, partners }: ReportsPageClientProps
) {
  // …中略（selectedReportによるレポート切り替え）…
  const config = getReportConfig();
  return <ReportViewerWithData
    key={selectedReport} reportUri={config.uri} data={config.data} />;
}

　page.tsxはServer Componentとしてデータの取得・シリアライズを担当し、Date型をtoISOString()で文字列に変換します。Client Component側は"use client"で宣言し、dynamic({ ssr: false })でActiveReportsJS ViewerのSSRを無効化しています。このパターンにより、データの取得元をFirestoreや任意のAPIに差し替えるだけで、UIコードを変更せずにデータソースを切り替えられます。

受発注明細レポートの作成

　ここまでは商品一覧のようなフラットなデータを帳票に表示してきました。しかし、業務システムで最もよく使われる帳票は、受発注伝票のようにヘッダー情報と明細行を組み合わせた伝票形式です。

ネストデータの変換

　受発注データ（Order）はitemsプロパティに明細行の配列（OrderItem[]）を持つネスト構造です。ActiveReportsJSのJSONデータソースにこのまま渡すと、明細行を個別のフィールドとして扱えません。そこで、コード側でデータをフラット化してからレポートに渡します（リスト4）。

［リスト4］src/components/OrderReportView.tsx（受発注データのフラット化処理）

function flattenOrder(order: SerializedOrder) {
  return order.items.map((item, index) => ({
    // ヘッダー情報を各明細行に展開
    orderNumber: order.orderNumber,
    type: order.type === "purchase" ? "発注" : "受注",
    partnerName: order.partnerName,
    orderDate: formatDate(order.orderDate),
    deliveryDate: formatDate(order.deliveryDate),
    status: order.status,
    totalAmount: order.totalAmount,
    // 明細行の情報
    rowNumber: index + 1,
    productCode: item.productCode,
    productName: item.productName,
    quantity: item.quantity,
    unitPrice: item.unitPrice,
    amount: item.amount,
  }));
}

　この変換により、各明細行がヘッダー情報を含む独立したレコードになります。例えば、3件の明細を持つ受発注データは、orderNumberやpartnerNameといったヘッダー情報が各行に複製された3件のフラットなレコードに展開されます。

Designerでのレポートレイアウト設定

　受発注明細レポートでは、Designerでヘッダー情報と明細テーブルを図4のように設定します。

　伝票番号や取引先名などのヘッダー情報はテキストボックスで表示します。値の式に=First(Fields!orderNumber.Value)のような=First()関数を使用するのがポイントです（Designer上では{First(orderNumber)}と簡略表記されます）。前述のフラット化処理によって全レコードに同じヘッダー情報が含まれているため、=First()で先頭行の値を取得することで正しいヘッダーが表示されます。取引先名・日付・ステータスなど他のヘッダー項目も同様に=First()を使用します。

　明細行はテーブルコンポーネントで表示します。データセット名にOrderItemsを指定し、Details行のセルに=Fields!rowNumber.Value、=Fields!productCode.Valueなどのフィールド参照式をバインドします。Details行はDataSetのレコード数だけ自動的に繰り返されます。

　図5は、受発注データをバインドした帳票の表示結果です。

FlexGrid選択行から帳票を表示する

　ここからは、WijmoコンポーネントとActiveReportsJSを連携させるパターンを解説します。まず、FlexGridで選択した受発注データを帳票として表示するパターンです。

データフロー

　連携のデータフローは以下の通りです。

FlexGrid（行選択） → React State → ActiveReportsJS Viewer

　FlexGridのselectionChangedイベントで選択行のデータを取得し、Reactのstateに保存します。「帳票を表示」ボタンのクリック時に、stateに保持したデータをフラット化してActiveReportsJS Viewerにバインドします。

実装

　FlexGridと帳票Viewerを左右に配置し、受発注データを選択すると右側に帳票が表示されるコンポーネントを作成します（リスト5）。

［リスト5］src/components/OrderReportView.tsx（FlexGrid → Viewer連携・抜粋）

export default function OrderReportView({ orders }: OrderReportViewProps) {
  const [selectedOrder, setSelectedOrder] = useState<SerializedOrder | null>(null);
  const viewerHostRef = useRef<HTMLDivElement>(null);
  const viewerRef = useRef<any>(null);

  // FlexGridの行選択イベント
  const handleSelectionChanged = (sender: any) => {
    …中略（sender.collectionView.currentItemからorderを特定してsetSelectedOrder）…
  };

  // レポートを表示
  const handleShowReport = useCallback(async () => {
    if (!selectedOrder || !viewerHostRef.current) return;
    …中略（レポート定義取得）…
    // 選択された受発注データをフラット化してバインド
    const flatData = flattenOrder(selectedOrder);
    reportDef.DataSources[0].ConnectionProperties.ConnectString =
      "jsondata=" + JSON.stringify(flatData);
    …中略（Viewerの初期化とレポートオープン）…
  }, [selectedOrder]);

  return (
    <div className="flex gap-6">
      <div className="flex-1">
        <FlexGrid itemsSource={view} selectionChanged={handleSelectionChanged}
          isReadOnly={true} selectionMode={2}>
          …中略（FlexGridColumn定義）…
        </FlexGrid>
        <button onClick={handleShowReport} disabled={!selectedOrder}>帳票を表示</button>
      </div>
      <div className="flex-1">
        <div ref={viewerHostRef} style={{ height: "500px" }} />
      </div>
    </div>
  );
}

　selectionChangedイベントでは、sender.collectionView.currentItemで現在選択されている行のデータオブジェクトを取得できます。取得した受発注データをflattenOrderでフラット化し、レポート定義のConnectStringへ設定すると、帳票に反映されます。

　図6は、FlexGridで受発注を選択した状態の画面です。

まとめ

　本記事では、ActiveReportsJSのデータバインドの仕組みを解説し、WijmoのFlexGridと連携させる実践的なパターンを実装しました。ポイントを振り返ります。

データバインド：レポート定義のConnectStringに"jsondata=" + JSON.stringify(data)を設定する
Server Component連携：データ取得はServer Component、UI表示はClient Componentに分離する
ネストデータの伝票表現：Order + OrderItem[]をフラット化し、=First()でヘッダーを表示する
Wijmo連携：selectionChangedイベントでReact Stateを更新し、Viewerにバインドする単方向データフロー

　なお、サンプルコードにはTreeViewとFlexGridを組み合わせた複合パターンも含まれているので、あわせてご参照ください。次回は、ActiveReportsJSのレポートパーツとマスターレポートを活用して帳票の共通部品化・テンプレート管理を行い、さらにActiveReportsJS Designerを組み込んで「現場担当者が自分で帳票レイアウトを修正できる」仕組みを実現します。

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