.NET/ActiveReports/ASP.NET Core/Azure/Azure App Service

Azure App ServiceとActiveReports for .NETでつくる帳票Webアプリ

by MESCIUS-dev

.NET帳票コンポーネント「ActiveReports for .NET（アクティブレポート）」 の最新バージョン「20.0J」では、大手クラウドベンダーが提供するPaaS（Platform as a Service）を利用して、帳票機能を備えたWebアプリケーションをクラウド環境で運用できます。

今回は、Microsoftの「Azure App Service」とActiveReports for .NETを組み合わせて、帳票をブラウザ上で表示できるWebアプリケーションを作成する方法をご紹介します。

この記事でできること

この記事では、ActiveReports for .NET 20.0JのASP.NET Core向けプロジェクトテンプレートを使用して、JSビューワで帳票をブラウザ上に表示する帳票Webアプリを作成します。作成したアプリケーションは、Visual StudioからAzure App Serviceへデプロイします。

  • ASP.NET Coreテンプレートを使用したActiveReportsプロジェクトの作成
  • JSビューワを使用した帳票のブラウザ表示
  • 請求書レポートの追加とJSONデータの受け渡し
  • Visual StudioからAzure App Serviceへのデプロイ
  • Azure App Service上での帳票Webアプリの動作確認

開発環境

ActiveReports for .NETの開発環境にはOSに「Windows」、統合開発環境（IDE）に「Visual Studio」が必要となります。事前に、ActiveReportsの必要システムに記載されている、開発環境をご準備ください。

また、今回は作成した帳票WebアプリをAzure App Serviceへデプロイするため、Azure環境もあわせてご用意ください。

今回の開発環境では、以下を使用します。

  • Azure 環境
  • OS：Windows 11（25H2）
  • IDE：Visual Studio 2026（Version 18.4.3）
  • ActiveReports：20.0J （v20.0.1.0）

製品版の最新バージョンは以下より入手可能です。

トライアル版は無料で以下より入手可能です。

プロジェクトの作成

それでは、プロジェクトの作成を行っていきます。

今回は、Visual Studioで利用できるActiveReports for .NET 20.0Jのプロジェクトテンプレートを使用して、ASP.NET Coreアプリケーションを作成します。このテンプレートを利用することで、ActiveReportsのJSビューワを使用した帳票Webアプリケーションを効率よく作成できます

検索ボックスに「ActiveReports」と入力すると、ActiveReports関連のプロジェクトテンプレートが表示されます。今回は、この中から「ActiveReports 20.0J ASP.NET Coreアプリ」を選択し、［次へ］をクリックします。

Visual StudioでActiveReports 20.0J ASP.NET Coreアプリのテンプレートを選択

続いて表示されるダイアログでは、プロジェクト名を設定します。今回は例として、プロジェクト名を「AppServiceReportsApp」とします。保存場所は任意の場所を設定してください。

プロジェクト名と保存場所を設定

プロジェクトの作成を進めると、「新規レポート」ダイアログが表示されます。このダイアログでは、ページレポート、セクションレポート、RDLレポート、ダッシュボードなど、作成するレポートの種類を選択できます。

今回は、ページレポートを選択して［作成］をクリックします。

ActiveReportsの新規レポートダイアログでページレポートを選択

本記事では後ほど、GitHubに公開されているレポートファイル「Invoice_bluegray.rdlx」をプロジェクトに追加して利用します。

プロジェクト構成の確認

プロジェクトテンプレートの設定が完了すると、ActiveReportsのJSビューワを利用するためのASP.NET Coreプロジェクトが作成されます。

アプリケーションの作成に入る前に、最新の LTS（Long Term Support）である .NET 10 を使用するため、プロジェクトのプロパティ設定からターゲットフレームワークを変更します。

ターゲットフレームワークの変更

つづいて、ソリューションエクスプローラーで、作成されたプロジェクトの構成を確認します。

ActiveReports ASP.NET Coreアプリのプロジェクト構成を確認

テンプレートから作成されたプロジェクトには、ASP.NET Coreアプリケーションの基本構成に加えて、ActiveReportsのJSビューワで帳票を表示するためのファイルが含まれています。

ファイル／フォルダー 内容
Program.cs / Startup.cs ASP.NET Coreアプリケーションの起動処理やミドルウェア設定を定義するファイルです。ActiveReportsのJSビューワで帳票を表示するための設定も、これらのファイルで確認できます。
Controllers / Views Webアプリケーションの画面表示に関するファイルが含まれています。Views/Home/Index.cshtml には、JSビューワを表示するためのページが用意されています。
Reports ActiveReportsのレポートファイルを配置するフォルダーです。プロジェクト作成時に追加した初期レポートとして、Report.rdlx が含まれています。
wwwroot JavaScriptやCSSなど、Webアプリケーションで使用する静的ファイルを配置するフォルダーです。JSビューワで使用するスクリプトやスタイルも、このフォルダーに含まれています。
Properties/licenses.licx ActiveReportsのライセンス情報を組み込むためのファイルです。
ActiveReports.config ActiveReportsの設定を個別に変更したい場合に使用する設定ファイルです。今回は既定の設定のまま進めるため、このファイルは使用しません。

