SHOEISHA iD

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

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

ComponentZine(ActiveReports)(AD)

「ActiveReports for .NET」で帳票アプリをつくる──ガバメントクラウド上にIaaS環境を構築してアプリを開発しよう

帳票開発コンポーネント「ActiveReports for .NET」の活用術 第1回

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

ローカルで帳票アプリ開発

 環境準備が済んだら、ローカル環境で帳票アプリを開発していきます。アプリケーションと帳票デザインは、基本的にVisual Studio上で作成できます。なお、Visual Studioの基本的な使い方、例えばツールボックスやプロパティウィンドウなどの表示の方法、デバッグの開始や停止などの具体的手順は省略するのでご了承ください。

Webアプリプロジェクトを作成する

 ActiveReports for .NETのインストールによって、それの利用を前提としたテンプレートも準備されます。このテンプレートを使うとひとまず動作するものを簡単に作れるので、今回はASP.NET Core MVCアプリケーションのテンプレートを使っていきます(Web用には、他にBlazor ServerやBlazor WebAssemblyのテンプレートもあります)。Visual Studioを起動して、「開始する」画面から[新しいプロジェクトの作成]をクリックします(図1)。

図1:「開始する」画面
図1:「開始する」画面

 「新しいプロジェクトの作成」画面では[ActiveReports 16.0J JSビューワ Core MVCアプリケーション]を選択し、[次へ]をクリックします(図2)。

図2:「新しいプロジェクトの作成」画面
図2:「新しいプロジェクトの作成」画面

 「新しいプロジェクトを構成します」画面では、プロジェクト名、場所、ソリューション名を設定します。全て既定で進んで構いませんが、お好みの名前を付けても構いません。ここでは、「JSViewerSample」としました。[作成]をクリックすると、プロジェクトが作成されます(図3)。

図3:「新しいプロジェクトを構成します」画面
図3:「新しいプロジェクトを構成します」画面

 このプロジェクトには、ActiveReportsに必要なファイルとコード、設定が組み込まれているので、直ちに帳票の表示が可能です。このままデバッグを開始すると、アプリがビルドされてWebブラウザが起動し、帳票が表示されます。ただし、帳票のレイアウトは空なので、真っ白な帳票が表示されるだけです。次に、帳票レイアウトを作成していきましょう。デバッグを停止してアプリを終了させてください。

帳票レイアウトの作成

 帳票レイアウトを作成しましょう。上記のテンプレートからのアプリ作成では、「ページレポート」という単一ページ形式の帳票レイアウトが使用されます。ActiveReports for .NETでは、他に「セクションレポート」「RDLレポート」などの帳票形式がありますが、それらの違いについては「DockerコンテナのASP.NET Core環境で、ActiveReports for .NETを使った帳票アプリを作る」を参照してください。

データソース(JSONデータ)を準備する

 帳票レイアウトの作成に先立ち、作成する帳票に合わせてデータソースとなるJSONファイルを準備しておきます。帳票は、冒頭で紹介した標準帳票から「(別紙4)国保_帳票レイアウト_03_給付管理_05_国民健康保険療養費支給申請書」を選びました(図4)。

図4:「(別紙4)国保_帳票レイアウト_03_給付管理_05_国民健康保険療養費支給申請書」のイメージ
図4:「(別紙4)国保_帳票レイアウト_03_給付管理_05_国民健康保険療養費支給申請書」のイメージ

 これを、ページレポートとして作成していきます。データソースは静的なJSONデータとします。以下のようなJSONファイルを用意しました。

データソース用のJSONファイル(kokuho.json)
{
    "支給額": "200,000",
    "申請年": "2023",
    "申請月": "8",
…略…
    "代理人住所": "",
    "代理人氏名": "",
    "代理人個人番号": ""
}

