Firebase × Next.js × Wijmo × ActiveReportsJSでつくる、現場が自走できる業務システム

第1回

ActiveReportsJS Viewerの組み込み

　ActiveReportsJS ViewerもWijmoと同様、SSR無効化が必要です。また、必須のCSSファイルを2つインポートします（リスト14）。

［リスト14］src/components/reports/ReportViewer.tsx（抜粋）

"use client";

// 必須のスタイルシート
import "@mescius/activereportsjs/styles/ar-js-ui.css";
import "@mescius/activereportsjs/styles/ar-js-viewer.css";

const initViewer = async () => {
  // 日本語ロケールを動的インポート
  await import("@mescius/activereportsjs-i18n");

  // Viewerモジュールを動的インポート
  const ArViewer = await import("@mescius/activereportsjs/reportviewer");

  // DOM要素にViewerをマウント
  viewerRef.current = new ArViewer.Viewer(hostRef.current);

  // レポート定義ファイルを開く
  await viewerRef.current.open(reportUri);
};

　@mescius/activereportsjs-i18nをインポートすることで、ViewerのUIが日本語化されます（図9）。

図9：ActiveReportsJS Viewerによる帳票表示

　ViewerのツールバーからPDF出力や印刷が可能です。ページ送り、ズーム、検索といった機能も標準で備わっており、業務帳票の閲覧に必要な機能が揃っています。

まとめ

　本記事では、Next.js + Firebase + Wijmo + ActiveReportsJSの4つの技術スタックを導入し、受発注管理システムの基盤を構築しました。SSR無効化のパターンは、両ライブラリで共通して適用できます。次回は、FirestoreのデータをActiveReportsJSにバインドし、WijmoのFlexGridで選択した行を帳票に表示する連携パターンを解説します。