製品

ソリューション

コネクタ

サポート

価格

企業情報

事例

ブログ

検索お問い合わせ

製品をチェック

製品の詳細・30日間の無償トライアルはこちら

CData Connect

AngularJS を使用してSQL Analysis Services データで動的Web ページを構築

CData Connect Server を使用してSQL Analysis Services OData フィードを作成し、リアルタイムSQL Analysis Services データでシングルページアプリケーションを構築します。

加藤龍彦
デジタルマーケティング
最終更新日：2022-11-13

こんにちは！ウェブ担当の加藤です。マーケ関連のデータ分析や整備もやっています。

AngularJS（Angular）は、動的Web アプリを構造化するフレームワークであり、CData Connect Server と組み合わせることで、SQL Analysis Services のリアルタイムデータにアクセスできるシングルページアプリケーション（SPA）を構築することができます。 CData Connect Server は、SQL Analysis Services の仮想データベースを作成し、SQL Analysis Services のOData API（Angular からネイティブに使用可能）を生成するために使用できます。この記事では、CData Connect Server のセットアップとSQL Analysis Services データへのライブアクセスを持つシンプルなSPA を作成する方法について説明します。

Connect Server を構成する

Angular アプリでリアルタイムSQL Analysis Services データを操作するには、Connect Server からSQL Analysis Services に接続し、新しい仮想データベースへユーザーアクセスを提供してSQL Analysis Services データのOData エンドポイントを作成する必要があります。

Connect Server ユーザーの追加

AngularJS からConnect Server を介してSQL Analysis Services に接続するユーザーを作成します。

「Users」->「 Add」とクリックします。
ユーザーを構成します。
「Save Changes」をクリックして新しいユーザーの認証トークンをメモします。

Connect Server からSQL Analysis Services に接続

CData Connect Server は、簡単なポイントアンドクリックインターフェースを使用してAPI を生成します。

Connect Server を開き、「Databases」をクリックします。
「Available Data Sources」から「SQL Analysis Services」を選択します。
必要な認証プロパティを入力し、SQL Analysis Services に接続します。
接続するには、Url プロパティを有効なSQL Server Analysis Services エンドポイントに設定して認証を提供します。XMLA アクセスを使用して、HTTP 経由でホストされているSQL Server Analysis Services インスタンスに接続できます。 Microsoft ドキュメント configure HTTP access を参照してSQL Server Analysis Services に接続してください。

SQL をSQL Server Analysis Services に実行するには、ヘルプドキュメントの「Analysis Services データの取得」を参照してください。接続ごとにメタデータを取得する代わりに、CacheLocation を設定できます。
- HTTP 認証
  AuthScheme を"Basic" または"Digest" に設定してUser とPassword を設定します。CustomHeaders に他の認証値を指定します。
- Windows (NTLM)
  Windows のUser とPassword を設定して、AuthScheme をNTLM に設定します。
- Kerberos およびKerberos Delegation
  Kerberos を認証するには、AuthScheme をNEGOTIATE に設定します。Kerberos 委任を使うには、AuthScheme をKERBEROSDELEGATION に設定します。必要があれば、User、Password およびKerberosSPN を設定します。デフォルトでは、CData 製品は指定されたUrl でSPN と通信しようと試みます。
- SSL/TLS:
  デフォルトでは、CData 製品はサーバーの証明書をシステムの信頼できる証明書ストアと照合してSSL/TLS のネゴシエーションを試みます。別の証明書を指定するには、利用可能なフォーマットについてヘルプドキュメントの「SSLServerCert」プロパティを参照してください。
接続を設定したら、その後はあらゆるキューブを二次元テーブルとして扱うことができます。データに接続する際にCData 製品がSSAS のメタデータを取得して、動的にテーブルスキーマを更新します。「CacheLocation」プロパティを設定すれば自動でファイルにキャッシュを作成するので、接続時に毎回メタデータを取得する必要もなくなります。