このように、ActiveReportsのASP.NET Coreテンプレートでは、JSビューワで帳票を表示するために必要な構成があらかじめ用意されています。

帳票レイアウト

プロジェクトの作成後、帳票レイアウトの準備を行います。

このセクションでは、まずテンプレートで作成された初期レポート Report.rdlx を編集し、JSビューワで帳票を表示できることを確認します。その後、GitHubに公開されている請求書レポート Invoice_bluegray.rdlx を追加して、実際に使用する帳票レイアウトに差し替えます。

初期レポートを編集する

ActiveReportsのASP.NET Coreテンプレートでは、初期レポートとして Report.rdlx が Reports フォルダーに追加されています。

Reports フォルダー内の Report.rdlx を開くと、ActiveReportsのデザイナが表示されます。

ActiveReportsデザイナでReport.rdlxにTextBoxを配置してTestレポートを設定

今回は、ツールボックスから TextBox を配置し、テキストとして「Testレポート」を設定します。

編集が完了したら、アプリケーションを実行して、JSビューワ上に編集したレポートが表示されることを確認します。

JSViewerで初期レポートのTestレポートをブラウザ表示

請求書レポートを追加する

今回のプログラムでは、Azure App Service上で動作するWebアプリケーションとして帳票表示を行います。JSビューワのインタフェースを通じてJSONデータを渡し、そのデータを帳票のデータソースとして利用する構成で実装を行っていきます。

最初に、GitHubに公開されている請求書レポート Invoice_bluegray.rdlx をプロジェクトに追加します。

ダウンロードした Invoice_bluegray.rdlx をソリューションエクスプローラーからプロジェクトに追加します。 

追加の際、ファイルのビルドアクションを「コンテンツ」、出力ディレクトリーにコピーを「新しい場合はコピー」に設定します。

レポートファイルの追加

続けて、JSビューワのインタフェースを通じて渡されるJSONデータを帳票のデータソースとして利用するために、データを格納する「レポートパラメータ」を追加していきます。

追加したレポートファイルを選択し、Visual Studioのレポートデザイナで開きます。次に、レポートエクスプローラから［パラメータ］を選択し、［パラメータの追加］を使用してレポートパラメータを追加します。

レポートファイルの編集1

レポートパラメータダイアログが表示されたら、パラメータ名称やデータ型などを変更することもできますが、今回は初期値のまま使用します

レポートファイルの編集2

つづけて、追加したレポートパラメータを帳票のデータソースとして利用する為、以下のようにレポートエクスプローラの「データソース」から現在設定されている「DataSource1」を編集で開きます。

レポートファイルの編集3

レポートデータソースダイアログが表示されたら、［コンテンツ］タブを選択します。 

「JSONデータの形式の選択」を「式」に変更し、続けて「式の入力」に次の式を入力します。

="jsondata=" & [@ReportParameter1]
レポートファイルの編集4

この設定により、レポートパラメータを通じて渡されたJSONデータを、帳票のデータソースとして利用できるようになります。

以下のJSONデータを使用して、レポートデザイナ上で帳票をプレビュー表示しておきます。

レポート表示用JSONデータ
[
  {
    "ID": 1,
    "BillNo": "WS-DF502",
    "SlipNo": "GB465",
    "CustomerID": 1,
    "CustomerName": "長崎カントリーフーズ",
    "Products": "コーヒー 250 ml",
    "Number": 100,
    "UnitPrice": 100,
    "Date": "2020-01-05T00:00:00"
  },
  {
    "ID": 2,
    "BillNo": "WS-DF502",
    "SlipNo": "GB465",
    "CustomerID": 1,
    "CustomerName": "長崎カントリーフーズ",
    "Products": "紅茶 350 ml",
    "Number": 300,
    "UnitPrice": 120,
    "Date": "2020-01-05T00:00:00"
  },
  {
    "ID": 3,
    "BillNo": "WS-DF502",
    "SlipNo": "DK055",
    "CustomerID": 1,
    "CustomerName": "長崎カントリーフーズ",
    "Products": "炭酸飲料 (オレンジ） 350 ml",
    "Number": 200,
    "UnitPrice": 120,
    "Date": "2020-01-09T00:00:00"
  }
]
レポートプレビュー

コード実装

つづいて、コードの実装を行います。ActiveReportsのASP.NET Coreテンプレートでは、JSビューワのバックエンド（レポート描画ミドルウェア）の設定が Startup.cs に用意されています。

今回は ActiveReports.config を使用しないため、Startup.cs の設定から UseConfig を削除（またはコメントアウト）します。コード内で強調表示している行が該当箇所です。

using GrapeCity.ActiveReports.Aspnetcore.Viewer;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using System;
using System.IO;
using System.Reflection;
using System.Text;

