Zenn
🦄

【とりあえずハンズオン】AWSのクイズを出題するLINE bot作成してみた！

2022/02/04に公開
AWS
LINE
Python
LINE Bot
LINE Messaging API
tech

LINE のリッチメニューと FlexMessage を使って AWS クイズアプリを作りたい

やりたいこと

LINE リッチメニューと FlexMessage を活用して AWS のクイズアプリを作りたい。

具体的には次のようなイメージの問題がLINEアプリ上で閲覧できて、しかも
選択肢をタップするとAWS認定資格の実力をチェックできるみたいなLINE bot を作りたい。

line_bot_design_2.png

ということでAWS でクイズを出してくれるLINE bot を作りましたのでその話をしていきます。

使用するAWSのサービス解説

インフラ構成図

これが今回のLINE bot で利用されるインフラ構成になります。
API Gateway、Lambda、DyanmoDBの3つを接続します。

aws

どれもAWSではメジャーなサービスですが、初めての方もいると思いますので順番に解説していきます。

API Gateway

API Gateway は Web上にAPIを構築できるサービスです。

API Gateway の APIとは何でしょうか。

API とは Application Programming Interfacesの略で
特定のアプリケーションの機能を他のアプリケーションから利用できるようにする仕組みと考えると良いでしょう。

APIは一度作成してしまえば、おおむねどのアプリケーションでも利用できるという性質を持っており
開発コストを下げることにつながります。

例えば、システムAで作成した機能をシステムBで利用したいとなったときはシステムB用に機能を作るのではなく
システムAの機能をシステムBで呼び出すといったことができるようになります。

特にWeb上で利用できるAPIのことをWeb APIと呼びます。
API Gatewayは このWeb APIを作成および利用できるようにしたサービスです。

今回はLINEとAWSをつなぐ架け橋(Gateway)の役割を果たします。

Lambda

Lambda は AWS上で動作するコンピューティングサービスです。
EC2などと同じコンピューティングサービスですが

Lambdaの主な特徴としてはサーバを持たない、サーバレスということです。

サーバレスとは言いますが、これはクラウドを利用しているユーザがサーバの管理から解放されるという意味合いであり
サーバがないわけではありません。

今回はLINE botのロジックを実装するために使用します。

DynamoDB

DynamoDBはAWSが提供するNoSQL型フルマネージドデータベースサービスです。

NoSQLとはスキーマレスのデータベース技術であり、RDB(リレーショナルデータベース)とは対極に位置している技術です。
このNoSQLをAWSがフルマネージドで提供しており、いろんな種類があるのですが
特にキーバリュー型のNoSQL DBではDynamoDBが有名です。

また、DynamoDBとLambda を合わせたアーキテクチャはサーバレスでは
よくある構成なので覚えておくと良いでしょう。

Cloud Watch(Cloud Watch Logs)

AWSには実行履歴を保存および閲覧するサービスとしてCloud Watch Logs があります。
今回のハンズオンではLambda の実行履歴を保存するために利用します。

AWS Identity and Access Management(IAM)

4つのAWSサービスをつなげてLINE bot を開発していくわけですが、サービス同士をつなぐ場合は
サービスそれぞれにアクセス権限が必要になります。

AWSには各AWSサービスのアクセス権限を制御するサービスとしてIAMがあります。
IAMには3つのタイプがあり、それぞれユーザ、グループ、ロールの三つが存在します。

今回は手元のPCからDynamoDBへのアクセスを実行するときにIAMユーザを利用します。
また、LambdaからDynamoDBへアクセスをするときにIAMロールを利用します。

使用するAWSサービスの説明は以上になりますが、これらだけではLINE bot を開発することはできません。
LINE bot を開発するには次に説明するMessaging APIについて理解する必要があります。
具体的にはリッチメニューやFlexMessageです。順番に見ていきましょう。

使用するLINEのサービス解説

Messaging APIとは

Messaging APIとは(公式説明引用)

Messaging APIを使って、ユーザー個人に合わせた体験をLINE上で提供するボットを作成できます。
作成したボットは、LINEプラットフォームのチャネルに紐づけます。
チャネルを作成すると生成されるLINE公式アカウントをボットモードで運用すると、LINE公式アカウントがボットとして動作します。

参考:Messaging APIの概要

要するにLINEアプリ上で動作するLINE bot を作成できるAPIのことです。
Messaging APIを活用することでリッチメニューやFlexMessage を利用することができます。

LINE リッチメニューとは

LINE リッチメニューとは(公式説明引用)

