Angular対応のIgnite UI for Angularを使ってElasticsearch のデータをグリッドに表示
Angularはデータバインディング、ルーティング、サービスなど業務用のモダンWebアプリケーション構築に適しているWebアプリケーションフレームワークです。
この記事ではCData Software Japanが提供するAPI Serverと連携し、取得したデータをAngular対応のIgnite UI for Angularデータグリッドに表示する方法をご紹介します。
Elasticsearch データ連携について
CData を使用すれば、Elasticsearch のライブデータへのアクセスと統合がこれまでになく簡単になります。お客様は CData の接続機能を以下の目的で利用しています：
- SQL エンドポイントと REST エンドポイントの両方にアクセスでき、接続を最適化し、Elasticsearch データの読み書きに関してより多くのオプションを提供します。
- v2.2 以降およびオープンソース Elasticsearch サブスクリプションを含む、ほぼすべての Elasticsearch インスタンスに接続できます。
- SCORE() 関数を明示的に要求することなく、常にクエリ結果の関連性スコアを受け取ることができます。これにより、サードパーティツールからのアクセスが簡素化され、クエリ結果のテキスト関連性のランキングを簡単に確認できます。
- 複数のインデックスを検索でき、クライアントマシンではなく Elasticsearch がクエリと結果の管理・処理を担当します。
ユーザーは、Crystal Reports、Power BI、Excel などの分析ツールと Elasticsearch データを統合し、当社のツールを活用して、Elasticsearch を含むすべてのデータソースへの単一のフェデレートアクセスレイヤーを実現しています。
CData の Elasticsearch ソリューションの詳細については、ナレッジベース記事をご覧ください：CData Elasticsearch Driver Features & Differentiators
はじめに
API Server の設定
以下のリンクからAPI Server の無償トライアルをスタートしたら、セキュアなElasticsearch OData サービスを作成していきましょう。
Elasticsearch への接続
Angular からElasticsearch のデータを操作するには、まずElasticsearch への接続を作成・設定します。
- API Server にログインして、「Connections」をクリック、さらに「接続を追加」をクリックします。
- 「接続を追加」をクリックして、データソースがAPI Server に事前にインストールされている場合は、一覧から「Elasticsearch」を選択します。
- 事前にインストールされていない場合は、コネクタを追加していきます。コネクタ追加の手順は以下の記事にまとめてありますので、ご確認ください。
CData コネクタの追加方法はこちら >> - それでは、Elasticsearch への接続設定を行っていきましょう！
-
Elasticsearch 接続プロパティの取得・設定方法
接続するには、Server およびPort 接続プロパティを設定します。 認証には、User とPassword プロパティ、PKI (public key infrastructure)、またはその両方を設定します。 PKI を使用するには、SSLClientCert、SSLClientCertType、SSLClientCertSubject、およびSSLClientCertPassword プロパティを設定します。
CData 製品は、認証とTLS/SSL 暗号化にX-Pack Security を使用しています。TLS/SSL で接続するには、Server 値に'https://' を接頭します。Note: PKI を 使用するためには、TLS/SSL およびクライアント認証はX-Pack 上で有効化されていなければなりません。
接続されると、X-Pack では、設定したリルムをベースにユーザー認証およびロールの許可が実施されます。
- 接続情報の入力が完了したら、「保存およびテスト」をクリックします。
Elasticsearch 接続プロパティの取得・設定方法
接続するには、Server およびPort 接続プロパティを設定します。 認証には、User とPassword プロパティ、PKI (public key infrastructure)、またはその両方を設定します。 PKI を使用するには、SSLClientCert、SSLClientCertType、SSLClientCertSubject、およびSSLClientCertPassword プロパティを設定します。
CData 製品は、認証とTLS/SSL 暗号化にX-Pack Security を使用しています。TLS/SSL で接続するには、Server 値に'https://' を接頭します。Note: PKI を 使用するためには、TLS/SSL およびクライアント認証はX-Pack 上で有効化されていなければなりません。
接続されると、X-Pack では、設定したリルムをベースにユーザー認証およびロールの許可が実施されます。
API Server のユーザー設定
次に、API Server 経由でElasticsearch にアクセスするユーザーを作成します。「Users」ページでユーザーを追加・設定できます。やってみましょう。
- 「Users」ページで ユーザーを追加をクリックすると、「ユーザーを追加」ポップアップが開きます。
-
次に、「ロール」、「ユーザー名」、「権限」プロパティを設定し、「ユーザーを追加」をクリックします。
-
その後、ユーザーの認証トークンが生成されます。各ユーザーの認証トークンとその他の情報は「Users」ページで確認できます。
Elasticsearch 用のAPI エンドポイントの作成
ユーザーを作成したら、Elasticsearch のデータ用のAPI エンドポイントを作成していきます。
-
まず、「API」ページに移動し、
「 テーブルを追加」をクリックします。
-
アクセスしたい接続を選択し、次へをクリックします。
-
接続を選択した状態で、各テーブルを選択して確認をクリックすることでエンドポイントを作成します。
OData のエンドポイントを取得
以上でElasticsearch への接続を設定してユーザーを作成し、API Server でElasticsearch データのAPI を追加しました。これで、OData 形式のElasticsearch データをREST API で利用できます。API Server の「API」ページから、API のエンドポイントを表示およびコピーできます。
クロスオリジンリソースシェアリング （CORS）
複数の異なるドメインへのアクセス・接続を行う場合、クロスサイトスクリプティングの制限に抵触する可能性があります。その場合は、「設定」→「サーバー」タブ内の「クロスオリジンリソースシェアリング （CORS）」の設定を行います。
Ignite UI for Angularを組み込んだAngularプロジェクトを準備
IgxGridを利用するためには、Ignite UI for Angularパッケージの組み込みやモジュールの参照が必要になります。下記に必要パッケージを組み込んだ状態のサンプルプロジェクトが公開されています。
GitHub - neri78/IgxGridBasicDemo
リポジトリをクローンしたのち、下記コマンドで現時点の実行結果を確認できます。
npm start
左側のナビゲーションからigxGrid1を選択するとローカルデータがバインドされたIgxGridが表示されます。
APIサーバーからデータを取得するサービスを作成
AngularではAPIサーバーのような外部リソースからデータを取得する場合、サービスを作成しViewとは直接関係のないデータアクセス部分を分離させることが一般的です。 ng generateコマンドを利用し、ApiServerServiceを作成します。
ng generate service service/ApiServer
serviceフォルダーとapi-server.service.spec.ts, api-server.sergice.tsファイルがそれぞれ作成されます。
レスポンスおよび Elasticsearch のデータのインターフェースを宣言
APIサーバーから Elasticsearch の情報がvalueに保存されたデータが返されるため、レスポンスおよび、 Elasticsearch のデータのインターフェースを作成された ApiServerServiceクラスのスコープの外側に宣言します。
api-server.service.ts
// response
interface CustomersResponse {
value: Customer[];
}
// Elasticsearch Data Excample
export interface Customer {
rowguid: string; // "3f5ae95e-b87d-4aed-95b4-c3797afcb74f"
LastName: string; // "Gee"
PasswordHash: string; // "L/Rlwxzp4w7RWmEgXX+/A7cXaePEPcp+KwQhl2fJL7w="
Suffix: string; // null
Title: string; // "Mr."
EmailAddress: string; // "orlando0@adventure-works.com"
Phone: string; // "245-555-0173"
CustomerID: string; // 1
PasswordSalt: string; // "1KjXYs4="
SalesPerson: string; // "adventure-works\pamela0"
GUID: string; // "3F5AE95EB87D4AED95B4C3797AFCB74F"
CompanyName: string; // "A Bike Store"
FirstName: string; // "Orlando"
NameStyle: boolean; // false
MiddleName: string; // "N."
ModifiedDate: Date; // "2005-08-01T00:00:00.0000+00:00"
}
必要なモジュールをインポート
api-server.service.tsファイルの先頭に戻り、通信、データ処理にに必要なモジュールをそれぞれインポートします。
api-server.service.ts
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map} from 'rxjs/operators';
APIサーバーへの接続に必要なAuthToken、URL、リクエストヘッダを宣言
次に最初に設定したAPIサーバーに接続するためのAuthToken、URL、そして認証に必要なリクエストヘッダをApiServerServiceのプライベート変数として宣言します。
api-server.service.ts
// Auth Token
private authToken = '設定したAuthToken';
// APIサーバーRestAPIのURL、今回は Elasticsearch のデータを返すRest APIのURLに固定
private baseUrl = ' Elasticsearch のデータのRest API URL';
// リクエストヘッダ
private headers = new HttpHeaders({
'x-cdata-authtoken': this.authToken
});
コストラクタで依存関係の注入を利用し、HttpClientのインスタンスを取得
コンストラクタの引数として、HttpClientを受け取るように変更します。クラスインスタンスはAngularフレームワークにより作成されます。
api-server.service.ts
constructor(private httpClient: HttpClient) { }
リクエストの設定とレスポンスの処理
Elasticsearch のデータを取得するgetCustomers()メソッドを宣言し、HttpClient、pipeを利用してリクエストの設定と、レスポンスの処理、エラーハンドリングを実装します。
api-server.service.ts
public getCustomers() {
// HttpClientを利用し、APIサーバーにアクセス
return this.httpClient.get(
`${this.baseUrl}/`, {headers: this.headers})
.pipe(
// エラー時の処理
catchError(this.handleError('getData:Customer', [])),
// 返されたデータからCustomerの配列を取得
map(response => (response as CustomersResponse).value)
);
}
// Error時の処理。デモ用に簡略化
private handleError(operation = 'operation', result?: T) {
return (error: any): string => {
console.error('An error occurred', error);
return error;
};
}
これでサービスの準備が整いました。
グリッド画面でデータを取得
次にグリッドを表示している画面側のコードを実装します。
必要なモジュールをインポート
igxgrid1\igxgrid1.component.tsでは先ほど実装したApiServerServiceと、サービス呼び出しの結果返されるObservableを利用するため、必要なモジュールをインポートします。
igxgrid1\igxgrid1.component.ts
import { ApiServerService, Customer } from '../service/api-server.service';
import { Subscription } from 'rxjs';
購読を管理するためのSubScription変数を宣言
このApiServerServiceはデータを非同期で取得します。そのため、呼び出しが完了した後にロジックを実行するための購読処理を後ほど実装します。この購読は最終的には購読解除を行う必要があるtまえ、プライベート変数を宣言します。
igxgrid1\igxgrid1.component.ts
subscription: Subscription;
コストラクタで依存関係の注入を利用し、ApiServerServiceのインスタンスを取得
igxgrid1\igxgrid1.component.ts
constructor(private apiServerService: ApiServerService) { }
ngOnInitでデータを取得しグリッドにデータを表示
igxgrid1\igxgrid1.component.tsには、ngOnInit()メソッドが実装されており、データグリッド画面の初期化時に、あらかじめ用意されているサンプルデータを読み込むコードが実装されています。このlocalDataにコレクションを代入することでグリッドにデータが表示されます。このコードをコメントアウトします。
igxgrid1\igxgrid1.component.ts
ngOnInit() {
// コメントアウト
// this.localData = employeesData;
}
コメントアウトしたコードの代わりに、ApiServerServiceを利用してデータを取得し、localDataに割り当てるコードを実装します。
igxgrid1\igxgrid1.component.ts
ngOnInit() {
// APIServerを呼び出し、Elasticsearch のデータを取得
this.subscription = this.apiServerService.getCustomers()
.subscribe( (data: Customer[]) => {
this.localData = data;
});
}
ngOnDestoryで購読を解除
このコンポーネントが破棄されるタイミングでメモリーリークを防ぐため、購読を解除します。
igxgrid1\igxgrid1.component.ts
// unsubscribe
ngOnDestroy() {
if (this.subscription !== undefined) {
this.subscription.unsubscribe();
}
}
サービス、モジュールの登録
最後に作成したサービスや必要なモジュールをアプリケーションに登録します。
モジュール参照のインポート
app.module.tsにApiServerServiceおよびHttpClientModuleをインポートします。
app.module.ts
import { ApiServerService } from './service/api-server.service';
import { HttpClientModule } from '@angular/common/http';
importsセクションでHttpClientModuleをインポート
@NgModuleのimportsセクションにHttpClientModuleをインポートします。
app.module.ts
imports: [
...
,HttpClientModule
],
providersセクションでApiServerServiceを宣言
@NgModuleのimportsセクションにHttpClientModuleをインポートします。
app.module.ts
providers: [ApiServerService],
これで設定は完了です。再度 __npm start__ コマンドで実行してみましょう！
全てのコードはこちらのBranchでご覧いただけます（AuthToken、並びにURLは空白のため適宜設定してください）