.NET帳票コンポーネント「ActiveReports for .NET(アクティブレポート)」の使い方を解説する、「これからはじめるActiveReports帳票」。
前回のページレポート実践編(1)では、ActiveReports 20.0J SP1への移行と、複数ページレイアウト帳票を作成するためのレポートファイルやデータソース/データセットの準備を行いました。
今回はその後編として、建設業の見積書を題材に、表紙・集計・明細で構成される複数ページレイアウト帳票を作成します。実際の業務で利用される見積書では、表紙に見積概要を掲載し、続くページで金額の内訳や明細を表示するなど、ページごとに異なる役割とレイアウトが求められます。
ページレポートでは、1つの帳票に複数のページレイアウトを持たせることができ、ページごとに異なるデザインを適用できます。本記事では、ページレイアウトのグループ化やTableコントロールの集計・グループ化機能を活用しながら、表紙ページ・集計ページ・明細ページから構成される実践的な見積書帳票を作成していきます。

目次
帳票レイアウト作成の流れ
今回作成する見積書帳票は、次の3つのページレイアウトで構成されます。
- 表紙ページ:御見積書のタイトル、発注者名、工事概要、お見積金額を表示します。
- 集計ページ:工事区分ごとの見積金額の内訳と合計金額を表示します。
- 明細ページ:工事区分ごとの明細一覧を表示します。
前回作成した「MultiPageReport.rdlx」を開き、これら3つのレイアウトを順に作成していきます。それぞれのページは、見積書ごとに繰り返し出力されるよう、共通のグルーピング設定を適用します。
表紙ページの作成
まずは、見積書の1ページ目にあたる表紙ページを作成します。
新規作成した「MultiPageReport.rdlx」を開くと、デフォルトで1つのページレイアウトが用意されています。このページを表紙として利用します。表紙のデザインは次のとおりです。

ページのグルーピング設定
まず、見積書ごとに表紙・集計・明細のセットを繰り返し出力するため、ページのプロパティ設定ダイアログでグルーピングと並べ替えの設定を行います。
レポートエクスプローラーから「ページ1」を選択した状態で、プロパティウィンドウ下部の「プロパティ設定ダイアログ」リンクをクリックします。表示される「ページ」ダイアログの全般でデータセット名「estimates」を設定します。

続いて、左メニューの「グループ化」を選択し、「全般」タブのグループ化の条件(式)に=Fields!estimateNo.Valueを設定します。

さらに、「レイアウト」タブの「グループ毎にページ番号を設定する」にチェックを入れます。これにより、後述の「ページ番号の配置」で利用するPageNumberInSectionとTotalPagesInSectionが、見積書ごとに独立して1からカウントされるようになります。

最後に、左メニューの「並べ替え」を選択し、右上の[+]ボタンで並べ替え条件を追加します。「式」に=[estimateNo]を指定し、方向は「昇順」のまま「OK」で確定します。これにより、見積番号順に見積書が出力されます。

※ グループ化の設定はレポート全体で共通のため、いずれか1つのページレイアウトで設定を変更すると、他のすべてのページレイアウトにも同じ設定が適用されます。集計ページや明細ページを追加した際に、あらためて設定する必要はありません。
タイトルと発注者名の配置
続いて、レイアウトのデザインを行っていきます。

まず最初に、ページの中央上部に「御見積書」のタイトルを配置します。ツールボックスから「TextBox」をドラッグして配置し、値に御見積書を入力します。文字が指定した幅いっぱいに均等に配置されるように、TextBoxのTextAlignとTextJustifyプロパティを設定します。
次に、タイトルの下に発注者名を配置します。発注者名はestimatesデータセットのclientIdをキーに、clientsマスタから取得します。TextBoxを配置し、次の式を値に設定します。
=Lookup(Fields!clientId.Value, Fields!clientId.Value, Fields!name.Value, "clients") & " 様"
Lookup関数は、指定したキーと一致する最初のレコードから、対応する値を取得する関数です。ここでは、estimatesのclientIdをキーに、clientsマスタから該当する発注者名を取得しています。
発注者名を目立たせるため、BorderStyleプロパティを使用して上下に罫線を表示します。
各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)
タイトルTextBox(御見積書)
| プロパティ | 値 |
|---|---|
| Value | 御見積書 |
| Location.Left | 2cm |
| Location.Top | 4cm |
| Size.Width | 8cm |
| Size.Height | 2cm |
| Font.Name | メイリオ |
| Font.Size | 36pt |
| TextAlign | Justify |
| TextJustify | DistributeAllLines |
| WrapMode | NoWrap |
発注者名TextBox
| プロパティ | 値 |
|---|---|
| Value | =Lookup(Fields!clientId.Value, Fields!clientId.Value, Fields!name.Value, "clients") & " 様" |
| Location.Left | 6cm |
| Location.Top | 0cm |
| Size.Width | 16cm |
| Size.Height | 2cm |
| Font.Name | メイリオ |
| Font.Size | 28pt |
| BorderStyle.Top | Solid |
| BorderStyle.Bottom | Solid |
工事情報の配置