データソースを設定する

 データソースが準備できたら、帳票レイアウトを作成していきます。これに先立ち、ツールボックス、プロパティウィンドウ、「レポートエクスプローラ 16.0J」「レイヤー一覧 16.0J」を開いておきます。レポートエクスプローラは、[表示]-[その他のウィンドウ]-[ActiveReports for .NET 16.0J レポートエクスプローラ]で、レイヤー一覧は同じ場所の[ActiveReports for .NET 16.0J レイヤー一覧]で表示できます。各ウィンドウの配置(フローティング、ドッキングなど)は各自のお好みで構いません。

「ActiveReports for .NETデザイナ」でも作成できる

 帳票レイアウトは、単体のツールでも作成できます。[スタート]-[すべてのアプリ]-[GrapeCity ActiveReports for .NET 16.0J]-[ActiveReports for .NET 16.0Jデザイナ]を起動します。レイアウトの作成後は、帳票ファイル(.rdlx)を保存しておき、それをVisual Studioプロジェクトに追加することでアプリから利用可能になります。

 帳票のデータソースを設定します。ソリューションエクスプローラーから既定の帳票ファイルReports/PageReport1.rdlxをダブルクリックして開きます。レポートエクスプローラにページレポートの情報が表示されるので、そこから[データソース]を右クリックし、[+データソースの追加]をクリックします(図5)。

図5:レポートエクスプローラからデータソースを追加
図5:レポートエクスプローラからデータソースを追加

 「レポートデータソース - 全般」ダイアログが開くので、ここに必要な設定を行っていきます。まず、[種類]で「Json Providor」を選択します。するとダイアログの項目が変化するので、[接続]項目の「コンテンツ」タブにある[JSONデータの形式の選択]を「埋め込み」にします。[埋め込むファイル/URLの選択、またはデータの入力]をプルダウンして、[<ファイルの選択...>]をクリックして先ほど準備したJSONファイルを選択するか、ファイルをテキストエディタで開いて内容を下の入力欄にコピーしてください。ファイルの内容が表示されたことを確認して[OK]をクリックします(図6)。

図6:「レポートデータソース - 全般」ダイアログ
図6:「レポートデータソース - 全般」ダイアログ

データセットを作成する

 データソースからデータセットを作成します。上記の操作でレポートエクスプローラには「DataSource1」がデータソースとして追加されているので、それを右クリックして[+データセットの追加]をクリックします(図7)。

図7:レポートエクスプローラからデータセットを追加
図7:レポートエクスプローラからデータセットを追加

 「データセット - 全般」ダイアログが表示されるので、左ペインの[クエリ]をクリックして表示を切り替えます。[クエリ]欄右の緑色の鉛筆アイコンをクリックして開く「JSONクエリデザイナ」では各項目が表示されることを確認して、そのまま[OK]をクリックします(図8)。

図8:データセットのクエリを設定
図8:データセットのクエリを設定

 左ペインの[フィールド]をクリックして表示を切り替えます。各項目が表示されていることを確認して、[OK]をクリックします(図9)。

図9:データセットの各フィールド
図9:データセットの各フィールド

 これで、レポートエクスプローラの「DataSet1」を展開して、データセットの項目がズラッと表示されればデータセットの作成は完了です(図10)。

図10:作成されたデータセット
図10:作成されたデータセット

ページサイズとマージンの調整

 次に、ページのマージンを調整して、ページ全体を帳票の領域として使えるようにしておきます。レポートエクスプローラで「ページ1」を選択すると、ページのプロパティ表示が変わるので、Marginsプロパティを全て0に設定します。PageSizeプロパティは「プリンタの既定値」となっているはずですが、展開してA4サイズ(21cm×29.7cm)になっていなければ、帳票に合わせてA4サイズの寸法に変更しておきましょう(図11)。

図11:マージンとページサイズの設定後
図11:マージンとページサイズの設定後

