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

  • View
    1.143

  • Download
    0

  • Category

    Internet

Preview:

Citation preview

サーバーレスで作る チャット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

イントロダクション

自己紹介

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

株式会社オプティマ

島根開発センター所属

ソフトウェアエンジニア

好きな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

イントロダクション

アジェンダ 使用する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

イントロダクション

使用する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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

特徴

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

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

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

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

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

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

ハンズオン

ハンズオン

用意するもの

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

ハンズオン

用意するもの

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

ハンズオン

ハンズオンの目的

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

ハンズオン

ハンズオンの注意点

ハンズオンで使用するリソース名などは誤って設定すると 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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

ハンズオン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

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

Bot の修正が完了了

172

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

slack で動作確認

173

お疲れ様でした

お疲れ様でした

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

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

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

slack で動作確認

173

お疲れ様でした

お疲れ様でした

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

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

お疲れ様でした

お疲れ様でした

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

AWS API Gateway

AWS Lambda

Amazon DynamoDB

174

Recommended