Amazon LexでつくるはじめてのLINEボット

Last Updated: 2021-06-4

この手順はAWSエバンジェリスト亀田さん主催の勉強会「AWSの基礎を学ぼう特別編最新サービスをみんなで触ってみるはじめてのチャットボット」で利用したハンズオンです。

個人や会社の皆さんに共有して社内勉強会や復習などで自由に使って頂いて構いません。

ターゲット

このハンズオンは、Amazon Lexのチュートリアルやフォーマットとして提供されているボットのテンプレートを使ってLINEとつないでボットを作る入門編のハンズオンです。

以下のような方をターゲットとしています。

Amazon Lexを初めて触る方
AWS初心者の技術者、あるいは技術者を目指している方
LINEとAWSをつないだAIボット作成のイメージをつかみたい方

必要なもの

インターネットに接続可能なPC
ブラウザ（推奨：FirefoxまたはGoogle Chrome）
AWSマネジメントコンソールにログイン可能なAdministrator権限のIAMユーザー
スマートフォンで利用中のLINEアプリ
LINEのログインアカウント（メールアドレス）とパスワード
LINE Developerアカウント（LINE Botを作成するために、LINE DevelopersConsoleへのアカウント登録が必要となります。）

使用予定のAWSサービス

AWS IAM ： AWSのアカウントや権限を管理・制御するやつ
Amazon Lex ：自然言語のボット作れるやつ
Amazon Lambda ：サーバ意識せずにプログラム置いて動かせるやつ
Amazon API Gateway ：外部などのサービスとつなぐためのAPIを作れるやつ

ルール・進め方

説明しながら画面共有して手順のとおりに進めていきます。一緒に作業できる方は手順と画面を参考にしながら作業しましょう。作業をしない方は画面を見て頂きイメージをつかみましょう。
時間が限られているため、作業を止めずに作業を進めます。疑問点があったり行き詰ったらZoomチャットあるいは #awsbasics タグ付けてツイートして頂ければわかる範囲でのちほどフォローします。

免責事項について

ハンズオンで利用するサービスは無料枠を中心として構成していますが、一部課金が発生する場合があります。また、ハンズオンで作成した環境を削除しない場合には、課金が続く可能性があります。課金が発生したことによる責任は負えませんので、ご承知おきください。

サンプルデータダウンロード

こちらのGithubにアクセスしZIPファイルをダウンロードしてください。

.zipファイルを解凍した以下のファイルをハンズオンで利用します。

ファイル名	用途
bot.zip	Lambda関数インポート
amazon-lex-icon.png	ボットアイコン
richmenu_awsbasics.png	LINEリッチメニュー

完成イメージです。LINEからレンタカーとホテルの予約を自然言語の対話で行うことができるデモボットです。

以下がシステム構成です。

待望！日本語対応したAmazon Lexとは

ずーーーーっと待ってた。Amazon Lexが2021年4月2日に日本語に対応し、東京リージョンで使える状態になりました。

Amazon Lexはチャットボットを作るための対話型AIサービスです。Amazon Alexa と同じテクノロジーを利用した音声またはテキストインターフェイスを使用してアプリケーションを構築できます。

Amazon Lexで使う用語を理解しよう

Amazon Lexでは以下の5つの用語がよくでてきます。

Intents
Utterances
Slots
Prompts
Fulfillment

Amazon Lex料金

リクエスト単位で課金されます。ボットへの入力があるたびに1リクエストとカウント。例えば、ボットに5回の入力を行った場合は、5リクエストとして請求されます。
Amazon Lexには無料枠があります。Amazon Lex の使用を開始した日から最初の1年間は、1か月あたり最大で10,000回のテキストリクエストと5,000回の音声リクエストまたは音声間隔を処理することができます。

対話のAPI利用 or リアルタイムのストリーム会話なのか、音声 or テキストどちらかなどで金額が異なりますが、今回のハンズオンのようなテキストでの対話式の個別API利用の場合の料金例は以下になります。

初めてAmazon Lexを利用してから1年以内なら無料ですし、それ以降だった場合でも100回ボットと会話したとしても10円以下で使える計算になります。

では、ハンズオン始めましょう！

LINEボットの設定を行います。構成図だとここです。

LINE Developersへのアカウント登録

LINEボットを作成するためには、LINE Developersへの登録が必要となります。

LINE Developersコンソールで[コンソール]もしくは[ログイン]をクリックします。

認証画面で[LINEアカウントでログイン]をクリック

LINEアカウントのメールアドレスとパスワードを入力し、ログインしてください。

