Angular対応のIgnite UI for Angularを使ってBigQuery のデータをグリッドに表示
Angularはデータバインディング、ルーティング、サービスなど業務用のモダンWebアプリケーション構築に適しているWebアプリケーションフレームワークです。
この記事ではCData Software Japanが提供するAPI Serverと連携し、取得したデータをAngular対応のIgnite UI for Angularデータグリッドに表示する方法をご紹介します。
BigQuery データ連携について
CData は、Google BigQuery のライブデータへのアクセスと統合を簡素化します。お客様は CData の接続機能を以下の目的で活用しています：
- OAuth、OAuth JWT、GCP インスタンスなど、すぐに使える幅広い認証スキームのサポートにより、BigQuery へのアクセスを簡素化します。
- BigQuery と他のアプリケーション間の双方向データアクセスにより、データワークフローを強化します。
- SQL ストアドプロシージャを通じて、ジョブの開始・取得・キャンセル、テーブルの削除、ジョブロードの挿入など、主要な BigQuery アクションを実行できます。
多くの CData のお客様は、Google BigQuery をデータウェアハウスとして使用しており、CData ソリューションを使用して、別々のソースからビジネスデータを BigQuery に移行し、包括的な分析を行っています。また、BigQuery データの分析やレポート作成に当社の接続機能を使用するお客様も多く、両方のソリューションを使用しているお客様も多数います。
CData が Google BigQuery 体験をどのように向上させるかについての詳細は、ブログ記事をご覧ください：https://jp.cdata.com/blog/what-is-bigquery
はじめに
API Server の設定
以下のリンクからAPI Server の無償トライアルをスタートしたら、セキュアなBigQuery OData サービスを作成していきましょう。
BigQuery への接続
Angular からBigQuery のデータを操作するには、まずBigQuery への接続を作成・設定します。
- API Server にログインして、「Connections」をクリック、さらに「接続を追加」をクリックします。
- 「接続を追加」をクリックして、データソースがAPI Server に事前にインストールされている場合は、一覧から「BigQuery」を選択します。
- 事前にインストールされていない場合は、コネクタを追加していきます。コネクタ追加の手順は以下の記事にまとめてありますので、ご確認ください。
CData コネクタの追加方法はこちら >> - それでは、BigQuery への接続設定を行っていきましょう！
-
BigQuery 接続プロパティの取得・設定方法
Google BigQuery はOAuth 認証標準を使用します。個々のユーザーとしてGoogle API にアクセスするには、組み込みクレデンシャルを使うか、OAuth アプリを作成します。
OAuth では、Google Apps ドメインのユーザーとしてサービスアカウントを使ってアクセスすることもできます。サービスカウントでの認証では、OAuth JWT を取得するためのアプリケーションを登録する必要があります。
OAuth 値に加え、DatasetId、ProjectId を設定する必要があります。詳細はヘルプドキュメントの「はじめに」を参照してください。
- 接続情報の入力が完了したら、「保存およびテスト」をクリックします。
BigQuery 接続プロパティの取得・設定方法
Google BigQuery はOAuth 認証標準を使用します。個々のユーザーとしてGoogle API にアクセスするには、組み込みクレデンシャルを使うか、OAuth アプリを作成します。
OAuth では、Google Apps ドメインのユーザーとしてサービスアカウントを使ってアクセスすることもできます。サービスカウントでの認証では、OAuth JWT を取得するためのアプリケーションを登録する必要があります。
OAuth 値に加え、DatasetId、ProjectId を設定する必要があります。詳細はヘルプドキュメントの「はじめに」を参照してください。
API Server のユーザー設定
次に、API Server 経由でBigQuery にアクセスするユーザーを作成します。「Users」ページでユーザーを追加・設定できます。やってみましょう。
- 「Users」ページで ユーザーを追加をクリックすると、「ユーザーを追加」ポップアップが開きます。
-
次に、「ロール」、「ユーザー名」、「権限」プロパティを設定し、「ユーザーを追加」をクリックします。
-
その後、ユーザーの認証トークンが生成されます。各ユーザーの認証トークンとその他の情報は「Users」ページで確認できます。
BigQuery 用のAPI エンドポイントの作成
ユーザーを作成したら、BigQuery のデータ用のAPI エンドポイントを作成していきます。
-
まず、「API」ページに移動し、
「 テーブルを追加」をクリックします。
-
アクセスしたい接続を選択し、次へをクリックします。
-
接続を選択した状態で、各テーブルを選択して確認をクリックすることでエンドポイントを作成します。
OData のエンドポイントを取得
以上でBigQuery への接続を設定してユーザーを作成し、API Server でBigQuery データのAPI を追加しました。これで、OData 形式のBigQuery データを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ファイルがそれぞれ作成されます。
レスポンスおよび BigQuery のデータのインターフェースを宣言
APIサーバーから BigQuery の情報がvalueに保存されたデータが返されるため、レスポンスおよび、 BigQuery のデータのインターフェースを作成された ApiServerServiceクラスのスコープの外側に宣言します。
api-server.service.ts
// response
interface CustomersResponse {
value: Customer[];
}
// BigQuery 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; // "[email protected]"
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、今回は BigQuery のデータを返すRest APIのURLに固定
private baseUrl = ' BigQuery のデータのRest API URL';
// リクエストヘッダ
private headers = new HttpHeaders({
'x-cdata-authtoken': this.authToken
});
コストラクタで依存関係の注入を利用し、HttpClientのインスタンスを取得
コンストラクタの引数として、HttpClientを受け取るように変更します。クラスインスタンスはAngularフレームワークにより作成されます。
api-server.service.ts
constructor(private httpClient: HttpClient) { }
リクエストの設定とレスポンスの処理
BigQuery のデータを取得する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を呼び出し、BigQuery のデータを取得
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は空白のため適宜設定してください）