LINE のトーク画面下部に固定で表示されるメニュー機能です。
画面を大きく占有するためユーザーの注意を引きやすく、
クリエイティブとともにリンクを設定することで、LINE 公式アカウントの各機能のほか、
外部サイトや予約ページなどにユーザーを誘導することができます。

参考：リッチメニューとは LINE 公式

要するにユーザに対して問いかけができるインタラクティブなメニューのこと
メッセージや画像、スタンプはユーザに対して一方的に送って表現することが目的であることに対して
リッチメニューはユーザに項目を選択してもらう為の仕組みです。

FlexMessage とは

FlexMessageとは(公式説明引用)

Flex Message は、レイアウトをカスタマイズできるメッセージです。
CSS Flexible Box（CSS Flexbox） (opens new window)の基礎知識を使って、レイアウトを自由にカスタマイズできます。
Flex コンテナが Flex Message のボックスに対応しています。

参考：Flex Message を送信する

要するに CSS でレイアウトできるテキストメッセージのことです。
リンクやテキスト、画像を添付して LINE のメッセージを表現できます。

FlexMessageには大きく分けて2種類のメッセージタイプがあります。

  • バブルメッセージ
  • カルーセルメッセージ

バブルメッセージはHTMLライクなメッセージを実現できるメッセージタイプです。
ヘッダー、ヒーロー、本文、フッターの4つで構成されています。

カルーセルメッセージはバブルメッセージを束ねて同じ画面領域内に
複数のバブルメッセージを横並びで表示させることができるメッセージタイプです。

LINE_bot_designer_2.gif

FlexMessageはJSONによって表現される為、スクリプト上で扱うこともできます。
FlexMessageを作成する方法としましてはいくつか方法があります。
具体的には

  • Flex Message Simulator
  • LINE bot designer

など手段がありますが、今回はLINE bot designer を利用します。

LINE bot designer

LINE bot designer を使うと簡単にFlexMessage が作成できるだけなく
友達追加からトークのやりとりまでをシュミレータで体験することができます。

LINE_bot_designer.gif

ここまでで使用するサービスの解説は以上になります。
次にハンズオン資料を利用して環境構築を実行していきます。

環境構築

LINE 開発者アカウントの作成

LINE Developers Console に初めてログインする場合は開発者アカウントを作成する必要があります。(参考URL)

まだ、アカウントを作成されていない場合はアカウントの作成が必要ですので作成します。
コンソールをクリックします。

console_login.png

「LINE アカウントでログイン」をクリックします。
console_login_2

LINE のユーザ ID とパスワードを入力して「ログイン」をクリックします。

console_login_3-1.png

認証画面になりますので、LINEアプリをインストールしている
スマートフォンから認証画面に映る4桁の数値をスマートフォンに入力します。

auth.png

アカウント作成画面に遷移しますので開発者名とメールアドレスを入力します。
「アカウントを作成」をクリックします。
account.png

以下の画面に遷移しましたら、アカウントが作成できています。
※右上のメッセージに注目

account2.png

最後にウィンドウ左上の「LINE Developers」をクリックしてトップに戻ります。

account3.png

AWS マネジメントコンソールのアカウント(ルートアカウント)を作成

AWS に まだアカウントを作成されていない方はAWSアカウント作成の流れからアカウントの作成をお願いできればと思います。

AWSアカウント作成時にやるべきこと

無事ルートアカウントを作成できましたらルートアカウントを保護してIAMユーザを作成します。
NRIさんの資料にとても詳しく書いてありますので
内容ご確認の上、セットアップしていただければと思います。

ハンズオン資料

今回利用するスクリプトやファイルはGitHubに保存されていますので
あらかじめダウンロードして解凍していただければと思います。
(ソースコードをダウンロード)

今回はデスクトップ上に解凍してハンズオンをやっていきます。

解凍後のディレクトリ構成は以下のようになります。

【Windowsの場合】

C:\Users\ユーザ名\Desktop\quiz-bot-hands-on
|   .gitignore
|   LICENSE
|   README.md
|   setup_lambda.bat
|   setup_lambda.ps1
|   setup_lambda.sh
|   
+---cloudtech_quiz_bot
|       lambda_function.py
|       
+---dynamodb_migrate
|       .env_sample
|       .gitignore
|       flex_messages.json
|       LICENSE
|       main.py
|       py_exe.bat
|       py_exe.sh
|       README.md
|       score_model.py
|       setup.bat
|       setup.sh
|       
+---iam
|       cloudtech_quiz_bot.json
|       dynamodb_migrate_iam.json
|       
+---line_bot_designer
|       AwsQuizBot.lbd
|       
\---line_rich_menu
    |   .env_sample
    |   .gitignore
    |   main.py
    |   py_exe.bat
    |   py_exe.sh
    |   README.md
    |   setup.bat
    |   setup.sh
    |   
    \---img
            menu.png

【MacOSの場合】

/Users/ユーザ名/Desktop/quiz-bot-hands-on
├── ./.gitignore
├── ./LICENSE
├── ./README.md
├── ./cloudtech_quiz_bot
│         └── lambda_function.py
├── ./dynamodb_migrate
│         ├──.env_sample
│         ├──.gitignore
│         ├──LICENSE
│         ├──README.md
│         ├──flex_messages.json
│         ├──main.py
│         ├──py_exe.bat
│         ├──py_exe.sh
│         ├──score_model.py
│         ├──setup.bat
│         └──setup.sh
├── ./iam
│       ├── cloudtech_quiz_bot.json
│       └── dynamodb_migrate_iam.json
├── ./line_bot_designer
│         └── AwsQuizBot.lbd
├── ./line_rich_menu
│         ├── .env_sample
│         ├── .gitignore
│         ├── README.md
│         ├── img
│         │    └── menu.png
│         ├── main.py
│         ├── py_exe.bat
│         ├── py_exe.sh
│         ├── setup.bat
│         └── setup.sh
├── ./setup_lambda.bat
├── ./setup_lambda.ps1
└── ./setup_lambda.sh

実行環境

実行環境は以下の通りです。

  • Windows 10
  • MacOS Monterey

Python のバージョンは3.8以上3.9.6以下で動作確認をしております。
今回はPython 3.9.6 でハンズオンをやっていきます。

Python は以下のURLを参考にインストールしていただければと思います。

【Windowsの場合】
Python Japan Windows

【MacOSの場合】
Python Japan MacOS

加えて今回はLINE bot designer を使って実際にFlexMessage の動きやリッチメニューの動きを確認しますので
インストールをお願いできればと思います。

今回使うFlexMessageの紹介

それではbot designer で FlexMessage のイメージ を確認していきましょう。
line_bot_designerフォルダを開きます。

line_bot_designerにはbot designer でロードが可能なファイル(AwsQuizBot.lbd)が入っていますのでLINE bot designer で開いてみましょう。

ファイルを開きましたら上から2つめの四角アイコンをクリックします。
line_bot_design_0.png

そうすると、今回利用するFlexMessage のイメージがあります。

line_bot_design_2.png

このようにしてFlexMessageのイメージを確認できます。
ちなみにボタンに入る文字数は全角半角問わず20文字程度が限界です。以降は3点リーダで省略されます。

今回使用するリッチメニューの紹介

FlexMessageができましたら問題の出題を開始してくれるようにリッチメニューを作ります。
リッチメニューに利用できる画像にはいくつかの要件があります。

リッチメニューで使用する画像を準備します。
リッチメニューの画像は以下の要件を満たす必要があります。
画像フォーマット：JPEGまたはPNG
画像の幅サイズ（ピクセル）：800以上、2500以下
画像の高さサイズ（ピクセル）：250以上
画像のアスペクト比（幅/高さ）：1.45以上
最大ファイルサイズ：1MB

なお、LINE bot designer では
横は2500ピクセル、縦は1686または843ピクセルしか選択できない仕様になっています。

ゆえにリッチメニューに使用する画像の要件は横は2500ピクセル、縦は843ピクセルとします。
実際に作ってみた画像がこちらです。

menu.png

LINE bot designer から確認する場合は鉛筆マークをクリックすることで確認できます。

line_bot_design_menu.png

botの全体像(見た目)

これでFlexMessage と リッチメニューの二つが用意できました。

FlexMessageやリッチメニューがスマートフォン上でどのように映るのかを確認するために

今回はLINE bot designer選択できる比較的画面サイズの大きいiPhone XS MAX と
比較的画面サイズの小さいiPhone8でプレビューをしてみます。

※もちろん、LINE bot designerで選択できる他のスマートフォンのイメージでも構いません。
ぜひ、イメージを確認してみてください。

fukidashi.png

歯車マークから端末の種類を変更して「iPhone XS MAX」をクリックします。

device.png

iPhone XS MAX でLINE bot を開いた場合

iPhone_XS_MAX.png

iPhone8でLINE bot を開いた場合はこんな感じになります。

iPhone_8.png

出題開始をしまうことでなんとか問題文を表示できるくらいですね。
それではだいたいのイメージができましたのでLINE bot の要件を決めていきましょう。

LINE bot を作る前に

リッチメニューとFlexMessageが完成しましたのでこれらをどういうタイミングで利用するかを決めるために
実装する機能と保存を必要とするデータをリストにしておきましょう。

LINE botの機能を定義

AWSに関するクイズを出題するbotを作成する上で必要な機能は何かを定義します。

  • 問題を出題する機能
  • 正解を返信する機能
  • 不正解を返信する機能
  • 採点結果をDBに登録する機能
  • 採点終了を告知する機能

保存を必要とするデータを定義

AWSに関するクイズを出題するbotを作成する上で保存が必要なデータは何かを定義します。
これらのデータはDynamoDBに保存するデータとなります。

UserScore テーブル(LINE bot を実際に利用するユーザのデータ)

キー キーの説明
answer LINE ユーザID
scores ユーザの採点データ

Scoreテーブル(AWSの問題データ)

キー キーの説明
question_id 問題を管理するID
question AWSに関する問題
answer AWSに関する問題の正答
score AWSに関する問題のポイント

フローチャート

algo.png

実装イメージ

正解の場合

LINE_bot_designer_OK.gif

不正解の場合
LINE_bot_designer_NG.gif

問題終了時
LINE_bot_designer_END.gif

要件、フローチャート、実装イメージが固まりましたので実際にLINE bot を作成してみましょう。

LINE のアカウントで MessagingAPI の Bot を作成

ログイン

LINE Developer Console にログインします。

console_login

「LINE アカウントでログイン」をクリックします。
console_login_2

LINE のユーザ ID とパスワードを入力して「ログイン」をクリックします。

console_login_3-1.png

※既にログイン済みの方も同様に「ログイン」をクリックします。

console_login_3.png

プロバイダーの作成

ログインに成功しましたら「プロバイダー」を作成します。
「作成」をクリックします。

provider_0.png

※アカウントを初めて作成された方や初めてプロバイダを作成される方の場合は
「新規プロバイダー作成」をクリックします。

account2-1.png

新規のプロバイダー名にはcloud_tech_lと入力して「作成」をクリックします。

provider_1.png

作成が完了すると以下の画面に遷移するので「Messaging API 」をクリックします。

provider_3.png

新規チャネルの作成

プロバイダーの管理画面から「Messaging API 」をクリック 後はチャネルを作成します。

チャネルは以下のように設定します。

設定項目 値
チャネルの種類 Messaging API
プロバイダー cloud_tech_l
チャネル名 AwsQuizBot
チャネルの説明 AWS のクイズを出題する Bot です。
大業種 ウェブサービス
小業種 ウェブサービス(その他)
メールアドレス LINEアカウントに登録済みのメールアドレス

line_dc_1.png
line_dc_2.png

規約同意にチェックを入れて「作成」をクリックします。

line_dc_3.png

作成内容を聞かれるので確認して「OK」をクリックします。

line_dc_4.png

情報利用に関する同意について聞かれるので「同意する」をクリックします。
line_dc_5.png

チャネルが完成すると画面遷移して以下の画面が表示されます。

line_dc_7.png

「チャネルアクセストークン」をコピー

外部から LINE を操作する為の「チャネルアクセストークン」を発行します。

「Messaging API 設定」をクリックします。

line_dc_8.png

下方向にスクロールして「チャネルアクセストークン」の項目から発行ボタンをクリックします。

line_dc_9.png

長い文字列が表示されるので長い文字列のすぐ右にあるコピーボタンをクリックして
チャネルアクセストークンをテキストに保存します。

line_dc_9-1.png

応答メッセージと挨拶メッセージをオフにする

LINE公式アカウント には友達追加時やメッセージを送ったときにメッセージを返信するという機能があります。
この機能は今回利用しないのでオフにします。

「Messaging API 設定」から「編集」をクリックします。

line_dc_10.png

デフォルトではオンになっていますのでそれぞれオフにしましょう。

line_dc_12.png

LINE bot の初期設定が完了しましたので次にリッチメニューを設定していきましょう。

リッチメニューを設定 - スクリプトで設定

今回はリッチメニューをPythonのスクリプトで設定します。

【Windowsの場合】
line_rich_menuフォルダをエクスプローラで開いてsetup.batをダブルクリックで実行します。
実行と同時に.env ファイルが作成されますので
.envファイルにLINE_CHANNEL_ACCESS_TOKENを記載します。

LINE_CHANNEL_ACCESS_TOKEN=ここにアクセストークンを記載(ダブルクォーテーションは要りません)

.envファイルにアクセストークンの記載が終わりましたらpy_exe.batをダブルクリックで実行します。

【MacOSの場合】
line_rich_menuフォルダをターミナルで開きます。
ターミナル上で以下のように実行します。

chmod +x setup.sh
./setup.sh

実行と同時に.env ファイルが作成されますので
.envファイルにコピーしたチャネルアクセストークンをLINE_CHANNEL_ACCESS_TOKENに記載します。

LINE_CHANNEL_ACCESS_TOKEN=ここにアクセストークンを記載(ダブルクォーテーションは要りません)

.envファイル の編集が完了しましたらターミナル上で以下のコマンドを実行します。

chmod +x py_exe.sh
./py_exe.sh

エラーが出ることなくDone!という文字だけが返ってくればOKです。

インフラ構築

DynamoDB用 IAMユーザを作成

DynamoDBへのデータインポートはローカルPC上で実行します。
そのためには今回実行するスクリプト用にIAMユーザを作成する必要があります。
※コンソール権限は不要

AWSマネジメントコンソールからIAMのダッシュボードを開きます。
ダッシュボードから「ポリシー」をクリックします。

iam_1

続いて、「ポリシーの作成」をクリックします。

iam_2

「JSON」をクリックします。
iam_3

4行程度既に入力されていますが、上書きします。
iam_4

iamフォルダよりdynamodb_migrate_iam.jsonを開いてコピーアンドペーストします。

dynamodb_migrate_iam.json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "dynamodb:PutItem",
                "dynamodb:DescribeTable",
                "dynamodb:CreateTable"
            ],
            "Resource": "*"
        }
    ]
}

「次のステップ:タグ」をクリックします。
タグを作成の画面では「キー」をDynamoDB、値をPutItemとします。
「タグを追加」をクリックします。

iam_5

「次のステップ：確認」をクリックします。

ポリシーの確認画面に遷移しますので名前と説明を入力します。

名前はdPutItem
説明はThis is a policy that allows PutItem to DynamoDB.とします。

iam_6

「ポリシーの作成」をクリックします。

ここで作成したIAMポリシーを元にIAMユーザーを作成します。

「ユーザー」をクリックします。
iam_7

「ユーザーを追加」をクリックします。
iam_8

ユーザ名をDynamoDB-Userに設定します。

AWS認証情報タイプの選択では「アクセスキー - プログラムによるアクセス」にだけチェックをいれます。
「次のステップ：アクセス権限」をクリックします。
iam_9

先ほど作成したIAMポリシーをアタッチします。
「既存のポリシーを直接アタッチ」をクリックします。

iam_10

ポリシーのフィルタにdPutと入力して検索にヒットしたdPutItemにチェックをいれます。

iam_11

「次のステップ:タグ」 をクリックします。

iam_12

キーにDynamoDB、値にPutItemと入力します。

iam_13

「次のステップ:確認」をクリックします。

iam_14

画面遷移後に「ユーザの作成」をクリックします。

iam_15

ユーザ作成後にアクセスキーとシークレットアクセスキーが表示されます。
CSVをダウンロードするかまたは画面上でコピーするかして控えておきましょう。

今回は画面上でアクセスキーとシークレットアクセスキーをコピーします。
コピーボタンのクリックでアクセスキーをコピーしてテキストに保存します。

「表示」リンクのクリックでシークレットアクセスキーが表示されて
文字全体が選択されますのでクリックしてシークレットアクセスキーをコピーしてテキストに保存します。

iam_16

コピーが終わりましたら「閉じる」をクリックします。
これでIAMユーザーは完成です。

Lambda用 IAM のロールの作成

Lambda用のIAMロールを作成するためIAMのダッシュボードから「ポリシー」をクリックします。

iam_1

続いて、「ポリシーを作成」をクリックします。

iam_2

「JSON」をクリックします。
iam_3

4行程度既に入力されていますが、上書きします。
iam_4

今回、Lambdaには以下の権限が必要になります。

  • CloudWatch Logs への権限
  • DynamoDB への権限

LambdaのログはCloudWatch Logs に関数名で保存されますので
Lambda関数の名前はcloudtech_quiz_botとします。

iamフォルダよりcloudtech_quiz_bot.jsonを開いて中身をコピーアンドペーストします。
※「XXXXXXXXXXXX」 には自分のアカウントIDが入りますので適宜、置き換えていただくようお願いします。

なお、アカウントIDはAWSマネジメントコンソールの右上にあるご自身の名前をクリックすることで表示されるIDのことです。
アカウントID右側にあるコピーアイコンをクリック

