SHOEISHA iD

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

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

ComponentZine(ActiveReports)(AD)

DockerコンテナのASP.NET Core環境で、ActiveReports for .NETを使った帳票アプリを作る

  • X ポスト
  • このエントリーをはてなブックマークに追加

レポートをデザインする

 これでデータの準備が整いました。次に、レポートをデザインしていきます。

デザイナ画面とページの設定

 レポートは、デザイナ画面で作成します。ページレポートの場合、ページ単位で作成します。作成直後は[ページ1]というページがすでにできているので、ここでデザインしていきます。

 ページは、デザイナ左下にタブとして表示されており、ここから切り替えられるほか、レポートエクスプローラの[ドキュメントアウトライン]の下からも切り替えられます。

 [ドキュメントアウトライン]で[ページ1]を選択した状態で[プロパティ]を確認すると、「マージン(Margins)」や「用紙サイズ(PageSize)」の設定があるのがわかります。これらは、適宜調整できますが、ここではとくに設定変更しないことにします。

図20 レポートエクスプローラでページを選択するとプロパティからマージンや用紙サイズを変更できる
図20 レポートエクスプローラでページを選択するとプロパティからマージンや用紙サイズを変更できる

フォントの構成と検討

 以下、このデザイナ画面で、ラベルをはじめとした各種コントロールを配置して、レポートを設計していくのですが、ここでひとつ注意点があります。それは、フォントです。

 今回は、Linuxコンテナ上で実行することを想定しています。そのため、そのコンテナにインストールされているフォントでなければ、正しく表示できません。つまり、Linuxコンテナで利用可能なフォントを使って、レポートを設計しなければなりません。

Linuxで利用できるフォント

 では、Linuxコンテナで使えるフォントとは、どのようなフォントでしょうか?原理的には、コンテナにインストールしさえすれば、(ライセンスに違反しない限り)どのようなフォントでも使えますが、ここではIPAが配布している「IPAゴシック」を使うことにします。その理由は、Linuxコンテナからインストールしやすいからです。

 ASP.NET Core RuntimeのDockerイメージは、いくつかの種類がありますが、本稿のように[ASP.NET Core Webアプリ]のテンプレートで、「.NET 6.0のLinuxコンテナ」としてプロジェクトを作成した場合、「mcr.microsoft.com/dotnet/aspnet:6.0」というイメージが使われます。このイメージは、Debian 11をベースとしたものです。

 ですから、このLinuxコンテナで実行する場合を考えると、「レポート設計する環境のWindows」でも「実行環境のDebian 11」でも、どちらでも利用しやすいフォントが望ましいです。そうした理由から、ここでは「IPAフォント」を使います。

 Debianにおいて、パッケージとしてインストール可能なフォントの一覧は、こちらで確認できます。

IPAフォントのインストール

 IPAフォントをダウンロードして、Visual Studio 2022を動かしているWindows PCにインストールしておいてください。Linuxコンテナにインストールする方法については、あとで説明します。

 実際には、IPAフォントをインストールしておかなくてもデザインできます。なぜなら、デザイナでは、インストールされていないフォントも選べるからです。しかしフォントをインストールしていないときは、別の代替フォントで表示されるため、デザイン時と実際の印刷するときとで、レイアウトがズレる可能性があります。

ASP.NET Core WebアプリのDockerイメージ

 本文中では、Dockerイメージが「mcr.microsoft.com/dotnet/aspnet:6.0」であると説明していますが、これは、生成されたDockerfileの下記の内容からわかります。

FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80

 このイメージの情報は、「https://hub.docker.com/_/microsoft-dotnet-aspnet」で参照できます。このページを見ると、図21のようにベースとなるOSの一覧が記述されています。ここから、Debian 11ベースであるとわかります。

図21 https://hub.docker.com/_/microsoft-dotnet-aspnet/でタグを確認したもの
図21 https://hub.docker.com/_/microsoft-dotnet-aspnet/でタグを確認したもの

見出しなどのラベルを設定する

 さてフォントの話で少し脱線しましたが、IPAフォントをインストールしたものとして、レポートのデザインに話を戻します。まずは、見出しとなるラベルを配置してみましょう。

 レポートに配置できるコンポーネントは、[ツールボックス]にあります。テキストを配置するため、[TextBox]をドラッグ&ドロップして配置します。

図22 [TextBox]をドラッグ&ドロップして配置する
図22 [TextBox]をドラッグ&ドロップして配置する

 配置したら、プロパティから、「表示する文字」と「フォント」を設定します。

[1]表示する文字

 表示する文字は、「ダブルクリックして編集可能にして直接入力する」もしくは「Valueプロパティ」に設定します。ここでは「商品一覧」としました。

図23 表示する文字をValueプロパティに設定した
図23 表示する文字をValueプロパティに設定した
[2]フォント

 フォントは、Fontプロパティに設定します。先に説明したように、ここではLinuxコンテナで利用可能なフォントを選びます。ここでは「IPAゴシック」を選びます。サイズも少し大きめに設定しました。

図24 フォントを設定する
図24 フォントを設定する

Tableコントロールを配置する

 次にデータ自体を表示する領域を作ります。これはTableコントロールとして作成します。まずは、ツールボックスから、Tableコントロールをドラッグ&ドロップして配置します。

図25 Tableコントロールを配置する
図25 Tableコントロールを配置する

行の調整

 Tableコントロールは、複数の行(TableRow)で構成されます。行は、「ヘッダー行」「詳細行」「フッター行」の3種類あります。

 ページレイアウトでは、ヘッダー行とフッター行は、各ページの先頭、末尾ではなく、データの先頭と末尾の1回しか表示されません。

  • ヘッダー行:先頭に表示される行です。
  • 詳細行:データが埋め込まれる行です。データの数だけ繰り返し表示されます。
  • フッター行:末尾に表示される行です。

 配置直後は、これら3つの行、すべてが構成されています。右クリック操作で、行の種類を変えたり、追加したり、削除したりできます。今回はフッター行を使わないものとし、一番下の行を右クリックして、削除することにします。

