GrapeCity ActiveReports for .NET 14.0J
JSONデータを使ったレポート
ActiveReportsユーザーガイド > 概念 > ページレポート/RDLレポートの概念 > データソースとデータセット > [レポートデータソース]ダイアログ > JSON Provider > JSONデータを使ったレポート

このトピックでは、実行時にページレポートをJSONデータソースに接続し、正当なアクセス資格を使用してWebサービスからデータを取得する方法を紹介します。

メモ:

以下の手順を完了すると、次のようなレポートが作成されます。

デザイン時のレイアウト

実行時のレイアウト

Visual StudioプロジェクトにActiveReportsを追加する

  1. Visual Studioで新しいプロジェクトを開きます([ファイル]メニューから[新規作成][プロジェクト]を選択)。
  2. [新しいプロジェクト]ダイアログが表示されます。[ActiveReports14.0J ページレポート アプリケーション]を選択し、ファイル名を「CustomerDetails」に変更します。
  3. [OK]ボタンをクリックすると、ActiveReports14 ページレポートアプリケーションが新規作成されます。デフォルトでページレポートがプロジェクトに追加されています。
  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サービスをプロジェクトに追加する

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

DataLayerクラスを追加する

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;
    }
    }

Web.configファイルを設定する

  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]ボタンを押してプロジェクトを実行します。
関連トピック