詳細は、ヘルプドキュメントの「Retrieving Analysis Services Data」を参照してください。
「 Test Database」をクリックします。
「Permission」->「 Add」とクリックし、適切な権限を持つ新しいユーザー（または既存のユーザー）を追加します。（Reveal に必要なのは、SELECT のみです。）

Connect Server にSQL Analysis Services OData Endpoints を追加する

SQL Analysis Services に接続したら、目的のテーブルのOData Endpoints を作成します。

「OData」->「Tables」->「Add Tables」とクリックします。
SQL Analysis Services データベースを選択します。
使用するテーブルを選択し、「Next」をクリックします。
（オプション）リソースを編集して特定のフィールドなどを選択します。
設定を保存します。

（オプション）Cross-Origin Resource Sharing (CORS) を構成する

Ajax などのアプリケーションから複数のドメインにアクセスして接続すると、クロスサイトスクリプティングの制限に違反する恐れがあります。その場合には、「OData」->「Settings」でCORS 設定を構成します。

Enable cross-origin resource sharing (CORS)：ON
Allow all domains without '*'：ON
Access-Control-Allow-Methods：GET、PUT、POST、OPTIONS
Access-Control-Allow-Headers：Authorization

設定への変更を保存します。

OData フィードのサンプルURL

SQL Analysis Services への接続を構成してユーザーを作成し、Connect Server でOData エンドポイントを作成すると、SQL Analysis Services データのOData フィードにアクセスできるようになります。以下は、テーブルにアクセスするためのURL とテーブルのリストです。テーブルへのアクセスについては、Connect Server のAPI ページを参照してください。（Connect Server web ページの右上にある「API」リンクをクリックします。） URL については、Connect Server のURL が必要になります。（例：CONNECT_SERVER_URL/） Angular を使用しているため、デフォルトでJSON データを返さないURL の末尾には@json パラメータを追加します。

テーブル		URL
エンティティ（テーブル）のリスト		CONNECT_SERVER_URL/api.rsc/
Adventure_Works テーブルのメタデータ		http://www.cdatacloud.net/myinstance/api.rsc/Adventure_Works/$metadata?@json
Adventure_Works		http://www.cdatacloud.net/myinstance/api.rsc/SSAS_Adventure_Works

標準のOData フィードと同様に、返されるフィードを制限する場合は、$filter、$orderby、$skip、$top などほかの標準OData URL パラメータとともに、$select パラメータをクエリに追加することができます。サポートされているOData クエリの詳細については、ヘルプドキュメントを参照してください。

シングルページアプリケーションを構築する

Connect Server のセットアップが完了したら、SPA を構築することができるようになります。本記事は簡単なデモンストレーションなので、すべてのCSS、スクリプト、およびAngular コントローラーを一つのファイルにまとめることで、AngularJS サービス、ファクトリー、カスタムディレクティブが提供する機能を使用しないようにします。

CSS 定義とAngularJS ライブラリのインポート

