Angular対応のIgnite UI for Angularを使ってSnowflake のデータをグリッドに表示

杉本和也
杉本和也
リードエンジニア
Angular対応のIgnite UI for Angularを使ってSnowflake のデータをグリッドに表示



Angularはデータバインディング、ルーティング、サービスなど業務用のモダンWebアプリケーション構築に適しているWebアプリケーションフレームワークです。

この記事ではCData Software Japanが提供するAPI Serverと連携し、取得したデータをAngular対応のIgnite UI for Angularデータグリッドに表示する方法をご紹介します。

Snowflake データ連携について

CData は、Snowflake のライブデータへのアクセスと統合を簡素化します。お客様は CData の接続機能を以下の目的で活用しています：

  • Snowflake データを迅速かつ効率的に読み書きできます。
  • 指定された Warehouse、Database、Schema のメタデータを動的に取得できます。
  • OAuth、OKTA、Azure AD、Azure マネージド サービス ID、PingFederate、秘密鍵など、さまざまな方法で認証できます。

多くの CData ユーザーは、CData ソリューションを使用して、お気に入りのツールやアプリケーションから Snowflake にアクセスし、さまざまなシステムからデータを Snowflake にレプリケートして、包括的なウェアハウジングと分析を行っています。

CData ソリューションとの Snowflake 統合についての詳細は、ブログをご覧ください：https://jp.cdata.com/blog/snowflake-integrations


はじめに


API Server の設定

以下のリンクからAPI Server の無償トライアルをスタートしたら、セキュアなSnowflake OData サービスを作成していきましょう。

Snowflake への接続

Angular からSnowflake のデータを操作するには、まずSnowflake への接続を作成・設定します。

  1. API Server にログインして、「Connections」をクリック、さらに「接続を追加」をクリックします。 接続を追加
  2. 「接続を追加」をクリックして、データソースがAPI Server に事前にインストールされている場合は、一覧から「Snowflake」を選択します。
  3. 事前にインストールされていない場合は、コネクタを追加していきます。コネクタ追加の手順は以下の記事にまとめてありますので、ご確認ください。
    CData コネクタの追加方法はこちら >>
  4. それでは、Snowflake への接続設定を行っていきましょう！ 接続設定

  5. それでは、Snowflake データベースに接続していきましょう。認証に加えて、以下の接続プロパティを設定します。

    • Url：お使いのSnowflake URL を指定します。例：https://orgname-myaccount.snowflakecomputing.com
      • Legacy URL を使用する場合：https://myaccount.region.snowflakecomputing.com
      • ご自身のURL は以下のステップで確認できます。
        1. Snowflake UI の左下にあるユーザー名をクリックします
        2. Account ID にカーソルを合わせます
        3. Copy Account URL アイコンをクリックして、アカウントURL をコピーします
    • Database（オプション）：CData 製品によって公開されるテーブルとビューを、特定のSnowflake データベースのものに制限したい場合に設定します
    • Schema（オプション）：CData 製品によって公開されるテーブルとビューを、特定のSnowflake データベーススキーマのものに制限したい場合に設定します

    Snowflakeへの認証

    CData 製品では、Snowflake ユーザー認証、フェデレーション認証、およびSSL クライアント認証をサポートしています。認証するには、User とPassword を設定し、AuthScheme プロパティで認証方法を選択してください。

    キーペア認証

    ユーザーアカウントに定義されたプライベートキーを使用してセキュアなトークンを作成し、キーペア認証で接続することも可能です。この方法で接続するには、AuthScheme をPRIVATEKEY に設定し、以下の値を設定してください。

    • User：認証に使用するユーザーアカウント
    • PrivateKey：プライベートキーを含む.pem ファイルへのパスなど、ユーザーに使用されるプライベートキー
    • PrivateKeyType：プライベートキーを含むキーストアの種類（PEMKEY_FILE、PFXFILE など）
    • PrivateKeyPassword：指定されたプライベートキーのパスワード

    その他の認証方法については、ヘルプドキュメントの「Snowflakeへの認証」セクションをご確認ください。

  6. 接続情報の入力が完了したら、「保存およびテスト」をクリックします。

