1. Visual Studioで新しいプロジェクトを開きます（［ファイル］メニューから［新規作成］、［プロジェクト］を選択）。
2. ［新しいプロジェクト］ダイアログが表示されます。［ActiveReports12.0J ページレポート アプリケーション］を選択し、ファイル名を「CustomerDetails」に変更します。
3. ［OK］ボタンをクリックすると、ActiveReports12 ページレポートアプリケーションが新規作成されます。デフォルトでページレポートがプロジェクトに追加されています。
4. ［ソリューションエクスプローラー］で、ページレポートのファイル名を「Customers.rdlx」に変更します。

レポートレイアウトの追加については、「プロジェクトにレポートを追加する」を参照してください。

1. ［レポートエクスプローラ］で、［データソース］ノードを右クリックして［データソースの追加］を選択するか、［追加］（＋）ボタンをクリックして［データソース］を選択します。
   
2. 表示される［レポートデータソース］ダイアログの［全般］ページで、データソースの名前を入力します。
3. ［種類］フィールドで「Json Provider」を選択します。
4. 同じページの［スキーマ］タブで、ラジオボタンから［埋め込み］を選択し、その下の欄に埋め込むスキーマを次のように入力します。
   

   JSONスキーマ

   コードのコピー

   { "$schema": "http://json-schema.org/draft-04/schema#", "type": "object", "properties": { "Customers": { "type": "array", "items": { "type": "object", "properties": { "Id": { "type": "string" }, "CompanyName": { "type": "string" }, "ContactName": { "type": "string" }, "ContactTitle": { "type": "string" }, "Address": { "type": "string" }, "City": { "type": "string" }, "PostalCode": { "type": "string" }, "Country": { "type": "string" }, "Phone": { "type": "string" }, "Fax": { "type": "string" } }, "required": [ "Id", "CompanyName", "ContactName", "ContactTitle", "Address", "City", "PostalCode", "Country", "Phone", "Fax" ] } }, "ResponseStatus": { "type": "object", "properties": {} } }, "required": [ "Customers", "ResponseStatus" ] }

   メモ: 上記のスキーマは、JSONSchema.net（http://jsonschema.net/#/）で利用可能なJSON schema generatorを使用してcustomers.jsonデータ用に作成しました。

5. ［OK］ボタンをクリックしてデータソース接続を保存します。

1. ［レポートエクスプローラ］で、追加したデータソースのノードを右クリックして［データセットの追加］を選択するか、［追加］（＋）ボタンをクリックして［データセット］を選択します。
2. 表示される［データセット］ダイアログで、［全般］ページを選択し、データセットの名前として「顧客」と入力します。
3. ［クエリ］ページで、［クエリ］の横にある［JSONクエリデザイナで編集する］ボタンをクリックします。表示される［JSONクエリデザイナ］で[*]を選択し、［OK］ボタンをクリックすると、［クエリ］テキストボックスに次のようなクエリが得られます。
   $.Customers[*]
4. ［OK］ボタンをクリックしてダイアログを閉じます。データセットとクエリで作成したフィールドが子ノードとして［レポートエクスプローラ］に表示されます。

1. ［レポートエクスプローラ］の［顧客］データセットのノードを開き、Idフィールドをドラッグしてレポートのデザイナ面へドロップし、［プロパティ］ウィンドウへと移動して各プロパティを次のように設定します。

   プロパティ名	プロパティの値
   Location	0.375in, 0.25in
   FontSize	14pt
   FontStyle	Italic
   Size	4in, 0.375in

2. ［ツールボックス］から、Tableデータ領域をドラッグして、デザイナ面へドロップし、［プロパティ］ウィンドウへと移動して各プロパティを次のように設定します。

   プロパティ名	プロパティの値
   Location	0.375in, 1in
   Size	4.5in, 1.125in
   FixedSize	4.5in, 1.125in

3. このTableの左側にある行ハンドルのいずれかを右クリックし、［テーブルのフッタ］を選択してテーブルフッタ行を削除します。
4. ポインタをTexBox5上でホバーさせると、フィールド選択用アイコン（五本線の入ったアイコン）が表れます。これをクリックして表示されるフィールドのリストから［CompayName］フィールドを選択します。これにより、テーブルヘッダ行に静的なラベルが自動で追加されます。追加された静的なラベルを選択して、［プロパティ］ウィンドウへ移動し、Valueプロパティを「会社名」に変更します。
5. ポインタをTexBox6上でホバーさせると、フィールド選択用アイコンが表れます。これをクリックして表示されるフィールドのリストから［ContactName］フィールドを選択します。これにより、テーブルヘッダ行に静的なラベルが自動で追加されます。追加された静的なラベルを選択して、［プロパティ］ウィンドウへ移動し、Valueプロパティを「担当者」に変更します。
6. ポインタをTexBox7上でホバーさせると、フィールド選択用アイコンが表れます。これをクリックして表示されるフィールドのリストから［Address］フィールドを選択します。これにより、テーブルヘッダ行に静的なラベルが自動で追加されます。追加された静的なラベルを選択して、［プロパティ］ウィンドウへ移動し、Valueプロパティを「住所」に変更します。

1. ［ソリューションエクスプローラー］からForm1を開きます。
2. Form1のタイトルバーをダブルクリックして、Form1_Loadイベントのイベント処理メソッドを作成します。
3. レポートにデータをロードし、ビューワにレポートを表示するために、Form1.cs内のInitializeComponentメソッドの後に次のコードをペーストします。

   Form1.cs

   コードのコピー

   // レポートに妥当なデータを返す<see cref="PageDocument.LocateDataSource"/>のハンドラ private void OnLocateDataSource(object sender, GrapeCity.ActiveReports.LocateDataSourceEventArgs args) { object data = null; var dataSourceName = args.DataSourceName; var source = new DataLayer(); if (dataSourceName == "DataSource1") { data = source.CreateData(); } args.Data = data; } // レポートをロードして表示します。 private void Form1_Load(object sender, EventArgs e) { var rptPath = new System.IO.FileInfo(@"..\..\Customers.rdlx"); var definition = new GrapeCity.ActiveReports.PageReport(rptPath); definition.Document.LocateDataSource += OnLocateDataSource; viewer1.LoadDocument(definition.Document); }

このWebサービスは、プロジェクトに追加すると、JSONデータへのアクセス認証を行います。

