Amazon Web Services ブログ

チャットボットにウェブ UI をデプロイする

お客様は、Amazon Lex をお使いになり非常に優れたチャットボットを構築しました。Amazon Lex コンソールをご使用になりチャットボットをテストしました。これでチャットボットを皆様のウェブサイトにデプロイ出来るようになります。

お客様が独自のボットユーザーインターフェース (UI) を構築することは可能ですが、荷が重いと感じられるかもしれません。様々なデバイスとブラウザに対するサポート、承認、音声録音などを扱う必要があります。以前に既に実行されているはずだと考え、上手く再使用できるソリューションが見つかるかもしれません。

Amazon Lex チャットボット UI

チャットボット UI と呼ばれる Amazon Lex ウェブ UI のサンプルは、 Amazon Lex チヤットボットにフル機能のウェブクライアントを提供する関連する重要部分にすでに対応しています。この機能を迅速に活用して時間を最小限に抑えることで、お使いになられているチャットボットを搭載したアプリケーションの価値を見出すことができます。

フルページのチヤットボット UIとして稼働させることができます。:

あるいは、チャットボットウィジェットとしてサイトに組み込むこともできます。：

チャットボット UI は、以下の機能をサポートしています。：

  • フルスクリーンまたは組み込み可能なウィジェットモードを備えた、モバイルに対応する UI
  • 音声とテキストを完全にサポートし、二者間をシームレスに切り替えることができる
  • 自動消音検出、トランスクリプション、オーディオの録音および再生、Amazon Lex レスポンスの再生を中断する機能などの音声機能
  • テキストと音声の両方をサポートするレスポンスカード
  • ホスティングサイトからチャットボット UI とプログラムを介して対話する機能
  • 複数のデプロイメントのオプション

デプロイメントと統合のオプション

チャットボット UI のデプロイメントと統合には４つのオプションがあります。

  1. AWS CloudFormation の使用
  2. AWS Mobile Hub の使用
  3. 事前に構築されている配布ライブラリの使用
  4. 事前にパッケージ化された Vue コンポーネントの使用

AWS CloudFormation を使用するデプロイメントが一番簡単な方法です。次にその説明をいたします。すべてのオプションについての詳細は、「GitHub README」を参照してください。

AWS CloudFormation デプロイメントのオプションの開始方法

チヤットボット UI を展開しデプロイします。

  1. [起動スタック] ボタンを押します。:
  2. デフォルトのパラメータをすべて受け入れます。
    これによって、皆様のアカウントにデモ用の環境（us-east-1 AWS リージョンで）がデプロイされ、 OrderFlowersBotがインストールされます。
  3. AWS CloudFormation によりスタックが起動され (ステータスは CREATE_COMPLETE)、[出力] タブが開きます。 WebAppUrlまたはParentPageUrlを選び、チヤットボット UI をお試しください。

スタックは次のアーキテクチャをデプロイします。これにはサーバーが全く使用されません。料金はお客様のサービスの使用度に基づきます。

詳細は、「CloudFormation スタック README」を参照してください。

チャットボット UI の動作がお分かりになられたら、皆様の Amazon Lex チャットボットでご使用になり、ウェブサイトに取り入れてみましょう。その方法は次のとおりです。

  1. AWS CloudFormationスタックを起動します。
  2. [Lex Bot 設定パラメータ ]セクションの [BotName] に、自分のボット名を入力してください。
  3. [ウェブアプリケーションパラメータ] セクションで、各パラメータに入力してください。
    注意: WebAppParentOrigin には、皆様のサイトのオリジン を必ずご使用ください。
  4. AWS CloudFormation がスタックを起動後 (ステータスはCREATE_COMPLETE)、 [出力] タブの SnippetUrl 出力値にリンクが表示されます。:
  5. [SnippetUrl] ページをブラウズすると、皆様のアプリケーションに貼り付けることができる次のものに似たコードス二ップぺットが表示されます。:

コードの例、およびチヤットボット UI を皆様のウェブサイトに統合し設定する追加オプションに関しては、 GitHub の Amazon Lex UI リポジトリを参照してください。

皆様のご感想をお待ちしております。

チャットボット UI のサンプルを是非お試しください。本ポストの最後にあるコメントセクションに皆様の体験をご記入ください。

改善点や機能に対するご提案も是非お聴きかせください。プロジェクトのGitHub レポジトリ でバグを報告していただき、機能のリクエストをご提出ください。さらに皆様のエンハンスメントをプルリクエストとしてご提出いただけますようご協力ください。

その他の参考資料

今回のブログの投稿者について

Oliver Atoa と Bob Strahan は、AWS プロフェッショナル サービスのシニアコンサルタントです。彼らは、お客様と連携し、さまざまなプロジェクトをリードすることにより、AWS を使用して価値を生み出すまでの時間を短縮するお手伝いをしています。

OliverAtoa_pic_resized

BobStrahan_pic_resized