6-4.ウォールボードの構築

ラボの概要

コンタクトセンターで重要な機能の1つとしてウォールボードがあります。ウォールボードは、エージェントやスーパバイザが必要な情報を集約したリアルタイムダッシュボードです。通常、ウォールボードはコンタクトセンターに大画面に表示され、コンタクトセンターサービスや他のソースから取得した情報を表示します。また多くのお客様では、いくつかの異なるウォールボードフォーマットを使い分け、コンタクトセンター全体に関連する情報だけでなく、エージェントに必要な固有の情報を表示しています。

このラボでは、Amazon Connect のウォールボードとして使用できるサーバーレスアプリケーションを構築する方法を解説します。エージェントイベント、リアルタイムメトリクス/履歴メトリクスに関するデータを収集し、ブラウザで所定のフォーマットにレンダリングします。同じデータセットを使用して複数のウォールボード形式を同時にサポートし、関連ソースからデータを追加することもできます。

利用するコンポーネントは以下の通りです。

  • Amazon DynamoDB のテーブル
    • ウォールボードの設定情報や、外部ソースから収集した非リアルタイムのデータ（メールの待ち時間の数など）を格納します。
  • ウォールボード定義ファイル
    • Python スクリプトはこのファイルを受け取り、ウォールボードの設定を DynamoDB のテーブルに格納します。
  • AWS Lambda 関数
    • Amazon Connect から Amazon Kinesis Data Streams に出力されたエージェントイベントを処理し、エージェントの現在のステータスをウォールボードに表示することができます。
    • Amazon Connect の履歴メトリクス API を定期的にポーリングして、抽出対象のデータを取得します。
    • Amazon API Gateway 経由で照会されたときに、オンデマンドでウォールボードをレンダリングし、ブラウザで表示可能な HTML テーブルを返します。
    • 必要なデータを取得するために Amazon Connect リアルタイムメトリクス API をポーリングします。

301.png

初期設定

  1. AWS コンソールから CloudFormation を開きます。
  2. スタックの作成をクリックし、サーバーレスウォールボードの CloudFormation テンプレートの YAML ファイルをアップロードします。 304

テンプレートをデプロイするには、次の手順に従います。

  • スタックの名前を指定します (「connectWallBoard」など)。
  • DDBTable(DynamoDB のテーブル名)はデフォルトのままとします。
  • Amazon Connect のエージェントイベントに設定している Kinesis Data Streams の ARN を指定します。これは、AWS コンソールから Kinesis を開き、作成されているデータストリームを開くことで確認できます。
    • 6-2 項を実施している場合は、作成済みの ARN を使用することができます。
    • 6-2 項を実施していない場合は、データストリームを新規に作成してください。
  • 次へ を選択します。 305
  • スタックオプションの設定 画面は、デフォルトのまま次へ を選択します。
  • レビュー 画面で下までスクロールし、AWS CloudFormation によって IAM リソースが作成される場合があることを承認します。 にチェックし、スタックを作成するを選択します。問題なければ1-2分で作成が完了します。 306
  • 出力タブに移動し、APIGatewayURL のアドレスをコピーしておきます。これは、ウォールボード用にテーブルを取得するため必要です。
    • このテンプレートから作成された API Gateway には、認証は含まれません。API Gateway 呼び出しの認証が必要な場合は、API Gateway を適切に設定してください。

ウォールボードレンダリング

