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

杉本和也
リードエンジニア

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

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

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

API Server の設定

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

DB2 への接続

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

API Server にログインして、「Connections」をクリック、さらに「接続を追加」をクリックします。
「接続を追加」をクリックして、データソースがAPI Server に事前にインストールされている場合は、一覧から「DB2」を選択します。
事前にインストールされていない場合は、コネクタを追加していきます。コネクタ追加の手順は以下の記事にまとめてありますので、ご確認ください。
CData コネクタの追加方法はこちら >>
それでは、DB2 への接続設定を行っていきましょう！
DB2 に接続するには以下のプロパティを設定します。
- Server: DB2 を実行するサーバー名。
- Port: DB2 サーバーのポート。
- Database: DB2 データベース名。
接続の準備ができたら、認証スキームを選択し、以下で説明するように適切なプロパティを設定します。
CData 製品は、DB2 への認証に4つの異なるスキームをサポートします。DB2 ユーザー資格情報（デフォルト）、暗号化されたユーザー資格情報、IBM Identity and Access Management（IAM）認証、および Kerberos です。
DB2 ユーザー資格情報
ユーザー資格情報を使用して認証するには、次のプロパティを設定します。
- AuthScheme：USRIDPWD。
- User：データベースへのアクセス権を持つユーザーのユーザー名。
- Password：データベースへのアクセス権を持つユーザーのパスワード。
暗号化されたユーザー資格情報
サーバーがセキュア認証に対応しており、暗号化されたユーザー資格情報を使用して認証を行いたい場合は、このプロパティを設定します。
- AuthScheme：EUSRIDPWD
IAM、Kerberos で認証したい場合は、ヘルプドキュメントの「はじめに」セクションを参照してください。

パスワード方式によるSSH 接続

パスワード方式によるSSH接続時に必要なプロパティ一覧を以下に示します。
- User: DB2 のユーザ
- Password: DB2 のパスワード
- Database: DB2 の接続先データベース
- Server: DB2 のサーバー
- Port: DB2 のポート
- UserSSH: "true"
- SSHAuthMode: "Password"
- SSHPort: SSH のポート
- SSHServer: SSH サーバー
- SSHUser: SSH ユーザー
- SSHPassword: SSH パスワード
接続文字列形式では以下のようになります。
```
Server=10.0.1.2;Port=50000;User=admin;Password=admin;Database=testUseSSH=true;SSHAuthMode=Password;SSHPort=22;SSHServer=ssh-server;SSHUser=root;SSHPassword=sshpasswd;
```
公開鍵認証方式によるSSH 接続

公開鍵認証によるSSH接続時に必要なプロパティ一覧を以下に示します。
- User: DB2 のユーザ
- Password: DB2 のパスワード
- Database: DB2 の接続先データベース
- Server: DB2 のサーバー
- Port: DB2 のポート
- UserSSH: "true"
- SSHAuthMode: "Public_Key"
- SSHClientCertType: キーストアの種類
- SSHPort: SSH のポート
- SSHServer: SSH サーバー
- SSHUser: SSH ユーザー
- SSHClientCert: 秘密鍵ファイルのパス
接続文字列形式では以下のようになります。
```
Server=10.0.1.2;Port=50000;User=admin;Password=admin;Database=test;UseSSH=true;SSHAuthMode=Public_Key;SSHClientCertType=PUBLIC_KEY_FILE;SSHPort=22;SSHServer=ssh-server;SSHUser=root;SSHClientCert=C:\Keys\key.pem;
```
接続情報の入力が完了したら、「保存およびテスト」をクリックします。

DB2 に接続するには以下のプロパティを設定します。

Server: DB2 を実行するサーバー名。
Port: DB2 サーバーのポート。
Database: DB2 データベース名。

接続の準備ができたら、認証スキームを選択し、以下で説明するように適切なプロパティを設定します。

CData 製品は、DB2 への認証に4つの異なるスキームをサポートします。DB2 ユーザー資格情報（デフォルト）、暗号化されたユーザー資格情報、IBM Identity and Access Management（IAM）認証、および Kerberos です。

DB2 ユーザー資格情報

ユーザー資格情報を使用して認証するには、次のプロパティを設定します。

AuthScheme：USRIDPWD。
User：データベースへのアクセス権を持つユーザーのユーザー名。
Password：データベースへのアクセス権を持つユーザーのパスワード。

暗号化されたユーザー資格情報

サーバーがセキュア認証に対応しており、暗号化されたユーザー資格情報を使用して認証を行いたい場合は、このプロパティを設定します。

AuthScheme：EUSRIDPWD

IAM、Kerberos で認証したい場合は、ヘルプドキュメントの「はじめに」セクションを参照してください。

パスワード方式によるSSH 接続

パスワード方式によるSSH接続時に必要なプロパティ一覧を以下に示します。

User: DB2 のユーザ
Password: DB2 のパスワード
Database: DB2 の接続先データベース
Server: DB2 のサーバー
Port: DB2 のポート
UserSSH: "true"
SSHAuthMode: "Password"
SSHPort: SSH のポート
SSHServer: SSH サーバー
SSHUser: SSH ユーザー
SSHPassword: SSH パスワード

接続文字列形式では以下のようになります。

Server=10.0.1.2;Port=50000;User=admin;Password=admin;Database=testUseSSH=true;SSHAuthMode=Password;SSHPort=22;SSHServer=ssh-server;SSHUser=root;SSHPassword=sshpasswd;

公開鍵認証方式によるSSH 接続

公開鍵認証によるSSH接続時に必要なプロパティ一覧を以下に示します。

User: DB2 のユーザ
Password: DB2 のパスワード
Database: DB2 の接続先データベース
Server: DB2 のサーバー
Port: DB2 のポート
UserSSH: "true"
SSHAuthMode: "Public_Key"
SSHClientCertType: キーストアの種類
SSHPort: SSH のポート
SSHServer: SSH サーバー
SSHUser: SSH ユーザー
SSHClientCert: 秘密鍵ファイルのパス

接続文字列形式では以下のようになります。

Server=10.0.1.2;Port=50000;User=admin;Password=admin;Database=test;UseSSH=true;SSHAuthMode=Public_Key;SSHClientCertType=PUBLIC_KEY_FILE;SSHPort=22;SSHServer=ssh-server;SSHUser=root;SSHClientCert=C:\Keys\key.pem;

API Server のユーザー設定

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

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

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

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

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

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

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

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

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

api-server.service.ts

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

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

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

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

api-server.service.ts

    constructor(private httpClient: HttpClient) { }

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

DB2 のデータを取得する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を利用するため、必要なモジュールをインポートします。