タイトルの下に、工事名・工事場所・工期の3項目を配置します。
まず、左側にラベル用のTextBoxを3つ配置し、それぞれ工事名、工事場所、工期と入力します。ラベルは項目名の文字数が異なるため、均等割付を設定して幅を揃えます。
続いて、ラベルの右側に値用のTextBoxを配置し、estimatesデータセットから工事情報を取得します。
工事名と工事場所は、estimatesのフィールドをそのまま値に設定します。
- 工事名
=Fields!projectName.Value - 工事場所
=Fields!constructionSite.Value
工期は、開始日と終了日をそれぞれ「yyyy年MM月dd日」の書式に整形し、「~」でつなげて表示します。Format関数を使って、次の式を設定します。
=Format(Fields!constructionPeriodStart.Value, "yyyy年MM月dd日") & "~" & Format(Fields!constructionPeriodEnd.Value, "yyyy年MM月dd日")
Format関数は、値を指定した書式に整形する関数です。日付項目に対してyyyy年MM月dd日の書式を指定することで、2026-09-01のようなISO形式の日付を2026年09月01日のように整形できます。
各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)
工事名ラベルTextBox
| プロパティ | 値 |
|---|---|
| Value | 工事名 |
| Location.Left | 1cm |
| Location.Top | 11cm |
| Size.Width | 5cm |
| Size.Height | 1cm |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| TextAlign | Justify |
| TextJustify | DistributeAllLines |
工事場所ラベルTextBox
| プロパティ | 値 |
|---|---|
| Value | 工事場所 |
| Location.Left | 1cm |
| Location.Top | 12cm |
| Size.Width | 5cm |
| Size.Height | 1cm |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| TextAlign | Justify |
| TextJustify | DistributeAllLines |
工期ラベルTextBox
| プロパティ | 値 |
|---|---|
| Value | 工期 |
| Location.Left | 1cm |
| Location.Top | 13cm |
| Size.Width | 5cm |
| Size.Height | 1cm |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| TextAlign | Justify |
| TextJustify | DistributeAllLines |
工事名TextBox
| プロパティ | 値 |
|---|---|
| Value | =Fields!projectName.Value |
| Location.Left | 7cm |
| Location.Top | 11cm |
| Size.Width | 8cm |
| Size.Height | 1cm |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| ShrinkToFit | True |
工事場所TextBox
| プロパティ | 値 |
|---|---|
| Value | =Fields!constructionSite.Value |
| Location.Left | 7cm |
| Location.Top | 12cm |
| Size.Width | 8cm |
| Size.Height | 1cm |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| ShrinkToFit | True |
工期TextBox
| プロパティ | 値 |
|---|---|
| Value | =Format(Fields!constructionPeriodStart.Value, "yyyy年MM月dd日") & "~" & Format(Fields!constructionPeriodEnd.Value, "yyyy年MM月dd日") |
| Location.Left | 7cm |
| Location.Top | 13cm |
| Size.Width | 8cm |
| Size.Height | 1cm |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| WrapMode | NoWrap |
お見積金額の配置

工期の下に、税込みのお見積金額を表示します。金額はestimateDetailsデータセットから該当する見積の明細を絞り込み、Sum関数で合計したうえで、消費税10%を加えて算出します。
「お見積金額」のラベルTextBoxと金額TextBoxをそれぞれ配置し、金額TextBoxのValueに次の式を設定します。
=Format(Sum(LookupSet(Fields!estimateNo.Value, Fields!estimateNo.Value, Fields!amount.Value, "estimateDetails")) * 1.1, "¥#,##0") + "(税込)"
LookupSet関数は、指定したキーに一致する複数の値を配列として取得する関数です。ここでは、現在の見積書のestimateNoをキーに、estimateDetailsから該当する明細のamountをすべて取得しています。取得した金額をSumで合計し、1.1倍することで消費税10%を加算しています。
金額を強調するため、TextBoxの背景にShapeコントロールを配置し、薄いグレーで塗りつぶします。ShapeコントロールのShapeStyleプロパティにRoundRect(角丸長方形)を指定することで、角に丸みを付けられ、帳票の印象を柔らかくできます。
各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)
ラベルTextBox(お見積金額)
| プロパティ | 値 |
|---|---|
| Value | お見積金額 |
| Location.Left | 1cm |
| Location.Top | 15cm |
| Size.Width | 5cm |
| Size.Height | 1cm |
| Font.Name | メイリオ |
| Font.Size | 18pt |
| Font.Weight | Bold |
| TextAlign | Justify |
| TextJustify | DistributeAllLines |
金額TextBox
| プロパティ | 値 |
|---|---|
| Value | =Format(Sum(LookupSet(Fields!estimateNo.Value, Fields!estimateNo.Value, Fields!amount.Value, "estimateDetails")) * 1.1, "¥#,##0") + "(税込)" |
| Location.Left | 7cm |
| Location.Top | 15cm |
| Size.Width | 8cm |
| Size.Height | 1cm |
| Font.Name | メイリオ |
| Font.Size | 18pt |
| Font.Weight | Bold |
| TextAlign | Right |
| BackgroundColor | Transparent |
背景Shape
| プロパティ | 値 |
|---|---|
| Location.Left | 6.8cm |
| Location.Top | 14.8cm |
| Size.Width | 8.4cm |
| Size.Height | 1.4cm |
| ShapeStyle | RoundRect |
| RoundingRadius.Default | 5pt |
| BackgroundColor | LightGray |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
発行日、有効期限、見積番号の配置

続いて、ページ右下に発行日・有効期限・見積番号の3項目を配置します。
値はestimatesデータセットのフィールドをそのまま設定します。発行日と有効期限は日付項目のため、TextBoxのFormatプロパティにyyyy年MM月dd日を指定して書式を整えます。
※ 工期のように複数のフィールドを結合する必要がない場合は、Format関数ではなくTextBoxのFormatプロパティを使うと、式をシンプルに保てます。
最後に、3項目をひとつのブロックとして見せるため、背景にShapeコントロールを配置して枠で囲みます。ShapeStyleにはRoundRectを指定し、枠線のみを表示します。
各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)
発行日TextBox
| プロパティ | 値 |
|---|---|
| Value | =Fields!issueDate.Value |
| Location.Left | 10cm |
| Location.Top | 18cm |
| Size.Width | 4cm |
| Size.Height | 0.6cm |
| Font.Name | メイリオ |
| Font.Size | 11pt |
| Format | yyyy年MM月dd日 |
有効期限TextBox
| プロパティ | 値 |
|---|---|
| Value | =Fields!expiryDate.Value |
| Location.Left | 12cm |
| Location.Top | 18.6cm |
| Size.Width | 4cm |
| Size.Height | 0.6cm |
| Font.Name | メイリオ |
| Font.Size | 11pt |
| Format | yyyy年MM月dd日 |
見積番号TextBox
| プロパティ | 値 |
|---|---|
| Value | =Fields!estimateNo.Value |
| Location.Left | 12cm |
| Location.Top | 19.2cm |
| Size.Width | 4cm |
| Size.Height | 0.6cm |
| Font.Name | メイリオ |
| Font.Size | 11pt |
背景Shape
| プロパティ | 値 |
|---|---|
| Location.Left | 10cm |
| Location.Top | 17.8cm |
| Size.Width | 6.2cm |
| Size.Height | 2.2cm |
| ShapeStyle | RoundRect |
| RoundingRadius.Default | 8pt |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
受注者情報の配置

ページ右下に、受注者情報として会社名・郵便番号・住所・電話番号・担当者の5項目を配置します。
値はLookup関数を使ってマスタから取得します。会社名・郵便番号・住所・電話番号の4項目はcontractorsマスタから、担当者はmanagersマスタから、それぞれcontractorIdおよびmanagerIdをキーに取得します。
郵便番号・電話番号・担当者はラベルを別途配置する代わりに、値の先頭に「〒」「TEL 」「担当 」の文字列を連結して表示します。
各TextBoxのValueには、次のように式を設定します。
会社名TextBox
=Lookup(Fields!contractorId.Value, Fields!contractorId.Value, Fields!name.Value, "contractors")
郵便番号TextBox
="〒" & Lookup(Fields!contractorId.Value, Fields!contractorId.Value, Fields!postalCode.Value, "contractors")
住所TextBox
=Lookup(Fields!contractorId.Value, Fields!contractorId.Value, Fields!address.Value, "contractors")
電話番号TextBox
="TEL " & Lookup(Fields!contractorId.Value, Fields!contractorId.Value, Fields!phone.Value, "contractors")
担当者TextBox
="担当 " & Lookup(Fields!managerId.Value, Fields!managerId.Value, Fields!name.Value, "managers")
最後に、5項目をひとつのブロックとして見せるため、背景にShapeコントロールを配置して枠で囲みます。発行日ブロックと同じく、ShapeStyleにはRoundRectを指定し、枠線のみを表示します。
各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)
会社名TextBox
| プロパティ | 値 |
|---|---|
| Value | 上記コードブロック参照 |
| Location.Left | 10cm |
| Location.Top | 20.95cm |
| Size.Width | 6cm |
| Size.Height | 0.75cm |
| Font.Name | メイリオ |
| Font.Size | 12pt |
郵便番号TextBox
| プロパティ | 値 |
|---|---|
| Value | 上記コードブロック参照 |
| Location.Left | 10cm |
| Location.Top | 21.7cm |
| Size.Width | 6cm |
| Size.Height | 0.75cm |
| Font.Name | メイリオ |
| Font.Size | 12pt |
住所TextBox
| プロパティ | 値 |
|---|---|
| Value | 上記コードブロック参照 |
| Location.Left | 10cm |
| Location.Top | 22.45cm |
| Size.Width | 6cm |
| Size.Height | 0.75cm |
| Font.Name | メイリオ |
| Font.Size | 12pt |
電話番号TextBox
| プロパティ | 値 |
|---|---|
| Value | 上記コードブロック参照 |
| Location.Left | 10cm |
| Location.Top | 23.2cm |
| Size.Width | 6cm |
| Size.Height | 0.75cm |
| Font.Name | メイリオ |
| Font.Size | 12pt |
担当者TextBox
| プロパティ | 値 |
|---|---|
| Value | 上記コードブロック参照 |
| Location.Left | 10cm |
| Location.Top | 23.95cm |
| Size.Width | 6cm |
| Size.Height | 0.75cm |
| Font.Name | メイリオ |
| Font.Size | 12pt |
背景Shape
| プロパティ | 値 |
|---|---|
| Location.Left | 10cm |
| Location.Top | 20.8cm |
| Size.Width | 6.2cm |
| Size.Height | 3.9cm |
| ShapeStyle | RoundRect |
| RoundingRadius.Default | 8pt |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
集計ページの作成
続いて、2ページ目にあたる集計ページを作成します。集計ページには、工事区分ごとの見積金額の内訳と合計金額を表示します。
集計ページのデザインは次のとおりです。

