.NET帳票コンポーネント「ActiveReports for .NET(アクティブレポート)」の使い方を解説する、「これからはじめるActiveReports帳票」。
これまでの連載では、ActiveReports for .NETのインストールやプロジェクト作成、PDFエクスポート機能の追加、NuGetを使った帳票プロジェクトの作成方法など、帳票開発の基礎を順番に紹介してきました。
第4回目となる今回は、ActiveReportsの代表的な帳票タイプである「セクションレポート」を取り上げます。実際によく使われる「売上明細データ」を題材に、セクションレポートの仕組みや作り方をわかりやすく解説していきます。

目次
開発環境
ActiveReports for .NETの開発環境にはOSに「Windows」、統合開発環境(IDE)に「Visual Studio」が必要となります。事前に、ActiveReportsの必要システムに記載されている、開発環境をご準備ください。
今回の開発環境では、以下を使用します。
- OS:Windows 11(24H2)
- IDE:Visual Studio 2022(Version 17.14.13)
- ActiveReports:18.0J (v18.1.1.0)
製品版の最新バージョンは以下より入手可能です。
トライアル版は無料で以下より入手可能です。
セクションレポートの構造
実際の帳票作成に入る前に、セクションレポートの構造について簡単に解説します。セクションレポートは、帳票をいくつかのセクションに分けて構成するレポートです。
各セクションには、データ行を順に出力する「詳細(Detail)」、各ページ先頭に列見出しやタイトルを載せる「ページヘッダ(PageHeader)」、各ページ末尾にページ番号などを載せる「ページフッタ(PageFooter)」、レポート全体で最初と最後に一度だけ表示する「レポートヘッダ/レポートフッタ(ReportHeader / ReportFooter)」、そしてデータをグループ単位でまとめて表示し、グループごとに小計などの集計処理を行うための「グループヘッダ/グループフッタ(GroupHeader / GroupFooter)」があります。
これらを組み合わせることで、反復行・小計・総計・ページ共通情報を整理しながら、
柔軟な帳票レイアウトを構成できます。
下図は、セクションレポートの各セクションの役割を示した例です。

WindowsFormsプロジェクトの作成
それでは実際の帳票作成を行うため、プロジェクトの作成を行っていきます。今回は第1回目でご紹介したActiveReportsのプロジェクトテンプレート「ActiveReports 18.0J Windowsフォーム アプリ」を利用して、アプリケーションの作成を行っていきます。
今回は「セクションレポート」を利用しますので、プロジェクトテンプレートの「レポート種類の選択」ダイアログで、以下のように「セクションレポート」を選択します。

今回プロジェクト名は、「SectionReportsWinformApp」として作成します。保存場所は任意の場所を設定してください。
プロジェクトの作成が完了すると、次のように「Report.rpx」というファイルが自動的に作成されます。セクションレポートのデザインを行うために、このファイルをダブルクリックして開きます。

データソースの設定
セクションレポートに限ったことではありませんが、帳票作成を行うためには、まず出力対象となるデータソースを設定する必要があります。まずはデータソースの設定から始めていきたいと思います。
今回は、データソースとして下記のJSONファイルを使用します。このデータは、次のように食料品の売上明細を再現したサンプルデータです。

以下のリンクよりファイルをダウンロードし、任意のフォルダに保存してください。
セクションレポートでデータソースを設定するには、次のようにDetailセクションのデータソースアイコンをクリックします。

レポートデータソースダイアログの表示後、「JSON」タブに切り替えてから、JSONデータ形式の選択オプションを「埋め込み」に変更します。その後、[作成]ボタンを押します。

ファイルダイアログの表示後、任意のフォルダに保存した「grocery_sales_detail.json」を選択します。

ファイル選択を行うと、次のように、JSONデータが接続文字列に設定されます。

つづいて、JSONパスの設定を行います。レポートデータソースダイアログのJSONパスにある、[作成]ボタンを押します。

JSONクエリデザイナが表示されたら、次の図のようにツリー表示されたJSONパスの中から「[*]
」を選択し、[OK]ボタンをクリックします。