1. ［ファイル］メニューから［追加］、［新しいプロジェクト］を選択します。
2. 表示される［新しいプロジェクトの追加］ダイアログで、ASP.NET Webアプリケーションを選択し、［名前］フィールドを「WebService」に変更します。
3. ［OK］ボタンをクリックして、新しいプロジェクトを追加します。
4. 表示される［新しいASP.NETプロジェクト］ダイアログで、「Empty」テンプレートを選択して［OK］をクリックします。
5. ［ソリューションエクスプローラー］で［WebService］ノードを右クリックして、［追加］、［クラス］を選択します。
6. 表示される［新しい項目の追加］ダイアログで、［クラス］を選択して、［名前］フィールドで名前を「BasicAuthHttpModule.cs」に変更します。
7. ［追加］ボタンをクリックして、新しいクラスをプロジェクトに追加します。
8. BasicAuthHttpModuleクラスファイルが開かれます。次のコードをWebService名前空間の中に追加します。

   BasicAuthHttpModule.cs

   コードのコピー

   namespace WebService { public class BasicAuthHttpModule : IHttpModule { private const string Realm = "My Realm"; public void Init(HttpApplication context) { // イベントハンドラを登録します。 context.AuthenticateRequest += OnApplicationAuthenticateRequest; context.EndRequest += OnApplicationEndRequest; } private static void SetPrincipal(System.Security.Principal.IPrincipal principal) { System.Threading.Thread.CurrentPrincipal = principal; if (HttpContext.Current != null) { HttpContext.Current.User = principal; } } // ユーザー名とパスワードを検証します。 private static bool CheckPassword(string username, string password) { return username == "admin" && password == "1"; } private static void AuthenticateUser(string credentials) { try { var encoding = System.Text.Encoding.GetEncoding("iso-8859-1"); credentials = encoding.GetString(Convert.FromBase64String(credentials)); int separator = credentials.IndexOf(':'); string name = credentials.Substring(0, separator); string password = credentials.Substring(separator + 1); if (CheckPassword(name, password)) { var identity = new System.Security.Principal.GenericIdentity(name); SetPrincipal(new System.Security.Principal.GenericPrincipal(identity, null)); } else { // ユーザー名またはパスワードに誤りがあります。 HttpContext.Current.Response.StatusCode = 403; } } catch (FormatException) { // 資格情報は正しく設定されませんでした。 HttpContext.Current.Response.StatusCode = 401; } } private static void OnApplicationAuthenticateRequest(object sender, EventArgs e) { var request = HttpContext.Current.Request; System.IO.FileInfo info = new System.IO.FileInfo(request.Url.AbsolutePath); if (!info.Name.Equals("GetJson")) return; var authHeader = request.Headers["Authorization"]; if (authHeader != null) { var authHeaderVal = System.Net.Http.Headers.AuthenticationHeaderValue.Parse(authHeader); // スキーム名RFC 2617 sec 1.2は大文字小文字を区別しません。 if (authHeaderVal.Scheme.Equals("basic", StringComparison.OrdinalIgnoreCase) && authHeaderVal.Parameter != null) { AuthenticateUser(authHeaderVal.Parameter); } } else { HttpContext.Current.Response.StatusCode = 401; } } // リクエストが不正な場合は、応答に対してWWW-Authenticateヘッダ // を追加します。 private static void OnApplicationEndRequest(object sender, EventArgs e) { var response = HttpContext.Current.Response; if (response.StatusCode == 401) { response.Headers.Add("WWW-Authenticate", string.Format("Basic realm=\"{0}\"", Realm)); } } public void Dispose() { } } }

9. ［ソリューションエクスプローラー］でWebServiceプロジェクトを右クリックして、［追加］、［参照］を選択し、System.Net.Httpの参照を追加します。
10. ［ソリューションエクスプローラー］で、［WebService］ノードを右クリックして、［追加］、［新しい項目］を選択します。
11. 表示される［新しい項目の追加］ダイアログで、［Webサービス（ASMX）］を選択して、［名前］フィールドの名前を「Service.asmx」に変更します。
12. ［追加］ボタンをクリックして、プロジェクトに新しいサービスを追加します。
13. 表示されるServiceファイルで、[System.Web.Script.Services.ScriptService]のコメントを解除し、WebMethodの下に次のコードを追加します。

    Service.asmx.cs

    コードのコピー

    [System.Web.Script.Services.ScriptMethod(UseHttpGet = true, ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)] public string GetJson() { string result; try { using (System.IO.StreamReader streamReader = new System.IO.StreamReader(Properties.Resource.JsonFilePath, System.Text.Encoding.UTF8)) { result = streamReader.ReadToEnd(); } } catch (System.IO.FileNotFoundException e) { var errorMessage = String.Format(Properties.Resource.FormatErrorMessage, e.Message, e.StackTrace); result = "{'error': '" + errorMessage + "'}"; } return result; }

14. ［ソリューションエクスプローラー］で、［WebService］ノードを右クリックして、［追加］、［新しい項目］を選択します。
15. 表示される［新しい項目の追加］ダイアログで、［Webフォーム］を選択して、［名前］フィールドで名前を「default.aspx」に変更します。
16. ［追加］ボタンをクリックして、新しいファイルをプロジェクトに追加します。
17. 表示されるdefault.aspxコードファイルで、次のように<div>タグを<form>タグに替えます。

    default.aspx	コードのコピー
    <form id="form1" runat="server"> <asp:Label ID="messageLabel" runat="server" Text=""></asp:Label> </form>

18. ［ソリューションエクスプローラー］で、［default.aspx］を右クリックして、［コードの表示］を選択します。
19. 表示される［default.aspx］コードファイルで、Page_Loadイベントに次のコードを追加します。

    default.aspx.cs	コードのコピー
    messageLabel.Text = Properties.Resource.bodyOfMessage;

     
20. ［ソリューションエクスプローラー］で、［WebService］ノードを右クリックして、［追加］、［新しい項目］を選択します。
21. 表示される［新しい項目の追加］ダイアログで、［リソースファイル］を選択して、［名前］フィールドで名前を「Resource.resx」に変更します。
22. ［追加］ボタンをクリックして、プロジェクトに新しいファイルを追加します。Resources.resxファイルを［WebService］>［Properties］ノードの下にドラッグします。
23. Resource.resxファイルに次のデータを追加します。

    名前	値
    bodyOfMessage	Json Data SourceサンプルWebServiceが正常に開始されました
    FormatErrorMessage	Message : {0}, StackTrace: {1}
    JsonFilePath	<User folder>\ActiveReportsNET12\Data\customers.json

24. ［ソリューションエクスプローラー］でソリューションのノードを右クリックして、［プロパティ］を選択します。
25. 表示される［ソリューション'CustomerDetails'プロパティページ］ダイアログで、ラジオボタンで［マルチ スタートアップ プロジェクト］を選択し、［アクション］のドロップダウンから2つのプロジェクトに対して［開始］を選択します。
26. ［適用］、［OK］をクリックして、ソリューションに追加した変更を適用します。
27. ［ソリューションエクスプローラー］で、CustomerDetailsプロジェクトを右クリックして、［追加］、［参照］を選択し、System.Web.Extentionsの参照を追加します。

DataLayerクラスはこのチュートリアルで使用するデータを提供します。

1. ［ソリューションエクスプローラー］でCustomerDetailsプロジェクトを右クリックして、［追加］、［クラス］を選択します。
2. 表示される［新しい項目の追加］ダイアログで、［クラス］を選択して、「名前」フィールドで名前を「DataLayer.cs」に変更します。
3. ［追加］ボタンをクリックして新たなクラスをプロジェクトに追加します。
4. 表示されるDataLayerクラスファイルで、このプロジェクトの名前空間の内部に次のコードを追加します。

   注意: "source_url"に設定しているURL中のポート番号（"http://localhost:"の後ろの部分）は、IIS Expressが実際に使用するポート番号に変更する必要があります。IIS Expressが使用するポート番号は、WebServiceプロジェクトのプロパティページで確認・変更することができます。

   DataLayer.cs

   コードのコピー

   // このサンプルで使用するデータを提供します internal sealed class DataLayer { public String CreateData() { string source_url = @"http://localhost:6719/Service.asmx/GetJson"; string responseText = null; using (var webClient = new System.Net.WebClient()) { webClient.Headers[System.Net.HttpRequestHeader.Authorization] = "Basic " + Convert.ToBase64String(System.Text.Encoding.Default.GetBytes("admin:1")); // username:password webClient.Headers[System.Net.HttpRequestHeader.ContentType] = "application/json;"; webClient.Encoding = System.Text.Encoding.UTF8; var responseJson = webClient.DownloadString(source_url); Dictionary<string, string> values = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<Dictionary<string, string>>(responseJson); if (values.ContainsKey("d")) { responseText = values["d"]; } } return responseText; } }

1. ［ソリューションエクスプローラー］で、WebServiceプロジェクト内のWeb.configファイルを開きます。
2. <configuration>タグを次のコードに置き換えます。

   Web.config

   コードのコピー

   <configuration> <system.web> <compilation debug="true" targetFramework="4.5"/> <httpRuntime targetFramework="4.5"/> <httpModules> <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web"/> </httpModules> <webServices> <protocols> <add name="HttpGet"/> <add name="HttpPost"/> <add name="HttpSoap"/> </protocols> </webServices> </system.web> <system.codedom> <compilers> <compiler language="c#;cs;csharp" extension=".cs" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:6 /nowarn:1659;1699;1701"/> <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:14 /nowarn:41008 /define:_MYTYPE=\&quot;Web\&quot; /optionInfer+"/> </compilers> </system.codedom> <system.webServer> <validation validateIntegratedModeConfiguration="false"/> <modules> <add name="BasicAuthHttpModule" type="WebService.BasicAuthHttpModule, WebService"/> <remove name="ApplicationInsightsWebTracking"/> <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" preCondition="managedHandler"/> </modules> </system.webServer> </configuration>

1. ［ビルド］メニューから［ソリューションのビルド］を選択します。
2. ［F5］ボタンを押してプロジェクトを実行します。