新しいページを作成するため、レポートに2つ目のページレイアウトを追加します。デザイナ画面下部のタブの隣にある「新規」ボタンをクリックすると、新しいページレイアウトが追加されます。
ヘッダの配置

集計ページの上部に、この見積書がどの案件のものかを示すヘッダ情報を配置します。ヘッダには、工事名・発注者名・見積番号の3項目に加えて、「御見積書」のタイトルとテーブルの見出しとなる「お見積内訳」を配置します。
工事名と発注者名は、表紙ページと同じ式を利用します。工事名はestimatesのフィールドをそのまま参照し、発注者名はLookup関数でclientsマスタから取得します。
また、上部の背景としてShapeコントロールを配置し、薄いグレー(WhiteSmoke)で塗りつぶすことで、ヘッダの範囲を視覚的に区切ります。
各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)
御見積書ラベルTextBox
| プロパティ | 値 |
|---|---|
| Value | 御見積書 |
| Location.Left | 0cm |
| Location.Top | 0cm |
| Size.Width | 4cm |
| Size.Height | 1cm |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| TextAlign | Justify |
| TextJustify | DistributeAllLines |
| WrapMode | NoWrap |
工事名TextBox
| プロパティ | 値 |
|---|---|
| Value | =Fields!projectName.Value |
| Location.Left | 2cm |
| Location.Top | 1cm |
| Size.Width | 10cm |
| Size.Height | 1cm |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| BorderStyle.Bottom | None |
発注者名TextBox
| プロパティ | 値 |
|---|---|
| Value | =Lookup(Fields!clientId.Value, Fields!clientId.Value, Fields!name.Value, "clients") & " 様" |
| Location.Left | 2cm |
| Location.Top | 2cm |
| Size.Width | 10cm |
| Size.Height | 1cm |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| BorderStyle.Bottom | None |
見積№ラベルTextBox
| プロパティ | 値 |
|---|---|
| Value | 見積№ |
| Location.Left | 10cm |
| Location.Top | 0cm |
| Size.Width | 2cm |
| Size.Height | 1cm |
| Font.Name | メイリオ |
| Font.Size | 12pt |
| TextAlign | Right |
見積番号TextBox
| プロパティ | 値 |
|---|---|
| Value | =Fields!estimateNo.Value |
| Location.Left | 12cm |
| Location.Top | 0cm |
| Size.Width | 4cm |
| Size.Height | 1cm |
| Font.Name | メイリオ |
| Font.Size | 12pt |
| Format | d |
お見積内訳ラベルTextBox
| プロパティ | 値 |
|---|---|
| Value | お見積内訳 |
| Location.Left | 0cm |
| Location.Top | 4cm |
| Size.Width | 4cm |
| Size.Height | 1cm |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| TextAlign | Justify |
| TextJustify | DistributeAllLines |
| WrapMode | NoWrap |
背景Shape
| プロパティ | 値 |
|---|---|
| Location.Left | 0cm |
| Location.Top | 0cm |
| Size.Width | 16cm |
| Size.Height | 3cm |
| ShapeStyle | RoundRect |
| RoundingRadius.Default | 10pt |
| BackgroundColor | WhiteSmoke |
| BorderStyle | None |
Tableコントロールの配置と設定

