ActiveReports通信

.NET帳票開発ツール ActiveReports の技術情報をお届けします。

JSONデータソースでWeb APIからレポートデータを取得する

ActiveReports for .NET 11.0JではレポートのデータソースとしてJSON形式のデータを使用できる「JSONデータソース」が追加されました。

f:id:ComponentOne_JP:20171005100251p:plain:w350

「JSONデータソース」は、以下のような形式のJSONデータを利用することができます。

  • レポート定義に直接埋め込んだもの
  • 外部ファイルから取得したもの
  • URLを指定してWeb APIなどから取得したもの

今回は、3番目のWeb APIから取得する方法を解説します。

JSONデータを返却するWeb APIの作成

オープンデータなどでJSONデータを返却するWeb APIはいろいろありますが、今回は社員情報を返却するWeb APIを自前で作成して、そこからデータを取得してみたいと思います。

Visual Studio 2017を起動し、 「Visual C#」⇒「Web」のテンプレートから「ASP.NET Web アプリケーション(.NET Framework)」を選択します。プロジェクト名は「EmployeeApp」とします。

f:id:ComponentOne_JP:20171005120220p:plain:w500

次に「空」のテンプレートを選択し、「Web API」にチェックをいれ、次に進みます。

f:id:ComponentOne_JP:20171005104437p:plain:w600

プロジェクトが作成されたらまずはモデルを作成します。ソリューションエクスプローラーから「Models」フォルダを右クリックし、「Employee」という名前のクラスを追加します。追加された「Employee.cs」ファイルの中身を以下のように書き換えます。

namespace EmployeeApp.Models
{
    public class Employee
    {
        public string EmployeeId { get; set; }
        public string Name { get; set; }
        public string Branch { get; set; }
        public string Department { get; set; }
    }
}

次にコントローラーを追加します。「Controllers」フォルダを右クリックし、コントローラーを追加します。ここでは空のWeb API 2 コントローラーを選択し、名前を「EmployeeController」とします。

f:id:ComponentOne_JP:20171005104447p:plain:w500

追加された「EmployeeController.cs」の中身を以下のように書き換えます。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using EmployeeApp.Models;

namespace EmployeeApp.Controllers
{
    public class EmployeeController : ApiController
    {

        Employee[] Employees = new Employee[]
              {
                    new Employee { EmployeeId = "105", Name = "森上 偉久馬", Branch = "東京本社", Department = "営業部" },
                    new Employee { EmployeeId = "107", Name = "葛城 孝史", Branch = "東京本社", Department = "営業部" },
                    new Employee { EmployeeId = "110", Name = "加藤 泰江", Branch = "東京本社", Department = "人事部" },
                    new Employee { EmployeeId = "204", Name = "川村 匡", Branch = "大阪支社", Department = "営業部" },
                    new Employee { EmployeeId = "207", Name = "松沢 誠一", Branch = "大阪支社", Department = "総務部" },
                    new Employee { EmployeeId = "210", Name = "成宮 真紀", Branch = "大阪支社", Department = "総務部" },
                    new Employee { EmployeeId = "304", Name = "山本 雅治", Branch = "北九州支社", Department = "営業部" },
                    new Employee { EmployeeId = "305", Name = "青木 俊之", Branch = "北九州支社", Department = "経理部" },
                    new Employee { EmployeeId = "307", Name = "小川 さよ子", Branch = "北九州支社", Department = "総務部" },
              };

        public IEnumerable<Employee> GetEmployees()
        {
            return Employees;
        }
    }
}

今回は返却する社員情報をハードコードしていますが、もちろん外部DBに接続して取得することも可能です。

作成したWeb APIのローカルIISへの発行

次にWeb APIを実行できるようにローカルIISに発行します。 IISマネージャーを起動し、Web APIを配置するWebサイトを新しく作成します。この例では「EmployeeTEST」というサイトを作成し、8080番のポートを割り当てました。

f:id:ComponentOne_JP:20171006142137p:plain:w500

次に作成したWeb APIを発行します。管理者権限で起動したVisual Studio 2017でプロジェクトを開き、ソリューションエクスプローラーでプロジェクトを右クリックし、「公開」のメニューからIISに発行します。 今回はローカルIISなので、サーバーに「localhost」、サイト名に先ほど作成したサイト「EmployeeTEST」を指定します。

f:id:ComponentOne_JP:20171006142249p:plain:w500

Web APIから取得したデータを表示するレポートの作成

前置きが長くなりましたが、ここからが本題です。作成したAPIから取得したJSONデータをレポートのデータソースに設定してみます。 JSONデータソースが使用できるのはページレポートとRDLレポートです。今回はページレポートを使用します。

f:id:ComponentOne_JP:20171005134002p:plain:w500

レポートにデータソースを追加します。種類で「JSON Provider」を選択し、JSONデータの検証に使用するJSONスキーマを入力します。 f:id:ComponentOne_JP:20171005142052p:plain:w500

以下のJSONスキーマを入力します。JSONスキーマは「https://jsonschema.net/」などのジェネレーターから簡単に作成可能です。

{
  "$schema": "http://json-schema.org/draft-04/schema#", 
  "definitions": {}, 
  "id": "http://example.com/example.json", 
  "items": {
    "id": "/items", 
    "properties": {
      "Branch": {
        "id": "/items/properties/Branch", 
        "type": "string"
      }, 
      "Department": {
        "id": "/items/properties/Department", 
        "type": "string"
      }, 
      "EmployeeId": {
        "id": "/items/properties/EmployeeId", 
        "type": "string"
      }, 
      "Name": {
        "id": "/items/properties/Name", 
        "type": "string"
      }
    }, 
    "type": "object"
  }, 
  "type": "array"
}

次に「コンテンツ」タブに移動し、先ほど発行したAPIのURLを設定し、「OK」をクリックします。今回の例では「http://localhost:8080/api/employee」になります。

f:id:ComponentOne_JP:20171006143316p:plain:w500

次にデータセットを追加します。先ほど入力したJSONスキーマとURLの設定が正しい場合は、JSONクエリデザイナのアイコンが有効になります。

f:id:ComponentOne_JP:20171005143941p:plain:w500

アイコンをクリックすると「JSONクエリデザイナ」が開きます。[*]にカーソルを合わせダブルクリックすると、すべてのフィールドをデータセットとして取得できます。

f:id:ComponentOne_JP:20171005143953p:plain:w500

以上でJSONデータソースの設定は完了です。正しく設定できた場合は、レポートエクスプローラ上に取得したフィールドが表示されます。

f:id:ComponentOne_JP:20171006101824p:plain:w400

あとは従来のデータソースと同じ要領で、Tableコントロールなどにフィールドを設定し、罫線や背景色などを整えます。

f:id:ComponentOne_JP:20171005145400p:plain:w500

プレビューすると、以下のようになります。先ほど作成したWeb APIから取得したデータをレポート上に表示できました。

f:id:ComponentOne_JP:20171005145528p:plain:w500