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

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

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

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

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

API Server の設定

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

RabbitMQ への接続

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

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

RabbitMQ は、複数のメッセージングプロトコルをサポートするオープンソースのメッセージブローカーです。RabbitMQ Management HTTP API は、RabbitMQ サーバーの管理データと監視データに HTTP 経由でアクセスする手段を提供します。この API では、仮想ホスト、エクスチェンジ、キュー、バインディング、コネクション、チャネル、コンシューマー、ユーザー、権限、ポリシー、クラスター全体の統計情報を取得できます。

HTTP API を利用するには、RabbitMQ サーバーで Management プラグインを有効化する必要があります。デフォルトでは、管理インターフェースはポート 15672 でリッスンします。

Basic 認証の設定

RabbitMQ Management HTTP API は HTTP Basic 認証を使用します。RabbitMQ 管理ユーザーのユーザー名とパスワードを指定する必要があります。

管理 API へのアクセスを有効にするには、以下のステップで進めます：
1. サーバーで RabbitMQ Management プラグインが有効になっていることを確認します（rabbitmq-plugins enable rabbitmq_management）。
2. 既存の管理ユーザーを使用するか、適切な管理タグ（management、policymaker、monitoring、または administrator）を持つユーザーを作成します。
3. RabbitMQ Management HTTP API の完全なベース URL を控えておきます（例：http://localhost:15672）。
RabbitMQ サーバーを設定したら、以下の接続プロパティを設定して接続します：
- AuthScheme：Basic に設定します。
- URL：RabbitMQ Management HTTP API のベース URL に設定します（例：http://localhost:15672）。
- User：RabbitMQ の管理ユーザー名に設定します（例：guest）。
- Password：RabbitMQ の管理パスワードに設定します。
接続文字列の例：
```
Profile=C:\profiles\RabbitMQ.apip;AuthScheme=Basic;URL=http://localhost:15672;User=guest;Password=guest;
```
利用可能なテーブル

RabbitMQ プロファイルでは、以下のテーブルにアクセスできます：
- Overview - クラスター全体の統計情報と RabbitMQ ノードに関する情報
- Nodes - RabbitMQ クラスター内の個々のノードに関する情報
- NodeMemory - 特定のクラスターノードの詳細なメモリ使用状況の内訳
- Connections - ブローカーへのすべてのオープンな AMQP コネクションの一覧
- Channels - すべてのコネクションにわたるオープンな AMQP チャネルの一覧
- Consumers - すべてのキューに登録されたコンシューマーの一覧
- Exchanges - すべての仮想ホストで宣言されたエクスチェンジの一覧
- Queues - すべての仮想ホストで宣言されたキューの一覧
- Bindings - エクスチェンジとキュー間のすべてのバインディングの一覧
- VirtualHosts - ブローカーに設定された仮想ホストの一覧
- VhostPermissions - 特定の仮想ホスト内のユーザー権限
- Users - すべての RabbitMQ ユーザーの一覧
- Permissions - すべての仮想ホストにわたる全ユーザーの権限レコード
- TopicPermissions - 全ユーザーのトピックレベルの権限レコード
- Policies - 仮想ホスト内のキューおよびエクスチェンジに適用されたポリシーの一覧
- OperatorPolicies - 仮想ホスト内のキューに適用されたオペレーターポリシーの一覧
- Parameters - 仮想ホストごとのコンポーネントパラメータ（例：federation、shovel）の一覧
- GlobalParameters - すべての仮想ホストに適用されるグローバルパラメータの一覧
- VhostLimits - 特定の仮想ホストに設定されたリソース制限
- UserLimits - 特定のユーザーに設定されたリソース制限
- FeatureFlags - フィーチャーフラグの一覧と、ノード上での有効／無効の状態
- DeprecatedFeatures - 非推奨機能の一覧と、その使用状態
- AuthAttempts - ノードの認証試行統計
- ClusterName - RabbitMQ クラスターの名前
- WhoAmI - 現在認証されている管理ユーザーに関する情報
- ExchangeBindingsSource - 特定のエクスチェンジがソースとなっているバインディング
- ExchangeBindingsDestination - 特定のエクスチェンジが宛先となっているバインディング
- QueueBindings - 仮想ホスト内の特定のキューのバインディング
接続情報の入力が完了したら、「保存およびテスト」をクリックします。