account_id

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "logs:CreateLogGroup",
            "Resource": "arn:aws:logs:ap-northeast-1:XXXXXXXXXXXX:*"
        },
        {
            "Effect": "Allow",
            "Action": [
                "logs:CreateLogStream",
                "logs:PutLogEvents"
            ],
            "Resource": [
                "arn:aws:logs:ap-northeast-1:XXXXXXXXXXXX:log-group:/aws/lambda/cloudtech_quiz_bot:*"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "dynamodb:CreateTable",
                "dynamodb:DescribeTable",
                "dynamodb:PutItem",
                "dynamodb:GetItem",
                "dynamodb:DeleteItem"
            ],
            "Resource": "arn:aws:dynamodb:ap-northeast-1:XXXXXXXXXXXX:table/UserScore"
        },
        {
            "Effect": "Allow",
            "Action": [
                "dynamodb:GetItem"
            ],
            "Resource": "arn:aws:dynamodb:ap-northeast-1:XXXXXXXXXXXX:table/Score"
        }
    ]
}

「次のステップ:タグ」 をクリックします。
iam_12

「タグを追加」をクリックします。
キーはbot、値はquizとします。
iam_12-1

「次のステップ」をクリックします。

iam_policy_add.png

ポリシー名はquiz_bot_policyとして説明にはquiz bot policyと入力します。

iam_12-3

「ポリシーの作成」をクリックします。
IAMポリシーが作成できましたらこのIAMポリシーを元にIAMロールを作成します。

「ロール」をクリックします。

iam_12-4

「ロールを作成」をクリックします。

iam_role_add.png

一般的なユースケースから「Lambda」を選択して次のステップをクリックします。

iam_12-5

iam_add_2.png

ポリシーのフィルタにquizと入力してIAMポリシーquiz_bot_policyにチェックを入れます。
iam_12-6

「次のステップ」をクリックします。

キーをquiz、値をroleとします。

iam_12-7

次のステップをクリックします。

ロール名をquiz_bot_roleとして「ロールの作成」をクリックします。

iam_12-8

これでLambda 用のIAMロールは完成です。

DynamoDB 問題文のセットアップ

LINE bot に利用する問題文をDynamoDBに保存するために
Pythonのスクリプトを実行します。

【Windowsの場合】

dynamodb_migrate フォルダをエクスプローラで開いてsetup.batをダブルクリックで実行します。
実行と同時に.env ファイルが作成されますので
先ほど作成したIAMユーザのアクセスキーIDとシークレットアクセスキーを.envファイルに記載します。

aws_access_key_idはアクセスキーIDに置き換えて
aws_secret_access_keyはシークレットアクセスキーに置き換えます。

aws_access_key_id=aws_access_key_id
aws_secret_access_key=aws_secret_access_key

.envファイル の編集が完了しましたらpy_exe.batをダブルクリックで実行します。

【MacOSの場合】

dynamodb_migrate フォルダをターミナルで開きます。
ターミナル上で以下のように実行します。

chmod +x ./setup.sh
./setup.sh

実行と同時に.env ファイルが作成されますので
先ほど作成したIAMユーザのアクセスキーIDとシークレットアクセスキーを.envファイルに記載します。

aws_access_key_idはアクセスキーIDに置き換えて
aws_secret_access_keyはシークレットアクセスキーに置き換えます。

aws_access_key_id=aws_access_key_id
aws_secret_access_key=aws_secret_access_key

.envファイル の編集が完了しましたらターミナルを起動して以下のコマンドを実行します。

chmod +x ./py_exe.sh
./py_exe.sh

エラーが出ることなくDone!という文字だけが返ってくれば、問題文のFlexMessage がDynamoDBに格納されています。

DynamoDBのダッシュボードを開いて問題文が格納されていることを確認します。
AWSマネジメントコンソールからDynamoDBのダッシュボードを開きます。

今回は東京(ap-northeast-1)リージョンで環境を構築しますので
AWSマネジメントコンソールにあるリージョンの表記が「東京」になっていることを確認します。

lambda

リージョンが東京であることを確認しましたら「テーブル」をクリックします。

d_migrate_add_1.png

テーブルの一覧にScoreというテーブルありますのでクリックします。

d_migrate_3.png

Scoreテーブルをクリックすると以下の画面に遷移しますのでScoreを一度クリックして
「テーブルアイテムの探索」をクリックします。

DynamoDB_iam_add_3.png

画面右側が遷移して「返された項目」から3行のデータが確認できましたら、問題無くスクリプトが実行できています。

DynamoDB_iam_add_4.png

Lambda - 問題出題用の関数を作成