ウェブページをレンダリングする Lambda 関数は、すべての異なるデータをまとめ、値を HTML テーブルとして返します。Lambda 関数の出力は HTML テーブルのみであり、完全な HTML ページではありません。これにより、ユーザーの作成した任意の Web ページ内からAPI Gateway を呼び出し、テーブルを挿入して表示することが可能です。

  • API Gateway から Lambda 関数にウォールボード名を渡すと、DynamoDB テーブルから設定を読み込みます。
    • ウォールボード定義ファイルは、300 秒ごとに更新のみをチェックします。これは、関数の先頭にある「configTimeout」変数または「configTimeout」環境変数によって制御されます。このため、ウォールボード定義に加えた変更は、反映されるまでに最大 5 分かかることを意味します。
    • DynamoDB テーブル名は、WallboardTable 環境変数で指定します。
  • DynamoDB テーブルから既存のデータを読み取ります。これには、エージェントの状態等の数値データが含まれます。
    • リアルタイムの統計は Amazon Connect API から取得されます。「realtimeTimeout」変数は、この間隔を制御します。デフォルトでは、過去5秒間にデータが API から取得されなかった場合、新しいデータがフェッチされます。
    • 出力テーブルは、データの完全なセットに基づいてレンダリングされ、そのプロセス中に必要な計算も実行されます。しきい値のチェックを行い、そのしきい値を参照するセルに適切な背景色が設定されます。

ウォールボードの定義

ウォールボードの各セルに表示される情報は、次のいずれかになります。複数のキューと Amazon Connect インスタンスから情報を表示することも可能ですので、コンタクトセンター全体にまたがるウォールボードを作成できます。

  • 静的テキスト
    • 各セルのテキストと背景色はセルごと設定できます。設定されていない場合はデフォルトの色が使用されます。
  • キュー内の待ち呼数や Available なエージェントの数などの数値データ
  • 数値データを使用した計算結果
  • 個々のエージェントのステータス
  • 静的テキストと数値またはエージェントステータスの組み合わせ
    • しきい値は、警告レベルとアラートレベルなど、数値ごとに設定できます。これは、待機時間が SLA を超える場合や、予想よりも低い値（たとえばログインしているエージェント数が一定数未満の場合）などに活用できます。また、しきい値の色は任意のセルに設定できますので、強調表示したいセルの色を変更することができます。

リアルタイムおよび履歴データの表示

Amazon Connect からリアルタイムまたは履歴データを収集するには、Amazon Connect ARN、キュー ARN、および必要なメトリックを指定する必要がありますので、これらを準備します。

Amazon Connect インスタンスの概要を表示して、コンソールでインスタンス ARN をメモしておいてください。 302.png キュー ARN を取得するために、管理者として Amazon Connect インスタンスにログインし、キューを開き、追加のキュー情報の表示から ARN をメモしておいてくださいす。 303.png

サンプルウォールボード

まず、Amazon Connect インスタンス内の1つのキューを表示するサンプルについて確認していきます。 リアルタイムデータの場合、ウォールボードをレンダリングする Lambda 関数は、Connect real-time data API をポーリングします。ウォールボードインスタンスが多数存在する場合を考慮し、API コールの回数を制限するために、データをキャッシュするタイマーがコード内に存在します（デフォルトでは5秒に設定されています）。Lambda 関数の「realtimeTimeout」変数を変更することで、API 呼び出しの頻度を変更できます。 履歴データは、個別の Lambda 関数によって毎分収集されます。この場合の「履歴」とは、集計日のデータを意味します。データは、ウォールボードテーブルをレンダリングする Lambda 関数によって DynamoDB テーブルに格納されます。

Agents Available Contacts in Queue Longest Waiting Contacts Handled Today Abandoned Calls Average Handle Time
5 3 45 300 4 129

この特定のウォールボードでは、以下で説明するツールを使用して DynamoDB テーブルにインポートするファイルを作成します。

ここに示す定義ファイルは、静的テキストと、リアルタイムメトリックと履歴メトリックが混在した6列2行のウォールボードを作成します。 データソースとなる Amazon Connect インスタンスを指定するため、インスタンス ARN の一部(ID)とキュー ARN の一部(ID)にを指定します。

サンプルウォールボードを構築するために、以下のテキストを任意のファイル名（例:wallboard-sample1.txt）で保存します。このとき、以下の「xxxxxxxx-xxxx-xxxxx-xxxxxxxx」をメモしておいたインスタンス ID に置き換え、「yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy」をキュー ID に置き換えます。

WallboardTemplateFormatVersion: 1
Description: Simple Wallboard Example
Identifier: simplewallboard