続いて、工事区分ごとの見積金額を集計するTableコントロールを配置します。Tableは、データセットのレコードを繰り返し表示するためのコントロールで、ヘッダ行・詳細行・フッタ行の3つの領域で構成されます。
ActiveReports for .NET 20.0J からは、Tableコントロールを配置すると自動的に「Tableの作成」ダイアログが表示され、フィールドの選択・列の設定・テーマの適用などをまとめて設定できるようになりました。従来はコントロール配置後にプロパティを個別に設定する必要がありましたが、この機能によりTableの初期構成を対話形式でスムーズに行えます。
ツールボックスから「Table」をお見積内訳のタイトル下にドラッグ&ドロップで配置すると、「Tableの作成」ダイアログが表示されます。次の動画のように、フィールドの選択から列の設定、テーマの設定までを順に指定し、Tableを作成します。
それぞれの手順は以下のとおりです。
- フィールドの選択:クエリに
estimateDetailsを指定し、categoryとamountのフィールドにチェックを入れます。 - グループの設定:グループ化は後のセクションで個別に設定するため、ここでは何も追加せずに「次へ」で進みます。
- 列の設定(category):
category列のヘッダラベルや並べ替えなどを設定します。今回はデフォルトのまま進みます。 - 列の設定(amount):
amount列の集計に「合計」を、表示形式に「通貨」を指定します。これにより、金額列に工事区分ごとの合計金額が集計行として表示されます。 - テーマの設定:今回は独自の書式を設定するため、「テーマ/スタイルを適用しない」にチェックを入れて「作成」ボタンをクリックします。
ダイアログを完了すると、指定した内容に基づいてTableが自動的に生成されます。生成直後のTableにはデータセット名(Estimate Details)のタイトル行と英語のヘッダが付いています。タイトル行はコンテキストメニューの「行を削除」で削除し、ヘッダの文字を「工事区分」「金額(円)」に変更します。
あわせて、金額列の表示形式(Formatプロパティ)を、Table作成ダイアログで指定した通貨の初期値c2(通貨・小数2桁)からc0(通貨・整数)に変更し、金額を整数で表示するよう調整します。
Tableの列幅・行の高さ、およびヘッダ行の各TextBoxの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)。
Table本体
| プロパティ | 値 |
|---|---|
| DataSetName | estimateDetails |
| Location.Left | 2cm |
| Location.Top | 6cm |
| FixedSize.Width | 12.6cm |
| FixedSize.Height | 14.6cm |
| Size.Width | 12.6cm |
| Size.Height | 4cm |
| Font.Name | メイリオ |
| Font.Size | 16pt |
列と行のサイズ
| プロパティ | 値 |
|---|---|
| 工事区分列 Width | 6.2cm |
| 金額列 Width | 6.4cm |
| 行(TableRow)Height | 0.8cm |
ヘッダ行「工事区分」TextBox
| プロパティ | 値 |
|---|---|
| Value | 工事区分 |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| TextAlign | Center |
| BorderStyle.Top | None |
| BorderStyle.Bottom | Solid |
| BorderStyle.Left | None |
| BorderStyle.Right | Solid |
| BorderWidth | 0.5pt |
ヘッダ行「金額(円)」TextBox
| プロパティ | 値 |
|---|---|
| Value | 金額(円) |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| TextAlign | Center |
| BorderStyle.Top | None |
| BorderStyle.Bottom | Solid |
| BorderStyle.Left | Solid |
| BorderStyle.Right | None |
| BorderWidth | 0.5pt |
工事区分ごとに詳細行をグループ化
続いて、Tableを工事区分(category)ごとにグループ化します。ここまでの手順では、Tableの作成ダイアログで表示列と集計を指定しましたが、そのままでは詳細行に明細レコードが1件ずつ表示された状態です。詳細行をcategoryでグループ化することで、明細レコードはcategory単位にグルーピングされた状態で出力されるようになります。
詳細行のグループ化を行うには、Tableを選択した状態で、プロパティウィンドウ下部の「プロパティ設定ダイアログ」リンクをクリックします。表示される「Table – 詳細行のグループ化」ダイアログの左メニューから「詳細行のグループ化」を選択し、「全般」タブの「グループ化の条件」の式に=Fields!category.Valueを指定します。

グループ化はされましたが、amount列に表示されるのは先頭レコードの金額のみとなります。これを工事区分ごとの合計金額として表示するため、amount列の式を=Sum(Fields!amount.Value)に変更します。
続いて、Table作成時に自動追加されたフッタ行を編集して「小計」行として利用し、その下に「消費税(10%)」と「合計金額」の行を追加します。合計金額の行は視覚的に強調するため、背景色をSilverに、フォントをBoldに設定します。
それぞれの行に設定する式は次のとおりです。
フッタ行「小計」の右TextBox
=Sum(Fields!amount.Value)
フッタ行「消費税(10%)」右TextBox
=Sum(Fields!amount.Value) * 0.1
フッタ行「合計金額」右TextBox
=Sum(Fields!amount.Value) * 1.1
各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)
詳細行「工事区分」TextBox
| プロパティ | 値 |
|---|---|
| Value | =Fields!category.Value |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| TextAlign | Left |
| Padding.Left | 15pt |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
詳細行「金額」TextBox
| プロパティ | 値 |
|---|---|
| Value | =Sum(Fields!amount.Value) |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| Format | c0 |
| TextAlign | Right |
| Padding.Right | 5pt |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
フッタ行「小計」左TextBox
| プロパティ | 値 |
|---|---|
| Value | 小計 |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| TextAlign | Left |
| Padding.Left | 10pt |
| BackgroundColor | WhiteSmoke |
| BorderStyle | Solid |
| BorderStyle.Top | Solid(1.5pt) |
| BorderWidth | 0.5pt |
フッタ行「小計」右TextBox
| プロパティ | 値 |
|---|---|
| Value | 上記コードブロック参照 |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| Format | c0 |
| TextAlign | Right |
| Padding.Right | 5pt |
| BackgroundColor | WhiteSmoke |
| BorderStyle | Solid |
| BorderStyle.Top | Solid(1.5pt) |
| BorderWidth | 0.5pt |
フッタ行「消費税(10%)」左TextBox
| プロパティ | 値 |
|---|---|
| Value | 消費税(10%) |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| TextAlign | Left |
| Padding.Left | 10pt |
| BackgroundColor | WhiteSmoke |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
フッタ行「消費税(10%)」右TextBox
| プロパティ | 値 |
|---|---|
| Value | 上記コードブロック参照 |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| Format | c0 |
| TextAlign | Right |
| Padding.Right | 5pt |
| BackgroundColor | WhiteSmoke |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
フッタ行「合計金額」左TextBox
| プロパティ | 値 |
|---|---|
| Value | 合計金額 |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| Font.Weight | Bold |
| TextAlign | Justify |
| TextJustify | DistributeAllLines |
| BackgroundColor | Silver |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
フッタ行「合計金額」右TextBox
| プロパティ | 値 |
|---|---|
| Value | 上記コードブロック参照 |
| Font.Name | メイリオ |
| Font.Size | 16pt |
| Font.Weight | Bold |
| Format | c0 |
| TextAlign | Right |
| Padding.Right | 5pt |
| BackgroundColor | Silver |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
Tableのフィルタ設定
続いて、Tableに表示される明細を、現在の見積書に該当するレコードのみに絞り込みます。表紙のグループ化で解説したとおり、レポート全体はestimateNoで見積書ごとにグループ化されています。ページレイアウトはグループ化された各見積書ごとに繰り返し出力されますが、Tableに設定したestimateDetailsデータセットには3件分すべての明細レコードが含まれているため、そのままではすべての明細が表示されてしまいます。
Tableのフィルタ機能を利用して、現在の見積書のestimateNoと一致するレコードのみを表示するように絞り込みます。
Tableを選択し、プロパティウィンドウの一番下にある「プロパティ設定ダイアログ」リンクをクリックします。表示されるダイアログの左メニューから「フィルタ」を選択し、次の条件を追加します。
- 式:
=Fields!estimateNo.Value - 演算子:Equal
- 値:
=Fields!estimateNo.Value

「式」と「値」に同じ=Fields!estimateNo.Valueを指定しますが、Tableの内部(estimateDetails)から見たestimateNoと、レポート全体(estimates)から見たestimateNoを比較しています。この2つが一致するレコード、つまり現在表示中の見積書に紐づく明細のみが、Tableに表示されるようになります。
備考エリアとテーブル外枠の装飾
そのほか、固定表示するコントロールを配置します。集計ページには、次のコントロールを配置します。
- テーブル外枠のShape:Tableの外側に配置し、Tableのヘッダ行で意図的に消していた罫線をShapeで補完します。
- 備考エリア:見積書に関する注意事項を表示します。
Shapeコントロールで枠を作成し、その中にラベルと本文の2つのTextBoxを配置します。
各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)
外枠のShape
| プロパティ | 値 |
|---|---|
| Location.Left | 2cm |
| Location.Top | 5.98cm |
| Size.Width | 12.6cm |
| Size.Height | 0.99cm |
| ShapeStyle | RoundRect |
| RoundingRadius.TopLeft | 5pt |
| RoundingRadius.TopRight | 5pt |
| RoundingRadius.BottomLeft | 0pt |
| RoundingRadius.BottomRight | 0pt |
| BackgroundColor | Gainsboro |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
備考エリアのShape
| プロパティ | 値 |
|---|---|
| Location.Left | 1cm |
| Location.Top | 20.67cm |
| Size.Width | 14cm |
| Size.Height | 3.2cm |
| ShapeStyle | RoundRect |
| RoundingRadius.Default | 8pt |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
備考ラベルTextBox
| プロパティ | 値 |
|---|---|
| Value | 備考 |
| Location.Left | 1.2cm |
| Location.Top | 20.78cm |
| Size.Width | 1.2cm |
| Size.Height | 0.75cm |
| Font.Name | メイリオ |
備考本文TextBox
| プロパティ | 値 |
|---|---|
| Value | ・本見積は上記有効期限内にご発注いただいた場合に有効です。 ・工事期間は着工可能日以降となります。 |
| Location.Left | 1.2cm |
| Location.Top | 21.53cm |
| Size.Width | 13.4cm |
| Size.Height | 2.2cm |
| Font.Name | メイリオ |
明細ページの作成
続いて、3ページ目にあたる明細ページを作成します。明細ページには、工事区分ごとの明細一覧を表示します。
明細ページのデザインは次のとおりです。
集計ページと同様に、デザイナ画面下部のタブの隣にある「新規」ボタンをクリックして、3つ目のページレイアウトを追加します。

ヘッダの配置
明細ページの上部に配置するヘッダは、集計ページと同じ構成です。集計ページのヘッダのコントロールをまとめてコピーし、明細ページに貼り付けてください。
貼り付け後、テーブルの見出しとなる「お見積内訳」のTextBoxの値を「お見積明細」に変更します。
Tableコントロールの配置と設定
明細ページには、工事区分ごとの明細を表示するTableコントロールを配置します。基本的な作成手順は集計ページと同じですが、表示する列と書式が異なります。
また、明細ページでは工事区分ごとに列見出しを繰り返し表示するため、ヘッダ行は削除して、後のセクションでグループヘッダ内に列見出しを配置します。
ツールボックスから「Table」をお見積明細のタイトル下にドラッグ&ドロップで配置し、表示される「Tableの作成」ダイアログで、次のように設定します。
- フィールドの選択:クエリに
estimateDetailsを指定し、item、quantity、unit、unitPrice、amountの5つのフィールドにチェックを入れます。 - グループの設定:ここでは何も追加せずに「次へ」で進みます。
- 列の設定:
unitとquantityの順序を入れ替えて、「項目」「数量」「単位」「単価」「金額」の順に並べます。あわせて、quantity、unitPrice、amountの3列は、横位置を「右揃え」、表示形式をそれぞれ「数値」「通貨」「通貨」に設定します。 - テーマの設定:「テーマ/スタイルを適用しない」にチェックを入れて「作成」ボタンをクリックします。
ダイアログを完了すると、5列のTableが自動的に生成されます。集計ページと同様にEstimate Detailsのタイトル行を削除し、続けてヘッダ行も削除します。
続いて、Tableの列幅やサイズなどの設定を行います。
各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)
Table本体
| プロパティ | 値 |
|---|---|
| DataSetName | estimateDetails |
| Location.Left | 1cm |
| Location.Top | 5cm |
| FixedSize.Width | 18.8cm |
| FixedSize.Height | 2.98cm |
| Size.Width | 13.84cm |
| Size.Height | 2.98cm |
| Font.Name | メイリオ |
列と行のサイズ
| プロパティ | 値 |
|---|---|
| 項目列 Width | 4.4cm |
| 数量列 Width | 2.24cm |
| 単位列 Width | 1.4cm |
| 単価列 Width | 2.8cm |
| 金額列 Width | 3cm |
| 行(TableRow)Height | 0.75cm |
工事区分ごとのグループ化と集計
続いて、Tableに工事区分でのグループ化を追加します。集計ページでは詳細行そのものをグループ化しましたが、明細ページでは詳細行を残したまま、工事区分ごとに表示します。また、グループヘッダに工事区分名の見出しと列見出しを、グループフッタに小計を配置します。
グループの追加
グループを追加するには、Tableを選択した状態で、プロパティウィンドウの一番下にある「プロパティ設定ダイアログ」リンクをクリックします。表示されるダイアログの左メニューから「グループ」を選択し、右上の[+]ボタンをクリックしてグループを追加します。
追加したグループについて、「全般」タブと「レイアウト」タブで次の内容を設定します。

