今回はAmazon LexというAWSが提供するフルマネージド型人工知能 (AI) サービスと組み合わせたチャットボットアプリを開発します。記事は全部で3回に分けており、最終回になるこの記事では第1回、第2回で設定したAmazon LexをMoancaに組み込むところまでを紹介します。
今までの記事は下記リンクから確認ください。
■ Amazon Lexで対話型AIアプリを作ろう (Amazon Lex設定編)
https://press.monaca.io/hirose/8671
■ Amazon Lexで対話型AIアプリを作ろう (AWS Lambda編)
https://press.monaca.io/hirose/8677
Cognitoの設定
サンプルアプリからAmazon Lexにアクセスするために、Cognitoを設定します。
AWSコンソールからCognitoのサービスを開いてください。
https://ap-northeast-1.console.aws.amazon.com/cognito/home?region=ap-northeast-1
「IDプールの管理」をクリックします。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2021/11/01-2.png?resize=917%2C464&ssl=1)
「新しい ID プールの作成」ボタンをクリックします。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2021/11/01-2-1.png?resize=445%2C208&ssl=1)
「IDプール名」に「MonacaSampleBotPool」と入力します。
また、「認証されていない ID」の「認証されていない ID に対してアクセスを有効にする」にチェックを入れます。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2021/11/02-2.png?resize=907%2C732&ssl=1)
「プールの作成」ボタンをクリックしてください。
次の画面は英語で書かれていますが、「IAM」のロールを割り当てる必要がある旨の画面が表示されます。
「許可」をクリックすると「Cognito_MonacaSampleBotPoolAuth_Role」と「Cognito_MonacaSampleBotPoolUnauth_Role」という名前のIAMのロールが作成されます。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2021/11/03-2.png?resize=1024%2C769&ssl=1)
次の画面で表示される「AWS 認証情報の取得」は、Monaca側の設定で必要になるので、メモを控えておきます。
IAMの設定
作成されたロール「Cognito_MonacaSampleBotPoolAuth_Role」と「Cognito_MonacaSampleBotPoolUnauth_Role」にはまだポリシーがアタッチされていません。アプリからLexにアクセスを許可するために、「AmazonLexRunBotsOnly」というロールを設定していきます。
AWSコンソールからIAMのサービスを開きます。
https://console.aws.amazon.com/iamv2/home#/home
そして、左部の「アクセス管理」の「ロール」をクリックします。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2021/11/04.png?resize=275%2C371&ssl=1)
そして、検索窓に「Cognito_MonacaSampleBotPool」と入力してください。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2021/11/05.png?resize=1024%2C222&ssl=1)
「Cognito_MonacaSampleBotPoolAuth_Role」と「Cognito_MonacaSampleBotPoolUnauth_Role」の両方に次の設定をしていきます。
「アクセス権限」タブ内の「Permissions policies」内にある「ポリシーをアタッチします」ボタンをクリックします。
そして「AmazonLexRunBotsOnly」を検索窓に入力し、リストのチェックボックスにチェックを入れ、このポリシーをアタッチします。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2021/11/06-1.png?resize=997%2C366&ssl=1)
「Cognito_MonacaSampleBotPoolAuth_Role」と「Cognito_MonacaSampleBotPoolUnauth_Role」両方に対して設定ができたらIAMの設定は完了です。
サンプルアプリのインポート
今回はこちらのリンクをクリックしてサンプルプロジェクトをインポートしてください。
Monacaデバッガー上では動作確認ができないため、iOSまたはAndroidのデバッグビルドをして確認してください。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2021/11/09-2.png?resize=390%2C369&ssl=1)
「www/lex-web-ui」フォルダ配下の「lex-web-ui-loader-config.json」をエディタで開いてください。次の項目の設定をします。
キー | 値 |
---|---|
cognito.poolId | Cognitoで作成したIDプールのID |
lex.v2BotId | Lexの「ボット詳細」に表示される「ID」 |
lex.v2BotAliasId | Lexのエイリアスの詳細に表示される「ID」 |
lex.botName | 「v2BotId」と同じ値 |
cognito.poolId
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2021/11/07-2.png?resize=841%2C364&ssl=1)
lex.v2BotId、lex.botName
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2021/11/08-1.png?resize=832%2C373&ssl=1)
lex.v2BotAliasId
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2021/11/09-1.png?resize=834%2C550&ssl=1)
ファイルを保存したら設定は完了です。
プレビューパネルをリロードしてみましょう。チャットボットが表示されます。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2021/11/07-1.png?resize=447%2C784&ssl=1)
いかがでしたでしょうか。
Amazon Lex、Lambdaの設定ができたら、簡単にMonacaに組み込むことができました。ぜひオリジナルのチャットボットの作成にもチャレンジしてみてください。