下絵を配置する

 ここからレイアウトを作成、すなわち帳票の各項目を配置してデータセットのフィールドを割り当てていきます。図4の帳票イメージを見ながらレイアウトを進めていってもよいのですが、項目が多いのでそれも大変です。なので、デザイナのレイヤー機能を用いて、帳票イメージを下敷きにして、それに合わせて項目を作成していくとよいでしょう。そのために、帳票イメージのPDFから画像ファイルを以下の要領で作成してください。

  • 国民健康保険システム標準仕様書(第1.1版)【厚生労働省】」の「第1.1版(令和5年3月)」にある「(別紙1~4)給付管理[ZIP形式:19,292KB]」からZipファイルをダウンロード
  • 展開してできる「(別紙4)帳票レイアウト」フォルダにある「(別紙4)国保_帳票レイアウト_03_給付管理_05_国民健康保険療養費支給申請書.pdf」ファイルを開く
  • PNGかJPEGといった画像形式で画像として保存する

 レイヤーを作成し、帳票イメージの画像を配置します。レイヤー機能のあらましについては、製品ヘルプの「レイヤーの操作」を参考にしてください。

 レイヤー一覧には「default」のみがあるので、[+]アイコンをクリックして、新規レイヤーを追加します。直ちに「Layer1」というレイヤーが作成されます。「Layer1」が選択状態(青背景)になっているのを確認して、ツールボックスから「Image」をドラッグして、フォーム上に画像コンポーネントを配置します。

 その状態でプロパティウィンドウの「データ」にあるSourceプロパティが「External」になっていることを確認し、下のValueプロパティをプルダウンして[<ファイルを開く...>]をクリックして、先ほど保存した画像ファイルを選択してください。帳票レイアウト上のImageコンポーネントに縮小した画像が表示されるので、「レイアウト」のLocationプロパティとSizeプロパティをそれぞれ左上隅(0, 0)とA4サイズ(21cm×29.7cm)となるように設定してください。これで、帳票イメージが帳票全体に表示されます。

図12:帳票イメージ配置後
図12:帳票イメージ配置後

 最後に、レイヤー一覧から「layer1」をクリックして「その他」のDesignerTransparencyプロパティ(デザイナ上での透明度)を0.6程度に設定します。これで画像が薄くなり、レイアウトがやりやすくなります。また、下絵は実行時は不要なので、TargetDeviceを「None」に変更して下絵レイヤーが出力されないようにしておきます。さらに、「Layer1」の[ロック]にチェックを入れ修正不可とし、[フィールドセレクタ]のチェックを外して配置した画像を選択できないようにしておきます(図13)。

図13:帳票イメージの透明度調整その他の設定後
図13:帳票イメージの透明度調整その他の設定後

レイアウトを作成する

 ここから、帳票にコントロールを配置していきます。下絵の通りに、テキストや入力ボックスを配置し、データセットの各フィールドとのバインディングを設定していきます。このとき、入力項目にはInputFieldコントロールを使っていきます。InputFieldコントロールはProfessional版独自の機能で、帳票をPDFにエクスポートした際に、項目の編集機能を付与します。これにより、特別なソフトウェアを必要とせずに編集できるPDFを利用者に提供することができます。

 単なるラベルとしてのテキストは、TextBoxコントロールを配置します。アクティブなレイヤーが「default」であるのを確認して、ツールボックスから目的の場所に配置したら、Valueプロパティでテキストの内容を、Fontプロパティで文字サイズや太さを調整します。Fontプロパティにはフォントファミリの設定がありますが、ここに「IPAex明朝」か「IPAexゴシック」を下絵に合わせて設定しておきます。これで、開発時と公開時でレイアウトに差異が出るのを防げます。

 入力欄には、InputFieldコントロールを配置します。ツールボックスから目的の場所に配置しますが、このときデータソースの各列とのバインディングを設定します。配置したコントロールにマウスポインタをホバーさせると右上に現れるアイコンをクリックします。するとフィールドの一覧が一覧表示されるので、目的のフィールドを選択します。コントロールの表示は「=[列名]」となります。

 このとき、Valueプロパティには「=Fields!列名.Value」が設定されるので、このようにプロパティを直接編集しても構いません。必要に応じて文字フォントなどを調整するのはTextBoxコントロールと同様です。最終的に完成したレイアウトを図14に示します。

図14:完成した帳票レイアウト
図14:完成した帳票レイアウト

次のページ
アプリケーションの実行

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

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

もっと読む

この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

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

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

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

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング