これからはじめるActiveReports帳票~セクションレポート入門編(1)

.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フォーム アプリ」を利用して、アプリケーションの作成を行っていきます。

今回は「セクションレポート」を利用しますので、プロジェクトテンプレートの「レポート種類の選択」ダイアログで、以下のように「セクションレポート」を選択します。

プロジェクトの作成1

今回プロジェクト名は、「SectionReportsWinformApp」として作成します。保存場所は任意の場所を設定してください。

プロジェクトの作成が完了すると、次のように「Report.rpx」というファイルが自動的に作成されます。セクションレポートのデザインを行うために、このファイルをダブルクリックして開きます。

Report.rpxのオープン

データソースの設定

セクションレポートに限ったことではありませんが、帳票作成を行うためには、まず出力対象となるデータソースを設定する必要があります。まずはデータソースの設定から始めていきたいと思います。

今回は、データソースとして下記のJSONファイルを使用します。このデータは、次のように食料品の売上明細を再現したサンプルデータです。

売上明細データ

以下のリンクよりファイルをダウンロードし、任意のフォルダに保存してください。

セクションレポートでデータソースを設定するには、次のようにDetailセクションのデータソースアイコンをクリックします。

データソースの設定1

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

データソースの設定2

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

データソースの設定3

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

データソースの設定4

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

データソースの設定5

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

データソースの設定6

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

データソースの設定7

JSON形式以外のデータソースの設定に関しては、以下の製品ヘルプを参考に設定してください。

ActiveReports for .NET 18.0J – データソースへの接続

セクションレポートでデータソースに接続する手順について説明します。

MESCIUS inc. docs.mescius.jp/help/activereports-18/#connect-to-a-datasource-section.html

ActiveReports for .NET(アクティブレポート)

帳票サイズの設定

データソースの設定が完了しましたので、帳票デザインの作成を行っていきます。まず初めに今回作成する帳票サイズの設定を行います。

Visual Studioにてレポートファイルを開いた状態で、レポートエクスプローラーを表示させ、「レポートの設定」をダブルクリックします。
※ レポートエクスプローラーを表示方法については、レポートエクスプローラーに関する製品ヘルプ内の「VisualStudioでレポートエクスプローラを表示する・非表示にする方法」を参考に設定してください。

帳票サイズの設定1

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

帳票サイズの設定2

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

帳票サイズの設定3

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

帳票サイズの設定4

セクションレポートの基本操作

帳票デザインを行うまえに、セクションレポートにおけるデザインの基本操作を解説します。

セクションレポートでは、基本的にテキストボックスなどのレポートコントロールを各セクションに配置して、帳票のデザインを行います。データを出力するためのコントロールも同様に配置しますが、より簡単にデータ出力コントロールを配置する方法も用意されています。

では、どういったものがあるか、実際の動作も含めて確認してみましょう。

テキストボックスを配置しデータフィールドを設定

以下は、基本操作と同じように、テキストボックスを配置し、そのテキストボックスにデータソースのデータフィールドを設定する方法です。

データソースのバウンドフィールドをドラッグ&ドロップ

こちらは、レポートエクスプローラーからデータソースのバウンドフィールドをドラッグ&ドロップして、テキストボックスを自動的に配置する方法です。データフィールドの設定を行わない分、こちらのほうが簡単に設定できます。

どちらの方法でも、作成できる内容は同じですので、ご自身の使いやすい方法で帳票デザインを行ってください。

レポートコントロールに対して細かなプロパティ設定を行うには、基本的にプロパティウィンドウから対象のプロパティ値を設定していきます。しかし、罫線の設定など一部の設定に関しては、プロパティウィンドウからは行えません。今回作成する帳票では、テキストボックスに罫線を設定したいと思いますので、ここで罫線の設定方法についてご紹介します。

セクションレポートの罫線設定

セクションレポートの罫線の設定は、対象のレポートコントロールを選択し、右クリックでコンテキストメニューの「罫線」より、「罫線ダイアログ」を表示して設定していきます。

「罫線ダイアログ」は、Excelの「罫線ダイアログ」の設定方法と同じUIとなっており、なじみ深い操作感で設定することができます。

ここまででご紹介した操作方法は、セクションレポートの基本操作のほんの一部です。さらに詳しい帳票デザイン方法については、以下の製品ヘルプを参考にデザインを行ってください。

帳票デザイン

ここまでご紹介してきた、セクションレポートの基本操作を活用して、ここからは実際に帳票デザインを行っていきます。

詳細(Detail)セクションのデザイン

まず、初めに基本操作でも解説した、データ出力を行うために、「詳細(Detail)」セクションにデータ出力用のコントロールを配置します。

今回は、バウンドフィールドからドラッグアンドドロップで配置しました。

帳票デザイン1

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

帳票プレビュー1

データは正しく出力されていますが、罫線や日付の書式、テキストボックス内の出力位置などが設定されていないため、このままでは「帳票」と呼ぶには物足りません。

続けて、追加したコントロールに次のような、罫線や書式の設定を行っていきましょう。

帳票デザイン2

※ 詳細(Detail)セクション配置した各プロパティ値は以下をご確認ください。

詳細(Detail)内コントロールのプロパティ設定
コントロール名 プロパティ
txtField1DataField[‘transaction_date’]
TexttxtField1
OutputFormatggY年M月d日
calendarJapanese
ShrinkToFittrue
FontNameMS ゴシック
AlignmentCenter
VerticalAlignmentMiddle
LocationX0
Y0
SizeWidth2.752
Height1.028
txtField2DataField[‘slip_no’]
TexttxtField2
ShrinkToFittrue
FontNameMS ゴシック
AlignmentCenter
VerticalAlignmentMiddle
LocationX2.752
Y0
SizeWidth2.306
Height1.028
txtField3DataField[‘customer_code’]
TexttxtField3
ShrinkToFittrue
FontNameMS ゴシック
VerticalAlignmentMiddle
LocationX5.06
Y0
SizeWidth5.144
Height0.514
PaddingLeft2
txtField4DataField[‘customer_name’]
TexttxtField4
ShrinkToFittrue
FontNameMS ゴシック
VerticalAlignmentMiddle
LocationX5.06
Y0.52
SizeWidth5.144
Height0.508
PaddingLeft2
txtField5DataField[‘super_category_code’]
TexttxtField5
ShrinkToFittrue
FontNameMS ゴシック
VerticalAlignmentMiddle
LocationX10.204
Y0
SizeWidth2.286
Height0.514
PaddingLeft2
txtField6DataField[‘super_category_name’]
TexttxtField6
ShrinkToFittrue
FontNameMS ゴシック
VerticalAlignmentMiddle
LocationX10.204
Y0.514
SizeWidth2.286
Height0.514
PaddingLeft2
txtField7DataField[‘category_code’]
TexttxtField7
ShrinkToFittrue
FontNameMS ゴシック
VerticalAlignmentMiddle
LocationX12.49
Y0
SizeWidth2.286
Height0.514
PaddingLeft2
txtField8DataField[‘category_name’]
TexttxtField8
ShrinkToFittrue
FontNameMS ゴシック
VerticalAlignmentMiddle
LocationX12.49
Y0.514
SizeWidth2.286
Height0.514
PaddingLeft2
txtField9DataField[‘item_code’]
TexttxtField9
ShrinkToFittrue
FontNameMS ゴシック
VerticalAlignmentMiddle
LocationX14.776
Y0
SizeWidth5.017
Height0.514
PaddingLeft2
txtField10DataField[‘item_name’]
TexttxtField10
ShrinkToFittrue
FontNameMS ゴシック
VerticalAlignmentMiddle
LocationX14.776
Y0.514
SizeWidth5.017
Height0.514
PaddingLeft2
txtquantity1DataFieldquantity
Texttxtquantity1
OutputFormat#,##0
calendarJapanese
ShrinkToFittrue
FontNameMS ゴシック
Size11
AlignmentRight
VerticalAlignmentMiddle
LocationX19.793
Y0
SizeWidth2.286
Height1.028
PaddingRight2
txtField11DataField[‘unit_price’]
TexttxtField11
OutputFormat¥#,##0
CurrencyCultureja-JP
calendarJapanese
ShrinkToFittrue
FontNameMS ゴシック
Size11
AlignmentRight
VerticalAlignmentMiddle
LocationX22.079
Y0
SizeWidth2.286
Height1.028
PaddingRight2
txtamount1DataFieldamount
Texttxtamount1
OutputFormat¥#,##0
CurrencyCultureja-JP
calendarJapanese
ShrinkToFittrue
FontNameMS ゴシック
Size11
AlignmentRight
VerticalAlignmentMiddle
LocationX24.365
Y0
SizeWidth2.286
Height1.028
PaddingRight2

デザイナで見ると若干わかりづらいですが、罫線や、書式設定などを行いました。このままプレビューを行ってみます。

帳票プレビュー2

いかがでしょうか。罫線や日付、通貨の書式が設定されたことで、ぐっと帳票らしくなってきました。

ページヘッダ(PageHeader)セクションのデザイン

続けて帳票のタイトルと、表の列見出しをページヘッダ(PageHeader)セクションに追加していきます。

ページヘッダ(PageHeader)セクションでは、ページが出力されるたびに先頭に表示されます。この動作を利用して、毎ページ、固定文字が出力されるように、帳票タイトルと、列見出しを追加します。

帳票デザイン3

※ ページヘッダ(PageHeader)に配置したコントロールの各プロパティ値は以下をご確認ください。

ページヘッダ(PageHeader)内コントロールのプロパティ設定
コントロール名 プロパティ
TextBox1Text売上明細表
FontNameMS ゴシック
Size28
AlignmentCenter
VerticalAlignmentMiddle
LocationX8.335
Y0
SizeWidth10
Height1.312
TextBox2Text売上日
BackColor#D3D3D3
FontNameMS ゴシック
Size10
AlignmentCenter
VerticalAlignmentMiddle
LocationX0
Y1.574
SizeWidth2.752
Height0.5
TextBox3Text伝票番号
BackColor#D3D3D3
FontNameMS ゴシック
Size10
AlignmentCenter
VerticalAlignmentMiddle
LocationX2.752
Y1.574
SizeWidth2.306
Height0.5
TextBox4Text顧客
BackColor#D3D3D3
FontNameMS ゴシック
Size10
AlignmentCenter
VerticalAlignmentMiddle
LocationX5.06
Y1.574
SizeWidth5.144
Height0.5
TextBox5Text商品大分類
BackColor#D3D3D3
FontNameMS ゴシック
Size10
AlignmentCenter
VerticalAlignmentMiddle
LocationX10.204
Y1.574
SizeWidth2.286
Height0.5
TextBox6Text商品分類
BackColor#D3D3D3
FontNameMS ゴシック
Size10
AlignmentCenter
VerticalAlignmentMiddle
LocationX12.49
Y1.574
SizeWidth2.286
Height0.5
TextBox9Text商品
BackColor#D3D3D3
FontNameMS ゴシック
Size10
AlignmentCenter
VerticalAlignmentMiddle
LocationX14.776
Y1.574
SizeWidth5.017
Height0.5
TextBox12Text数量
BackColor#D3D3D3
FontNameMS ゴシック
Size10
AlignmentCenter
VerticalAlignmentMiddle
LocationX19.793
Y1.574
SizeWidth2.286
Height0.5
TextBox14Text単価
BackColor#D3D3D3
FontNameMS ゴシック
Size10
AlignmentCenter
VerticalAlignmentMiddle
LocationX22.079
Y1.574
SizeWidth2.286
Height0.5
TextBox16Text金額
BackColor#D3D3D3
FontNameMS ゴシック
Size10
AlignmentCenter
VerticalAlignmentMiddle
LocationX24.365
Y1.574
SizeWidth2.286
Height0.5

コントロールを配置後、プレビュー表示で出力結果を確認してみます。

ヘッダ部分に配置した帳票タイトルと、列見出しが毎ページ表示されることで、すぐにでも帳票として使用できるレベルになりました。

ページフッタ(PageFooter)セクションのデザイン

すでに帳票として利用可能なレベルの帳票デザインは完了していますが、最後にページのフッタ部分にページ番号を追加したいと思います。

帳票にページ番号を追加するには、ReportInfoコントロールを利用します。このコントロールは、{PageNumber}(現在のページ番号)や{PageCount}(総ページ数)といった定義済みの書式を「FormatString」プロパティに設定することで、ページ情報を簡単に表示できるものです。

このReportInfoコントロールを、ページフッタ(PageFooter)セクションに配置します。ページフッタはページヘッダと同様に、配置されたコントロールを毎ページ出力する特性を持っています。そのため、ここにReportInfoコントロールを追加することで、すべてのページに番号を表示させることができます。

※ ReportInfoコントロールの詳細については、以下の製品ヘルプも参考にしてください

ActiveReports for .NET 18.0J – ReportInfo

ActiveReports for .NETでは、ReportInfoコントロールを使用して、簡単にページ番号、ページ数、レポートの日付を表示することができます。

MESCIUS inc. docs.mescius.jp/help/activereports-18/#report-info.html

ActiveReports for .NET(アクティブレポート)

次の図のように、ReportInfoコントロールをページフッタ(PageFooter)セクションに追加し、プロパティ設定を行います。

帳票デザイン4

※ ページフッタ(PageFooter)に配置した設定したコントロールの各プロパティ値は以下をご確認ください。

ページフッタ(PageFooter)内コントロールのプロパティ設定
コントロール名プロパティ
ReportInfo1FormatString{PageNumber} / {PageCount}
FontNameMS ゴシック
Size10.2
AlignmentCenter
LocationX12.065
Y0.007
SizeWidth2.54
Height0.508

続けて、プレビューで動作確認を行います。

デバッグ実行で、アプリケーションの動作も確認してみます。

ページ番号と、ページ総数が表示されることで、実際の業務上ですぐに使える帳票が作成できました。

さいごに

「これからはじめるActiveReports帳票」第4回目は、セクションレポート入門編(1)として、「売上明細表」の作成を通して基本的なデザイン方法をご紹介しました。

次回は、セクションレポートを使いこなす上で欠かせない、もう一つの重要機能「データのグループ化」について解説します。ぜひ、あわせてご覧ください。

今回の内容について動作を確認されたい方は、是非トライアル版ダウンロードの上、お試しください。

製品の機能を手軽に体験できるデモアプリケーションも公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

\  この記事をシェアする  /