次にLINE bot 用にcloudtech_quiz_botという関数をLambdaに作成します。
AWSマネジメントコンソールからLambdaのダッシュボードを開いて「関数の作成」をクリックします。

今回は東京(ap-northeast-1)リージョンで環境を構築しますので
AWSマネジメントコンソール右上にあるリージョンの表記が「東京」になっていることを確認します。

lambda

関数は一から作成します。
基本的な情報、デフォルトの実行ロールの変更、詳細設定は以下のように入力

基本的な情報

項目 値
関数名 cloudtech_quiz_bot
ランタイム Python3.9
アーキテクチャ x86_64

デフォルトの実行ロールの変更

項目 値
デフォルトの実行ロールの変更 既存のロールを利用する
既存のロール quiz_bot_role

詳細設定

項目 設定内容
コードの署名 チェックをはずす
ネットワーク チェックをはずす

※デフォルトでチェックがはずれているとは思いますが、チェックがはずれていることを確認してください。
最後に「関数の作成」をクリックします。

コードソースの画面に遷移しましたら
環境変数 LINE_CHANNEL_ACCESS_TOKENを作成します。
コードソースの設定をクリックします。

lambda

環境変数をクリックして編集をクリックします。
lambda

環境変数の追加をクリック後、キーと値をそれぞれ入力します。

なお、暗号化設定についてですが
「転送時の暗号化に使用するヘルパーの有効化」からチェックがはずれていることを確認します。
「保管時に暗号化するAWS KMSキー」はデフォルトに設定します。

最後に保存をクリックします。

lambda

次に一般設定でタイムアウト秒を3秒から15秒に変更します。
一般設定をクリックします。
lambda

編集をクリックします。
lambda

タイムアウト秒を15秒に変更して保存をクリックします。
lambda

Lambdaの基本設定ができましたらcloudtech_quiz_bot.zipを作成します。

【Windowsの場合】
quiz-bot-hands-onフォルダをエクスプローラで開いてsetup_lambda.batをダブルクリックで実行します。

【MacOSの場合】

quiz-bot-hands-onフォルダ内にあるsetup_lambda.shをターミナル上で実行します。

chmod +x setup.sh
./setup.sh

問題なくzipを作成できましたらcloudtech_quiz_bot.zipをLambdaにアップロードします。

コードをクリックします。
lambda

アップロード元をクリックして.zipファイルを選択します。
lambda

アップロードをクリックして先ほど作成したcloudtech_quiz_bot.zipをアップロードします。
そして、保存をクリックします。

パッケージが大きすぎるのでLambda上のコードソースからソースコードが見えませんが
コードプロパティのパッケージサイズがおおよそ12.5MB前後であればOKです。
※圧縮サイズは利用ライブラリのバージョンによって今後変わる可能性があります。

lambda

API GatewayでAPIのエンドポイントを作成

Lambda関数が作成できましたのでLambda関数をWebAPIとして利用できるようにしましょう。
AWSマネジメントコンソールからAPI Gateway を開きます。

API Gateway でプライベートではないほうのREST API を構築します。
構築をクリックします。

api_gateway

プロトコルを選択する、新しいAPIの作成、名前と説明 は 以下のように入力します。

項目 値
プロトコルを選択する REST
新しい API の作成 新しい API

名前と説明

項目 値
API名* quiz_bot
説明 AWS認定資格実力チェックAPI
エンドポイント リージョン

入力が終わりましたら「APIの作成」をクリックします。

api_gateway

「APIの作成」をクリックすると以下の画面に遷移します。
api_gateway

次にリソースのアクションからメソッドの作成をクリックします。

api_gateway

POSTを選択して
api_gateway

チェックをクリックします。
api_gateway

設定が終わりましたら「保存」をクリックします。

api_gateway

Lambda 関数に権限を追加するか聞かれるので「OK」をクリックします。
api_gateway

最後にAPIをデプロイします。
「アクション」から「APIのデプロイ」をクリックしてステージを設定します。

api_gateway

項目 設定内容
デプロイされるステージ 新しいステージ
ステージ名 quiz
ステージの説明 AWS認定資格実力チェックAPI
デプロイメントの説明 AWS認定資格実力チェックAPI

各項目で設定が終わりましたらデプロイをクリックします。

api_gateway

デプロイが完了しましたらウィンドウ右側にエンドポイントURLがあるのでコピーしてテキストに保存しておきます。

api_gateway

このエンドポイントURLを次のWebhookの設定で利用します。

Webhook に問題出題用 API のエンドポイントを設定

LINE Developers コンソールに戻り、WebhookのURLを登録します。
Messaging API設定 にある Webhookの設定からAPI GatewayのエンドポイントURLを入力するため、編集をクリックします。

