はじめに
データベースのデータをWebページで表示する方法はいろいろとありますが、データベースアプリケーションの知識とWebページ作成の知識が必要になります。Windowsフォームのアプリケーション開発専門のプログラマは、Webページ作成やASP.NETに対する知識の習得をしなければなりません。Windowsアプリケーションと同じ開発手法で、データベースデータをWebページに表示できれば、こんなありがたいことはないですね。
「ReportViewer for ASP.NET Wijmo」のC1ReportViewerコントロールは、まさにWindowsフォームと同じような方法で、データベースのデータをレポートに変換することができるコントロールです。
このC1ReportViewerコントロールを使い、Microsoft Accessのデータを一覧表のレポートで出力するアプリケーションを作成してみました。
対象読者
Visual Basic 2010、またはVisual C# 2010を使ってプログラムを作ったことがある人。
必要な環境
Visual Basic 2010、Visual C# 2010、Visual Studio 2010のいずれかでプログラムが作れる環境。
なお、本プログラムはWindows 7上で動作するVisual Studio 2010を使用して作成し、動作確認を行っています。
サンプルプログラム実行時の注意事項
1. Visual StudioでサンプルWebサイトを開く
Visual Studioをお持ちであれば、「ComponentOne Studio for ASP.NET Wijmo 2012J」トライアル版をインストールし、ソースコード圧縮ファイル「DB_Report_ASP_vb_src.zip」または「DB_Report_ASP_cs_src.zip」を解凍すると作成されるプロジェクトファイルをVisual Studioで開き、実行してください。
2. Visual Studioを使わずにサンプルWebサイトを開く
Visual Studioを使わずに、サンプルWebサイトを直接IISなどのWebサーバで開く場合は、ソースコード圧縮ファイル「DB_Report_ASP_vb_src.zip」または「DB_Report_ASP_cs_src.zip」を解凍すると作成されるプロジェクトファイルを、フォルダ構成を変えずにWebサーバにインストール・登録してください。
以下は、Microsoft IISサーバにインストールする場合の手順です。
- プロジェクトファイルのフォルダを、そのままWebサーバーへ配置します（例：「\Inetpub\wwwroot」直下へ配置）。
- サーバーに配置したアプリケーションフォルダに対して、「アプリケーションへの変換」を実行します。
- 「アプリケーションの追加」ダイアログで、「アプリケーションプール」を「Classic .NET AppPool」に設定します。
- クライアントのWebブラウザで、Default.aspxファイルを開きます（例：「http://localhost/mysplit_vb/Default.aspx」）。
本サンプルプログラムは、レポート定義ファイルを使用しますが、このファイルはデータベースファイルへのフルパスを使用して接続文字列を作成しています。
そのため、単純にプロジェクトファイルをお手持ちのコンピュータにインストールしただけでは正常に動作しません。
サンプルプログラムを動作させる場合は、サンプルプロジェクトをインストール後、記事の解説に従ってデータベースのレポート定義ファイルを作成しなおしてから実行してください。
Windows Vistaで製品のサンプルをコンパイルしようとするとエラーが発生する場合があります。これは、Windows VistaのUAC（ユーザーアカウント制御）により、製品サンプルがインストールされているフォルダに書き込みができないため、コンパイル時にエラーが発生するという現象です。Visual Studioを管理者権限で実行するか、サンプルプロジェクト一式をアクセス権のあるフォルダに移動してからコンパイルを行うようにしてください。
また、Webブラウザでaspxファイルを実行する際にIISサーバでエラーになる場合は、Web.configファイルに以下の1行を追加してください。
<identity impersonate="false" />
コンポーネントのインストール
「ReportViewer for ASP.NET Wijmo」を使用するには、Visual Studio、Visual Basic、Visual C#の開発環境に「ComponentOne Studio for ASP.NET Wijmo 2012J」をインストールする必要があります。
トライアル版は、グレープシティのWebページからダウンロードできます。
ダウンロードしたい製品にチェックを付け「申込フォーム」ボタンを押すと、「トライアル版申込フォーム」ページに移動しますので、「個人情報の収集および使用に同意する」にチェックを入れ「同意する」ボタンをクリックします。
トライアル申込フォームが表示されますので、必要情報を登録すると添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきます。ここからダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。
制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
コントロールと参照の追加
「ComponentOne Studio for ASP.NET Wijmo 2012J」をインストールしたら、プロジェクトにコントロールを追加します。
ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントは、アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1ReportViewer」コントロールです。
プロジェクトに以下のランタイムライブラリへの参照が追加されます。
| ファイル | 内容 |
|---|---|
| C1.Web.Wijmo.Controls.4 | 本体アセンブリ |
また、プロジェクトに以下のランタイムライブラリが追加されます。
| ファイル | 内容 |
|---|---|
| C1.Web.Wijmo.Controls.4.dll | 本体アセンブリ |
| C1.C1Report.4.dll | 本体アセンブリ |
C1ReportViewerコントロールの概要
「ReportViewer for ASP.NET Wijmo」のC1ReportViewerコントロールは、レポートを作成しWebページに追加する機能を持ったコントロールで、忠実度の高いグラフィカル形式で独特のピクセルパーフェクトなレポートを出力します。
ズーム、ページング、サムネイル、アウトラインなどの豊富な機能を持ち、ナビゲーション、検索、印刷、エクスポートなどの組み込みツールバーがあらかじめ実装されており、ユーザに操作しやすいユーザインターフェースを提供できます。
さらに、Crystal Reports、Microsoft Access、Microsoft SQL Reporting Servicesを含めてさまざまなレポート形式と統合しやすくなっており、ユーザは任意のWebレポートを印刷可能なWeb文書に高速に変換することができます。
C1ReportViewerコントロールは、レポート定義ファイルをもとにレポートを作成します。レポート定義の作成には、「ComponentOne Studio for ASP.NET Wijmo 2012J」に含まれている「C1Reportデザイナ」を使用します。
このデザイナは、多くのデータベースアプリケーションをサポートし、独自のレポート定義を作成することができます。
また、以下に示す数多くの特徴を持っています。
ブラウザに関わらずピクセルパーフェクトなレポートを表示
C1ReportViewerはWebPaperを使用して独特のピクセルパーフェクトなレポートを出力します。ComponentOneのWebPaper技術を使用して忠実度の高いグラフィカル形式でレポートを描画できます。
最新の対応ブラウザは、「ComponentOne Studio for ASP.NET Wijmoのクロスブラウザ対応について」で確認できます。
Crystal Reports
C1ReportViewerは、Microsoft AccessおよびCrystal Reeportsの両方の機能に対応します。C1ReportDesignerでボタンをクリックするだけでAccessのレポートファイル（MDBファイル）とCrystal Reportsファイル（RPTファイル）をインポートできます。
Microsoft AccessとSQL Reporting Servicesレポート
C1ReportViewerは、Microsoftレポート技術を広範囲にサポートしています。ビューアは、AccessとSQL Reporting Servicesレポートの両方に対応しています。RDLに対応し、WebPaper技術を使用してWebアプリケーションに組み込まれている既存の企業レポートを利用できます。
ズーム
デフォルトで、レポートがページに合わせるように拡大されますが、実寸で表示したり、ページまたは内容の幅がプレビューウィンドウに合うように設定したりすることができます。また、Zoomプロパティの値を設定してカスタムズームモードを設定することもできます。
エクスポート
レポートをExcel、PDF、HTMLなど、さまざまなポータブル形式で出力でき、簡単にメールに添付したり、他の企業と共有したりできます。
アウトラインの自動生成
レポートグループに応じて自動的にアウトラインツリーが作成され、Adobe Readerでレポート内の任意の場所へ移動できます。ツリー内の各ノードがレポートのグループヘッダセクションを示します。非表示のグループヘッダセクションは、PDFでアウトライン項目を生成しません。
ページング／スクロールによるナビゲーション
C1ReportViewerの表示ペインでは、ページングとスクロールによるナビゲーションが可能です。ユーザがボタンをクリックするだけで任意のビューに切り替えられます。
組み込み検索
C1ReportViewerコントロールでは、組み込みの検索ペインがあり、自動生成されたレポートのインデックスへクエリします。この機能により、開発者はコードを書くことなく高性能な検索ツールを提供できます。さらに、C1ReportViewer検索結果を強調表示してメニューを作成するので、ユーザーが探している文字列を見つけるのに役立ちます。
効率的なキャッシュ操作
C1ReportViewerが効率的にレポートをキャッシュし、反応時間を大幅に削減します。本コントロールでレポートが描画されるたびに、圧縮状態でサーバーに保存されますので、次回データベースへ再度クエリしてレポートを生成する必要はありません。これにより、サーバーの負荷が軽減され、低メモリコストで短い反応時間を実現できます。
強力な印刷機能
C1ReportViewerコントロールでは組み込みの印刷機能があり、含まれている印刷ボタンをクリックするとカスタム印刷ダイアログが表示されます。ユーザがこのダイアログでレポートの印刷方法を指定でき、ドキュメントのプレビューを見ることもできます。
C1ReportDesignerアプリケーション
コードを書くことなく、すぐにレポートの作成、編集、プレビュー、読み込み、保存を行えます。また、C1ReportDesignerは、Microsoft Accessと同様なユーザインターフェースを実装し、ユーザーがなじみのある環境を提供します。デザイナのMicrosoft Office 2007のようなリボンスタイルUIで、関連するコマンドがグループで表示され、レポートの設計時間を減らします。
30以上の組み込みレポートテンプレート
デザイナアプリケーションには30個以上のレポートテンプレートが存在します。C1ReportViewerのサンプルの中からレポートを選択するだけで、数分で専門的なスタイルのレポートが生成されます。コードを記述する必要はなく、クリック1つできれいなレポートが生成されます。
柔軟なデータ連結
レポート定義で接続文字列とSQL文を指定すると、C1ReportViewerが自動的にデータをロードします。また、XMLファイル、カスタムコレクションなど、他のデータソースも使用できます。
ネスト化したレポート
C1ReportViewerでは任意のレベルまでのネスト化（サブレポート）が可能です。メインレポートで詳細情報を表示し、サブレポートで各グループの先頭に概要を表示することができます。
レポート作成手順
C1ReportViewerコントロールを使ったレポート作成はとても簡単です。
- C1Reportデザイナでレポートの形式をデザインし、定義ファイルに保存する
- C1ReportViewerコントロールに、作成したレポート定義ファイルとレポート名を設定する
たったこれだけです。C1ReportViewerコントロールに作成したレポート定義ファイルとレポート名を設定するには、Webページデザイン時はC1ReportViewerコントロールのプロパティウィンドウで行います。実行時は、ビハインドコードで行います。
処理はすべてC1ReportViewerコントロールが行ってくれます。
Webページのデザイン
では、さっそくアプリケーションを作成していきましょう。
ページのレイアウト
使用するコントロールは、C1ReportViewer、Label、Buttonの各コントロールです。
今回作成するWebアプリケーションは、ボタン「レポート作成」をクリックするとレポート定義ファイルとレポート名を読み込み、Webページに表示します。
プロジェクトの準備とコントロールの配置
まずは、ASP.NETアプリケーション用プロジェクトを用意します。マスターページを使う場合は、適宜不要な部分を削除するなど編集しておきます。
Buttonコントロールは、Clickイベントハンドラを作成しておきます。Labelコントロールは、Textプロパティを空欄にしておきます。
- ButtonコントロールとLabelコントロールを1つ配置します。
- C1ReportViewerコントロールをページにドラッグアンドドロップします。
- プロパティウィンドウで、C1ReportViewerコントロールの「ExpandedTool」プロパティの値を「Thumbs」に変更します。
以上で、Webページのレイアウトは完成です。
C1ReportViewerコントロールの構成要素
C1ReportViewerコントロールは、ツールバー、アウトライン、検索ペイン、レポートプレビュー、ステータス表示領域の、複数の要素で構成されています。
ツールバー
レポートの印刷、保存、ページ操作、表示方法の変更などを操作するツールバーです。ツールバーには、次の機能が含まれています。
印刷
「印刷」ボタンは、ユーザーがレポートを印刷できる印刷ダイアログボックスを開きます。コンピュータにデフォルトで設定されているプリンタに出力します。
エクスポート
作成したレポートを、次のフォーマットの文書にエクスポートします。ボタン右側の▼をクリックすると、フォーマット一覧がドロップダウン表示されます。
| フォーマット | 説明 |
|---|---|
| Adobe PDF | レポートを.pdfのファイル拡張子を持つAdobe PDFファイルとして保存します。これはデフォルト設定で、ユーザーがドロップダウンメニューからオプションを選択せずに「エクスポート」ボタンをクリックした場合を示します。 |
| Open XML Excel | レポートを.xlsxのファイル拡張子を持つOpen XMLエクセルファイルとして保存します。 |
| Open XML Word | レポートを.docxのファイル拡張子を持つOpen XMLワードファイルとして保存します。 |
| Microsoft Excel | レポートを.xlsのファイル拡張子を持つマイクロソフトエクセルファイルとして保存します。 |
| リッチテキストフォーマット | レポートを.rtfのファイル拡張子を持つリッチテキストファイルとして保存します。 |
最初のページ
レポートの最初のページに移動します。
前のページ
レポートの前のページに移動します。
ページ番号
現在選択されているページを示し、ユーザーは表示するページを選択することができます。
次のページ
レポートの次のページに移動します。
最後のページ
レポートの最後のページに移動します。
ズームアウト
表示しているレポートのサイズを縮小します。
ズームイン
表示しているレポートのサイズを拡大します。
現在のズーム
現在のズーム倍率を示し、ユーザーはズームオプションから選択することもできます。
連続表示
ユーザーは連続ページ形式でレポートを表示することができます。
フルスクリーン
クリックすると、C1ReportViewerコントロールをWebページ全体に表示します。もう一度クリックすると元の表示に戻ります。
ナビゲーションペイン
C1ReportViewerコントロールの左側にアウトラインペイン、検索ペイン、サムネイルペインの3つのツールペインを表示します。デフォルトではアウトラインが表示されるようになっていますが、C1ReportViewerコントロールの「ExpandedTool」プロパティでドラッグのペインをデフォルトで表示するのかを設定できます。
アウトラインペイン
アウトラインペインは、レポートの目次のような役目を果たし、表示しているレポートのセクションの一覧を表示します。
検索ペイン
ユーザーがレポートから特定の単語や文字列を検索することができます。
サムネイルペイン
レポートの各ページのサムネイルを表示し、ユーザーが視覚的に特定の画像や文書内のセクションに移動することができます。
プレビューペイン
プレビューペインでは、ユーザーが現在コントロールに表示されているレポートを表示します。ツールバーを使用して表示形態を変えることができます。
ステータス表示領域
C1ReportViewerコントロールの現在の動作状況を表示します。次の画面は、C1ReportViewerコントロールでレポート定義ファイルを読み込み、プレビューペインに表示するまでのステータス表示の変化を示しています。
レポート定義ファイルの作成
C1ReportViewerコントロールでデータベースのデータをレポート表示するには、C1Reportデザイナでレポートの形式をデザインし、定義ファイルに保存する必要があります。
C1Reportデザイナは、「ComponentOne Studio 2012J」または「ComponentOne Studio for ASP.NET Wijmo 2012J」をインストールすると、自動的にWindowsのスタートメニューに組み込まれますので、ここから起動します。
レポートのレイアウトを作成する
では、C1Reportデザイナを使用してレポートを作成していきます。
作成するのは、Microsoft Accessで作成したデータベース「都立図書館リスト.mdb」です。このデータベースファイルのテーブル「図書館一覧」には、東京都立図書館の所在市区町村、図書館名、所在地、電話番号が格納されています。このデータを一覧表形式のレポートにします。
1. まずは、データベースファイルをプロジェクトに組み込みます。ソリューションエクスプローラーにあるフォルダ「App_Data」を右クリックして、ショートカットメニューから「追加－既存の項目」を選び、データベースファイル「都立図書館リスト.mdb」を選択します。
2. C1Reportデザイナの左ペインにある「レポートの作成」をクリックします。レポート新規作成ウィザードが起動します。
3. 「接続文字列の作成」ボタンをクリックします。「データリンクプロパティ」というダイアログが表示されます。
4. 「プロバイダー」タブをクリックし、「Microsoft Jet 4.0 OLE DB Provider」をクリックして「次へ」ボタンをクリックします。
5. 「接続」タブに移動しますので、レポートを作成したいデータベース名を選択し、「ユーザー名」を空欄にして「接続のテスト」ボタンをクリックします。接続テストに成功したら、メッセージボックスのOKボタンをクリックし、「データリンクプロパティ」ダイアログのOKボタンをクリックします。
6. 「レポート新規作成ウィザード」に戻り、「データソース」をクリックします。テーブル名が表示されるので、「図書館一覧」をクリックし「次へ」ボタンをクリックします。
7. 「利用可能なフィールド」が表示されますので、「>>」ボタンをクリックして「詳細」に移動し、「次へ」ボタンをクリックします。ここで選択したフィールドがレポートに使用されます。
8. 「レイアウト」で「表形式」をクリックし、「次へ」ボタンをクリックします。
ここでは、どのような形式のレポートにするのかを選びますが、あくまでもテンプレートを選ぶだけなので、このあとデザイナで自由にレイアウトを変えることができます。
9. レポートのスタイルを選びます。C1Reportデザイナには、組み込みのスタイルが多く用意されていますので、ここから「Concource」を選びます。組み込みスタイルを使用すると、配色やヘッダ・フッタなどの設定をすべて行ってくれますので、手軽にレポートのデザインを施すことができます。
10. 最後にレポート名を設定します。このレポート名を後でC1ReportViewerコントロールに設定することになります。ここでは、自動的にレポート名が作成されますので、このまま変更せずに「完了」ボタンをクリックします。
11. レポートのレイアウトが表示されます。Microsoft Accessのレポート作成画面とよく似ており、Accessでレポートを作成したことのある方なら、すぐに使えると思います。
「Detail」とあるペインに、データを表示するコントロールが配置されています。
リボンにある「プレビュー」をクリックすると、実際のレポート状態を確認できます。
とりあえず、ここまででレポート定義が出来上がりました。
レイアウトの修正
レポートのレイアウトは出来上がりましたが、プレビューを見るとIDと市区町村名がくっついているなど、少しレイアウトがおかしい部分がありますので修正します。
1. プレビューを閉じ、デザイナモードの画面に戻ります。デザイナは、全部で5つのペインに分かれています。
| セクション | 表示位置 | 通常の内容 |
|---|---|---|
| レポートヘッダ | レポートごとに一度 | レポート全体のタイトルやサマリー情報 |
| ページヘッダ | ページごとに一度 | 詳細フィールドについて説明するラベルやページ番号 |
| 詳細 | レコードごとに一度 | ソースレコードセットからのデータを含むフィールド |
| ページフッタ | ページごとに一度 | ページ番号、ページ数、印刷日、レポート名など |
| レポートフッタ | レポートごとに一度 | レポート全体のサマリー情報 |
2. 各ペインは自由にレイアウト・デザインすることができますが、今回はページヘッダと詳細（Detail）の部分を修正します。
まず、「Detail」の「ID」ラベルをクリックし、ツールバーの「中央揃え」ボタンをクリックします。これで、「ID」はラベルの中央に表示されるようになります。
3. 次に、「PageHeader」と「Detail」にある「市区町村」のラベルの幅を小さくし、「所在地」のラベルの幅を大きくします。これは、それぞれのラベルをクリックし、マウスでドラッグしていきます。
4. 一度プレビューし、レイアウトを確認します。気に入らなければ再度デザイナモードに戻り修正を加えます。よければ、このままレポート定義ファイルに保存します。
5. デザイナモードに戻り、アプリケーションボタンをクリックします。メニューが開きますので、「名前を付けて保存」をクリックし、保存します。ここでは、「都立図書館リスト.xml」という名前で保存します。
以上で、レポート定義ファイルは出来上がりです。C1Reportデザイナを終了します。
6. ソリューションエクスプローラーにあるフォルダ「App_Data」を右クリックして、ショートカットメニューから「追加」-「既存の項目」を選び、作成した「都立図書館リスト.xml」ファイルをプロジェクトの「App_Data」フォルダに入れます。
レポート表示処理の作成
Webページとレポート定義ファイルが作成できましたので、C1ReportViewerコントロールで表示するコードを作成します。といっても、コードは実に簡単です。プロパティを2つ設定し、メソッドを1つ実行するだけです。
ボタン「レポート作成」のClickイベントハンドラで、レポート定義ファイルとレポート名を設定します。C1ReportViewerコントロールのFileNameプロパティにレポート定義ファイル名を、そして同じくReportNameプロパティにレポート名を設定します。
これだけで、C1ReportViewerコントロールでレポートを表示できます。後はラベルでレポート定義ファイル名を表示します。
Public Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
C1ReportViewer1.FileName = "~/App_Data/都立図書館リスト.xml"
C1ReportViewer1.ReportName = "図書館一覧 レポート"
Label1.Text = C1ReportViewer1.ReportName
End Sub
End Class
namespace DB_Report_ASP_cs
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
C1ReportViewer1.FileName = "~/App_Data/都立図書館リスト.xml";
C1ReportViewer1.ReportName = "図書館一覧 レポート";
Label1.Text = C1ReportViewer1.ReportName;
}
}
}
まとめ
データベースのデータをWebページで表示するのが当たり前のようになっている現在です。開発する側からいえば、できる限り少ない工数で簡単にレポートを表示できるアプリケーションを開発したいと思うのは当然ですね。
この、C1ReportViewerコントロールはそんな要求にこたえることができるコントロールですし、コードもWindowsフォームアプリケーションと同じように記述できますから、プログラマの負担も少なくなります。
参考資料
- 東京都立図書館ホームページ『都内公立図書館一覧』