RabbitMQ Management HTTP API について

RabbitMQ は、複数のメッセージングプロトコルをサポートするオープンソースのメッセージブローカーです。RabbitMQ Management HTTP API は、RabbitMQ サーバーの管理データと監視データに HTTP 経由でアクセスする手段を提供します。この API では、仮想ホスト、エクスチェンジ、キュー、バインディング、コネクション、チャネル、コンシューマー、ユーザー、権限、ポリシー、クラスター全体の統計情報を取得できます。

HTTP API を利用するには、RabbitMQ サーバーで Management プラグインを有効化する必要があります。デフォルトでは、管理インターフェースはポート 15672 でリッスンします。

Basic 認証の設定

RabbitMQ Management HTTP API は HTTP Basic 認証を使用します。RabbitMQ 管理ユーザーのユーザー名とパスワードを指定する必要があります。

管理 API へのアクセスを有効にするには、以下のステップで進めます：

サーバーで RabbitMQ Management プラグインが有効になっていることを確認します（rabbitmq-plugins enable rabbitmq_management）。
既存の管理ユーザーを使用するか、適切な管理タグ（management、policymaker、monitoring、または administrator）を持つユーザーを作成します。
RabbitMQ Management HTTP API の完全なベース URL を控えておきます（例：http://localhost:15672）。

RabbitMQ サーバーを設定したら、以下の接続プロパティを設定して接続します：

AuthScheme：Basic に設定します。
URL：RabbitMQ Management HTTP API のベース URL に設定します（例：http://localhost:15672）。
User：RabbitMQ の管理ユーザー名に設定します（例：guest）。
Password：RabbitMQ の管理パスワードに設定します。

接続文字列の例：

Profile=C:\profiles\RabbitMQ.apip;AuthScheme=Basic;URL=http://localhost:15672;User=guest;Password=guest;

利用可能なテーブル

RabbitMQ プロファイルでは、以下のテーブルにアクセスできます：

Overview - クラスター全体の統計情報と RabbitMQ ノードに関する情報
Nodes - RabbitMQ クラスター内の個々のノードに関する情報
NodeMemory - 特定のクラスターノードの詳細なメモリ使用状況の内訳
Connections - ブローカーへのすべてのオープンな AMQP コネクションの一覧
Channels - すべてのコネクションにわたるオープンな AMQP チャネルの一覧
Consumers - すべてのキューに登録されたコンシューマーの一覧
Exchanges - すべての仮想ホストで宣言されたエクスチェンジの一覧
Queues - すべての仮想ホストで宣言されたキューの一覧
Bindings - エクスチェンジとキュー間のすべてのバインディングの一覧
VirtualHosts - ブローカーに設定された仮想ホストの一覧
VhostPermissions - 特定の仮想ホスト内のユーザー権限
Users - すべての RabbitMQ ユーザーの一覧
Permissions - すべての仮想ホストにわたる全ユーザーの権限レコード
TopicPermissions - 全ユーザーのトピックレベルの権限レコード
Policies - 仮想ホスト内のキューおよびエクスチェンジに適用されたポリシーの一覧
OperatorPolicies - 仮想ホスト内のキューに適用されたオペレーターポリシーの一覧
Parameters - 仮想ホストごとのコンポーネントパラメータ（例：federation、shovel）の一覧
GlobalParameters - すべての仮想ホストに適用されるグローバルパラメータの一覧
VhostLimits - 特定の仮想ホストに設定されたリソース制限
UserLimits - 特定のユーザーに設定されたリソース制限
FeatureFlags - フィーチャーフラグの一覧と、ノード上での有効／無効の状態
DeprecatedFeatures - 非推奨機能の一覧と、その使用状態
AuthAttempts - ノードの認証試行統計
ClusterName - RabbitMQ クラスターの名前
WhoAmI - 現在認証されている管理ユーザーに関する情報
ExchangeBindingsSource - 特定のエクスチェンジがソースとなっているバインディング
ExchangeBindingsDestination - 特定のエクスチェンジが宛先となっているバインディング
QueueBindings - 仮想ホスト内の特定のキューのバインディング

API Server のユーザー設定

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

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

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

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

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

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

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

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

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

api-server.service.ts

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

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

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

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

api-server.service.ts

    constructor(private httpClient: HttpClient) { }

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

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