line_dc_13

WebhookにAPI GatewayのエンドポイントURLを入力して更新をクリックします。

line_dc_13-1

最後に検証をクリックして作成したAPIの疎通確認を実行します。

以下のように「成功」と表示されればOKです。

line_dc_15

最後にWebhookを有効にします。

オフの状態からオンに変更します。
webhook

余談) AWS側ではLINE の検証Webhook はどのように映るのか

検証Webhook の動作を確認するにはCloudWatch Logs で保存されたログから
どのようなデータが送られてきているのかを確認できます。

※今回のbotではevent オブジェクトをprint 文で表示するようにしており、print文の結果はCloudWatch Logsで確認できます。

{
  "resource": "/",
  "path": "/",
  "httpMethod": "POST",
  "headers": {
    "content-type": "application/json; charset=utf-8",
    "Host": "YYYYYYYY.execute-api.ap-northeast-1.amazonaws.com",
    "User-Agent": "LineBotWebhook/2.0",
...
    "domainName": "YYYYYYYY.execute-api.ap-northeast-1.amazonaws.com",
    "apiId": "YYYYYYYY"
  },
  "body": "{\"destination\":\"xxxxxxxxxx\",\"events\":[]}",
  "isBase64Encoded": false
}

今回はevents キーの配列の長さからWebhookの検証かどうかを判定しています。

動作確認

確認項目

https://youtu.be/CvizzK0t9bI

今回は完成品の動作を動画で確認できるようにしました。

実際にLINE bot を友達登録してAWSにまつわるクイズを解いてみましょう。
友達登録をする場合はLINE Developers Console の「MessagingAPI 設定」から友達登録用のQRコードが確認できます。

dousakakuni.png

動画のようにLINE bot が動作しましたら完成です！！
試すことができましたら片付けをしていきましょう。

片付け

API Gatewayの削除

APIの一覧からAPIを削除します。
今回作成したquiz_botにチェックを入れて「Delete」をクリックします。
remove

削除するか聞かれるので削除をクリックします。
remove

Lambdaの削除

今回作成した関数(cloudtech_quiz_bot)にチェックを入れてアクションから「削除」をクリックします。
remove

削除するか聞かれるので削除をクリックします。
remove

DynamoDB テーブルの削除

今回作成したScoreとUserScoreを選択して「削除」をクリックします。
remove

削除するか聞かれるので「削除」と入力して「テーブルの削除」をクリックします。
remove

IAM ユーザー の削除

IAMユーザを削除します。
IAMのトップ画面から「ユーザ」をクリックします。
remove

DynamoDB-Userにチェックを入れて削除をクリックします。
remove

削除するか聞かれるのでDynamoDB-Userと入力して「削除」をクリックします。
remove

IAM ロール の削除

IAMロールを削除します。
IAMのトップ画面から「ロール」をクリックします。

remove

quiz_bot_role にチェックを入れて「削除」をクリックします。
remove

削除するか聞かれるのでquiz_bot_role と入力して「削除」をクリックします。
remove

IAM ポリシーの削除

IAMポリシーを削除します。
IAMのトップ画面から「ポリシー」をクリックします。

remove

dPutItemにチェックを入れて削除をクリックします。
remove

削除するか聞かれるのでdPutItemと入力して「削除」をクリックします。
remove

CloudWatchLogs の ログ削除

最後にLambdaにCloudWatch Logの権限を与えていましたので
CloudWatchLogsに保存されているログを削除します。
remove

削除するか聞かれるので「削除」をクリックします。
remove

LINE チャネルの削除

botで利用したチャネルを削除します。

LINE Developers Console のチャネル一覧から
cloudtech_l をクリックします。

remove

AwsQuizBot をクリックします。
remove

チャネルの基本設定をクリックします。
remove

チャネルの基本設定にあるチャネルの削除をクリックします。
下方向にスクロールして「削除」をクリックします。
remove

削除するか聞かれるので「LINE Official Account Managerを表示」をクリックします。
remove

同意にチェックをいれてアカウント削除をクリックします。
remove

削除するか聞かれるので「削除」をクリックします。
remove

LINE Official Account Manager のウィンドウを閉じます。

LINE プロバイダーの削除

チャネルを管理していたプロバイダーを削除します。
削除するプロバイダー名をプロバイダーの一覧からクリックします。
remove

プロバイダー設定からプロバイダーの削除をクリックします。
remove

削除するか聞かれるのでプロバイダーIDを入力して「削除」をクリックします。
remove

おわり

Discussion