namespace AppServiceReportsApp
{
    public class Startup
    {

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            Encoding.RegisterProvider(CodePagesEncodingProvider.Instance);

            services
                .AddLogging(config =>
                {
                    // Disable the default logging configuration
                    config.ClearProviders();

                    // Enable logging for debug mode only
                    if (Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT") == Environments.Development)
                    {
                        config.AddConsole();
                    }
                })
                .AddReportViewer()
                .AddMvc(option => option.EnableEndpointRouting = false);
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseReportViewer(settings =>
            {
                var reportsFolder = Path.Combine(env.ContentRootPath, "Reports");
                settings.UseFileStore(new DirectoryInfo(reportsFolder));
                //settings.UseConfig(Path.Combine(env.ContentRootPath, "ActiveReports.config"));
            });

            app.UseMvc();
        }
    }
}

つづいて、追加したレポートを表示するため、Views/Home/Index.cshtml の openReport の引数をレポートファイル名（Invoice_bluegray.rdlx）に変更します。次のコードの強調表示した箇所が変更点です。これ以外のコードはテンプレートのまま利用します。

@{
}

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="theme-color" content="#000000">
	<title>JS Viewer</title>
	<link href="~/jsViewer.min.css" rel="stylesheet">
	<link href="~/index.css" rel="stylesheet">
</head>

<body onload="loadViewer()">
	<div style="width: 100%; overflow-x: hidden">
		<div style="float:right;width:100%" id="viewerContainer">
		</div>
	</div>
	<script type="text/javascript" src="~/jsViewer.min.js"></script>
	<script type="text/javascript">
		let viewer;
		function loadViewer() {
			viewer = GrapeCity.ActiveReports.JSViewer.create({
				element: '#viewerContainer'
			});
						viewer.openReport("Invoice_bluegray.rdlx");
		}
	</script>
</body>
</html>

動作確認

ここまでで、帳票レイアウトの編集とコード実装が一通り完了しました。つづいて、ローカルでデバッグ実行し、JSビューワ上で帳票が表示されることを確認します

Azure環境へデプロイ

ローカル環境で動作確認が行えましたので、最後にAzure App Serviceへデプロイしていきます。

デプロイ

ソリューションエクスプローラーからプロジェクトを選択し、コンテキストメニューから「発行」をクリックします。

Azureへデプロイ1

ウィザード形式のダイアログが表示されたら、「Azure」を選択し、［次へ］を押します。

Azureへデプロイ2

つぎに、「Azure App Service（Windows）」を選択し、［次へ］を押します。

Azureへデプロイ3

ウィザードで「App Service」タブが表示されたら、［新規作成］を押します。

Azureへデプロイ4

インスタンス作成ダイアログでは、以下のように必要な情報を入力し、［作成］を押します。

Azureへデプロイ5

「App Service」タブに戻り、以下のようにインスタンスが設定されていることを確認したうえで［次へ］を押します。

Azureへデプロイ6

「デプロイの種類 」タブでは、「発行（pubxmlファイルが生成されます）」を選択し［完了］を押します。

Azureへデプロイ7

「完了」タブでプロファイルの作成後［閉じる］を押します。

Azureへデプロイ8

ウィザードが完了後、プロジェクト公開タブ内の［発行］を押し、Azure環境へデプロイします。

Azureへデプロイ9

デプロイ後、次のように「公開が成功しました」のメッセージが表示されれば、デプロイ完了です。

Azureへデプロイ10

動作確認

デプロイ完了後、ブラウザでデプロイ先のWebページが自動的に起動されます。起動したページでJSビューワが表示されたら、サイドバーの［パラメータ］パネルにレポート表示用JSONデータを入力し、［プレビュー］をクリックして帳票を表示します。

つづけて、サイドバーの［エクスポート］パネルからPDFファイルを出力し、動作を確認します。

上記の動画からもわかるように、帳票表示からPDF出力までの動作がAzure App Service上でも行えることが確認できました。

さいごに

今回の記事では、ActiveReports for .NET 20.0Jと「Azure App Service」を組み合わせて、帳票をブラウザ上で表示できるWebアプリケーションを作成し、Azure環境へデプロイする方法をご紹介しました。

Azure App ServiceはMicrosoftが提供するフルマネージドなPaaS環境であるため、サーバーの構築やOSの管理をAzure側に任せ、開発者はアプリケーションのロジックや帳票レイアウトの作成に集中できます。また、今回の記事でご紹介したとおり、Visual Studioからウィザード形式で直接デプロイできるため、クラウド環境への公開も手軽に行えます。帳票Webアプリのクラウド運用をご検討の方は、ぜひ今回の方法を参考にしてみてください。

今回の内容について動作を確認したい方は、ぜひトライアル版をダウンロードのうえ、ActiveReports for .NETの「ASP.NET Core プロジェクトテンプレート」を使用してお試しください。

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

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

＼  この記事をシェアする  ／