グループの設定内容は次の通りです。
- 全般タブ
- グループ化の条件(式):
=Fields!category.Value
- グループ化の条件(式):
- レイアウトタブ
- グループヘッダを含める:チェック
- グループフッタを含める:チェック
- 可能な限り1ページに収める:チェック
「可能な限り1ページに収める」にチェックを入れることで、工事区分ごとの明細がページの途中で分断されないよう、可能な限り同じページに表示されるようになります。
[OK]ボタンをクリックすると、Tableにグループヘッダ行とグループフッタ行が追加されます。
グループヘッダの編集
グループヘッダには、工事区分名の見出しと列見出しの2行を配置します。デフォルトで追加されたグループヘッダ行を右クリックし、コンテキストメニューから「上に行を挿入」を選択して2行目を追加します。

追加した2行に、次のように設定します。
- 1行目:5つのセルをすべて結合して1つのTextBoxにし、値に
="■ " & Fields!category.Valueを設定します。 - 2行目:詳細行の列見出しとして、それぞれのセルに「項目」「数量」「単位」「単価」「金額」の固定文字を設定します。
各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)
グループヘッダ1行目(結合セル)
| プロパティ | 値 |
|---|---|
| Value | ="■ " & Fields!category.Value |
| Font.Name | メイリオ |
| Font.Size | 12pt |
グループヘッダ2行目「項目」TextBox
| プロパティ | 値 |
|---|---|
| Value | 項目 |
| Font.Name | メイリオ |
| Font.Size | 12pt |
| TextAlign | Center |
| BackgroundColor | Gainsboro |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
グループヘッダ2行目「数量」TextBox
| プロパティ | 値 |
|---|---|
| Value | 数量 |
| Font.Name | メイリオ |
| Font.Size | 12pt |
| TextAlign | Center |
| BackgroundColor | Gainsboro |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
グループヘッダ2行目「単位」TextBox
| プロパティ | 値 |
|---|---|
| Value | 単位 |
| Font.Name | メイリオ |
| Font.Size | 12pt |
| TextAlign | Center |
| BackgroundColor | Gainsboro |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
グループヘッダ2行目「単価」TextBox
| プロパティ | 値 |
|---|---|
| Value | 単価 |
| Font.Name | メイリオ |
| Font.Size | 12pt |
| TextAlign | Center |
| BackgroundColor | Gainsboro |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
グループヘッダ2行目「金額」TextBox
| プロパティ | 値 |
|---|---|
| Value | 金額 |
| Font.Name | メイリオ |
| Font.Size | 12pt |
| TextAlign | Center |
| BackgroundColor | Gainsboro |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
詳細行の編集
詳細行の各TextBoxには、対応するフィールドの値を設定します。書式と横位置はTable作成ダイアログで指定した内容が反映されているため、そのまま利用します。
詳細行の各TextBoxには、対応するフィールドの値を設定します。文字揃え(右揃え)はTable作成ダイアログで指定した内容が反映されているため、そのまま利用します。
表示形式(Formatプロパティ)についても、ダイアログで指定した「数値」「通貨」が反映されていますが、初期値では数量がn2(小数2桁)、単価・金額がc2(通貨・小数2桁)となっています。今回は数量をn1(小数1桁)に、単価・金額をc0(通貨・整数)に変更します。
各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)
詳細行「項目」TextBox
| プロパティ | 値 |
|---|---|
| Value | =Fields!item.Value |
| Font.Name | メイリオ |
| Font.Size | 12pt |
| TextAlign | Left |
| WrapMode | True |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
詳細行「数量」TextBox
| プロパティ | 値 |
|---|---|
| Value | =Fields!quantity.Value |
| Font.Name | メイリオ |
| Font.Size | 12pt |
| Format | n1 |
| TextAlign | Right |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
詳細行「単位」TextBox
| プロパティ | 値 |
|---|---|
| Value | =Fields!unit.Value |
| Font.Name | メイリオ |
| Font.Size | 12pt |
| TextAlign | Center |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
詳細行「単価」TextBox
| プロパティ | 値 |
|---|---|
| Value | =Fields!unitPrice.Value |
| Font.Name | メイリオ |
| Font.Size | 12pt |
| Format | c0 |
| TextAlign | Right |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
詳細行「金額」TextBox
| プロパティ | 値 |
|---|---|
| Value | =Fields!amount.Value |
| Font.Name | メイリオ |
| Font.Size | 12pt |
| Format | c0 |
| TextAlign | Right |
| BorderStyle | Solid |
| BorderWidth | 0.5pt |
グループフッタの編集
グループフッタは、左側4列(項目・数量・単位・単価)を範囲選択して「セルの結合」でまとめ、「〇〇 小計」のラベルを表示します。右側(金額)は、Sum関数で工事区分ごとの合計金額を表示します。視覚的に強調するため、背景色をWhiteSmoke、フォントをBoldに設定します。
グループフッタのラベルTextBox(結合セル)
=Fields!category.Value & " 小計"
グループフッタ「金額」TextBox
=Sum(Fields!amount.Value)
各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)
グループフッタのラベルTextBox(結合セル)
| プロパティ | 値 |
|---|---|
| Value | 上記コードブロック参照 |
| Font.Name | メイリオ |
| Font.Size | 12pt |
| Font.Weight | Bold |
| TextAlign | Right |
グループフッタ「金額」TextBox
| プロパティ | 値 |
|---|---|
| Value | 上記コードブロック参照 |
| Font.Name | メイリオ |
| Font.Size | 12pt |
| Font.Weight | Bold |
| Format | c0 |
| TextAlign | Right |
| BackgroundColor | WhiteSmoke |
Tableのフィルタ設定
集計ページと同様に、Tableに表示される明細を、現在の見積書に該当するレコードのみに絞り込みます。プロパティ設定ダイアログの「フィルタ」から、集計ページと同じ条件を設定してください。
ページ番号の配置
最後に、集計ページと明細ページの最下部にページ番号を付加します。
ページ番号は、TextBoxの式エディタから定義済みの書式を選択して設定できます。今回は、表紙のグループ化により見積書ごとにページが繰り返し出力されるため、「ページ番号 / 総ページ(セクション)」を選択します。

