SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ActiveReports)byメシウス(AD)

レポートパーツとDesignerで帳票開発を効率化する

第3回

レポートパーツで共通部品を作成する

 帳票の種類が増えると、会社名・住所・ロゴといった共通要素を帳票ごとに作り直す問題が出てきます。ActiveReportsJSのレポートパーツ機能を使うと、これらの共通要素をライブラリ化して再利用できます。

レポートパーツの作成手順

 レポートパーツは、Designer上で作成します。共通ヘッダー(会社名・住所・電話番号)を例に、作成手順を説明します。

  1. Designerで新規レポートを作成する
  2. TextBoxを配置して、会社名(16pt)、住所(9pt)、電話番号(9pt)を縦に並べる
  3. 配置した要素をすべて選択し、右クリックメニューから「レポートパーツの作成」を選ぶ
  4. 右ペインの「レポートパーツ」タブで表示名を設定する
  5. 「名前を付けて保存」でライブラリファイルとして保存する

 図3は、レポートパーツを作成した後のDesigner画面です。右ペインに「レポートパーツ」タブが表示され、パーツの表示名を設定できます。

図3:Designerでレポートパーツを作成
図3:Designerでレポートパーツを作成

ライブラリの読み込み

 保存したレポートパーツライブラリは、Designerの初期化時にsetReportPartsLibrariesで読み込みます(リスト5)。

[リスト5]src/components/reports/ReportDesigner.tsx(レポートパーツライブラリ設定)
// レポートパーツライブラリを設定(ファイルが存在する場合のみ)
// HEADリクエストでライブラリファイルの存在を確認
const libRes = await fetch("/reports/parts-library.rdlx-json",
  { method: "HEAD" });
// ファイルが存在する場合のみライブラリとして登録
if (libRes.ok) {
  await designer.setReportPartsLibraries([
    {
      id: "/reports/parts-library.rdlx-json",
      name: "CommonParts",
      displayName: "共通パーツ",
    },
  ]);
}

 ライブラリを設定すると、Designerの左パネルの「ライブラリ」タブから、登録されたパーツを帳票上にドラッグ&ドロップで配置できるようになります。共通ヘッダーを複数の帳票で統一したい場合に便利です。

 図4は、Designerの「ライブラリ」タブを開いた状態です。「共通パーツ」の下に登録されたパーツが一覧表示され、帳票上にドラッグ&ドロップで配置できます。

図4:Designerのライブラリタブに共通パーツが表示された状態
図4:Designerのライブラリタブに共通パーツが表示された状態

マスターレポートで帳票テンプレートを管理する

 レポートパーツが「部品の再利用」を実現する機能だとすると、マスターレポートは「テンプレートの共通化」を実現する機能です。マスターレポートを使うと、共通レイアウトをベースに新規帳票を効率的に作成できます。

マスターレポートへの変換

 既存のレポートをマスターレポートに変換するには、Designerの「レポート」タブから「マスターレポートに変換」を選びます。変換後、ツールバーに「エリアの追加」ボタンが表示され、レポートエリア(コンテンツプレースホルダ)を定義できるようになります。

 図5は、受発注明細レポートをマスターレポートに変換した画面です。

図5:マスターレポートに変換した画面
図5:マスターレポートに変換した画面

マスターレポートの保存と利用

 マスターレポートを保存する際は、拡張子を.rdlx-json-masterにする必要があります。通常の.rdlx-jsonで保存すると、派生レポート作成時にDecodingErrorが発生します。

 マスターレポートをベースに新規レポートを作成するには、createReportmasterReportIdを指定します(リスト6)。

[リスト6]マスターレポートベースの新規レポート作成
// マスターレポートをベースにした新規レポートを作成
await designer.createReport({
  reportType: "CPL",
  masterReportId: "/reports/invoice-template.rdlx-json-master",
});

 派生レポートでは、マスターレポートのレイアウトが読み取り専用で表示され、レポートエリア内のみ編集可能になります。請求書・納品書・注文書のように共通レイアウトを持つ帳票群を管理する際に有効です。

 図6は、マスターレポートをベースに作成した派生レポートをDesignerで開いた状態です。右側のプロパティパネルに「マスターレポート」フィールドが表示され、マスター部分がグレーアウトして読み取り専用になっていることが確認できます。

図6:派生レポートをDesignerで開いた状態
図6:派生レポートをDesignerで開いた状態

次のページ
PDF/Excel/HTMLエクスポート

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

ComponentZine(ActiveReports)byメシウス連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 中川 幸哉(ナカガワ ユキヤ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

提供:メシウス株式会社

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

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

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/24010 2026/06/23 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング