SharpShooter Reports.Web
WCF サービスで Web ビューアを使用する
Last modified on: November 15, 2012
※本ドキュメント内のスクリーンショットは英語表記ですが SharpShooter Reports JP(日本語版)では日本語で表示されます。

PERPETUUM
softwarewww.perpetuumsoft.com

目次システムの必要条件 ................................................................................................................ 3
はじめに .............................................................................................................................. 3
手順 1.プロジェクトの作成 ................................................................................................... 3
手順 2. Web アプリケーションの設定 ...................................................................................... 4
手順 3. サービス ロジックの実装 ............................................................................................ 5
手順 4. 設定されたサービスを使用できるか確認する .................................................................... 5
手順 5. プロジェクトに Java Script ファイルを追加する .............................................................. 6
手順 6. スタイルを追加する .................................................................................................. 8
手順 7. デフォルトのスキンファイルを追加する ....................................................................... 10
手順 8. プロジェクトに ASPX ページを追加する ...................................................................... 12
手順 9. ページに Report Viewer コンポーネントを追加する ....................................................... 14
手順 10. アプリケーションの実行 ......................................................................................... 172

PERPETUUM
softwarewww.perpetuumsoft.com

システムの必要条件
Web アプリケーションで SharpShooter Reports.Web を使用するには以下が必要です。
·.NET Framework 3.5 or higher·Visual Studio 2008/2010

はじめにこのマニュアルは基本的な使い方を説明し、SharpShooter Reports.Web の使用に最低限必要なスキルを提供します。SharpShooter Reports.Web を使用した Web アプリケーションの作成方法について順を追って説明していきます。サービスの作成および設定方法、レポートの作成方法、Web ビューアを統合する方法を説明します。
このマニュアルどおりに行えば、Web アプリケーション/ウェブサイトでのサービスの設定や定義済みのスキンを使用したレポートビューアの付加が 15 分ほどで行えるようになります。
では、SharpShooter Reports.Web を使った Web アプリケーションの作成手順について説明します。サービスの作成および設定方法、レポートの作成方法、Web アプリケーションのページにレポートビューアを統合する方法を説明していきます。

手順 1. プロジェクトの作成
ASP.NET Web アプリケーションの新規プロジェクトを作成し、プロジェクト名を「SharpShooterWebViewerSkin」にします。
Visual Studio のメインメニューから [新規作成\プロジェクト] を選択します。

ASP.NET Web アプリケーションを選択し、プロジェクトの「名前」フィールドに「SharpShooterWebViewerSkin」と入力して「OK」ボタンを押します。

3

PERPETUUM
softwarewww.perpetuumsoft.com

手順 2. Web アプリケーションの設定
コンテキストメニューを開き、「プロパティ」を選択します。「SharpShooterWebViewerSkin」プロジ
ェクトのプロパティをここで変更できます。
「Web」タブの [Visual Studio 開発サーバーを使用する] に設定し、特定ポートを「5555」にします。

4

PERPETUUM
softwarewww.perpetuumsoft.com

手順 3. サービス ロジックの実装
プロジェクトに、Report Engine のサービスを実装するクラスを追加します。このクラスの追加方法の詳細は、Reporting Engine の設定をご覧ください。

手順 4. 設定されたサービスを使用できるか確認する
ソリューション エクスプローラから「ReportService.svc」ファイルを選択し、コンテキストメニューから[ブラウザーで表示]を選択します。

ブラウザに次のページが表示されるはずです。

5

PERPETUUM
softwarewww.perpetuumsoft.com

ブラウザにこのページが表示されない場合はサービスの設定にエラーがあるので、手順 4-5 を確認してください。
このページが表示されれば、アプリケーションのサーバー部分の設定は終わりなので、クライアントアプリケーションの設定を行います。

手順 5. プロジェクトに Java Script ファイルを追加するプロジェクトに次のファイルを追加します。
jquery-1.5.1.js – jQuery プラグイン
jquery.treeview.js – ブックマークのツリー機能を実装します
mscorlib.js – スクリプトに型システムのような機能や（# スクリプトで作成されたクラスの使用時に必要な）基本的なユーティリティの API を提供します
PerpetuumSoft.Reporting.WebViewer.Client.js – レポートの取得や表示ロジックを実装するクラスを含んでいます
PerpetuumSoft.Reporting.WebViewer.Client.Model.js – データモデルのクラス

プロジェクトに、スクリプトを入れるフォルダを追加します。プロジェクトのコンテキストメニューから[追加\新しいフォルダー]を選択します。

「Web\Scripts」フォルダから次のファイルを追加します。
jquery-1.5.1.jsjquery.treeview.js
mscorlib.js
PerpetuumSoft.Reporting.WebViewer.Client.Model.js
PerpetuumSoft.Reporting.WebViewer.Client.js
6

PERPETUUM
softwarewww.perpetuumsoft.com「Web\Skins\Default\Scripts」フォルダから次のファイルを追加します。
WebViewer.Style.js;
jquery-ui-1.8.11.js.

7

PERPETUUM
softwarewww.perpetuumsoft.com

手順 6. スタイルを追加する
プロジェクトに、コンポーネントのデフォルトのスキンスタイルを追加します。次の css ファイルを追加します。
ReportViewer.css – レポートの表示スタイル;
WebViewerSkin.css – ビューア コンポーネントのスタイル
ソリューション エクスプローラの「Styles」フォルダを選択し、コンテキストメニューから [追加->既存の項目…] をクリックします。

8PERPETUUM
softwarewww.perpetuumsoft.com

プロジェクトに「Web\Content」フォルダの ReportViewer.css を追加します。

プロジェクトに「Web\Skins\Default\Content」フォルダの WebViewerSkin.css ファイルを追加します。

9

PERPETUUM
softwarewww.perpetuumsoft.com

手順 7. デフォルトのスキンファイルを追加する
スタイルやイメージを持つファイルをいくつか追加して、コンポーネントのユーザーインターフェイスを設定します。インストール ディレクトリの「Web\Skins\Default\Content\」フォルダの中身をプロジェクトの「Styles」フォルダにコピーします。
ソリューション エクスプローラの「SharpShooterWebViewerSkin」を選択し、「すべてのファイルを表示」
ボタンをクリックしてプロジェクトの全フォルダを表示します。

10

PERPETUUM
softwarewww.perpetuumsoft.com

ソリューション エクスプローラの「images」フォルダ、「themes」フォルダ、「WebViewerSkin.css」
ファイルを選択し、コンテキストメニューから [プロジェクトに含める] をクリックします。

プロジェクトにフォルダや入れ子のファイルが追加されます。

11

PERPETUUM
softwarewww.perpetuumsoft.com

手順 8. プロジェクトに ASPX ページを追加する
プロジェクトに aspx ページを追加し、このページにレポートビューア コンポーネントを貼り付けます。
ソリューション エクスプローラの「SharpShooterWebViewerSkin」プロジェクトを選択し、コンテキス
トメニューから [追加->新しい項目…] をクリックします。

12

PERPETUUM
softwarewww.perpetuumsoft.com

項目リストから「Web Form using Master Page」を選択し、「名前」フィールドに「Reports」（ページ名）を設定します。

このぺージで使用するマスターページを設定します。

サイトメニューに、「Reports.aspx」ページのリンクを追加します。ソリューション エクスプローラから「Site.Master」ファイルを開き、「ID=“NavigationMenu”」の Menu 要素を次のように変更します。
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false"
Orientation="Horizontal"><Items><asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/><asp:MenuItem NavigateUrl="~/Reports.aspx" Text="Reports" /><asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/></Items>

13

PERPETUUM
softwarewww.perpetuumsoft.com</asp:Menu>

手順 9. ページに Report Viewer コンポーネントを追加する
ソリューション エクスプローラから「Report.aspx」ページを開き、以下に示してあるように、このページにソリューション エクスプローラのファイルをドラッグします。

次のコードスニペットを「Report.aspx」ページに追加します。これは、コンポーネントのデフォルトのビューとユーザーインターフェイスを定義しています。
<div class="ssr_reportViewerControl"><!--Toolbar panel, contains print and exports button--><div id="ssr_toolBarPanel" class="ssr_toolBar"><div class="ssr_toolButtonContainer"><div id="ssr_printButton" class="ssr_toolButton ssr_printButtonDisable" title="Print"></div></div><div class="ssr_toolButtonContainer"><div id="ssr_rtfExportButton" class="ssr_toolButton ssr_rtfButtonDisable" title="Export to Rtf"></div></div><div class="ssr_toolButtonContainer"><div id="ssr_pdfExportButton" class="ssr_toolButton ssr_pdfButtonDisable" title="Export to Pdf"></div></div><div class="ssr_toolButtonContainer"><div id="ssr_excelExportButton" class="ssr_toolButton ssr_excelButtonDisable" title="Export toExcel"></div>

14

PERPETUUM
softwarewww.perpetuumsoft.com</div><div class="ssr_toolButtonContainer"><div id="ssr_htmlExportButton" class="ssr_toolButton ssr_htmlButtonDisable" title="Export toHtml"></div></div><div class="ssr_toolButtonContainer"><div id="ssr_xpsExportButton" class="ssr_toolButton ssr_xpsButtonDisable" title="Export to Xps"></div></div></div><div class="ssr_centralDiv"><!--Contains thumbnails and documentMap elements--><div class="ssr_navigationArea" id="ssr_navigationAreaElement"><div class="ssr_navigationIconPanel" id="ssr_navigationIconPanel"><div class="ssr_thumbnailButtonContainer" id="ssr_thumbnailButtonContainer"><!--shows or hides thumbnail element--><div title="Thumbnails" id="ssr_thumbnailButton" class="ssr_thumbnailButton
ssr_thumbnailButtonDisable"></div></div><div class="ssr_documentMapButtonContainer" id="ssr_documentMapButtonContainer"><!--shows or hides document map element--><div title="Document Map" id="ssr_documentMapButton" class="ssr_documentMapButton
ssr_documentMapButtonDisable"></div></div></div><div id="ssr_thumbnailsPanel" class="ssr_thumbnailsPanel"><div id="ssr_thumbnailHeadPanel" class="ssr_thumbnailHeadPanel"><span class="ssr_thumbnailHeadPanelTitle">Thumbnails</span><div title="Close" id="ssr_closeThumbnailPanelButton"class="ssr_closeThumbnailPanelButton"></div></div><div id="ssr_wrapThumbnailContentPanel" class="ssr_wrapThumbnailContentPanel"><!--element which contains a list of thumbnail--><div id="ssr_thumbnailContentPanel" class="ssr_thumbnailContentPanel"></div></div></div><div id="ssr_documentMapPanel" class="ssr_documentMapPanel"><div id="ssr_documentMapHeadPanel" class="ssr_documentMapHeadPanel"><span class="ssr_documentMapHeadPanelTitle">Document Map</span><div title="Close" id="ssr_closeDocumentMapPanelButton"class="ssr_closeThumbnailPanelButton"></div></div><div id="ssr_wrapDocumentMapContentPanel" class="ssr_wrapDocumentMapContentPanel"><!--element which contains a document map--><div id="ssr_documentMapContentPanel" class="ssr_documentMapContentPanel"></div></div></div></div><!--reports will be shows in this element--><div id="ssr_reportContent" class="ssr_reportArea"></div></div><!--Statusbar panel--><div id="ssr_statusBarPanel" class="ssr_statusPanel"><div id="ssr_paginationPanel" class="ssr_paginationPanel"><div class="ssr_statusButtonContainer ssr_statusButtonContainerBack"><div id="ssr_firstPageButton" class="ssr_statusButton ssr_statusButtonBack
ssr_firstPageDisable"></div>

15

PERPETUUM
softwarewww.perpetuumsoft.com</div><div class="ssr_statusButtonContainer ssr_statusButtonContainerBack"><div id="ssr_previousPageButton" class="ssr_statusButton ssr_statusButtonBack
ssr_previousPageDisable"></div></div><div class="ssr_statusCurrentPageContainer"><!--displays the current page number--><input id="ssr_currentPageNumberBox" class="ssr_currentPageNumber" title="Current page" /><span class="ssr_pageCountOf">of</span><span> </span><span id="ssr_pageCountBox"
class="ssr_pageCount">0</span></div><div class="ssr_statusButtonContainer ssr_statusButtonContainerForward"><div id="ssr_nextPageButton" class="ssr_statusButton ssr_statusButtonForward
ssr_nextPageDisable"></div></div><div class="ssr_statusButtonContainer ssr_statusButtonContainerForward"><div id="ssr_lastPageButton" class="ssr_statusButton ssr_statusButtonForward
ssr_lastPageDisable"></div></div></div><!--Shows or hides error dialog--><div id="ssr_notificationPanel" class="ssr_notificationPanel"><div id="ssr_errorButton" class="ssr_errorButton ssr_errorButtonDisable"></div></div></div></div><div id="ssr_errorDialog" title="Error information" style="display: none;"><div id="ssr_errorMessage" class="ssr_errorMessageContent"></div></div>

次の javascript コードを「Report.aspx」ページに追加します。これは、ドキュメントの読込を制御します。
<script type="text/javascript">
var reportViewer = null;$(document).ready(function () {Initialize();InitializeReportViewer();});
function InitializeReportViewer() {reportViewer = new PerpetuumSoft.Reporting.WebViewer.Client.ReportViewer('#ssr_reportContent');
reportViewer.setServiceUrl("http://localhost:5555/ReportService.svc");
reportViewer.reportName = "CustomersReport";
reportViewer.setDocumentMapControl("#ssr_documentMapContentPanel");reportViewer.setThumbnailsControl("#ssr_thumbnailContentPanel");reportViewer.documentInfoLoadedEvent = function (pages) {EnableToolbarState();if (pages.length > 1) {pageCount = pages.length;
EnableNextLastPage();
DisablePreviousFirstPage();}else {DisableNextLastPage();
DisablePreviousFirstPage();}$("#ssr_pageCountBox").text(pages.length.toString());

16

PERPETUUM
softwarewww.perpetuumsoft.com

reportViewer.loadThumbnails();};
reportViewer.errorEvent = function (errorModel) {switch (errorModel.errorType) {case PerpetuumSoft.Reporting.WebViewer.Client.ErrorType.communicationError:$("#ssr_errorMessage").text(errorModel.error._error$1);
break;
case PerpetuumSoft.Reporting.WebViewer.Client.ErrorType.clientError:$("#ssr_errorMessage").text("clientError" + (errorModel.error).message);break;
case PerpetuumSoft.Reporting.WebViewer.Client.ErrorType.serverError:$("#ssr_errorMessage").text("serverError" + (errorModel.error).message +(errorModel.error).getInformation());
break;
default:$("#ssr_errorMessage").text(errorModel.error.message);break;}
EnableErrorButton();ShowErrorDialog();};reportViewer.currentPageChangedEvent = function (pageNumber) {if (reportViewer.isFirstPage()) {DisablePreviousFirstPage();}else {
EnablePreviousFirstPage();}if (reportViewer.isLastPage()) {DisableNextLastPage();}else {
EnableNextLastPage();}$("#ssr_currentPageNumberBox").val(pageNumber.toString());};
reportViewer.renderDocument();}</script>

コンポーネントがページに追加されたので、テストします。

手順 10. アプリケーションの実行
Visual Studio で F5 を押してアプリケーションを実行します。「Reports」リンクをクリックすると、サンプルのレポートページが表示されます。

17

PERPETUUM
softwarewww.perpetuumsoft.com

18