以下のような二要素認証のための4桁の数字が表示されるため

LINEアプリで4桁を入力してください。

ログイン後にアカウント情報の登録画面になりますので任意の開発者名とメールアドレスを入力し、[アカウントを作成]をクリック

登録できました。

LINEボットを開発するために開発者の所属となるプロバイダーを作成します。[新規プロバイダー]ボタンをクリック

個人開発者ですのでプロバイダー名は本名でもニックネームでも任意で設定してください。

作成できました。今日からあなたもLINE Developerの一員です！

LINEボットアカウントを作成します。以下の画面で[Messaging API]をクリックします。

チャネル作成画面で、必要項目を埋めて[作成]ボタンをクリックします。

チャネルの種類	Messaging API
プロバイダー	（作成したプロバイダー）
チャネルアイコン	任意	1度設定すると1時間変更不可素材フォルダにサンプルのJAWSアイコン素材あり
チャネル名	任意	*一度設定したら7日間変更不可
チャネル説明	任意	*埋まっていればOK
大業種	通信・情報・メディア	*ハンズオン用なので適当でOK
小業種	その他通信・情報・メディア	*ハンズオン用なので適当でOK
メールアドレス	（LINEアカウントメールアドレス）
プライバシーポリシー	空欄
サービス利用規約	空欄

[作成]ボタンをクリックします。

[同意する]をクリック

チャネル作成できました。

リッチメニュー設定

LINEのリッチメニューを設定します。[LINE official Account manager]をクリックします。

LINE Official Account Manager（公式アカウントからの配信などを行うコンソール）に画面遷移しますので、ホームタブをクリックし

左ペインからトークルーム管理＞リッチメニューをクリックします。

リッチメニュー設定画面で[作成]をクリックします。

以下のようにリッチメニューを設定し

コンテンツ設定項目で[テンプレートを選択]をクリック

小項目の以下を選択して[選択]

[テンプレートを選択]をクリックし

素材フォルダのrichmenu_awsbasics.pngをアップロードします。

アクション項目で以下を設定し、[保存]をクリックします。

タイプ	URL	アクションラベル
A	テキスト	-	ホテルを予約する
B	テキスト	-	レンタカーを予約する
C	リンク	https://twitter.com/intent/tweet?hashtags=awsbasics	ツイートする

リッチメニューが設定できました。

APIの設定を行うため、別タブで操作していたLINE Developer コンソールの画面に戻ります。チャネル基本設定タブのチャネルシークレットをメモしておきます。

Messaging API設定タブをクリックし

チャネルアクセストークンの[発行]をクリックし、表示されるトークンをメモします。

以下の2点がメモできていればOKです。

チャネルシークレット
チャネルアクセストークン

ここをつなげます。

LINEのQRコードでボットと友達になります。

リッチメニューが設置されていてウェルカムメッセージが来たら成功です。

この時点だと何のメッセージを送ってもLINE側の応答メッセージ機能でソーリー文が応答されます。

このLINEの自動応答メッセージは邪魔になるので機能オフにします。LINE Official Account Managerの[応答モード：Bot]リンクをクリックします。

応答メッセージのラジオボタン[オフ]を選択します。

次からはAWSの構築を行います。

AWSマネジメントコンソールにログインし、東京リージョンに変更します。

Lambda用のロールを作成します。IAMサービス画面でロールメニューをクリックします。

AWS ＞ Lambdaをクリックします。

Lambdaからにアクセスが必要です。以下のポリシーを選択し、[次のステップ：タグ]をクリックします。

AmazonLexRunBotsOnly

タグの追加（オプション）画面は特に設定不要ですのでそのまま[次のステップ：確認]をクリックします。

ロールを作成します。ロール名にhandson-20210605-role-linebotのとおりで設定して[ロールの作成]をクリックしてください。

作成できました。

AWS Lambdaのボットプログラム部分を作成します。

サービス名検索バーでlambdaを検索し、Lambdaサービス画面で[関数の作成]をクリックします。

一から作成メニューで以下の設定を行い[関数の作成]をクリックします。

関数名	handson-20210605-linebot
ランタイム	Node.js 12.x
実行ロールの選択または作成	既存のロールを使用する
既存のロール	handson-20210605-role-linebot

作成できました。

コードタブのアップロード元として[.zipファイル]を選択し

資材のbot.zipをアップロードして[保存]をクリックします。

コードソースがアップロードできました。

設定タブ＞一般設定＞編集

環境変数メニューをクリックし

