LoginSignup
1
0

More than 1 year has passed since last update.

AmazonLexを使ってWebチャットボットを作ってみた

Posted at

Webサイトにチャットボットを設置したいと思い、試しにAmazonLexを使って構築してみました。

AWSアカウントはすでに持っている想定で記述しています。

手順

  1. CloudFormationを立ち上げる
  2. 必要な設定をしてセットアップを実行
  3. 試しに使ってみる
  4. スニペットを自身のWebサイトに設置
  5. AmazonLexの設定を変更する

CloudFormationを立ち上げる

GitHubにCloudFormationを使って必要なサービスをインストールする方法が載っていましたのでこちらを利用しました。

GitHubページにある以下の一覧からTokyoを選択するとCloudFormationが立ち上がります。

スクリーンショット 2022-06-02 16.53.53.png

必要な設定をしてセットアップを実行

一番重要なのは、WebAppParentOriginです。
ここにチャットボットを設置したいWebサーバのドメインを設定する必要があります。
それ以外はとりあえずデフォルト値でも問題ありません。必要に応じて設定してください。
英語表記なので英語を理解できる必要があります。

試しに使ってみる

約30分くらい待つと必要なサービスの設定が完了します。
サービス構成は以下のようになっています。

lex_chatbot.drawio.png

CloudFormationの「出力」タブにあるWebAppUrlをクリックすると、フルスクリーンでチャットボットが立ち上がるので試しに使ってみるといいでしょう。

デフォルトでは英語で花を購入することを想定したチャットボットになっています。「order」などと入力するとチャットボットが反応してくれます。

スニペットを自身のWebサイトに設置

CloudFormationの「出力」タブにあるSnippetUrlをクリックすると、スニペットの設置方法が表示されます(英語)。
ここに表示されるhtmlコードをコピーして自身のサイト上に貼り付けてください。

試しに空のhtmlファイルにスニペットを貼り付けてアクセスしてみると以下のように表示されました。

スクリーンショット 2022-06-02 17.07.49.png

AmazonLexの設定を変更する

あとはAmazonLexの設定を変えて自身の希望する反応をしてくれるように変更すればOKです。
AWSマネジメントコンソールでAmazonLexを開くと「WebUiOrderFlowers」というBotができているはずなのでこの設定を自分好みに変更してください。

スクリーンショット 2022-06-02 17.12.35.png

その他

チャットボットのデザイン修正やAmazonLexへの設定の詳細、日本語に完全に対応する設定などについてはここには記載していませんが、まだまだ色々できそうです。

参考

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0