図26 フッター行を削除する
図26 フッター行を削除する

列の調整

 次に、列を調整します。今回は、「商品名」「価格」「在庫数」「カテゴリ」の4列を表示したいと思います。配置直後は3列しかないので、列を右クリックして[右に列を挿入]を選択して、列を追加します。

図27 列を挿入する
図27 列を挿入する

 これで4行の列になりました。ドラッグして、幅を横いっぱいに広げておきます。横いっぱいに広げるには、テーブルをクリックして(テーブル全体を選択するには、[レポートエクスプローラ]から[Table1]をクリックして選択するのがやりやすいです)、表示される(黒い丸ではなく)白い四角形で示されるツマミをドラッグします。

図28 4列になった
図28 4列になった
図29 白い四角形で示されるツマミをドラッグして列を広げる
図29 白い四角形で示されるツマミをドラッグして列を広げる

高さを調整する

 同様にして高さも広げますが、高さは行の高さを広げるのではなくて、「詳細行の繰り返しだけ高くする」というように調整します。そのためには、FixedSizeプロパティを調整します。

 FixedSizeプロパティは、デザイン画面から、(白い四角形で示されるのではなく)黒い丸で示されるツマミをドラッグすると、広げられます。FixedSizeプロパティが示す領域は、斜線の網で示されます。データの行数に応じて、この範囲まで広がることを意味します。

図30 FixedSizeプロパティを広げる
図30 FixedSizeプロパティを広げる

ヘッダー行と詳細行を設定する

 Tableコントロールを配置したら、その見出しとなるヘッダー行と、データを表示する行である詳細行を設定します。

ヘッダー行を設定する

 見出しの部分は、Valueプロパティに、表示したい文字列を直接設定します。文字の設定をしたあと、中央寄せにしたりセルの色を付けたりすると、より見やすくなりますが、ここではそうした装飾の操作は割愛します。

 Valueプロパティを設定する代わりに、セルをダブルクリックして直接文字入力することもできます。

図31 「商品名」の列を設定した
図31 「商品名」の列を設定した
図32 同様にして「価格」「在庫数」「カテゴリ」も設定する
図32 同様にして「価格」「在庫数」「カテゴリ」も設定する

ツールバーから書式を設定する

 文字のフォントや文字寄せ、色などは、ツールバーから設定できます。ツールバーでは、複数のコントロールを選択しておいて、それらの位置や大きさを揃えたりする操作もできます。

図33 ツールバー
図33 ツールバー

詳細行を設定する

 続いて、詳細行を設定します。ここには実際のデータを差し込みます。データを差し込むには、Valueプロパティに、「=[列名]」という書式で設定します。手作業で設定してもよいですが、[データソース]の下にある、それぞれの列を示すコントロールをドラッグ&ドロップすると、簡単に設定できます。

 Decimal型やInteger型など数値型であるデータ列をドラッグ&ドロップすると、自動で右寄せになりますが、寄せの方向は、設置後にツールバーなどで変更できます。

図34 詳細行を設定する
図34 詳細行を設定する
図35 残りの行も設定する
図35 残りの行も設定する

通貨表示にする

 Formatプロパティで書式を設定すると、通貨書式(先頭に「¥」を表示したり、カンマ区切りにしたり)などを設定できます。

フォントを設定する

 これらTableコントロールにおけるすべてのテキストも、もちろん、Linuxコンテナで利用可能なフォントを指定しなければなりません。

 セルを一つひとつ選択して設定するのは煩雑なので、まとめて設定するとよいでしょう。デザイナでは、[Ctrl]キーを押しながらセルをクリックすると、複数選択できます。そこですべてのセルを選択しておいて、[プロパティ]ウィンドウから、FontFamilyプロパティを「IPAゴシック」に変更します。

図36 セルのフォントをまとめて設定する
図36 セルのフォントをまとめて設定する

ページ数などを表示する

 [レポートエクスプローラ]の[共通フィールド]には、[ページ番号/総ページ]や[日付と時刻]などの特殊フィールドが用意されています。デザイナ上でTextBoxを配置しておいて、セルでの操作と同様にして、そのTextBoxにこれらの共通フィールドの値をドラッグすると、そこにページ番号や日付などを挿入できます。

図37 共通フィールド
図37 共通フィールド

プレビューで確認する

 レポートを設計できたら、プレビューして確認しましょう。[プレビュー]タブをクリックすると、実際にデータが埋め込まれて、プレビューを確認できます。本稿では、きれいなレイアウトの帳票を作るのが目的ではないので、これ以上の調整は省きます。

 1行しか表示されていないときは、FixedSizeプロパティを設定したかどうか(図30)を確認してください。

 Tableに罫線を付けたいときは、BorderColorプロパティやBorderStyleプロパティなどで設定します。

図38 プレビューしたところ
図38 プレビューしたところ

次のページ
ページにJSビューワを組み込む

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ActiveReports)連載記事一覧

もっと読む

この記事の著者

大澤 文孝(オオサワ フミタカ)

テクニカル・ライター、プログラマ/システムエンジニア。情報セキュリティスペシャリスト、ネットワークスペシャリスト。入門書からプログラミングの専門書まで幅広く執筆。   主な著作として、「Amazon Web Services 基礎からのネットワーク&サーバー構築(共著)」(...

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

提供:グレープシティ株式会社

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/17488 2023/04/14 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング