174
サーバーレスで作る チャットBot ハンズオン

【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

  • Upload
    s1hit

  • View
    1.143

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

サーバーレスで作る チャットBot

ハンズオン

イントロダクション

自己紹介

伊藤博司(いとうひろし)

株式会社オプティマ

島根開発センター所属

ソフトウェアエンジニア

好きなAWSサービスrarr Lambda API Gateway

2

イントロダクション

アジェンダ 使用するAWSサービス

サーバーレスアーキテクチャーとは

ハンズオンの注意

ハンズオン

1-‐‑‒1 天気予報 API の作成

1-‐‑‒2 天気予報 API の修正

2-‐‑‒1 Bot の作成

2-‐‑‒2 Bot との連携

2-‐‑‒3 Slack との連携

3-‐‑‒1 Citiesテーブルの作成

3-‐‑‒2 Botの修正1

3-‐‑‒3 Botの修正2

3

イントロダクション

使用するAWSサービス

AWS Lambda

サーバーのプロビジョニング(準備)をせずにコードを実行行

最大5分まで実行行可能

利利用可能な言語

Nodejs(v010 および v43) Python Java8

AWS API Gateway

RESTfulAPIの作成と管理理

Lambda外部 WEB サービス(Proxy)AWS のサービスAPIを呼び出し可能

Amazon DynamoDB

マネージドな NoSQL データベースサービス

スキーマレス

4

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

6

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

7

常時稼働

障害の考慮

負荷分散

ロギングモニタリング

パッチの適用

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

8

常時稼働

障害の考慮

負荷分散

ロギングモニタリング

パッチの適用

メンテナンスやキャパシティに気を配る必要があり運用負荷が大きい 未使用のリソースがありコスト効率率率が良良くない

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

9

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

10

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

11

フルマネージドサービスを使って運用管理理はAWSにおまかせ イベント発生分の使用料料を支払えば良良いのでコスト効率率率が良良い

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

特徴

イベントドリブン型のアーキテクチャー

サーバーを稼働し続けず必要な時にリソースを使う

使った分だけ課金金されるためコスト効率率率が良良い

メンテナンスやキャパシティーの心配事から開放される

運用に関わるコストを削減できる

12

ハンズオン

ハンズオン

用意するもの

AWS アカウント

httpsportalawsamazoncomgpawsdeveloperregistrationindexhtml

Slack チーム

httpsslackcom

14

ハンズオン

ハンズオンの目的

Slack のメッセージに反応する簡単な ChatBot 作成を通してAPI Gateway Lambda DynamoDB の理理解を深める

サーバーレスアーキテクチャーの具体例例を体験する

15

ハンズオン

ハンズオンの注意点

ハンズオンで使用するリソース名などは誤って設定すると Bot が正しく動作しません

emsp 直接入力力せずに以下ページからコピペしてください

httpsgithubcoms1hit20160604_aws_handson

当ハンズオンの手順は以下5つのリージョンで実施可能ですが(201664現在)

emsp 資料料上は「バージニア北北部」にて説明しています

バージニア北北部

オレゴン

アイルランド

フランクフルト

東京

16

ハンズオン1-‐‑‒1 天気予報 API の作成

ハンズオン1-‐‑‒1 天気予報 API の作成

概要

API Gateway で天気予報 API を作成する

livedoor 社の「お天気Webサービス」にリクエストしレスポンスをそのまま返却(Proxy)

地域は「松江市」固定

18

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

1 2

34

ハンズオン1-‐‑‒1 天気予報 API の作成

「米国東部(バージニア北北部)」リージョンを選択

19

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 2: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

イントロダクション

自己紹介

伊藤博司(いとうひろし)

株式会社オプティマ

島根開発センター所属

ソフトウェアエンジニア

好きなAWSサービスrarr Lambda API Gateway

2

イントロダクション

アジェンダ 使用するAWSサービス

サーバーレスアーキテクチャーとは

ハンズオンの注意

ハンズオン

1-‐‑‒1 天気予報 API の作成

1-‐‑‒2 天気予報 API の修正

2-‐‑‒1 Bot の作成

2-‐‑‒2 Bot との連携

2-‐‑‒3 Slack との連携

3-‐‑‒1 Citiesテーブルの作成

3-‐‑‒2 Botの修正1

3-‐‑‒3 Botの修正2

3

イントロダクション

使用するAWSサービス

AWS Lambda

サーバーのプロビジョニング(準備)をせずにコードを実行行

最大5分まで実行行可能

利利用可能な言語

Nodejs(v010 および v43) Python Java8

AWS API Gateway

RESTfulAPIの作成と管理理

Lambda外部 WEB サービス(Proxy)AWS のサービスAPIを呼び出し可能

Amazon DynamoDB

マネージドな NoSQL データベースサービス

スキーマレス

4

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

6

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

7

常時稼働

障害の考慮

負荷分散

ロギングモニタリング

パッチの適用

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

8

常時稼働

障害の考慮

負荷分散

ロギングモニタリング

パッチの適用

メンテナンスやキャパシティに気を配る必要があり運用負荷が大きい 未使用のリソースがありコスト効率率率が良良くない

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

9

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

10

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

11

フルマネージドサービスを使って運用管理理はAWSにおまかせ イベント発生分の使用料料を支払えば良良いのでコスト効率率率が良良い

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

特徴

イベントドリブン型のアーキテクチャー

サーバーを稼働し続けず必要な時にリソースを使う

使った分だけ課金金されるためコスト効率率率が良良い

メンテナンスやキャパシティーの心配事から開放される

運用に関わるコストを削減できる

12

ハンズオン

ハンズオン

用意するもの

AWS アカウント

httpsportalawsamazoncomgpawsdeveloperregistrationindexhtml

Slack チーム

httpsslackcom

14

ハンズオン

ハンズオンの目的

Slack のメッセージに反応する簡単な ChatBot 作成を通してAPI Gateway Lambda DynamoDB の理理解を深める

サーバーレスアーキテクチャーの具体例例を体験する

15

ハンズオン

ハンズオンの注意点

ハンズオンで使用するリソース名などは誤って設定すると Bot が正しく動作しません

emsp 直接入力力せずに以下ページからコピペしてください

httpsgithubcoms1hit20160604_aws_handson

当ハンズオンの手順は以下5つのリージョンで実施可能ですが(201664現在)

emsp 資料料上は「バージニア北北部」にて説明しています

バージニア北北部

オレゴン

アイルランド

フランクフルト

東京

16

ハンズオン1-‐‑‒1 天気予報 API の作成

ハンズオン1-‐‑‒1 天気予報 API の作成

概要

API Gateway で天気予報 API を作成する

livedoor 社の「お天気Webサービス」にリクエストしレスポンスをそのまま返却(Proxy)

地域は「松江市」固定

18

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

1 2

34

ハンズオン1-‐‑‒1 天気予報 API の作成

「米国東部(バージニア北北部)」リージョンを選択

19

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 3: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

イントロダクション

アジェンダ 使用するAWSサービス

サーバーレスアーキテクチャーとは

ハンズオンの注意

ハンズオン

1-‐‑‒1 天気予報 API の作成

1-‐‑‒2 天気予報 API の修正

2-‐‑‒1 Bot の作成

2-‐‑‒2 Bot との連携

2-‐‑‒3 Slack との連携

3-‐‑‒1 Citiesテーブルの作成

3-‐‑‒2 Botの修正1

3-‐‑‒3 Botの修正2

3

イントロダクション

使用するAWSサービス

AWS Lambda

サーバーのプロビジョニング(準備)をせずにコードを実行行

最大5分まで実行行可能

利利用可能な言語

Nodejs(v010 および v43) Python Java8

AWS API Gateway

RESTfulAPIの作成と管理理

Lambda外部 WEB サービス(Proxy)AWS のサービスAPIを呼び出し可能

Amazon DynamoDB

マネージドな NoSQL データベースサービス

スキーマレス

4

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

6

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

7

常時稼働

障害の考慮

負荷分散

ロギングモニタリング

パッチの適用

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

8

常時稼働

障害の考慮

負荷分散

ロギングモニタリング

パッチの適用

メンテナンスやキャパシティに気を配る必要があり運用負荷が大きい 未使用のリソースがありコスト効率率率が良良くない

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

9

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

10

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

11

フルマネージドサービスを使って運用管理理はAWSにおまかせ イベント発生分の使用料料を支払えば良良いのでコスト効率率率が良良い

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

特徴

イベントドリブン型のアーキテクチャー

サーバーを稼働し続けず必要な時にリソースを使う

使った分だけ課金金されるためコスト効率率率が良良い

メンテナンスやキャパシティーの心配事から開放される

運用に関わるコストを削減できる

12

ハンズオン

ハンズオン

用意するもの

AWS アカウント

httpsportalawsamazoncomgpawsdeveloperregistrationindexhtml

Slack チーム

httpsslackcom

14

ハンズオン

ハンズオンの目的

Slack のメッセージに反応する簡単な ChatBot 作成を通してAPI Gateway Lambda DynamoDB の理理解を深める

サーバーレスアーキテクチャーの具体例例を体験する

15

ハンズオン

ハンズオンの注意点

ハンズオンで使用するリソース名などは誤って設定すると Bot が正しく動作しません

emsp 直接入力力せずに以下ページからコピペしてください

httpsgithubcoms1hit20160604_aws_handson

当ハンズオンの手順は以下5つのリージョンで実施可能ですが(201664現在)

emsp 資料料上は「バージニア北北部」にて説明しています

バージニア北北部

オレゴン

アイルランド

フランクフルト

東京

16

ハンズオン1-‐‑‒1 天気予報 API の作成

ハンズオン1-‐‑‒1 天気予報 API の作成

概要

API Gateway で天気予報 API を作成する

livedoor 社の「お天気Webサービス」にリクエストしレスポンスをそのまま返却(Proxy)

地域は「松江市」固定

18

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

1 2

34

ハンズオン1-‐‑‒1 天気予報 API の作成

「米国東部(バージニア北北部)」リージョンを選択

19

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 4: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

イントロダクション

使用するAWSサービス

AWS Lambda

サーバーのプロビジョニング(準備)をせずにコードを実行行

最大5分まで実行行可能

利利用可能な言語

Nodejs(v010 および v43) Python Java8

AWS API Gateway

RESTfulAPIの作成と管理理

Lambda外部 WEB サービス(Proxy)AWS のサービスAPIを呼び出し可能

Amazon DynamoDB

マネージドな NoSQL データベースサービス

スキーマレス

4

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

6

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

7

常時稼働

障害の考慮

負荷分散

ロギングモニタリング

パッチの適用

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

8

常時稼働

障害の考慮

負荷分散

ロギングモニタリング

パッチの適用

メンテナンスやキャパシティに気を配る必要があり運用負荷が大きい 未使用のリソースがありコスト効率率率が良良くない

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

9

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

10

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

11

フルマネージドサービスを使って運用管理理はAWSにおまかせ イベント発生分の使用料料を支払えば良良いのでコスト効率率率が良良い

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

特徴

イベントドリブン型のアーキテクチャー

サーバーを稼働し続けず必要な時にリソースを使う

使った分だけ課金金されるためコスト効率率率が良良い

メンテナンスやキャパシティーの心配事から開放される

運用に関わるコストを削減できる

12

ハンズオン

ハンズオン

用意するもの

AWS アカウント

httpsportalawsamazoncomgpawsdeveloperregistrationindexhtml

Slack チーム

httpsslackcom

14

ハンズオン

ハンズオンの目的

Slack のメッセージに反応する簡単な ChatBot 作成を通してAPI Gateway Lambda DynamoDB の理理解を深める

サーバーレスアーキテクチャーの具体例例を体験する

15

ハンズオン

ハンズオンの注意点

ハンズオンで使用するリソース名などは誤って設定すると Bot が正しく動作しません

emsp 直接入力力せずに以下ページからコピペしてください

httpsgithubcoms1hit20160604_aws_handson

当ハンズオンの手順は以下5つのリージョンで実施可能ですが(201664現在)

emsp 資料料上は「バージニア北北部」にて説明しています

バージニア北北部

オレゴン

アイルランド

フランクフルト

東京

16

ハンズオン1-‐‑‒1 天気予報 API の作成

ハンズオン1-‐‑‒1 天気予報 API の作成

概要

API Gateway で天気予報 API を作成する

livedoor 社の「お天気Webサービス」にリクエストしレスポンスをそのまま返却(Proxy)

地域は「松江市」固定

18

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

1 2

34

ハンズオン1-‐‑‒1 天気予報 API の作成

「米国東部(バージニア北北部)」リージョンを選択

19

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 5: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

6

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

7

常時稼働

障害の考慮

負荷分散

ロギングモニタリング

パッチの適用

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

8

常時稼働

障害の考慮

負荷分散

ロギングモニタリング

パッチの適用

メンテナンスやキャパシティに気を配る必要があり運用負荷が大きい 未使用のリソースがありコスト効率率率が良良くない

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

9

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

10

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

11

フルマネージドサービスを使って運用管理理はAWSにおまかせ イベント発生分の使用料料を支払えば良良いのでコスト効率率率が良良い

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

特徴

イベントドリブン型のアーキテクチャー

サーバーを稼働し続けず必要な時にリソースを使う

使った分だけ課金金されるためコスト効率率率が良良い

メンテナンスやキャパシティーの心配事から開放される

運用に関わるコストを削減できる

12

ハンズオン

ハンズオン

用意するもの

AWS アカウント

httpsportalawsamazoncomgpawsdeveloperregistrationindexhtml

Slack チーム

httpsslackcom

14

ハンズオン

ハンズオンの目的

Slack のメッセージに反応する簡単な ChatBot 作成を通してAPI Gateway Lambda DynamoDB の理理解を深める

サーバーレスアーキテクチャーの具体例例を体験する

15

ハンズオン

ハンズオンの注意点

ハンズオンで使用するリソース名などは誤って設定すると Bot が正しく動作しません

emsp 直接入力力せずに以下ページからコピペしてください

httpsgithubcoms1hit20160604_aws_handson

当ハンズオンの手順は以下5つのリージョンで実施可能ですが(201664現在)

emsp 資料料上は「バージニア北北部」にて説明しています

バージニア北北部

オレゴン

アイルランド

フランクフルト

東京

16

ハンズオン1-‐‑‒1 天気予報 API の作成

ハンズオン1-‐‑‒1 天気予報 API の作成

概要

API Gateway で天気予報 API を作成する

livedoor 社の「お天気Webサービス」にリクエストしレスポンスをそのまま返却(Proxy)

地域は「松江市」固定

18

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

1 2

34

ハンズオン1-‐‑‒1 天気予報 API の作成

「米国東部(バージニア北北部)」リージョンを選択

19

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 6: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

6

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

7

常時稼働

障害の考慮

負荷分散

ロギングモニタリング

パッチの適用

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

8

常時稼働

障害の考慮

負荷分散

ロギングモニタリング

パッチの適用

メンテナンスやキャパシティに気を配る必要があり運用負荷が大きい 未使用のリソースがありコスト効率率率が良良くない

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

9

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

10

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

11

フルマネージドサービスを使って運用管理理はAWSにおまかせ イベント発生分の使用料料を支払えば良良いのでコスト効率率率が良良い

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

特徴

イベントドリブン型のアーキテクチャー

サーバーを稼働し続けず必要な時にリソースを使う

使った分だけ課金金されるためコスト効率率率が良良い

メンテナンスやキャパシティーの心配事から開放される

運用に関わるコストを削減できる

12

ハンズオン

ハンズオン

用意するもの

AWS アカウント

httpsportalawsamazoncomgpawsdeveloperregistrationindexhtml

Slack チーム

httpsslackcom

14

ハンズオン

ハンズオンの目的

Slack のメッセージに反応する簡単な ChatBot 作成を通してAPI Gateway Lambda DynamoDB の理理解を深める

サーバーレスアーキテクチャーの具体例例を体験する

15

ハンズオン

ハンズオンの注意点

ハンズオンで使用するリソース名などは誤って設定すると Bot が正しく動作しません

emsp 直接入力力せずに以下ページからコピペしてください

httpsgithubcoms1hit20160604_aws_handson

当ハンズオンの手順は以下5つのリージョンで実施可能ですが(201664現在)

emsp 資料料上は「バージニア北北部」にて説明しています

バージニア北北部

オレゴン

アイルランド

フランクフルト

東京

16

ハンズオン1-‐‑‒1 天気予報 API の作成

ハンズオン1-‐‑‒1 天気予報 API の作成

概要

API Gateway で天気予報 API を作成する

livedoor 社の「お天気Webサービス」にリクエストしレスポンスをそのまま返却(Proxy)

地域は「松江市」固定

18

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

1 2

34

ハンズオン1-‐‑‒1 天気予報 API の作成

「米国東部(バージニア北北部)」リージョンを選択

19

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 7: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

7

常時稼働

障害の考慮

負荷分散

ロギングモニタリング

パッチの適用

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

8

常時稼働

障害の考慮

負荷分散

ロギングモニタリング

パッチの適用

メンテナンスやキャパシティに気を配る必要があり運用負荷が大きい 未使用のリソースがありコスト効率率率が良良くない

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

9

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

10

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

11

フルマネージドサービスを使って運用管理理はAWSにおまかせ イベント発生分の使用料料を支払えば良良いのでコスト効率率率が良良い

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

特徴

イベントドリブン型のアーキテクチャー

サーバーを稼働し続けず必要な時にリソースを使う

使った分だけ課金金されるためコスト効率率率が良良い

メンテナンスやキャパシティーの心配事から開放される

運用に関わるコストを削減できる

12

ハンズオン

ハンズオン

用意するもの

AWS アカウント

httpsportalawsamazoncomgpawsdeveloperregistrationindexhtml

Slack チーム

httpsslackcom

14

ハンズオン

ハンズオンの目的

Slack のメッセージに反応する簡単な ChatBot 作成を通してAPI Gateway Lambda DynamoDB の理理解を深める

サーバーレスアーキテクチャーの具体例例を体験する

15

ハンズオン

ハンズオンの注意点

ハンズオンで使用するリソース名などは誤って設定すると Bot が正しく動作しません

emsp 直接入力力せずに以下ページからコピペしてください

httpsgithubcoms1hit20160604_aws_handson

当ハンズオンの手順は以下5つのリージョンで実施可能ですが(201664現在)

emsp 資料料上は「バージニア北北部」にて説明しています

バージニア北北部

オレゴン

アイルランド

フランクフルト

東京

16

ハンズオン1-‐‑‒1 天気予報 API の作成

ハンズオン1-‐‑‒1 天気予報 API の作成

概要

API Gateway で天気予報 API を作成する

livedoor 社の「お天気Webサービス」にリクエストしレスポンスをそのまま返却(Proxy)

地域は「松江市」固定

18

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

1 2

34

ハンズオン1-‐‑‒1 天気予報 API の作成

「米国東部(バージニア北北部)」リージョンを選択

19

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 8: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

サーバーレスアーキテクチャーとは

従来型の一般的なアーキテクチャー

8

常時稼働

障害の考慮

負荷分散

ロギングモニタリング

パッチの適用

メンテナンスやキャパシティに気を配る必要があり運用負荷が大きい 未使用のリソースがありコスト効率率率が良良くない

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

9

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

10

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

11

フルマネージドサービスを使って運用管理理はAWSにおまかせ イベント発生分の使用料料を支払えば良良いのでコスト効率率率が良良い

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

特徴

イベントドリブン型のアーキテクチャー

サーバーを稼働し続けず必要な時にリソースを使う

使った分だけ課金金されるためコスト効率率率が良良い

メンテナンスやキャパシティーの心配事から開放される

運用に関わるコストを削減できる

12

ハンズオン

ハンズオン

用意するもの

AWS アカウント

httpsportalawsamazoncomgpawsdeveloperregistrationindexhtml

Slack チーム

httpsslackcom

14

ハンズオン

ハンズオンの目的

Slack のメッセージに反応する簡単な ChatBot 作成を通してAPI Gateway Lambda DynamoDB の理理解を深める

サーバーレスアーキテクチャーの具体例例を体験する

15

ハンズオン

ハンズオンの注意点

ハンズオンで使用するリソース名などは誤って設定すると Bot が正しく動作しません

emsp 直接入力力せずに以下ページからコピペしてください

httpsgithubcoms1hit20160604_aws_handson

当ハンズオンの手順は以下5つのリージョンで実施可能ですが(201664現在)

emsp 資料料上は「バージニア北北部」にて説明しています

バージニア北北部

オレゴン

アイルランド

フランクフルト

東京

16

ハンズオン1-‐‑‒1 天気予報 API の作成

ハンズオン1-‐‑‒1 天気予報 API の作成

概要

API Gateway で天気予報 API を作成する

livedoor 社の「お天気Webサービス」にリクエストしレスポンスをそのまま返却(Proxy)

地域は「松江市」固定

18

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

1 2

34

ハンズオン1-‐‑‒1 天気予報 API の作成

「米国東部(バージニア北北部)」リージョンを選択

19

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 9: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

9

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

10

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

11

フルマネージドサービスを使って運用管理理はAWSにおまかせ イベント発生分の使用料料を支払えば良良いのでコスト効率率率が良良い

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

特徴

イベントドリブン型のアーキテクチャー

サーバーを稼働し続けず必要な時にリソースを使う

使った分だけ課金金されるためコスト効率率率が良良い

メンテナンスやキャパシティーの心配事から開放される

運用に関わるコストを削減できる

12

ハンズオン

ハンズオン

用意するもの

AWS アカウント

httpsportalawsamazoncomgpawsdeveloperregistrationindexhtml

Slack チーム

httpsslackcom

14

ハンズオン

ハンズオンの目的

Slack のメッセージに反応する簡単な ChatBot 作成を通してAPI Gateway Lambda DynamoDB の理理解を深める

サーバーレスアーキテクチャーの具体例例を体験する

15

ハンズオン

ハンズオンの注意点

ハンズオンで使用するリソース名などは誤って設定すると Bot が正しく動作しません

emsp 直接入力力せずに以下ページからコピペしてください

httpsgithubcoms1hit20160604_aws_handson

当ハンズオンの手順は以下5つのリージョンで実施可能ですが(201664現在)

emsp 資料料上は「バージニア北北部」にて説明しています

バージニア北北部

オレゴン

アイルランド

フランクフルト

東京

16

ハンズオン1-‐‑‒1 天気予報 API の作成

ハンズオン1-‐‑‒1 天気予報 API の作成

概要

API Gateway で天気予報 API を作成する

livedoor 社の「お天気Webサービス」にリクエストしレスポンスをそのまま返却(Proxy)

地域は「松江市」固定

18

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

1 2

34

ハンズオン1-‐‑‒1 天気予報 API の作成

「米国東部(バージニア北北部)」リージョンを選択

19

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 10: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

10

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

11

フルマネージドサービスを使って運用管理理はAWSにおまかせ イベント発生分の使用料料を支払えば良良いのでコスト効率率率が良良い

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

特徴

イベントドリブン型のアーキテクチャー

サーバーを稼働し続けず必要な時にリソースを使う

使った分だけ課金金されるためコスト効率率率が良良い

メンテナンスやキャパシティーの心配事から開放される

運用に関わるコストを削減できる

12

ハンズオン

ハンズオン

用意するもの

AWS アカウント

httpsportalawsamazoncomgpawsdeveloperregistrationindexhtml

Slack チーム

httpsslackcom

14

ハンズオン

ハンズオンの目的

Slack のメッセージに反応する簡単な ChatBot 作成を通してAPI Gateway Lambda DynamoDB の理理解を深める

サーバーレスアーキテクチャーの具体例例を体験する

15

ハンズオン

ハンズオンの注意点

ハンズオンで使用するリソース名などは誤って設定すると Bot が正しく動作しません

emsp 直接入力力せずに以下ページからコピペしてください

httpsgithubcoms1hit20160604_aws_handson

当ハンズオンの手順は以下5つのリージョンで実施可能ですが(201664現在)

emsp 資料料上は「バージニア北北部」にて説明しています

バージニア北北部

オレゴン

アイルランド

フランクフルト

東京

16

ハンズオン1-‐‑‒1 天気予報 API の作成

ハンズオン1-‐‑‒1 天気予報 API の作成

概要

API Gateway で天気予報 API を作成する

livedoor 社の「お天気Webサービス」にリクエストしレスポンスをそのまま返却(Proxy)

地域は「松江市」固定

18

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

1 2

34

ハンズオン1-‐‑‒1 天気予報 API の作成

「米国東部(バージニア北北部)」リージョンを選択

19

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 11: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

サーバーレスアーキテクチャーとは

サーバーレスアーキテクチャー

11

フルマネージドサービスを使って運用管理理はAWSにおまかせ イベント発生分の使用料料を支払えば良良いのでコスト効率率率が良良い

障害の考慮 rarrAWS任せ

負荷分散 rarrAWS任せ

ロギングモニタリング rarrAWS任せ

パッチの適用 rarrAWS任せ

常時稼働 イベント起動

サーバーレスアーキテクチャーとは

特徴

イベントドリブン型のアーキテクチャー

サーバーを稼働し続けず必要な時にリソースを使う

使った分だけ課金金されるためコスト効率率率が良良い

メンテナンスやキャパシティーの心配事から開放される

運用に関わるコストを削減できる

12

ハンズオン

ハンズオン

用意するもの

AWS アカウント

httpsportalawsamazoncomgpawsdeveloperregistrationindexhtml

Slack チーム

httpsslackcom

14

ハンズオン

ハンズオンの目的

Slack のメッセージに反応する簡単な ChatBot 作成を通してAPI Gateway Lambda DynamoDB の理理解を深める

サーバーレスアーキテクチャーの具体例例を体験する

15

ハンズオン

ハンズオンの注意点

ハンズオンで使用するリソース名などは誤って設定すると Bot が正しく動作しません

emsp 直接入力力せずに以下ページからコピペしてください

httpsgithubcoms1hit20160604_aws_handson

当ハンズオンの手順は以下5つのリージョンで実施可能ですが(201664現在)

emsp 資料料上は「バージニア北北部」にて説明しています

バージニア北北部

オレゴン

アイルランド

フランクフルト

東京

16

ハンズオン1-‐‑‒1 天気予報 API の作成

ハンズオン1-‐‑‒1 天気予報 API の作成

概要

API Gateway で天気予報 API を作成する

livedoor 社の「お天気Webサービス」にリクエストしレスポンスをそのまま返却(Proxy)

地域は「松江市」固定

18

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

1 2

34

ハンズオン1-‐‑‒1 天気予報 API の作成

「米国東部(バージニア北北部)」リージョンを選択

19

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 12: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

サーバーレスアーキテクチャーとは

特徴

イベントドリブン型のアーキテクチャー

サーバーを稼働し続けず必要な時にリソースを使う

使った分だけ課金金されるためコスト効率率率が良良い

メンテナンスやキャパシティーの心配事から開放される

運用に関わるコストを削減できる

12

ハンズオン

ハンズオン

用意するもの

AWS アカウント

httpsportalawsamazoncomgpawsdeveloperregistrationindexhtml

Slack チーム

httpsslackcom

14

ハンズオン

ハンズオンの目的

Slack のメッセージに反応する簡単な ChatBot 作成を通してAPI Gateway Lambda DynamoDB の理理解を深める

サーバーレスアーキテクチャーの具体例例を体験する

15

ハンズオン

ハンズオンの注意点

ハンズオンで使用するリソース名などは誤って設定すると Bot が正しく動作しません

emsp 直接入力力せずに以下ページからコピペしてください

httpsgithubcoms1hit20160604_aws_handson

当ハンズオンの手順は以下5つのリージョンで実施可能ですが(201664現在)

emsp 資料料上は「バージニア北北部」にて説明しています

バージニア北北部

オレゴン

アイルランド

フランクフルト

東京

16

ハンズオン1-‐‑‒1 天気予報 API の作成

ハンズオン1-‐‑‒1 天気予報 API の作成

概要

API Gateway で天気予報 API を作成する

livedoor 社の「お天気Webサービス」にリクエストしレスポンスをそのまま返却(Proxy)

地域は「松江市」固定

18

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

1 2

34

ハンズオン1-‐‑‒1 天気予報 API の作成

「米国東部(バージニア北北部)」リージョンを選択

19

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 13: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン

ハンズオン

用意するもの

AWS アカウント

httpsportalawsamazoncomgpawsdeveloperregistrationindexhtml

Slack チーム

httpsslackcom

14

ハンズオン

ハンズオンの目的

Slack のメッセージに反応する簡単な ChatBot 作成を通してAPI Gateway Lambda DynamoDB の理理解を深める

サーバーレスアーキテクチャーの具体例例を体験する

15

ハンズオン

ハンズオンの注意点

ハンズオンで使用するリソース名などは誤って設定すると Bot が正しく動作しません

emsp 直接入力力せずに以下ページからコピペしてください

httpsgithubcoms1hit20160604_aws_handson

当ハンズオンの手順は以下5つのリージョンで実施可能ですが(201664現在)

emsp 資料料上は「バージニア北北部」にて説明しています

バージニア北北部

オレゴン

アイルランド

フランクフルト

東京

16

ハンズオン1-‐‑‒1 天気予報 API の作成

ハンズオン1-‐‑‒1 天気予報 API の作成

概要

API Gateway で天気予報 API を作成する

livedoor 社の「お天気Webサービス」にリクエストしレスポンスをそのまま返却(Proxy)

地域は「松江市」固定

18

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

1 2

34

ハンズオン1-‐‑‒1 天気予報 API の作成

「米国東部(バージニア北北部)」リージョンを選択

19

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 14: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン

用意するもの

AWS アカウント

httpsportalawsamazoncomgpawsdeveloperregistrationindexhtml

Slack チーム

httpsslackcom

14

ハンズオン

ハンズオンの目的

Slack のメッセージに反応する簡単な ChatBot 作成を通してAPI Gateway Lambda DynamoDB の理理解を深める

サーバーレスアーキテクチャーの具体例例を体験する

15

ハンズオン

ハンズオンの注意点

ハンズオンで使用するリソース名などは誤って設定すると Bot が正しく動作しません

emsp 直接入力力せずに以下ページからコピペしてください

httpsgithubcoms1hit20160604_aws_handson

当ハンズオンの手順は以下5つのリージョンで実施可能ですが(201664現在)

emsp 資料料上は「バージニア北北部」にて説明しています

バージニア北北部

オレゴン

アイルランド

フランクフルト

東京

16

ハンズオン1-‐‑‒1 天気予報 API の作成

ハンズオン1-‐‑‒1 天気予報 API の作成

概要

API Gateway で天気予報 API を作成する

livedoor 社の「お天気Webサービス」にリクエストしレスポンスをそのまま返却(Proxy)

地域は「松江市」固定

18

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

1 2

34

ハンズオン1-‐‑‒1 天気予報 API の作成

「米国東部(バージニア北北部)」リージョンを選択

19

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 15: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン

ハンズオンの目的

Slack のメッセージに反応する簡単な ChatBot 作成を通してAPI Gateway Lambda DynamoDB の理理解を深める

サーバーレスアーキテクチャーの具体例例を体験する

15

ハンズオン

ハンズオンの注意点

ハンズオンで使用するリソース名などは誤って設定すると Bot が正しく動作しません

emsp 直接入力力せずに以下ページからコピペしてください

httpsgithubcoms1hit20160604_aws_handson

当ハンズオンの手順は以下5つのリージョンで実施可能ですが(201664現在)

emsp 資料料上は「バージニア北北部」にて説明しています

バージニア北北部

オレゴン

アイルランド

フランクフルト

東京

16

ハンズオン1-‐‑‒1 天気予報 API の作成

ハンズオン1-‐‑‒1 天気予報 API の作成

概要

API Gateway で天気予報 API を作成する

livedoor 社の「お天気Webサービス」にリクエストしレスポンスをそのまま返却(Proxy)

地域は「松江市」固定

18

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

1 2

34

ハンズオン1-‐‑‒1 天気予報 API の作成

「米国東部(バージニア北北部)」リージョンを選択

19

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 16: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン

ハンズオンの注意点

ハンズオンで使用するリソース名などは誤って設定すると Bot が正しく動作しません

emsp 直接入力力せずに以下ページからコピペしてください

httpsgithubcoms1hit20160604_aws_handson

当ハンズオンの手順は以下5つのリージョンで実施可能ですが(201664現在)

emsp 資料料上は「バージニア北北部」にて説明しています

バージニア北北部

オレゴン

アイルランド

フランクフルト

東京

16

ハンズオン1-‐‑‒1 天気予報 API の作成

ハンズオン1-‐‑‒1 天気予報 API の作成

概要

API Gateway で天気予報 API を作成する

livedoor 社の「お天気Webサービス」にリクエストしレスポンスをそのまま返却(Proxy)

地域は「松江市」固定

18

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

1 2

34

ハンズオン1-‐‑‒1 天気予報 API の作成

「米国東部(バージニア北北部)」リージョンを選択

19

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 17: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

ハンズオン1-‐‑‒1 天気予報 API の作成

概要

API Gateway で天気予報 API を作成する

livedoor 社の「お天気Webサービス」にリクエストしレスポンスをそのまま返却(Proxy)

地域は「松江市」固定

18

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

1 2

34

ハンズオン1-‐‑‒1 天気予報 API の作成

「米国東部(バージニア北北部)」リージョンを選択

19

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 18: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

概要

API Gateway で天気予報 API を作成する

livedoor 社の「お天気Webサービス」にリクエストしレスポンスをそのまま返却(Proxy)

地域は「松江市」固定

18

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

1 2

34

ハンズオン1-‐‑‒1 天気予報 API の作成

「米国東部(バージニア北北部)」リージョンを選択

19

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 19: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

「米国東部(バージニア北北部)」リージョンを選択

19

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 20: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

20

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 21: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

今すぐ始める もしくは API の作成をクリック

21

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 22: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

「ChatBot」 API を新規作成

22

「ChatBot」

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 23: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

API のメソッドを追加

23

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 24: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

GET を選択

24

チェックボタンで確定

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 25: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

バックエンド(HTTP Proxy)の設定

25

httpsgithubcoms1hit20160604_aws_handsonp25 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 26: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面の説明

26

クライアント

API Gateway からクライアントへの レスポンスの設定

バックエンドから API Gateway への レスポンスの設定

バックエンド

API Gateway からバックエンドへの リクエストの設定

クライアントから API Gateway への リクエストの設定

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 27: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

統合レスポンスの設定を開く

27

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 28: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

本文マッピングテンプレートを変更更

28

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 29: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの JSON を編集

29

httpsgithubcoms1hit20160604_aws_handsonp29よりコピペ

マッピングテンプレートを編集せずともレスポンスは 表示されますがブラウザ上にUTF-‐‑‒8のエスケープシーケンスが

そのまま表示されてしまうため一手間かけます

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 30: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

30

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 31: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

マッピングテンプレートを保存

31

上の保存もクリックしないと画面遷移で 下のエディタ部分が元に戻ってしまうので

必ずクリックする

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 32: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドの実行行画面へ戻る

32

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 33: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

メソッドレスポンスの設定を開く

33

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 34: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスヘッダーの Content-‐‑‒Typeを変更更

34

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 35: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスの文字コードを utf-‐‑‒8 に

35

httpsgithubcoms1hit20160604_aws_handsonp35 よりコピペ

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 36: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

戻る

36

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 37: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

API のテスト

37

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 38: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

レスポンスを確認

38

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 39: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

API のデプロイ

39

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 40: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

ステージの新規作成

40

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 41: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

「prod」ステージとしてデプロイ

41

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 42: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

デプロイされた API の URL

42

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 43: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

ブラウザで開いて確認

43

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 44: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 45: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

概要

天気予報の地域をクライアントから指定できるようにする

API Gateway の GET メソッドにパラメータを追加

結果レスポンスを天気予報タイトルと天気概要のみにする

天気 API からのレスポンス内容を API Gateway で編集

45

API Gateway お天気Webサービス livedoor

クライアント (ブラウザ)

リクエストパラメータで地域を指定 地域を引き渡し

結果をフォーマット

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 46: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

Resources 画面に戻る

46

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 47: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

GET メソッドを選択

47

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 48: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

メソッドリクエストの設定を開く

48

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 49: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

URL クエリ文字列列 パラメータの追加

49

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 50: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

パラメータ「city」を定義

50

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 51: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

統合リクエストの設定を開く

51

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 52: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

Endpoint URL を変更更

52

ldquocity=320010rdquo を削る

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 53: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

「city」パラメーターが追加されていることを確認

53

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 54: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンスの設定を開く

54

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 55: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

本文のマッピングテンプレートを変更更

55

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 56: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

「title」と「text」のみを返却する JSON に変更更

56

httpsgithubcoms1hit20160604_aws_handsonp56 よりコピペ

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 57: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

統合レスポンス設定の保存

57

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 58: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

58

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 59: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

テスト

59

「320010」を入力力

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 60: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

再度度デプロイ

60

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 61: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

今回は「dev」ステージに対してデプロイ

61

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 62: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

開発用 URL にアクセス

62

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 63: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

63

「city」パラメーター未指定のため返却値なし

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 64: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

ブラウザで開いて確認

64

「city=320010」を追加

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 65: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

65

「prod」ステージの API バージョン

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 66: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

「prod」ステージに対しても同様の内容をリリース

66

最新のデプロイバージョンを選択

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 67: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒2 天気予報 API の修正

本番用 URL で確認

67

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 68: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒1 Bot の作成

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 69: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒1 Bot の作成

概要(ハンズオン2-‐‑‒1〜~2-‐‑‒3)

Botを作成する

Slack から受け取ったメッセージをそのまま返却するLambdaファンクションを作成(エコーBot)

API Gateway から Lambda ファンクションを呼び出し

Slack の OutgoingWebhooks で API Gateway を叩く

69

API Gateway Lambda(Bot)Slack

メッセージrdquoTESTrdquo

メッセージrdquoTESTrdquo

1 2

34

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 70: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒1 Bot の作成

Lambdaを開く

70

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 71: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒1 Bot の作成

Get Started Now もしくは Create a Lambda function をクリック

71

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 72: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒1 Bot の作成

BluePrint はスキップ

72

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 73: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒1 Bot の作成

名前をつけリンク先のコードをペースト

73

「SlackBot」

httpsgithubcoms1hit20160604_aws_handsonp73 よりコピペ

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 74: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒1 Bot の作成

SlackBot のソースコード

74

トークンが不不正

Botからのメッセージ

エコーを行行う

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 75: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

75

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 76: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒1 Bot の作成

Lambda ファンクションの実行行ロールを作成

76

Lambda ファンクション実行行に必要な権限

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 77: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒1 Bot の作成

実行行ロールを指定

77

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 78: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒1 Bot の作成

作成される Lambda ファンクションの内容を確認

78

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 79: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒1 Bot の作成

Bot の作成が完了了

79

C

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 80: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒2 Bot との連携

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 81: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン1-‐‑‒1 天気予報 API の作成

API Gateway を開く

81

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 82: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

82

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 83: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

83

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 84: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒2 Bot との連携

Slack 用リソースを追加

84

「slack」と入力力

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 85: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

85

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 86: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒2 Bot との連携

POST メソッドを追加

86

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 87: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒2 Bot との連携

先ほど作成した Lambda ファンクションを指定

87

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 88: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒2 Bot との連携

API にBot の実行行権限を与える

88

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 89: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒2 Bot との連携

統合リクエストの設定を変更更

89

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 90: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

90

テンプレートが定義されていない場合のみ バックエンドにリクエスト本文を渡す(推奨)

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 91: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

91

httpsgithubcoms1hit20160604_aws_handsonp91 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 92: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒2 Bot との連携

Slack からのリクエストをBot に渡す設定

92

httpsgithubcoms1hit20160604_aws_handsonp92 よりコピペ

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 93: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

93

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 94: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒2 Bot との連携

「prod」ステージにデプロイ

94

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 95: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒2 Bot との連携

Botのデプロイ完了了

95

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 96: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒3 Slack との連携

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 97: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

97

+マークをクリック

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 98: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒3 Slack との連携

Bot専用Channelを作成

98

任意のChannel名

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 99: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒3 Slack との連携

「httpsチーム名slackcomappsnewA0F7VRG6Q-‐‑‒outgoing-‐‑‒webhooks」にアクセス

99

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 100: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayへメッセージ連携するためのOutgoing WebHooks

100

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 101: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒3 Slack との連携

Botと連携させるチャンネル情報の設定

101

先ほど作成したChannel名

すべてのメッセージに反応させるため 空にしておく

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 102: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒3 Slack との連携

BotのURLを指定

102

API GatewayのエンドポイントURL 〜~prodのあとにslackを忘れずに

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 103: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒3 Slack との連携

Bot がリクエスト元を特定するための Token を控えておく

103

クリップボードにコピーしておく

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 104: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒3 Slack との連携

Botの表示名を設定して保存

104

お好みで お好みで

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 105: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒3 Slack との連携

API Gatewayに戻りprodステージのステージ変数を追加

105

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 106: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒3 Slack との連携

slack token を設定

106

「slackToken」と入力力 Tのみ大文字

先ほどコピーしたtokenをペースト

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 107: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒3 Slack との連携

Bot の設定が全て完了了

107

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 108: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒3 Slack との連携

Bot連携の設定をしたチャンネルでテスト

108

正しく設定できていれば Botからのレスポンスが来る

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 109: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 110: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

概要

Citiesテーブルを作成する

全国地点定義表のデータを格納(142件)

地域名(eg 松江)と地域ID(eg 320010)の対応

Lambda から初期化用データを投入

110

Lambda (データ投入用ファンクション)

DynamoDB (Citiesテーブル)

データ投入

テーブル作成

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 111: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

111

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 112: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Create table もしくは テーブルの作成 をクリック

112

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 113: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成

113

「Cities」と入力力

「cityName」と入力力

チェックを外す

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 114: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

書き込みキャパシティを変更更

114

データ投入用ファンクションの タイムアウト防止のため「10」に変更更

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 115: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルを作成中

115

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 116: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDB テーブルの作成完了了

116

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 117: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

Lambdaを開く

117

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 118: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBへのデータ投入を行行うファンクションを作成

118

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 119: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

119

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 120: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクション名を入力力

120

「PutCityData」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 121: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

121

Basic with DynamoDB を選択

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 122: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBにアクセス可能なロールを作成

122

DynamoDB へのアクセス権限

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 123: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ロールの確認とタイムアウト値の変更更

123

1分に変更更

作成したロールが設定される

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 124: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

ファンクションの内容を確認

124

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 125: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

リンク先のコードで上書き

125

httpsgithubcoms1hit20160604_aws_handsonp125をコピペ

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 126: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン2-‐‑‒1 Bot の作成

PutCityData のソースコード

126

地点定義データ

地点定義データ分ループしDynamoDBへのputItem命令令を配列列に入れる

putItemを実行行

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 127: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

保存テストを行行う

127

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 128: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

テスト用パラメーターは変更更せずに実行行

128

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 129: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ投入処理理完了了

129

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 130: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

DynamoDBを開く

130

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 131: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒1 Citiesテーブルの作成

データ確認

131

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 132: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 133: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

概要 Botの修正 bot というメンション付きのメッセージにのみ反応 bot に続くコマンドを認識識して処理理を分ける

① 「echo メッセージ」の場合メッセージをそのまま返却 ② 「city 地域名」の場合地域IDを返却

133

API Gateway Lambda(Bot)Slack

①メッセージbot echo テスト ②メッセージbot city 松江

①メッセージテスト ②メッセージ松江のIDは320010です

DynamoDB(Cities)

①ー1②ー1

①ー4②ー6

①ー2

①ー3②ー5

②ー2

②ー3 ②ー4

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 134: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

Lambdaを開く

134

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 135: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

Lambdaファンクションを作成

135

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 136: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

blueprint は simple-‐‑‒mobile-‐‑‒backend を選択

136

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 137: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

ファンクション名を入力力

137

「SlackBot2」と入力力

データ投入ファンクションは日本語を含むコードとなっており このタイミングでペーストすると文字化けしてしまうため

ひとまずサンプルコードのまま作成する

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 138: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

ロールを設定

138

「lambda_dynamo」を選択 (先ほど作成したものを流流用)

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 139: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

内容を確認

139

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 140: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

リンク先のコードで上書き

140

httpsgithubcoms1hit20160604_aws_handsonp140 よりコピペ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 141: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(14)

141

SlackBotと同様

メンション(bot)つきで 呼ばれているかのチェック

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 142: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(24)

142

Botの処理理を呼び出し 「bot」以降降の文字列列を渡す

Botに対するメッセージではないのでスキップ

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 143: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(34)

143

コマンドによる振り分け echo city コマンドの後ろの文字列列をメッセージとして渡す

Botクラス

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 144: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2 のソースコード(44)

144

メッセージテキストをそのまま返信

DynamoDB内を地域名で検索索し地域IDを返信

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 145: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

保存

145

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 146: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

API Gateway を開く

146

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 147: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

ChatBotを開く

147

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 148: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

POST の統合リクエストを開く

148

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 149: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

SlackBot2と紐紐付け

149

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 150: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

権限追加

150

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 151: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

prod へデプロイ

151

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 152: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

Bot の修正が完了了

152

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 153: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

slack で動作確認

153

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 154: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒3 Botの修正2

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 155: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒3 Botの修正2

概要

Botの修正

「weather 地域名」の場合その地域の天気予報を返す

155

API Gateway Lambda(Bot)Slack

メッセージbot weather 松江

メッセージ[島根県 松江 の天気] 島根県は 高気圧に覆われて晴れています

DynamoDB(Cities)

お天気Webサービス

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 156: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒3 Botの修正2

LambdaファンクションのZipをダウンロード

156

httpsrawgithubusercontentcoms1hit20160604_aws_handsonmasterlambdazip

Lambdaで用意されている標準module以外を使用する場合は emsp moduleごとZip化したものをデプロイする必要がある emsp (今回はサードパーティー製のHTTPクライアントを使用)

Zip化の注意

フォルダごと圧縮しない

圧縮方法rarremsp $ zip -‐‑‒r lambdazip indexjs node_modules

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 157: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒3 Botの修正2

Lambdaを開く

157

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 158: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒3 Botの修正2

Lambdaファンクションを作成

158

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 159: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒3 Botの修正2

blueprint は スキップ

159

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 160: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒3 Botの修正2

ファンクション名を入力力しZipをアップロード

160

「SlackBot3」と入力力

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 161: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒3 Botの修正2

ロールを設定

161

「lambda_dynamo」を選択

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 162: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒3 Botの修正2

内容を確認

162

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 163: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒3 Botの修正2

Botのデプロイ完了了

163

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 164: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(12)

164

weatherコマンドを追加

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 165: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒2 Botの修正1

SlackBot3 のソースコード(22)

165

お天気APIへのアクセス

地域IDの取得

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 166: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒3 Botの修正2

API Gateway を開く

166

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 167: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒3 Botの修正2

ChatBotを開く

167

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 168: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒3 Botの修正2

POST の統合リクエストを開く

168

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 169: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒3 Botの修正2

SlackBot3と紐紐付け

169

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 170: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒3 Botの修正2

権限追加

170

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 171: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒3 Botの修正2

prod へデプロイ

171

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 172: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒3 Botの修正2

Bot の修正が完了了

172

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 173: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

ハンズオン3-‐‑‒3 Botの修正2

slack で動作確認

173

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Page 174: 【JAWS-UG Shimane vol.5 】[ハンズオン]サーバーレスで作るチャットBot

お疲れ様でした

お疲れ様でした

本ハンズオンで作成した以下のリソースについて片付けをお願いします

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174