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］ボタンを押してプロジェクトを実行します。
関連トピック
データセットの追加

 

 

Copyright © 2003 GrapeCity inc. All rights reserved.