まず、いくつかのCSS ルールセットを作成してtable、th、td、tr 要素を変更し、データのテーブルをフォーマットします。SPA で使用するためには、AngularJS ライブラリをインポートする必要があります。


  <style>
  table, th, td {
    border:1px solid grey;
    border-collapse: collapse;
    padding:5px;
  }
  table tr:nth-child(odd) {
    background-color: #f1f1f1;
  }
  table tr:nth-child(even) {
    background-color: #ffffff;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

Angular アプリとコントローラーオブジェクトの作成と参照

次に、HTML の本文でのみAngular を使用するため、このbody タグにng-app およびng-controller ディレクティブを追加します。そして、HTML 本文の最後にスクリプトタグを作成し、このタグでAngular アプリとコントローラー作成して定義します。


<body ng-app="DataApp" ng-controller="SimpleController">
...
<script>
var app = angular.module('DataApp', []);
app.controller('SimpleController', function($scope, $http) {
    //we will add code here
    });
</script>
</body>

コントローラーを定義する

この例でのコントローラーは、Angular オブジェクトを初期化してSPA を設定するinit、選択したテーブルのカラムを取得するgetTableColumns、そして選択したカラムから選択したフィールドのデータを取得するgetTableData の3 つの機能で構成されます。コントローラーを作成する際、最初に実行するアクションは、init 関数を呼び出すことです。ほかのすべての関数は必要に応じて呼び出され、これらの関数呼び出しでは、SQL Analysis Services データを取得するためにConnect Server に対して要求されたHTTP GET 呼び出しを行います。


init();

/*
 * Initialize the data object, which will be used with Angular to
 * build the different parts of our SPA and to retrieve data from
 * Connect Server.
 */
function init() {
  $scope.data = {
  availableTables: [],
                 availableColumns: [],
                 selectedTable: {},
                 tableData: []
  };

  /*
   * Call to Connect Server to get the list of Tables, select the
   * first table by default, and retrieve the available columns.
   * 
   * The call to Connect Server returns standard OData, so the 
   * data we need is in the value object in the JSON returned.
   */
  $http.get("http://www.cdatacloud.net/myinstance/api.rsc",{headers: {"x-cdata-authtoken":"MyAuthtoken"}})
    .then(function (response) {
        $scope.data.availableTables = response.data.value;
        $scope.data.selectedTable = $scope.data.availableTables[0];
        $scope.getTableColumns();
        });
}

/*
 * Call to Connect Server to get the list of columns for the 
 * selected table.
 *
 * The data returned here is not standard OData, so we drill 
 * down into the response to extract exactly the data we need
 * (an array of column names).
 *
 * With the column names retrieved, we will transform the array
 * of column names into an array of objects with a name and Id 
 * field, to be used when we build an HTML select.
 */
$scope.getTableColumns = function () {
  $scope.data.tableData = [];
  $scope.data.selectedColumns = [];
  table = $scope.data.selectedTable.url;
  if (table != "") {
    $http.get("http://www.cdatacloud.net/myinstance/api.rsc/" + table + "/$metadata?@json", {headers: {"x-cdata-authtoken":"MyAuthtoken"}})
      .then(function (response) {
          $scope.data.availableColumns = response.data.items[0]["odata:cname"];
          for (i = 0; i < $scope.data.availableColumns.length; i++) {
            $scope.data.availableColumns[i] = { id: i, name: $scope.data.availableColumns[i] };
          }
          });
  }
} 

/*
 * Call to Connect Server to get the requested data.We get the data 
 * based on the table selected in the associated HTML select. 
 * Then we create a comma-separated string of the selected columns.
 * 
 * With the table and columns known, we can make the appropriate call
 * to Connect Server.Because the driver returns standard OData, the 
 * table data is found in the value field of the response.
 */ 
$scope.getTableData = function () {
  table = $scope.data.selectedTable.url;
  columnsArray = $scope.data.selectedColumns;
  columnString = "";
  for (i = 0; i < columnsArray.length; i++) {
    if (columnString != "") {
      columnString += ",";
    }
    columnString += columnsArray[i].name;
  }

  if (table != "") {
    $http.get("http://www.cdatacloud.net/myinstance/api.rsc/" + table + "?$select=" + columnString, {headers: {"x-cdata-authtoken":"MyAuthtoken"}})
      .then(function (response) { $scope.data.tableData = response.data.value; });
  } else {
    $scope.data.tableData = [];
  }
}

Web ページを作成する

コントローラーを定義したら、Angular を使用してWeb ページが作成できるようになります。この例のページは、テーブルを選択するためのセレクトボックス、カラムを選択するための（マルチ）セレクトボックス、データを取得するためのボタン、そしてデータを表示するためのテーブルという4 つの主要部分で構成されます。これらの4 つの部分を一つずつ取り上げて、Angular の使用方法について説明します。

テーブルを選択する

最初のselect 要素では、ng-options ディレクティブを使用して使用可能なテーブル（前述のinit 関数から取得）を繰り返し処理し、select 要素を設定します。 ng-model ディレクティブを使用して、選択したオプションの値をdata.selectedTable フィールドに割り当てます。選択した要素が変更されると、getTableColumns 要素が呼び出され、使用可能なカラムが再入力されます。


  <label>Select a Table</label>
  <br />
  <select name="tableDropDown" id="tableDropDown" 
          ng-options="table.name for table in data.availableTables track by table.url"
          ng-model="data.selectedTable"
          ng-change="getTableColumns()">
  </select>

カラムを選択する

2 番目のselect 要素でもng-options ディレクティブを使用しますが、今回は、使用可能なカラム（getTableColumns 関数によって取得されるカラム）を繰り返し使用します。使いやすくするために、select 要素を入力する前にカラムを名前でソートします。このselect にはmultiple 属性が含まれるため、複数のカラムを選択できます。選択したカラムは、それぞれdata.selectedColumns 配列に追加されます。カラムを選択すると、それぞれのカラムにテーブルヘッダーが作成されます（以下のデータテーブルセクションを参照してください）。


  <label>Select Columns</label>
  <br />
  <select name="columnMultiple" id="columnMultiple"
          ng-options="column.name for column in data.availableColumns | orderBy:'name' track by column.id"
          ng-model="data.selectedColumns"
          multiple>
  </select>

テーブルデータを取得する

このボタンがクリックされるたびにgetTableData 関数を呼び出します。ng-disabled ディレクティブを使用すると、ユーザーがカラムを選択していない時は常にボタンが無効になります。また、選択したテーブルの名前で、ボタンのテキストを動的に更新します。


  <button name="getTableData" id="btnGetTableData" 
          ng-click="getTableData()" 
          ng-disabled="data.selectedColumns.length == 0">
  Get {{data.selectedTable.name}} Data
  </button>

テーブルデータを表示する

このセクションでは、選択したテーブルのデータを表示する、というSPA の最終目標を完了します。選択したテーブルのデータを表示するには、いくつかのng-repeat ディレクティブを使用します。まず、選択したカラムを繰り返し処理してテーブルヘッダーを作成するディレクティブ、次に、返されたデータ行を繰り返し処理するディレクティブ、そして、選択したカラムを繰り返し処理して指定したデータ行に対応するデータを表示するディレクティブです。

Angular を使用することで、表示するカラムを動的に決定することができます。ボタンがクリックされる「前」に選択されたカラムにのみデータが含まれることに注意してください。しかし、使用可能なすべてのカラムを選択し、ボタンをクリックしてデータを取得した後に、戻って別のカラムを選択または選択解除することも簡単です。選択したテーブルを変更すると、すべてのデータが消去されます。


  <table>
    <tr>
      <th ng-repeat="column in data.selectedColumns | orderBy:'name'">{{column.name}}</th>
    </tr>
    <tr ng-repeat="row in data.tableData">
      <td ng-repeat="column in data.selectedColumns">{{ row[column.name] }}</td>
    </tr>
  </table>

アプリ全体のコード

<!DOCTYPE html>

<html>
<style>
table, th, td {
border:1px solid grey;
        border-collapse: collapse;
padding:5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<body ng-app="DataApp" ng-controller="SimpleController"> 
<label>Select a Table</label>
<br>
<select name="tableDropDown" id="tableDropDown" 
ng-options="table.name for table in data.availableTables track by table.url" 
ng-model="data.selectedTable" 
ng-change="getTableColumns()">
</select>
<br />
<br />
<label>Select Columns</label>
<br />
<select name="columnMultiple" id="columnMultiple"
ng-options="column.name for column in data.availableColumns | orderBy:'name' track by column.id"
ng-model="data.selectedColumns"
multiple>
</select>
<br />
<br />
<button name="getTableData" id="btnGetTableData" 
ng-click="getTableData()" 
ng-disabled="data.selectedColumns.length == 0">
Get {{data.selectedTable.name}} Data
</button>
<br />
<br />

<table>
<tr>
<th ng-repeat="column in data.selectedColumns | orderBy:'name'">{{column.name}}</th>
</tr>
<tr ng-repeat="row in data.tableData">
<td ng-repeat="column in data.selectedColumns">{{ row[column.name] }}</td>
</tr>
</table>
<script>
var app = angular.module('DataApp', []);
app.controller('SimpleController', function($scope, $http) {
    init();

    /*
     * Initialize the data object, which will be used with Angular to
     * build the different parts of our SPA and to retrieve data from
     * Connect Server.
     */
    function init() {
    $scope.data = {
    availableTables: [],
    availableColumns: [],
    selectedTable: {},
    tableData: []
};

/*
 * Call to Connect Server to get the list of tables, select the
 * first table by default, and retrieve the available columns.
 * 
 * The call to Connect Server returns standard OData, so the 
 * data we need is in the value object in the JSON returned.
 */
$http.get("CONNECT_SERVER_URL/api.rsc",{headers: {"x-cdata-authtoken":"MyAuthtoken"}})
.then(function (response) {
    $scope.data.availableTables = response.data.value;
    $scope.data.selectedTable = $scope.data.availableTables[0];
    $scope.getTableColumns();
    });
}

/*
 * Call to Connect Server to get the list of columns for the 
 * selected table.
 *
 * The data returned here is not standard OData, so we drill 
 * down into the response to extract exactly the data we need
 * (an array of column names).
 *
 * With the column names retrieved, we will transform the array
 * of column names into an array of objects with a name and Id 
 * field, to be used when we build an HTML select.
 */
$scope.getTableColumns = function () {
  $scope.data.tableData = [];
  $scope.data.selectedColumns = [];
  table = $scope.data.selectedTable.url;
  if (table != "") {
    $http.get("CONNECT_SERVER_URL/api.rsc/" + table + "/$metadata?@json", {headers: {"x-cdata-authtoken":"MyAuthtoken"}})
      .then(function (response) {
          $scope.data.availableColumns = response.data.items[0]["odata:cname"];
          for (i = 0; i < $scope.data.availableColumns.length; i++) {
          $scope.data.availableColumns[i] = { id: i, name: $scope.data.availableColumns[i] };
          }
          });
  }
} 

/*
 * Call to Connect Server to get the requested data.We get the data 
 * based on the table selected in the associated HTML select. 
 * Then we create a comma-separated string of the selected columns.
 * 
 * With the table and columns known, we can make the appropriate call
 * to Connect Server.Because the driver returns standard OData, the 
 * table data is found in the value field of the response.
 */ 
$scope.getTableData = function () {
  table = $scope.data.selectedTable.url;
  columnsArray = $scope.data.selectedColumns;
  columnString = "";
  for (i = 0; i < columnsArray.length; i++) {
    if (columnString != "") {
      columnString += ",";
    }
    columnString += columnsArray[i].name;
  }

  if (table != "") {
    $http.get("CONNECT_SERVER_URL/api.rsc/" + table + "?$select=" + columnString, {headers: {"x-cdata-authtoken":"MyAuthtoken"}})
      .then(function (response) { $scope.data.tableData = response.data.value; });
  } else {
    $scope.data.tableData = [];
  }
}     
});
</script>
</body>
</html>

無料トライアルと詳細

Angularで構築されたWeb アプリケーションからSQL Analysis Services データ（またはサポートされているほかのデータソースからのデータ）に接続したい場合には、CData Connect Server の無料トライアルに今すぐ登録してください。 Connect Server の詳細と、サポートされているほかのデータソースについては、Connect Server ページを参照してください。

トライアル・お問い合わせ

30日間無償トライアルで、CData のリアルタイムデータ連携をフルにお試しいただけます。記事や製品についてのご質問があればお気軽にお問い合わせください。

無償トライアルへ

お問い合わせ

CData Software は、データアクセスおよびデータ接続ソリューションのリーディングプロバイダーです。CData の標準コネクタはあらゆるツール・ミドルウェアからのSaaS やDB データの連携を簡単にします。

お問い合わせ

製品概要

データコネクタ

ETL / ELT ソリューション

クラウド & API 接続

OEM & カスタムドライバー開発

お問い合わせ先

製品を知る

データ分析 & BI