Defaults:
  TextColor: black
  BackgroundColor: white
  TextSize: 15

Sources:
  - Source: AgentsAvailable
    Description: Agents available in basic queue (real-time)
    Reference: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy:AGENTS_AVAILABLE
  - Source: ContactsInQueue
    Description: Contacts waiting in basic queue (real-time)
    Reference: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy:CONTACTS_IN_QUEUE
  - Source: LongestWaiting
    Description: Longest waiting contact in basic queue (real-time)
    Reference: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy:OLDEST_CONTACT_AGE
  - Source: ContactsHandled
    Description: Number of contacts handled today (historical)
    Reference: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx: yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy:CONTACTS_HANDLED
  - Source: AbandonedCalls
    Description: Abandoned calls today (historical)
    Reference: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy:CONTACTS_ABANDONED
  - Source: AverageCallTime
    Description: Average time to handle a call (historical)
    Reference: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy:HANDLE_TIME

Rows:
  - Row: 1
    Cells:
    - Cell: 1
      Text: Agents Available
      BackgroundColor: lightgreen
      TextSize: 20
    - Cell: 2
      Text: Contacts in Queue
      BackgroundColor: lightgreen
      TextSize: 20
    - Cell: 3
      Text: Longest Waiting
      BackgroundColor: lightgreen
      TextSize: 20
    - Cell: 4
      Text: Contacts Handled Today
      BackgroundColor: lightgreen
      TextSize: 20
    - Cell: 5
      Text: Abandoned Calls
      BackgroundColor: lightgreen
      TextSize: 20
    - Cell: 6
      Text: Average Handle Time
      BackgroundColor: lightgreen
      TextSize: 20
  - Row: 2
    Cells:
    - Cell: 1
      Reference: AgentsAvailable
      TextColor: blue
    - Cell: 2
      Reference: ContactsInQueue
      TextColor: blue
    - Cell: 3
      Reference: LongestWaiting
      TextColor: blue
    - Cell: 4
      Reference: ContactsHandled
      TextColor: blue
    - Cell: 5
      Reference: AbandonedCalls
      TextColor: blue
    - Cell: 6
      Reference: AverageCallTime
      TextColor: blue

このファイルには、次の情報が含まれます。

  • WallboardTemplateFormatVersion
    • テンプレートファイルのバージョンです。
  • Description
    • 項目の説明です。省略可能です。
  • Identifier
    • 必須フィールドです。このウォールボード定義ラベルであり、ウォールボードをレンダリングするときに必要です。異なる Identifier を使用すれば、複数の異なるウォールボード定義をインポートできます。各ウォールボードは同じデータを使用しますが、異なる方法で表示することができます。
  • textColor
    • ウォールボードのデフォルトのテキスト色で、オプションフィールドです。指定しない場合、ウォールボードを埋め込む HTML ページまたはスタイルシートから継承されます。
  • backgroundColor
    • ウォールボードのデフォルトの背景色で、オプションフィールドです。
  • textSize
    • ウォールボードのデフォルトのテキストサイズで、オプションフィールドです。
  • Sources : データの収集元を定義します。
    • Source : 作成しているソース名です。ウォールボードにこのデータを表示するときに使用します。
    • Description : 項目の説明を記載します。
    • Reference : Amazon Connect インスタンスの ARN、キュー ARN、および必要なメトリックを記入します。リアルタイムメトリクスは自動的に取得されますが、以下のセクションで説明するように、履歴メトリクスは Lambda 関数によって取得します。
  • Row/Cell : ウォールボードテーブル内の内容を表示されるセルごとにエントリを定義します。
    • Text : セルに表示される静的テキスト
    • Reference : 前のセクションで作成したデータソース
    • backgroundColor : セルの背景色
    • textColor : セルのテキストの色
    • textSize : セルのテキストサイズ

ウォールボードのインポート