環境変数にメモしてあったチャネルシークレット、チャネルアクセストークンを以下のとおり追加します。

変数名	説明
CHANNEL_SECRET	チャネルシークレット
CHANNEL_ACCESS_TOKEN	チャネルアクセストークン（ロングターム）

追加したら[保存]します。

APIを作ります。

マネジメントコンソールの検索バーでAPI Gatewayを検索し選択します。

HTTP APIの[構築]ボタンをクリックします。

[統合を追加]をクリック

統合タイプはLambdaを選択します。

以下の設定を行い[次へ]をクリックします。

ルートを設定します。LINEのWebhookはHTTP POSTで受ける必要がありますのでメソッドをPOST、リソースパスは/webhookとしてください。統合ターゲットは自動で選択されているはずですのでそのまま次へをクリックしてください。

ステージ設定はデフォルトのままで[次へ]をクリック

設定を確認し[作成]をクリック

このAPIをLINEからPOSTすればLINEボットLambda関数が動くことになりますね。

Lambda関数との統合を行ったので、LINEボットのLambda関数のトリガーにも追加されてます。

LINEからメッセージ投稿されたらAPI Gatewayで作ったURIがPOSTされるようにLINE DeveloperのWebhookの設定を行います。

LINE DevelopersコンソールのボットチャンネルMessagins API設定タブの中にある

Webhook URLの[編集]ボタンをクリックし

先ほどメモしたAPI GatewayのURL＋/webhookをWebhook URLとして入力し[更新]します。

[検証]ボタンをクリックし

成功と表示されることを確認します。

Webhookの利用をONにします。

これでAWSとつながった状態になりました。

亀田さんのハンズオンを参考にしてLexのIntentを作成します。

今回はテンプレートになっているBookTripをそのまま使いましょう

右上の[Publish]

aliasはprod

ボットの動作確認をしましょう。

うまく動作しない場合やハンズオンの時間があまったらCloudWatchでどういうログがどこに出力されるのかを確認しましょう。

Lambdaのログ

AWSマネジメントコンソールの検索バーでCloudWatchを入力して検索し、ログをクリックします。

[View log groups]をクリックします。

３つのLambda関数が表示されるので知りたいログのLambda関数をクリックし

任意のログストリームのリンクをクリックするとログイベント画面でログを確認することができます。

Lambdaサービス画面からでも同じ情報に辿りつくこともできますので目的や観点によって使い分けて調べることができます。

Lambda関数

index.js

const Line = require('@line/bot-sdk')
const Aws = require('aws-sdk')

const channelAccessToken = process.env.CHANNEL_ACCESS_TOKEN
const channelSecret = process.env.CHANNEL_SECRET
const lex = new Aws.LexRuntime()
const line = new Line.Client({ channelAccessToken, channelSecret })

exports.handler = async (event) => {
        console.log(JSON.stringify(event))

        // Signature validation LINEから来たデータかをbot-sdkで検証
        if (!Line.validateSignature(event.body, channelSecret, event.headers['x-line-signature'])) {
                return {
                        //不正だった場合400を返す
                        statusCode: 400,
                        body: 'Bad Request',
                }
        }
        //LINEからきたメッセージをJSON形式に変換
        const body = JSON.parse(event.body)
        const events = body.events

        // webhookのendpoint検証すると0件のイベントが送信されるので0件の時はステータスコード200を返す
        if (events.length === 0) {
                return {
                        statusCode: 200,
                        body: 'Test OK',
                }
        }

        for (let i = 0; i < events.length; i++) {
                if ('replyToken' in events[i]) {
                        const event = events[i]
                        const replyToken = event.replyToken

                        if ('message' in event) {
                                const messageEvent = event
                                //テキストメッセージ送信時の処理
                                if (messageEvent.message.type === 'text') {
                                        const inputText = messageEvent.message.text
                                        const param = {
                                                botAlias: 'prod',
                                                botName: 'BookTrip_jaJP',
                                                userId: messageEvent.source.userId,
                                                inputText
                                        }

                                        const result = await lex.postText(param).promise()

                                        const messages = []
                                        if (result.dialogState === 'ReadyForFulfillment') {
                                                messages.push({
                                                        type: 'text',
                                                        text: '予約が完了しました！'
                                                })
                                        } else {
                                                messages.push({
                                                        type: 'text',
                                                        text: result.message
                                                })
                                        }
                                        await line.replyMessage(replyToken, messages)
                                }
                        }
                }
        }

        return { 
                statusCode: 200,
                body: 'OK'
        }
}