それでは、Snowflake データベースに接続していきましょう。認証に加えて、以下の接続プロパティを設定します。

  • Url：お使いのSnowflake URL を指定します。例：https://orgname-myaccount.snowflakecomputing.com
    • Legacy URL を使用する場合：https://myaccount.region.snowflakecomputing.com
    • ご自身のURL は以下のステップで確認できます。
      1. Snowflake UI の左下にあるユーザー名をクリックします
      2. Account ID にカーソルを合わせます
      3. Copy Account URL アイコンをクリックして、アカウントURL をコピーします
  • Database（オプション）：CData 製品によって公開されるテーブルとビューを、特定のSnowflake データベースのものに制限したい場合に設定します
  • Schema（オプション）：CData 製品によって公開されるテーブルとビューを、特定のSnowflake データベーススキーマのものに制限したい場合に設定します

Snowflakeへの認証

CData 製品では、Snowflake ユーザー認証、フェデレーション認証、およびSSL クライアント認証をサポートしています。認証するには、User とPassword を設定し、AuthScheme プロパティで認証方法を選択してください。

キーペア認証

ユーザーアカウントに定義されたプライベートキーを使用してセキュアなトークンを作成し、キーペア認証で接続することも可能です。この方法で接続するには、AuthScheme をPRIVATEKEY に設定し、以下の値を設定してください。

  • User：認証に使用するユーザーアカウント
  • PrivateKey：プライベートキーを含む.pem ファイルへのパスなど、ユーザーに使用されるプライベートキー
  • PrivateKeyType：プライベートキーを含むキーストアの種類（PEMKEY_FILE、PFXFILE など）
  • PrivateKeyPassword：指定されたプライベートキーのパスワード

その他の認証方法については、ヘルプドキュメントの「Snowflakeへの認証」セクションをご確認ください。

API Server のユーザー設定

次に、API Server 経由でSnowflake にアクセスするユーザーを作成します。「Users」ページでユーザーを追加・設定できます。やってみましょう。

  1. 「Users」ページで ユーザーを追加をクリックすると、「ユーザーを追加」ポップアップが開きます。
  2. 次に、「ロール」、「ユーザー名」、「権限」プロパティを設定し、「ユーザーを追加」をクリックします。
  3. その後、ユーザーの認証トークンが生成されます。各ユーザーの認証トークンとその他の情報は「Users」ページで確認できます。

Snowflake 用のAPI エンドポイントの作成

ユーザーを作成したら、Snowflake のデータ用のAPI エンドポイントを作成していきます。

  1. まず、「API」ページに移動し、 「 テーブルを追加」をクリックします。
  2. アクセスしたい接続を選択し、次へをクリックします。
  3. 接続を選択した状態で、各テーブルを選択して確認をクリックすることでエンドポイントを作成します。

OData のエンドポイントを取得

以上でSnowflake への接続を設定してユーザーを作成し、API Server でSnowflake データのAPI を追加しました。これで、OData 形式のSnowflake データを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ファイルがそれぞれ作成されます。

レスポンスおよび Snowflake のデータのインターフェースを宣言

APIサーバーから Snowflake の情報がvalueに保存されたデータが返されるため、レスポンスおよび、 Snowflake のデータのインターフェースを作成された ApiServerServiceクラスのスコープの外側に宣言します。

api-server.service.ts

    // response
    interface CustomersResponse {
      value: Customer[];
    }

    // Snowflake 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、今回は Snowflake のデータを返すRest APIのURLに固定
    private baseUrl = ' Snowflake のデータのRest API URL';
    // リクエストヘッダ
    private headers = new HttpHeaders({
      'x-cdata-authtoken': this.authToken
    });

コストラクタで依存関係の注入を利用し、HttpClientのインスタンスを取得

コンストラクタの引数として、HttpClientを受け取るように変更します。クラスインスタンスはAngularフレームワークにより作成されます。

api-server.service.ts

    constructor(private httpClient: HttpClient) { }

リクエストの設定とレスポンスの処理

Snowflake のデータを取得する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を呼び出し、Snowflake のデータを取得
      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__ コマンドで実行してみましょう！

igniteuiforangular

全てのコードはこちらのBranchでご覧いただけます（AuthToken、並びにURLは空白のため適宜設定してください）

GitHub - neri78/IgxGridApiServerDemo

はじめる準備はできましたか？

詳細はこちら、または無料トライアルにお申し込みください：

CData API Server お問い合わせ

この記事の内容

関連記事