Amazon Lexで作ったチャットボットをWebページに組み込もう｜システム・アプリ開発

今回は前回Lexで作成したチャットボットをWebページに組み込んでみましょう。

WebUIの作成には少しWebアプリの知識が必要となる為、少し敷居が高い……
と思っていましたが、先日AWS BlogにLex用WebUIのCloud Formationテンプレートについての記事が公開されたので、こちらを使用して作成してみようと思います。

AWS Machine Learning Blog: Deploy a Web UI for Your Chatbot
https://aws.amazon.com/jp/blogs/machine-learning/deploy-a-web-ui-for-your-chatbot/

GitHub: awslabs/aws-lex-web-ui
https://github.com/awslabs/aws-lex-web-ui#examples

概要

今回使用させていただくCloudFormationテンプレートではCognitoで認証を行い、Lexとやり取りを行うサーバレスWebアプリをS3上にデプロイしてくれます。

既存のWebページに簡単に組み込めるようにSnippetまで用意してくれるので、CloudFormationで組み込みたいbotを指定し、教えてくれたコードを貼り付けるだけでWebページにチャットボットを導入出来ちゃいます。

早速用意されているテンプレートよりスタックを作成してみましょう。

スタックの作成

……の前に、前回作成した時Lexの設定で音声を無効化していたので、有効化もしておきます。
LexのコンソールよりBotを選択し、「Settings」のOutput 「voice」を適当に選択しました。

それではスタックの作成を行いましょう。

リージョンがチャットボットを作成したバージニア北部となっているのを確認して、CloudFormationのページより「スタックの作成」をクリックしましょう。

テンプレートの選択の「Amazon S3テンプレートURLの指定」に以下を入力し、「次へ」をクリックします。
https://s3.amazonaws.com/aws-bigdata-blog/artifacts/aws-lex-web-ui/artifacts/templates/master.yaml

次にパラメータに必要な変更を加えます。

Lex Bot Configuration Parameters

BotName：使用するチャットボット名を指定します。
指定しない場合は公式のOrderFlowersのチャットボットが作成されます。

Web Application Parameters

WebAppParentOrigin:チャットボットをデプロイするドメインを入力します。
入力しないとCORS等で怒られます。
WebAppConfBotInitialText：チャットボットが最初に発言するメッセージを指定します。
WebAppConfBotInitialSpeech：マイクボタンを押した時にチャットボットが最初に発言するメッセージを指定します。
WebAppConfToolbarTitle：チャットボットのツールバーに表示されるタイトルを指定します。

パラメータの変更を行ったら最後の確認画面まで進み、「AWS CloudFormation によってカスタム名のついた IAM リソースが作成される場合があることを承認します。」に☑を入れて作成します。