レポートデータソースダイアログに戻ると、のJSONパスのテキストボックスに「$.[*]
」が設定されますので、この状態で[OK]ボタンを押せば、データソースの設定は完了となります。

JSON形式以外のデータソースの設定に関しては、以下の製品ヘルプを参考に設定してください。
帳票サイズの設定
データソースの設定が完了しましたので、帳票デザインの作成を行っていきます。まず初めに今回作成する帳票サイズの設定を行います。
Visual Studioにてレポートファイルを開いた状態で、レポートエクスプローラーを表示させ、「レポートの設定」をダブルクリックします。
※ レポートエクスプローラーを表示方法については、レポートエクスプローラーに関する製品ヘルプ内の「VisualStudioでレポートエクスプローラを表示する・非表示にする方法」を参考に設定してください。

レポート設定ダイアログの表示後、ページタブで、以下のようにマージン(余白)の設定を行います。

続いて、プリンタ設定タブに切替え、用紙サイズ、印刷の方向を以下のように設定し、[OK]ボタンを押します。

ダイアログを閉じ、VisualStudioのレポートエクスプローラー上で、「レポートコンテンツ」を選択し、プロパティウインドウより、「PrintWidth」プロパティを以下のように設定します。

セクションレポートの基本操作
帳票デザインを行うまえに、セクションレポートにおけるデザインの基本操作を解説します。
セクションレポートでは、基本的にテキストボックスなどのレポートコントロールを各セクションに配置して、帳票のデザインを行います。データを出力するためのコントロールも同様に配置しますが、より簡単にデータ出力コントロールを配置する方法も用意されています。
では、どういったものがあるか、実際の動作も含めて確認してみましょう。
テキストボックスを配置しデータフィールドを設定
以下は、基本操作と同じように、テキストボックスを配置し、そのテキストボックスにデータソースのデータフィールドを設定する方法です。
データソースのバウンドフィールドをドラッグ&ドロップ
こちらは、レポートエクスプローラーからデータソースのバウンドフィールドをドラッグ&ドロップして、テキストボックスを自動的に配置する方法です。データフィールドの設定を行わない分、こちらのほうが簡単に設定できます。
どちらの方法でも、作成できる内容は同じですので、ご自身の使いやすい方法で帳票デザインを行ってください。
レポートコントロールに対して細かなプロパティ設定を行うには、基本的にプロパティウィンドウから対象のプロパティ値を設定していきます。しかし、罫線の設定など一部の設定に関しては、プロパティウィンドウからは行えません。今回作成する帳票では、テキストボックスに罫線を設定したいと思いますので、ここで罫線の設定方法についてご紹介します。
セクションレポートの罫線設定
セクションレポートの罫線の設定は、対象のレポートコントロールを選択し、右クリックでコンテキストメニューの「罫線」より、「罫線ダイアログ」を表示して設定していきます。
「罫線ダイアログ」は、Excelの「罫線ダイアログ」の設定方法と同じUIとなっており、なじみ深い操作感で設定することができます。
ここまででご紹介した操作方法は、セクションレポートの基本操作のほんの一部です。さらに詳しい帳票デザイン方法については、以下の製品ヘルプを参考にデザインを行ってください。
帳票デザイン
ここまでご紹介してきた、セクションレポートの基本操作を活用して、ここからは実際に帳票デザインを行っていきます。
詳細(Detail)セクションのデザイン
まず、初めに基本操作でも解説した、データ出力を行うために、「詳細(Detail)」セクションにデータ出力用のコントロールを配置します。
今回は、バウンドフィールドからドラッグアンドドロップで配置しました。

この状態で、プレビューを行ってみます。

データは正しく出力されていますが、罫線や日付の書式、テキストボックス内の出力位置などが設定されていないため、このままでは「帳票」と呼ぶには物足りません。
続けて、追加したコントロールに次のような、罫線や書式の設定を行っていきましょう。

※ 詳細(Detail)セクション配置した各プロパティ値は以下をご確認ください。
詳細(Detail)内コントロールのプロパティ設定
コントロール名 | プロパティ | 値 | |
---|---|---|---|
txtField1 | DataField | [‘transaction_date’] | |
Text | txtField1 | ||
OutputFormat | ggY年M月d日 | ||
calendar | Japanese | ||
ShrinkToFit | true | ||
Font | Name | MS ゴシック | |
Alignment | Center | ||
VerticalAlignment | Middle | ||
Location | X | 0 | |
Y | 0 | ||
Size | Width | 2.752 | |
Height | 1.028 | ||
txtField2 | DataField | [‘slip_no’] | |
Text | txtField2 | ||
ShrinkToFit | true | ||
Font | Name | MS ゴシック | |
Alignment | Center | ||
VerticalAlignment | Middle | ||
Location | X | 2.752 | |
Y | 0 | ||
Size | Width | 2.306 | |
Height | 1.028 | ||
txtField3 | DataField | [‘customer_code’] | |
Text | txtField3 | ||
ShrinkToFit | true | ||
Font | Name | MS ゴシック | |
VerticalAlignment | Middle | ||
Location | X | 5.06 | |
Y | 0 | ||
Size | Width | 5.144 | |
Height | 0.514 | ||
Padding | Left | 2 | |
txtField4 | DataField | [‘customer_name’] | |
Text | txtField4 | ||
ShrinkToFit | true | ||
Font | Name | MS ゴシック | |
VerticalAlignment | Middle | ||
Location | X | 5.06 | |
Y | 0.52 | ||
Size | Width | 5.144 | |
Height | 0.508 | ||
Padding | Left | 2 | |
txtField5 | DataField | [‘super_category_code’] | |
Text | txtField5 | ||
ShrinkToFit | true | ||
Font | Name | MS ゴシック | |
VerticalAlignment | Middle | ||
Location | X | 10.204 | |
Y | 0 | ||
Size | Width | 2.286 | |
Height | 0.514 | ||
Padding | Left | 2 | |
txtField6 | DataField | [‘super_category_name’] | |
Text | txtField6 | ||
ShrinkToFit | true | ||
Font | Name | MS ゴシック | |
VerticalAlignment | Middle | ||
Location | X | 10.204 | |
Y | 0.514 | ||
Size | Width | 2.286 | |
Height | 0.514 | ||
Padding | Left | 2 | |
txtField7 | DataField | [‘category_code’] | |
Text | txtField7 | ||
ShrinkToFit | true | ||
Font | Name | MS ゴシック | |
VerticalAlignment | Middle | ||
Location | X | 12.49 | |
Y | 0 | ||
Size | Width | 2.286 | |
Height | 0.514 | ||
Padding | Left | 2 | |
txtField8 | DataField | [‘category_name’] | |
Text | txtField8 | ||
ShrinkToFit | true | ||
Font | Name | MS ゴシック | |
VerticalAlignment | Middle | ||
Location | X | 12.49 | |
Y | 0.514 | ||
Size | Width | 2.286 | |
Height | 0.514 | ||
Padding | Left | 2 | |
txtField9 | DataField | [‘item_code’] | |
Text | txtField9 | ||
ShrinkToFit | true | ||
Font | Name | MS ゴシック | |
VerticalAlignment | Middle | ||
Location | X | 14.776 | |
Y | 0 | ||
Size | Width | 5.017 | |
Height | 0.514 | ||
Padding | Left | 2 | |
txtField10 | DataField | [‘item_name’] | |
Text | txtField10 | ||
ShrinkToFit | true | ||
Font | Name | MS ゴシック | |
VerticalAlignment | Middle | ||
Location | X | 14.776 | |
Y | 0.514 | ||
Size | Width | 5.017 | |
Height | 0.514 | ||
Padding | Left | 2 | |
txtquantity1 | DataField | quantity | |
Text | txtquantity1 | ||
OutputFormat | #,##0 | ||
calendar | Japanese | ||
ShrinkToFit | true | ||
Font | Name | MS ゴシック | |
Size | 11 | ||
Alignment | Right | ||
VerticalAlignment | Middle | ||
Location | X | 19.793 | |
Y | 0 | ||
Size | Width | 2.286 | |
Height | 1.028 | ||
Padding | Right | 2 | |
txtField11 | DataField | [‘unit_price’] | |
Text | txtField11 | ||
OutputFormat | ¥#,##0 | ||
CurrencyCulture | ja-JP | ||
calendar | Japanese | ||
ShrinkToFit | true | ||
Font | Name | MS ゴシック | |
Size | 11 | ||
Alignment | Right | ||
VerticalAlignment | Middle | ||
Location | X | 22.079 | |
Y | 0 | ||
Size | Width | 2.286 | |
Height | 1.028 | ||
Padding | Right | 2 | |
txtamount1 | DataField | amount | |
Text | txtamount1 | ||
OutputFormat | ¥#,##0 | ||
CurrencyCulture | ja-JP | ||
calendar | Japanese | ||
ShrinkToFit | true | ||
Font | Name | MS ゴシック | |
Size | 11 | ||
Alignment | Right | ||
VerticalAlignment | Middle | ||
Location | X | 24.365 | |
Y | 0 | ||
Size | Width | 2.286 | |
Height | 1.028 | ||
Padding | Right | 2 |
デザイナで見ると若干わかりづらいですが、罫線や、書式設定などを行いました。このままプレビューを行ってみます。

いかがでしょうか。罫線や日付、通貨の書式が設定されたことで、ぐっと帳票らしくなってきました。
ページヘッダ(PageHeader)セクションのデザイン
続けて帳票のタイトルと、表の列見出しをページヘッダ(PageHeader)セクションに追加していきます。
ページヘッダ(PageHeader)セクションでは、ページが出力されるたびに先頭に表示されます。この動作を利用して、毎ページ、固定文字が出力されるように、帳票タイトルと、列見出しを追加します。

※ ページヘッダ(PageHeader)に配置したコントロールの各プロパティ値は以下をご確認ください。
ページヘッダ(PageHeader)内コントロールのプロパティ設定
コントロール名 | プロパティ | 値 | |
---|---|---|---|
TextBox1 | Text | 売上明細表 | |
Font | Name | MS ゴシック | |
Size | 28 | ||
Alignment | Center | ||
VerticalAlignment | Middle | ||
Location | X | 8.335 | |
Y | 0 | ||
Size | Width | 10 | |
Height | 1.312 | ||
TextBox2 | Text | 売上日 | |
BackColor | #D3D3D3 | ||
Font | Name | MS ゴシック | |
Size | 10 | ||
Alignment | Center | ||
VerticalAlignment | Middle | ||
Location | X | 0 | |
Y | 1.574 | ||
Size | Width | 2.752 | |
Height | 0.5 | ||
TextBox3 | Text | 伝票番号 | |
BackColor | #D3D3D3 | ||
Font | Name | MS ゴシック | |
Size | 10 | ||
Alignment | Center | ||
VerticalAlignment | Middle | ||
Location | X | 2.752 | |
Y | 1.574 | ||
Size | Width | 2.306 | |
Height | 0.5 | ||
TextBox4 | Text | 顧客 | |
BackColor | #D3D3D3 | ||
Font | Name | MS ゴシック | |
Size | 10 | ||
Alignment | Center | ||
VerticalAlignment | Middle | ||
Location | X | 5.06 | |
Y | 1.574 | ||
Size | Width | 5.144 | |
Height | 0.5 | ||
TextBox5 | Text | 商品大分類 | |
BackColor | #D3D3D3 | ||
Font | Name | MS ゴシック | |
Size | 10 | ||
Alignment | Center | ||
VerticalAlignment | Middle | ||
Location | X | 10.204 | |
Y | 1.574 | ||
Size | Width | 2.286 | |
Height | 0.5 | ||
TextBox6 | Text | 商品分類 | |
BackColor | #D3D3D3 | ||
Font | Name | MS ゴシック | |
Size | 10 | ||
Alignment | Center | ||
VerticalAlignment | Middle | ||
Location | X | 12.49 | |
Y | 1.574 | ||
Size | Width | 2.286 | |
Height | 0.5 | ||
TextBox9 | Text | 商品 | |
BackColor | #D3D3D3 | ||
Font | Name | MS ゴシック | |
Size | 10 | ||
Alignment | Center | ||
VerticalAlignment | Middle | ||
Location | X | 14.776 | |
Y | 1.574 | ||
Size | Width | 5.017 | |
Height | 0.5 | ||
TextBox12 | Text | 数量 | |
BackColor | #D3D3D3 | ||
Font | Name | MS ゴシック | |
Size | 10 | ||
Alignment | Center | ||
VerticalAlignment | Middle | ||
Location | X | 19.793 | |
Y | 1.574 | ||
Size | Width | 2.286 | |
Height | 0.5 | ||
TextBox14 | Text | 単価 | |
BackColor | #D3D3D3 | ||
Font | Name | MS ゴシック | |
Size | 10 | ||
Alignment | Center | ||
VerticalAlignment | Middle | ||
Location | X | 22.079 | |
Y | 1.574 | ||
Size | Width | 2.286 | |
Height | 0.5 | ||
TextBox16 | Text | 金額 | |
BackColor | #D3D3D3 | ||
Font | Name | MS ゴシック | |
Size | 10 | ||
Alignment | Center | ||
VerticalAlignment | Middle | ||
Location | X | 24.365 | |
Y | 1.574 | ||
Size | Width | 2.286 | |
Height | 0.5 |
コントロールを配置後、プレビュー表示で出力結果を確認してみます。
ヘッダ部分に配置した帳票タイトルと、列見出しが毎ページ表示されることで、すぐにでも帳票として使用できるレベルになりました。
すでに帳票として利用可能なレベルの帳票デザインは完了していますが、最後にページのフッタ部分にページ番号を追加したいと思います。
帳票にページ番号を追加するには、ReportInfoコントロールを利用します。このコントロールは、{PageNumber}
(現在のページ番号)や{PageCount}
(総ページ数)といった定義済みの書式を「FormatString」プロパティに設定することで、ページ情報を簡単に表示できるものです。
このReportInfoコントロールを、ページフッタ(PageFooter)セクションに配置します。ページフッタはページヘッダと同様に、配置されたコントロールを毎ページ出力する特性を持っています。そのため、ここにReportInfoコントロールを追加することで、すべてのページに番号を表示させることができます。
※ ReportInfoコントロールの詳細については、以下の製品ヘルプも参考にしてください
次の図のように、ReportInfoコントロールをページフッタ(PageFooter)セクションに追加し、プロパティ設定を行います。

※ ページフッタ(PageFooter)に配置した設定したコントロールの各プロパティ値は以下をご確認ください。
ページフッタ(PageFooter)内コントロールのプロパティ設定
コントロール名 | プロパティ | 値 | |
---|---|---|---|
ReportInfo1 | FormatString | {PageNumber} / {PageCount} | |
Font | Name | MS ゴシック | |
Size | 10.2 | ||
Alignment | Center | ||
Location | X | 12.065 | |
Y | 0.007 | ||
Size | Width | 2.54 | |
Height | 0.508 |
続けて、プレビューで動作確認を行います。
デバッグ実行で、アプリケーションの動作も確認してみます。
ページ番号と、ページ総数が表示されることで、実際の業務上ですぐに使える帳票が作成できました。
さいごに
「これからはじめるActiveReports帳票」第4回目は、セクションレポート入門編(1)として、「売上明細表」の作成を通して基本的なデザイン方法をご紹介しました。
次回は、セクションレポートを使いこなす上で欠かせない、もう一つの重要機能「データのグループ化」について解説します。ぜひ、あわせてご覧ください。
今回の内容について動作を確認されたい方は、是非トライアル版ダウンロードの上、お試しください。
製品の機能を手軽に体験できるデモアプリケーションも公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。