【寄稿】Amazon Connect Chat のボタンによるコミュニケーション

この投稿はアクセンチュア株式会社 Technology グループ所属のエンジニア杉本優里氏に、Amazon Connect および Amazon Lex を活用したプロトタイピングについて寄稿いただいたものです。

はじめに

Amazon Connect はオムニチャンネルのクラウドコンタクトセンターです。クラウドベースのコンタクトセンターを簡単にセットアップすることができ、電話だけでなくチャットでの応対 (Amazon Connect Chat) も可能です。また、コンタクトフローで Amazon Lex のボットを設定することにより、オペレータが直接対応する前にチャットボットで対応することが可能で、オペレータの負担の軽減につながります。

Amazon Lex はチャットボット向けの会話型 AI を提供するサービスで、Alexa と同じテクノロジーを利⽤した会話インターフェースの構築が可能です。テキストの意図を認識する⾃然⾔語理解 (Natural Language Understanding; NLU) 機能が提供されているため、⽂字チャットのアプリケーション構築が簡単に⾏えます。

上記を活用して、電話での⾃動⾳声応答システム (Interactive Voice Response; IVR) と同様に、チャットでもボタンドリブンの⾃動応答を行い、チャットボットとのやりとりで完結しない場合はオペレータで対応したい場合があります。この仕組みを実現するには3つの要素が存在します。

オペレータ対応のためにAmazon Lex と Amazon Connect を組み合わせて利用する。
Amazon Connect のコンタクトフローにおいて初回メッセージに設定した文言をボタンとして表示する。
Amazon Lex にて 2 回目以降のメッセージをボタンとして表示する。

本記事では、AWS が公開している Amazon Connect Chat UI Examples (asyncCustomerChatUX) を利用して、初回メッセージをボタンとして表示する方法について以下で説明します。２回目以降のメッセージをボタンとして表示する方法はAWSブログ Easily set up interactive messages for your Amazon Connect chatbot にて紹介されており、本記事では言及しません。

Amazon Connect の準備

Amazon Connect のコンタクトフローを新規作成し、Amazon Lex のチャットボットを紐付ける
AWS ブログ Amazon ConnectとAmazon Lexの連携により洗練された会話体験を実現に記載の内容をすべて実行します。これによって、Amazon Connect から Amazon Lex を呼び出してチャットを開始することが可能です。
コンタクトフローの初期メッセージにInteractive MessageのList PickerのJSONを設定する
Amazon Connect ではユーザに入力を促す2種類のテンプレートを提供しています。1つはリストから選択させる List Picker、もう1つは日時を選択させる Time Picker です。List Picker はまさにボタンのように表示できるテンプレートです。そこで List Picker のJSON 形式のテンプレートを、対話型メッセージをチャットに追加するを参考に作成して、初期メッセージに設定します。ただし、このままでは初期メッセージに JSON がそのまま表示されてしまうため、以降のステップでボタン形式で表示されるようにします。JSON を入力した状態の画面および利用した JSON の例を以下に示します。この例では、最初に「こんにちは。問い合わせ BOT です。調べたいことを教えて下さい」のメッセージのあとに、「FAQ」と「オペレータと話したい」の2つのリスト（ボタン）を表示することを期待しています。

{
  "templateType": "ListPicker",
  "version": "1.0",
  "data": {
    "content": {
      "title": "こんにちは。問い合わせBOTです。調べたいことを教えてください",
      "elements": [
        { "title": "FAQ" },
        { "title": "オペレータと話したい" }
      ]
    }
  }
}

保存したコンタクトフローのインスタンスIDとコンタクトフローIDを確認する
以降のステップではAmazon Connect Chat UIをデプロイして利用します。Amazon Connect Chat UIをCloud Formation でデプロイする際に必要となる、必要なインスタンスIDとコンタクトフローIDを Amazon Connect のコンソール画面で確認します。確認画面は以下のようになります。
[補⾜]Amazon Connectのチャット機能を有効化する
この作業は、ダッシュボードページに「チャットをテスト」のリンクが表⽰されていない場合のみ必要です。
4.1 セキュリティプロファイルの設定変更
4.1.1 左メニューの「ユーザー」から「セキュリティプロファイル」を選択する。
4.1.2「Admin」を選択する。
4.1.3「数字とフロー」を開き、「チャットテストモード」の有効/無効列にチェックを⼊れる。
4.1.4 設定を保存する。
4.2 ルーティングプロファイルの設定変更
4.2.1 左メニューの「ユーザー」から「ルーティングプロファイル」を選択する。
4.2.2 ルーティングプロファイル名を選択する。
4.2.3 チャットの項⽬にチェックを⼊れる。
4.2.4 設定を保存する。

Amazon Connect Chat UIの準備

Amazon Connect Chat UI は、Amazon Connect Chat の UI を AWS CloudFormation によってデプロイできるソリューションです。アーキテクチャは以下のとおりです。

Amazon S3 に Web ページをホストし、Amazon CloudFront で表示します。Web ページから Amazon API Gateway 経由で AWS Lambda をトリガーし、Amazon Connect の StartChatContact API を実行し、結果を Aamzon DynamoDB に保存して、ユーザに結果を返します。以下ではデプロイの手順を示します。

AWS CloudFormationを使ってasyncCustomerChatUXをデプロイする。
1.1 任意のリージョンの「Launch Stack」ボタンを選択する。
1.2 パラメータを⾃⾝のAmazon Connectインスタンス情報に書き換えて実⾏する。
- WebsiteS3BucketName: 静的ホスティング⽤のS3バケット名
- AmazonConnectS3BucketName: Amazon Connectログ格納⽤のS3バケット名
- transcriptPath: Amazon Connectログ格納⽤のパス
アウトプットタブのcloudFrontDistributionに記載されているCloudFrontのURLを開くとチャットを開始することができます。前述したとおり、そのままの状態では、初期メッセージに設定したJSONがテキストとして表⽰されてしまいます。

Amazon Connect Chat UI の変更

テキスト形式で表示されているJSON をボタン形式で表示するために、Amazon Connect Chat UI を変更します。具体的には、index.htmlのsuccessHandlerにincomingItemDecoratorを追加します。Amazon Connectのコンタクトフローの初期メッセージで指定したテキストタイプはレスポンスでは「”text/plain”」として返却されることと、JSON形式のメッセージを設定したことを考慮して判定処理を組み込みます。追加するソースコードは以下のとおりです。

chatSession.incomingItemDecorator = function (item) {
 if (item.type === "MESSAGE" && item.content.type === "text/plain" && item.content.data.startsWith("{")) {
 　　　item.content.type = "application/vnd.amazonaws.connect.message.interactive"
 　}
 　return item; 
}

実行結果

Amazon Connect Chat UI で表示される初回のメッセージの画面を以下に示します。

期待通り初回メッセージをボタン化することができています。Amazon Connect Chat UI上での修正なので、Amazon Connect 管理画⾯のチャットテスト画⾯や問い合わせログではJSONがテキスト形式で表⽰されます。

さいごに

本記事では、Amazon Connect Chat UIを利用して、Amazon Connect Chatの初期メッセージをボタン化する方法を説明しました。これによって、チャットの最初から最後まで、ボタンを選択するだけでチャットボットとコミュニケーションできるようになるため、ユーザの入力負担を軽減することができます。Amazon Connect Chat UIには、今回紹介したasyncCustomerChatUX 以外にもいくつかのサンプルが用意されているので、これらを活用してより簡単にソリューションを構築することが可能です。

著者について

杉本優里

アクセンチュア株式会社Technologyグループ所属のエンジニア。使ったことのないものを動かしてみることが好きです。

Amazon Web Services ブログ