ウォールボード定義ファイルを準備したら、DynamoDB にインポートします。

  1. wallboard-import.py をダウンロードします。
  2. AWS コンソールから CloudShellを実行します。シェルが入力可能状態になるまで待機します。
  3. CloudShell の右上の Actions:から、wallboard-import.pyと、ウォールボード定義ファイル（例:wallboard-sampl1.txt）をアップロードします。

  4. wallboard-import.py に実行権限を付与します。

    chmod 777 wallboard-import.py

  5. wallboard-import.py を使ってウォールボード定義ファイルをDynamoDBにインポートします。

    ./wallboard-import.py [ウォールボード定義ファイル]

同じ Amazon Connect インスタンスを参照して表示するウォールボードが複数ある場合は、複数の定義ファイルをインポートして DynamoDB テーブルに共存させることができます。

ウォールボードのテスト

CloudFormation のスタック作成後にコピーした APIGatewayURL は、以下のような形式です。

https://xxxxxxxxxx.execute-api.us-east-1.amazonaws.com/wallboard

この URL はインポートした定義ファイルの Identifier をパラメータとして付与する必要があるため、そのまま開いても以下のようなエラーとなります。

<div class="error">No wallboard name specified</div>

テストとして、サンプルウォールボードの定義ファイルをインポートした後、Wallboard パラメータに Identifier(simplewallboard) を指定して、ページを開きます。

https://xxxxxxxxxx.execute-api.us-east-1.amazonaws.com/wallboard?Wallboard=simplewallboard

正常に実行されると以下のような HTML テーブルが応答されます。data は各自の通話状況で異なります。

<table label="ConnectWallboardsimplewallboard" style="border: 1px solid black; border-collapse: collapse; margin-left: auto; margin-right: auto; text-align: center; color: black; background: white; font-size: 15px; font-family: sans-serif;" class="wallboard-simplewallboard">
 <tr><td label="R1C1" class="R1C1" style="border: 1px solid black; padding: 5px; font-size: 20px; background: lightgreen;"><div class="text">Agents Available</div></td><td label="R1C2" class="R1C2" style="border: 1px solid black; padding: 5px; font-size: 20px; background: lightgreen;"><div class="text">Contacts in Queue</div></td><td label="R1C3" class="R1C3" style="border: 1px solid black; padding: 5px; font-size: 20px; background: lightgreen;"><div class="text">Longest Waiting</div></td><td label="R1C4" class="R1C4" style="border: 1px solid black; padding: 5px; font-size: 20px; background: lightgreen;"><div class="text">Contacts Handled Today</div></td><td label="R1C5" class="R1C5" style="border: 1px solid black; padding: 5px; font-size: 20px; background: lightgreen;"><div class="text">Abandoned Calls</div></td><td label="R1C6" class="R1C6" style="border: 1px solid black; padding: 5px; font-size: 20px; background: lightgreen;"><div class="text">Average Handle Time</div></td></tr>
 <tr><td label="R2C1" class="R2C1" style="border: 1px solid black; padding: 5px; color: blue;"><div class="data">0</div></td><td label="R2C2" class="R2C2" style="border: 1px solid black; padding: 5px; color: blue;"><div class="data">0</div></td><td label="R2C3" class="R2C3" style="border: 1px solid black; padding: 5px; color: blue;"><div class="data">0</div></td><td label="R2C4" class="R2C4" style="border: 1px solid black; padding: 5px; color: blue;"><div class="data">1</div></td><td label="R2C5" class="R2C5" style="border: 1px solid black; padding: 5px; color: blue;"><div class="data">2</div></td><td label="R2C6" class="R2C6" style="border: 1px solid black; padding: 5px; color: blue;"><div class="data">13</div></td></tr>
</table>

ウォールボードを表示するには、このテーブルを埋め込んだウェブページを作成する必要があります。このラボでは簡単なサンプルとしてこちらのウォールボードサンプルを使用します。

  • HTML をダウンロードして開き、API_URI に API Gatewayを呼び出す URL を指定します。この URL は上記のテストで使用したものと同じです。
  • RefreshInterval に更新間隔をミリ秒単位で設定します。これは API Gateway 経由で新しいデータを照会する頻度を指定します。

HTML は Web サーバにアップロードする必要はなく、ローカルで実行して動作を確認することが可能です。

  • ウォールボードテーブルのラベルは常に「connectWallboardIdentifier」です。ここで、「識別子」はウォールボード定義ファイルで指定したものです。CSS クラスは「ウォールボード識別子」です。これにより、元のページに基づいて、テーブル全体にスタイルを適用できます。
  • 各テーブルセルには一意のクラスとして「RC」(RowNumber / CellNumber）があります。これを使用してセルに個々のスタイルを適用できます。
  • 各セルの静的テキストには「text」のクラスがあり、動的データ（エージェント状態など）には「data」のクラスがあります。

ウェブページを開いたら、CCP を開いていくつかのテスト動作を行いつつ、ウォールボードの表示内容を確認してください。

  • Available / Offline を切り替える
  • Offline のまま Amazon Connect で取得した番号にコールをして待ち呼状態に入る
  • 待ち呼状態から切断する（放棄呼）
  • エージェントと接続し、切断する　等 307.png

これ以降は、追加の定義ファイルサンプルです。

計算結果の表示

上で定義した数値データポイントの出力を取り出し、それらに対して簡単な計算を実行した結果をウォールボードに表示することもできます。これを行うためのウォールボード構成ファイルは、次のようになります。

WallboardTemplateFormatVersion: 1
Description: Calculation Wallboard
Identifier: calculations

Sources:
  - Source: BasicAgentsAvailable
    Description: Agents available in basic queue (real-time)
    Reference: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy:AGENTS_AVAILABLE
  - Source: AdvancedAgentsAvailable
    Description: Agents available in advanced queue (real-time)
    Reference: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:zzzzzzzz-zzzz-zzzz-zzzz-zzzzzzzzzzzz:AGENTS_AVAILABLE

Calculations:
  - Calculation: TotalAgentsAvailable
    Formula: BasicAgentsAvailable+AdvancedAgentsAvailable
  - Calculation: ThisMakesNoSense
    Formula: BasicAgentsAvailable*AdvancedAgentsAvailable+24

Rows:
  - Row: 1
    Cells:
    - Cell: 1
      Text: Basic agents available
      Reference: BasicAgentsAvailable
    - Cell: 2
      Text: Advanced agents available
      Reference: AdvancedAgentsAvailable
  - Row: 2
    Cells:
    - Cell: 1
      Text: TotalAgentsAvailable
      Reference: TotalAgentsAvailable
    - Cell: 2
      Text: Silly calculation to prove a point
      Reference: ThisMakesNoSense

この例では、リアルタイムメトリックからいくつかのデータを収集します。(データは、履歴メトリクスなど、どこからでもソースでき、作成した Lambda 関数によって DynamoDB テーブルに注入することもできます)。 次に、それらに対していくつかの基本的な計算を実行し、いくつかのテキストを含むいくつかのセルに結果を表示します。 使用可能なエージェントを乗算する計算は「実際の」指標ではありませんが、必要な単純な数学的計算を実行できることが証明されています。計算からの出力はすべて整数です。 この例では、2つの異なるキューからデータが取得されていることを示しています。

しきい値の使用

特定の値がしきい値を超えた場合に、セルの背景色を変更できます。これにより、特定の値が警告のしきい値を超えたときに、行全体を黄色にすることができます。 しきい値の設定方法の例を次に示します。

WallboardTemplateFormatVersion: 1
Description: Threshold Example
Identifier: thresholdexample

Defaults:
  WarningBackgroundColor: yellow
  AlertBackgroundColor: red

Thresholds:
  - Threshold: AgentThreshold
    Reference: AgentsAvailable
    WarnBelow: 10
    AlertBelow: 5
  - Threshold: CallThreshold
    Reference: CallsWaiting
    WarnAbove: 20
    AlertAbove: 30

Rows:
  - Row: 1
    Cells:
    - Cell: 1
      Text: Agents Available
      Reference: AgentsAvailable
      ThresholdReference: AgentThreshold
    - Cell: 2
      Text: Calls
      Reference: CallsWaiting
      ThresholdReference: CallThreshold

この例では、Avaliable なエージェントの数が10を下回ると警告（黄色）になり、5未満になるとアラート（赤）になります。同様に、 「CallThreshold」は、キューの待ち呼数が20を超えると警告になり、30を超えるとアラートになります。 そこから、個々のセルは、そのセルの色をコントロールする特定のしきい値を参照します。セルの背景色が (個別またはデフォルトで) 指定されている場合、しきい値のカラーで上書きされます。セルには、そのしきい値で使用される値を保持する必要はありません。これにより、単一のしきい値を超えたときに、セルの行全体を強調表示することができます。

エージェントステータスの表示

小規模なコンタクトセンターにおいて、最大6人のエージェントのステータスを表示するウォールボードを構築します。 このウォールボードの YAML 定義ファイルは次のようになります。

WallboardTemplateFormatVersion: 1
Description: Agent Wallboard
Identifier: agents

Defaults:
  TextColor: black
  BackgroundColor: white
  TextSize: 15

AgentStates:
  - State: Available
    Color: Green
  - State: Offline
    Color: Red
  - State: Work
    Color: Orange
  - State: Lunch
    Color: Yellow

Rows:
  - Row: 1
    Cells:
    - Cell: 1
      Description: Agent state
      Reference: =activeagents
    - Cell: 2
      Description: Agent state
      Reference: =activeagents
    - Cell: 3
      Description: Agent state
      Reference: =activeagents
  - Row: 2
    Cells:
    - Cell: 1
      Description: Agent state
      Reference: =activeagents
    - Cell: 2
      Description: Agent state
      Reference: =activeagents
    - Cell: 3
      Description: Agent state
      Reference: =activeagents

このファイルには、次のものが含まれます。

  • AgentStates : ここでは、使用可能な各エージェントステータスとそれに伴う背景色を定義します。デフォルトでは、Amazon Connect デプロイでは 2 つの状態（「使用可能」と「オフライン」）しか定義されていませんが、さらに追加できます。これを行う場合は、定義にそれらを追加することを忘れないでください。そうしないと、カラーが関連付けられなくなります。ここで定義されていない状態がある場合、このウォールボードのデフォルトが背景色になります。各ステートの色は、レンダリングプロセス中に HTML に直接挿入されるため、有効な HTML カラー名である必要があります。
  • Row/Cell : 上記のように、ここで表示されるウォールボードの構造を定義しています。
    • Description : 説明欄
    • Reference : このフィールドは必須であり、エージェントがログインするディレクトリで定義されているとおりにエージェントのログイン名を含める必要があります。今回はエージェント名が動的に入力されるディスプレイを作成しますので、データ参照として「=activeAgents」または「=allagents」を使用します。エージェントのステータスが変化すると、セルの色がそのエージェントの現在のステータスを反映するように変化します。

このウォールボードには6つのセルがあり、最初の6人の「アクティブ」エージェント(「ログアウト」状態になっていないエージェント) の詳細がアルファベット順に表示されます。現在「テキスト」フィールドは不要です。エージェントの詳細は動的であるため、ディレクトリの「名」属性と「姓」属性から自動的に取得されます。

「=activeagents」の代わりに「=allagents」を使用することもできます。「=allagents」を使用すると「ログアウト」を含む任意の状態のエージェントが表示されます。セルよりも多くのエージェントがある場合そのエージェントは無視され、表示されません。エージェントが6人以下の場合は空白セルとなります。

まとめ

このラボでは、Lambda、API Gateway、Kinesis Data Streams、DynamoDB などのサーバーレステクノロジーを使用して Amazon Connect 用のウォールボードを作成する方法を解説しました。これを使用することで、コンタクトセンター内に表示する複数のウォールボードを作成できます。