Valueには次の式が自動的に設定されます。
=Globals!PageNumberInSection & " / " & Globals!TotalPagesInSection
各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)
ページ番号TextBox
| プロパティ | 値 |
|---|---|
| Value | 上記コードブロック参照 |
| Location.Left | 0cm |
| Location.Top | 23.95cm |
| Size.Width | 16cm |
| Size.Height | 0.75cm |
| Font.Name | メイリオ |
| TextAlign | Center |
動作確認
ここまでの手順で、見積書のレポートが完成しました。プロジェクトをデバッグ実行して、動作を確認します。
JSビューワで表示するレポートファイルを、前回作成した「Report1.rdlx」から今回作成した「MultiPageReport.rdlx」に変更します。以下のコードの強調表示箇所を変更してください。
@{
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>JS Viewer</title>
<link href="~/jsViewer.min.css" rel="stylesheet">
<link href="~/index.css" rel="stylesheet">
</head>
<body onload="loadViewer()">
<div style="width: 100%; overflow-x: hidden">
<div style="float:right;width:100%" id="viewerContainer">
</div>
</div>
<script type="text/javascript" src="~/jsViewer.min.js"></script>
<script type="text/javascript">
let viewer;
function loadViewer() {
viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#viewerContainer'
});
viewer.openReport("MultiPageReport.rdlx");
}
</script>
</body>
</html>変更後、「デバッグ」メニューから「デバッグの開始」を選択、またはF5キーを押してアプリケーションを起動します。ブラウザにJSビューワが表示され、作成した見積書が表示されます。
表紙のグループ化により、estimatesデータセットに含まれる3件の見積書が繰り返し出力され、各見積書ごとに「表紙 → 集計 → 明細」の3つのレイアウトが順に表示されることを確認できます。
- 紫山邸 新築工事(EST-2026-0142):5ページ
- 青葉ビル 内装リフォーム工事(EST-2026-0143):4ページ
- 泉中央倉庫 新築工事(EST-2026-0144):5ページ
ページ番号は表紙を除く集計ページ以降に表示されます。見積書ごとに総ページ数が異なるため、集計ページには「2 / 5」「2 / 4」「2 / 5」のように、それぞれのセクション内で独立したページ番号が振られていることを確認できます。
さいごに
「これからはじめるActiveReports帳票」第8回は、ページレポート実践編(2)として、前回準備したレポートファイルとデータセットを利用し、建設業の見積書を題材に、複数ページレイアウトの帳票を作成しました。
表紙・集計・明細の3つのページレイアウトを組み合わせながら、マスタとトランザクションを分離したデータ構造を活用し、Lookup関数やLookupSet関数によるマスタ参照、Tableコントロールのグループ化と集計、Shapeコントロールによる装飾など、実務でも活用できる機能を盛り込んでいます。
ページレポートで複数のページレイアウトを組み合わせることで、表紙から明細まで、役割の異なるページを1つの帳票としてまとめて出力できます。今回のような見積書はもちろん、提案書や報告書など、複数の構成要素を持つ帳票の作成にもご活用いただけます。ぜひ本記事の内容を参考に、業務帳票の作成をお試しください。
今回作成したサンプルは、GitHubに公開しています。ぜひ参考にしてください。
今回の内容を実際に試してみたい方は、トライアル版をダウンロードしてお試しください。
製品の機能を手軽に体験できるデモアプリケーションも公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。
