.NET帳票コンポーネント「ActiveReports for .NET（アクティブレポート）」の使い方を解説する、「これからはじめるActiveReports帳票」。
6回目となる今回は、「ActiveReports for .NET 7.0J」で追加された帳票タイプである「ページレポート」を取り上げます。前回ご紹介したセクションレポートとは異なり、ページレポートの特長であるWYSIWYG（What You See Is What You Get：見たままが得られる）を生かした帳票レイアウトの作成方法をご紹介します。
目次
開発環境
ActiveReports for .NETの開発環境にはOSに「Windows」、統合開発環境（IDE）に「Visual Studio」が必要となります。事前に、ActiveReportsの必要システムに記載されている、開発環境をご準備ください。
今回の開発環境では、以下を使用します。
- OS：Windows 11（24H2）
- IDE：Visual Studio 2022（Version 17.14.19）
- ActiveReports：18.0J （v18.2.0.0）
製品版の最新バージョンは以下より入手可能です。
トライアル版は無料で以下より入手可能です。
ページレポートとは？
ページレポートとは、WYSIWYG（What You See Is What You Get：見たままが得られる）方式により、画面上のデザインと印刷結果を一致させられる帳票レイアウト機能です。デザイン画面で見えているとおりのイメージがそのまま出力されるため、完成形を意識しながら直感的にレイアウト作業を行えます。
また、セクションレポートでは実現に工夫が必要な、1ページに複数の表を配置するレイアウトや表紙付きの帳票なども、ページレポートであれば比較的簡単にデザインできます。
ページレポートについての、詳しい内容は以下のページでも解説しています。こちらもあわせてご覧ください。
ASP.NET Coreプロジェクトの作成
それでは実際の帳票作成を行うため、プロジェクトの作成を行っていきます。今回はASP.NET CoreのActiveReportsのプロジェクトテンプレート「ActiveReports 18.0J ASP.NET Core アプリ」を利用して、アプリケーションの作成を行っていきます。
プロジェクト名は、「PageReportsASPCoreApp」として作成します。保存場所は任意の場所を設定してください。
今回は「ページレポート」を利用しますので、プロジェクトテンプレートの「レポート種類の選択」ダイアログで、以下のように「ページレポート」を選択します。
プロジェクトの作成が完了すると、次のように「Report.rdlx」というファイルが自動的に作成されます。ページレポートのデザインを行うために、このファイルをダブルクリックして開きます。
データソースの設定
続いて、出力対象となるデータソースを設定します。今回は、データソースとして下記のJSONファイルを使用します。このデータは、次のように食料品の売上明細を再現したサンプルデータです。
以下のリンクよりファイルをダウンロードし、任意のフォルダに保存してください。
ページレポートでデータソースを設定するには、次のように「レポートエクスプローラ 18.0J」より、「データソースの追加」から行います。
※ レポートエクスプローラ 18.0Jが表示されていない場合、Visual Studioのメニューより「表示」>「その他ウインドウ」＞「ActiveReports 18.0J レポートエクスプローラ」で表示設定を行ってください。
レポートデータソースダイアログの表示後、「種類」を「Json Provider」に変更し、JSONデータの形式の選択オプションを「埋め込み」に変更します。「埋め込みファイル／URLの選択、またはデータの入力」のドロップダウンをクリックし、［ファイルの選択］を押し、任意のフォルダに保存した「grocery_sales_detail2.json」を選択します。データが埋め込まれたのちに［OK］を押し、データソースを追加します。
データソースの追加後、レポートエクスプローラから、データセットを追加します。次の画像のように作成したデータソースを選択しコンテキストメニューより「データセットの追加」をクリックします。
ダイアログ表示後、「クエリ」ページを選択し、「クエリ」セクションの鉛筆アイコンをクリックし、JSONクエリデザイナを表示させます。表示後、すべてのフィールドが含まれるように、次の図のようにノードを選択し［OK］ボタンを押します。
クエリページ内のクエリエディタ上に、「$.[*]」が設定されていることを確認し、ダイアログ画面側の［OK］ボタンを押して、データセットを作成します。
レポートエクスプローラ上に以下のようにデータセットが追加されていれば、設定は完了です。
JSON形式以外のデータソースの設定に関しては、以下の製品ヘルプを参考に設定してください。
帳票サイズの設定
データソースの設定が完了しましたので、帳票デザインの作成に進みます。はじめに、今回作成する帳票サイズの設定を行います。今回はA4横のレイアウトで作成します。
レポートエクスプローラ上の「ページ1」を選択し、プロパティウィンドウの「レイアウト」セクション内の各プロパティ値を、次の画像のように設定します。
帳票サイズのプロパティ設定値
| プロパティ | 値 |
|---|---|
| Margins | 1.2cm, 1.2cm, 1.2cm, 1.2cm |
| Left | 1.2cm |
| Right | 1.2cm |
| Top | 1.2cm |
| Bottom | 1.2cm |
| PageSize | A4 |
| Width | 29.7cm |
| Height | 21cm |
| PaperOrientation | Landscape |
帳票デザイン
コントロールの配置
それでは、帳票デザインを行うために帳票コントロールを配置していきます。まずはじめにページレポートにおいて、連続したデータを出力するために欠かせないコントロール「Table」をツールボックス上からドラッグアンドドロップでデザイナ画面上に配置します。
「Table」コントロールには、デフォルトで表示フィールドを設定するための列が3つ用意されていますが、今回は5列表示させたいため、2列追加します。次の動画を参考に列を追加してください。
さらに、列の追加後、それぞれの列にデータセットのフィールドを設定していきます。
フィールドの設定後、デザイナ上にテキストボックスを配置し、タイトルを設定。さらに細かなデザインの調整を行い、以下のようなレイアウトを作成します。
プロパティ設定の詳細は以下の表を参考に設定してください。
タイトル「売上明細表」
| プロパティ | 値 |
|---|---|
| Name | TextBox7 |
| Top | 0.1852083cm |
| Left | 9.260417cm |
| Width | 9.181cm |
| Height | 1.8256cm |
| Value | 売上明細表 |
| FontFamily | メイリオ |
| FontSize | 36pt |
| FontStyle | Normal |
| FontWeight | 400 |
| TextAlign | Center |
| VerticalAlign | Middle |
| PaddingTop | 2pt |
| PaddingBottom | 2pt |
| PaddingLeft | 2pt |
| PaddingRight | 2pt |
テーブル
| プロパティ | 値 |
|---|---|
| Name | Table1 |
| Top | 2.963333cm |
| Left | 0.3175cm |
| Width | 13.54667cm |
| Height | 1.799167cm |
| DataSetName | DataSet1 |
| FontFamily | メイリオ |
| FixedSize Height | 14.9225cm |
| FixedSize Width | 13.54667cm |
| RepeatHeaderOnNewPage | true |
テーブル – ヘッダ行
| コントロール名 | プロパティ | 値 |
|---|---|---|
| TextBox1 | Value | 売上日 |
| BackgroundColor | Gainsboro | |
| FontFamily | メイリオ | |
| TextAlign | Center | |
| VerticalAlign | Middle | |
| BorderColor Default | Silver | |
| BorderStyle Default | Solid | |
| TextBox2 | Value | 伝票番号 |
| BackgroundColor | Gainsboro | |
| FontFamily | メイリオ | |
| TextAlign | Center | |
| VerticalAlign | Middle | |
| BorderColor Default | Silver | |
| BorderStyle Default | Solid | |
| TextBox3 | Value | 顧客名 |
| BackgroundColor | Gainsboro | |
| FontFamily | メイリオ | |
| TextAlign | Center | |
| VerticalAlign | Middle | |
| BorderColor Default | Silver | |
| BorderStyle Default | Solid | |
| TextBox13 | Value | 商品名 |
| BackgroundColor | Gainsboro | |
| FontFamily | メイリオ | |
| TextAlign | Center | |
| VerticalAlign | Middle | |
| BorderColor Default | Silver | |
| BorderStyle Default | Solid | |
| TextBox10 | Value | 売上金額 |
| BackgroundColor | Gainsboro | |
| FontFamily | メイリオ | |
| TextAlign | Center | |
| VerticalAlign | Middle | |
| BorderColor Default | Silver | |
| BorderStyle Default | Solid |
テーブル – 詳細行
| コントロール名 | プロパティ | 値 |
|---|---|---|
| TextBox4 | Value | =Fields!transaction_date.Value |
| DataElementName | transaction_date | |
| Format | d | |
| VerticalAlign | Middle | |
| BorderColor Default | Silver | |
| BorderStyle Default | Solid | |
| TextBox5 | Value | =Fields!slip_no.Value |
| DataElementName | slip_no | |
| VerticalAlign | Middle | |
| BorderColor Default | Silver | |
| BorderStyle Default | Solid | |
| TextBox6 | Value | =Fields!customer_name.Value |
| DataElementName | customer_name | |
| VerticalAlign | Middle | |
| BorderColor Default | Silver | |
| BorderStyle Default | Solid | |
| TextBox14 | Value | =Fields!item_name.Value |
| DataElementName | item_name | |
| VerticalAlign | Middle | |
| BorderColor Default | Silver | |
| BorderStyle Default | Solid | |
| TextBox11 | Value | =Fields!amount.Value |
| DataElementName | amount | |
| Format | c | |
| TextAlign | Right | |
| VerticalAlign | Middle | |
| BorderColor Default | Silver | |
| BorderStyle Default | Solid |
この状態で、一度プレビューにて動作確認を行ってみます。
プレビューにて、設定したデータが正しく出力されることを確認できました。1ページに1つの表を配置する帳票の場合はこの状態で完成となりますが、今回は1ページに複数の表を配置する帳票を作成するため、さらにデザインを進めていきましょう。
※ 詳しい帳票デザイン方法については、以下の製品ヘルプを参考にデザインを行ってください。
OverflowPlaceHolderコントロールの配置
1ページに複数の表を配置する方法は2つあります。異なるデータを表示する場合は、Tableコントロールをもう一つ追加するだけです。一方、1つ目の表からあふれたデータを2つ目の表に続けて表示したい場合は、「OverflowPlaceHolder」コントロールを使用します。
さっそく、次のようにOverflowPlaceHolderコントロールをデザイナ上の右側に配置してみます。
つづいて、TableコントロールのあふれたデータをOverflowPlaceHolderコントロールに表示させるため、Tableコントロールの「OverflowName」プロパティに、追加したOverflowPlaceHolderコントロールを指定します。
設定後、プレビューで動作確認を行ってみます。
Tableコントロールのあふれたデータが、正しくOverflowPlaceHolderコントロールに出力され、1ページ内の複数の表にデータ出力される帳票が完成しました。
最後に、デバック実行を行い、ブラウザ上での動作も確認してみます。
ブラウザ上で、作成した帳票がただしく表示されることが確認できました。
さいごに
「これからはじめるActiveReports帳票」第6回目は、ページレポート入門編（1）として、ページレポートの基本的な作成方法に加え、OverflowPlaceHolderコントロールを利用して1ページに複数の表を配置する方法を解説しました。
次回は、複数のページレイアウトを作成し、表紙を追加したり2ページ目以降でレイアウトを変更したりする方法をご紹介します。ぜひ、ご期待ください。
今回の内容を実際に試してみたい方は、トライアル版をダウンロードしてお試しください。
製品の機能を手軽に体験できるデモアプリケーションも公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。