.NET帳票コンポーネント「ActiveReports for .NET（アクティブレポート）」 の最新バージョン「20.0J」では、JSビューワ、Blazorビューワ、およびWebViewerコントロールにおいて、外観デザインを変更できる「ビューワテーマ」機能と、独自の外観デザインを設定できる「カスタムテーマ」機能が追加されました。
本記事では、ActiveReports for .NETのJSビューワを使用して、ビューワテーマの変更方法とカスタムテーマの作成方法を紹介します。また、業務システムをイメージしたサンプル画面を作成し、ビューワをシステムのデザインに合わせてカスタマイズしてみます。
開発環境
ActiveReports for .NETの開発環境にはOSに「Windows」、統合開発環境（IDE）に「Visual Studio」が必要となります。事前に、ActiveReportsの必要システムに記載されている、開発環境をご準備ください。
今回の開発環境では、以下を使用します。
- OS：Windows 11（25H2）
- IDE：Visual Studio 2026（Version 18.10.1）
- ActiveReports：20.0J SP1（v20.1.1.0）
製品版の最新バージョンは以下より入手可能です。
トライアル版は無料で以下より入手可能です。
プロジェクトの作成
それでは、プロジェクトの作成を行っていきます。
まずは、ビューワの外観を確認するためのベースとなるアプリケーションを用意します。
ActiveReports for .NET 20.0Jには、Visual Studio向けのプロジェクトテンプレートが用意されており、JSビューワを組み込んだWebアプリケーションの雛形をすぐに作成できます。今回はこのテンプレートを利用して、帳票の表示までを一気に進めます。
Visual Studioで新しいプロジェクトを作成し、検索ボックスに「ActiveReports」と入力します。表示されたテンプレートの中から「ActiveReports 20.0J ASP.NET Coreアプリ」を選択し、［次へ］をクリックします。
続いて表示されるダイアログでは、プロジェクト名を設定します。今回は例として、プロジェクト名を「ThemeReportsApp」とします。保存場所は任意の場所を設定してください。
プロジェクトの作成を進めると、「新規レポート」ダイアログが表示されます。このダイアログでは、ページレポート、セクションレポート、RDLレポート、ダッシュボードなど、作成するレポートの種類を選択できます。
今回は、ページレポートを選択して［作成］をクリックします。
プロジェクト構成の確認
プロジェクトテンプレートの設定が完了すると、ActiveReportsのJSビューワを利用するためのASP.NET Coreプロジェクトが作成されます。
アプリケーションの作成に入る前に、最新の LTS（Long Term Support）である .NET 10 を使用するため、プロジェクトのプロパティ設定からターゲットフレームワークを変更します。
つづいて、ソリューションエクスプローラーで、作成されたプロジェクトの構成を確認します。
テンプレートから作成されたプロジェクトには、ASP.NET Coreアプリケーションの基本構成に加えて、JSビューワで帳票を表示するためのファイルがあらかじめ含まれています。本記事では、このうち Views/Home/Index.cshtml に記述されているJSビューワの生成コードを編集して、ビューワの外観を変更していきます。
帳票レイアウトの編集
プロジェクト作成時に追加した Report.rdlx は空のレポートのため、このままではビューワに何も表示されません。ビューワの外観を比較しやすくするため、簡単な帳票レイアウトを作成しておきます。
ソリューションエクスプローラーから Report.rdlx をダブルクリックし、Visual Studioに統合されたレポートデザイナを起動します。ツールボックスからTextBoxコントロールを配置し、タイトルなどの文字を入力します。今回はビューワの外観の確認が目的のため、レイアウトは簡単なもので問題ありません。
レイアウトを作成したら、プロジェクトを実行し、既定のテーマでJSビューワに帳票が表示されることを確認します。
ビューワテーマを設定する
「ビューワテーマ」は、20.0Jより追加された新機能です。JSビューワ、Blazorビューワ、WebViewerコントロールといったWeb上の帳票ビューワの外観デザインを変更できます。
ビューワには7つのデザインテーマが組み込まれており、ビューワ上部に追加された「テーマピッカー」から選択できます。エンドユーザー自身が、好みや利用環境に合わせてデザインを切り替えることも可能です。
ダークテーマやハイコントラストテーマが用意されているため、利用環境やアクセシビリティの要件に応じて、見やすい外観を選択できます。
初期テーマを変更する
アプリケーション側であらかじめ適用するテーマを指定したい場合は、ビューワの生成時に themes オプションの initialTheme へテーマ名を設定します。
Views/Home/Index.cshtml のJSビューワのコードに、次のように強調箇所を追加します。
～～省略～～
<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'
,themes: {
initialTheme: 'defaultDark'
}
});
viewer.openReport("Report.rdlx");
}
</script>
</body>
</html>この設定により、ビューワの表示時点から指定したテーマが適用されます。
テーマピッカーを無効化・非表示にする
システム側で指定したテーマを利用する場合は、エンドユーザーによるテーマの変更を許可したくないケースもあります。その場合は、テーマピッカーを無効化または非表示にできます。
テーマピッカーを無効化する場合は、themeSelector の enabled に false を設定します。
～～省略～～
<script type="text/javascript">
let viewer;
function loadViewer() {
viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#viewerContainer'
,themes: {
initialTheme: 'defaultDark'
,themeSelector: {
enabled: false
}
}
});
viewer.openReport("Report.rdlx");
}
</script>
～～省略～～
また、テーマピッカー自体を表示したくない場合は、ツールバーからテーマピッカーを削除することもできます。
～～省略～～
<script type="text/javascript">
let viewer;
function loadViewer() {
viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#viewerContainer'
,themes: {
initialTheme: 'defaultDark'
}
});
viewer.toolbar.desktop.removeItem('$theme');
viewer.openReport("Report.rdlx");
}
</script>
～～省略～～実行すると、ツールバー右上に表示されていたテーマピッカーが非表示になります。テーマピッカーの内部IDは $theme です。テーマピッカー以外のツールバー項目も同様の方法で削除できます。
カスタムテーマを作成する
組み込みテーマを利用するだけでもビューワの外観を変更できますが、既存の業務システムやWebサイトのデザインに合わせたい場合は、独自のテーマを作成することも可能です。
カスタムテーマでは、背景色やアクセントカラー、フォントなどを自由に定義できます。今回は、MESCIUSカラーを使用したカスタムテーマを作成してみます。
Views/Home/Index.cshtml のJSビューワのコードに、次のように強調箇所を変更します。
～～省略～～
<script type="text/javascript">
let viewer;
const mesciusTheme = {
name: "MESCIUS Theme",
backgroundMain: "#EFEDEA",
backgroundPanels: "#E6E2DD",
primary: "#697683",
secondary: "#AF9D52",
neutral: "#8A8886",
error: "#AC6D85",
warning: "#AF9D52",
fontFamily: "Segoe UI, Meiryo, Arial, sans-serif"
};
function loadViewer() {
viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#viewerContainer'
,themes: {
initialTheme: 'MESCIUS Theme'
,themeSelector: {
availableThemes: ['default', mesciusTheme, 'defaultDark', 'darkOled', 'highContrast', 'highContrastDark', 'activeReports', 'activeReportsDark']
}
}
});
viewer.openReport("Report.rdlx");
}
</script>
～～省略～～このコードでは、MESCIUSカラーを使用したカスタムテーマを定義し、初期テーマとして適用しています。また、availableThemes に登録することで、テーマピッカーから選択できるようになります。
実行すると、作成したカスタムテーマがビューワへ適用されます。また、組み込みテーマと同様にテーマピッカーから切り替えて利用できます。
業務システムのデザインに合わせる
最後に、JSビューワの外観を業務システムのデザインに合わせてみます。
今回は、左側にメニュー、右側にJSビューワを配置した、業務支援システムを想定したサンプル画面を用意しました。また、システムの配色に合わせて、ネイビーを基調とした通常テーマと、黒を基調としたダークテーマを作成しています。
このサンプルでは、JSビューワのテーマピッカーではなく、業務システム側のテーマ選択から画面全体のテーマを変更できます。
業務システム側のテーマ選択と連動する
今回のサンプルでは、Views/Shared フォルダーに _BusinessLayout.cshtml を作成し、業務システムの共通レイアウトとして扱っています。JSビューワを配置した帳票画面の Report1.cshtml は、このレイアウトを使用して表示しています。
共通レイアウトでは、画面全体の色をCSS変数として定義しています。サイドメニューやヘッダーのクラスはこのCSS変数を参照するだけで、色そのものは指定していません。
CSS変数は body の data-system-theme 属性の値ごとに用意しています。属性値を変えるだけで、画面全体の配色をまとめて切り替えられます。
ヘッダーにはテーマを選択するリストを配置し、選択されたテーマ名を systemTheme.change メソッドへ渡します。
～～省略～～
<select id="systemThemeSelector"
class="rounded-md border border-[var(--border-color)] bg-[var(--panel-bg)] px-3 py-2 text-[var(--header-text)] outline-none"
onchange="systemTheme.change(this.value)">
<option value="BusinessLight">通常</option>
<option value="BusinessDark">ダーク</option>
<option value="MESCIUS">MESCIUS</option>
</select>
～～省略～～
<script>
// 業務システム全体のテーマを管理します。
window.systemTheme = (function () {
// テーマ変更時に呼び出す処理を登録します。
const listeners = [];
return {
// 現在のテーマ名を返します。
current: function () {
return document.getElementById("systemBody").dataset.systemTheme;
},
// 各ページからテーマ変更時の処理を登録します。
onChange: function (listener) {
listeners.push(listener);
},
// 画面全体の配色を切り替え、登録された処理へ通知します。
change: function (themeName) {
document.getElementById("systemBody").dataset.systemTheme = themeName;
listeners.forEach(listener => listener(themeName));
}
};
})();
</script>
～～省略～～systemTheme は、業務システム全体のテーマを管理するために用意したオブジェクトです。change メソッドでは、data-system-theme 属性を書き換えて画面全体の配色を切り替えたあと、テーマが変更されたことを各画面へ通知します。
帳票画面の Report1.cshtml では、この通知を受け取り、選択されたテーマ名でJSビューワを表示します。
～～省略～～
// 選択されたテーマを初期テーマに指定してViewerを表示します。
function createReportViewer(themeName) {
if (viewer) {
viewer.destroy();
}
document.getElementById("viewerContainer").innerHTML = "";
viewer = GrapeCity.ActiveReports.JSViewer.create({
element: "#viewerContainer",
themes: {
initialTheme: themeName,
// 業務システム側のテーマ選択で切り替えるため、
// JSビューワ内のテーマピッカーは無効化しています。
themeSelector: {
enabled: false,
availableThemes: availableThemes
}
}
});
viewer.openReport("Report.rdlx");
}
// 業務システムのテーマ変更を受け取り、Viewerへ反映します。
systemTheme.onChange(createReportViewer);
// 現在のテーマでViewerを表示します。
createReportViewer(systemTheme.current());
～～省略～～このように役割を分けることで、画面全体の配色は共通レイアウトが管理し、帳票画面はJSビューワへのテーマ適用だけを担当します。帳票2やマスター画面などを追加した場合も、それぞれの画面で必要な処理を登録するだけで、テーマの切り替えに対応できます。
実装全体については、本記事のサンプルプロジェクトをご参照ください。
カスタムテーマを利用することで、業務システム側のテーマ設定にJSビューワを連動させ、統一感のある画面を実現できます。
さいごに
今回は、ActiveReports for .NETのJSビューワで、組み込みテーマの設定方法とカスタムテーマの作成方法をご紹介しました。
カスタムテーマを利用すると、配色やフォントを変更できるだけでなく、業務システム側のテーマ設定と連動させることもできます。既存の業務システムにJSビューワを組み込む際は、システム全体のデザインに合わせて、ぜひご活用ください。
本記事で使用したサンプルプロジェクトは、以下Githubリポジトリより取得できます。
ActiveReports for .NETの製品情報やトライアル版については、以下のページをご覧ください。
製品の機能を手軽に体験できるデモアプリケーションも公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。