AWS LambdaとAPI GatewayでSlackBot「ShuzoBot」を作ってみた

#はじめに

AWSド初心者のわたなゔぇです。
流れでSlackBotを作ることになって、流れでサーバーレスにしてみようって話になって、
流れで試作してできたのがShuzoBotです（雑）

機能として
・あらかじめ設定したマイナスな言葉を打つと対応したShuzoのアツい言葉が届く

以上です。

また、今回はこちらの記事を参考にしました。

[AWS Lambda を使って Slack ボット (命名: Lambot [ランボー]) を低予算で作ろうじゃないか
](http://qiita.com/exabugs/items/e868df55333d0805acb2)

AWSコンソールの画面配置が変わっておりちょっと混乱したので
覚え書きも兼ねて。

#AWS側の設定

###Lambda

- Lambda関数の作成

<img width="981" alt="1.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/f8af04f8-4939-b363-2b05-44e551c6a4ff.png">

- 設計図選択

「microservice-http-endpoint」を選択。

<img width="945" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/1f0d9cc7-1d94-cddf-3fb4-466f6342bf62.png">

- トリガー設定

API名：ShuzoBot
デプロイされるステージ：prod
セキュリティ：オープン

にそれぞれ指定します。なんか警告出るけど無視で今回はおk。

<img width="942" alt="3.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/34c8a819-cc4b-90b5-5a8a-3a3264a2c5f8.png">

- 命名

次の画面で名前をつけます。説明の欄は多分ちゃんと書いておいた方がいいけど~~めんどくさかったので~~今回はこのままやっちゃいました。

<img width="801" alt="4.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/b8262a26-b13b-67e2-fd53-28e9b3161e0e.png">

- Lambda関数のコード設定

「コードをインラインで編集」モードにしてから、

<img width="939" alt="5.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/be69493f-6563-c9ac-75c7-4b81368e462d.png">

```js
exports.handler = function(event, context) {
    var text = '';

    switch(event.text) {
        case '帰りたい':
            text = '富士山のように、日本一になるって言っただろ！ お前、昔を思い出せよ！！ 今日からお前は富士山だ！！！';
            break;
        case 'もう無理':
            text = 'もっと熱くなれよ…!!熱い血燃やしてけよ…!!人間熱くなったときがホントの自分に出会えるんだ！';
    }
    
    if(text !== '') {
        context.done(null, {text: text});   
    }
};
```
これを貼っつけます。

- ハンドラとロールの設定

ハンドラ：index.handler
ロール：既存のロールを選択
既存のロール：lambda_basic_execution

<img width="932" alt="6.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/da1acd4f-dc09-8a25-f749-eb7ae8b03e29.png">


- 詳細設定

画面したのタブを開いて、
メモリ：128
タイムアウト：3秒　に設定。

<img width="923" alt="7.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/bababf80-16a7-55bc-85df-f9fa9fba0573.png">



###API Gatewayの設定

- API Gateway設定画面へ

https:~~~~/ShuzoBotのURLは、どこかに控えておいてください。
あとで使います。

画像の「ANY」をクリック。
 
<img width="1223" alt="8.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/8aae4257-deb7-2d70-3fac-70f60df2e98d.png">

- POSTメソッドの追加

/ShuzoBotを選択した状態で　アクションをクリック。

<img width="716" alt="9.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/17a35a2e-f5b3-147f-b4b1-93bb8bde9797.png">

続いて、「メソッドの作成」をクリック。

<img width="636" alt="10.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/4eda74d9-f413-4a03-f6f1-43c51c0c6904.png">

こんなやつが出てくるので、POSTを選択してチェックマークをポチ。

<img width="641" alt="11.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/5fc7df40-8b82-988b-5c01-de5d663e733d.png">

- ANYの削除

ANYを選択した状態で、アクションからメソッド削除。

<img width="638" alt="12.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/babce068-e1a5-58ed-c5cf-dee219bc8325.png">


- POSTメソッドのセットアップ

POSTを選択して、
関数名を「ShuzoBot」に設定、保存。

<img width="974" alt="13.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/8e3c986c-ac61-e6b4-878c-88f793c2c6b7.png">

- マッピングテンプレートの設定

するとこんな画面になるので、
「統合リクエスト」をクリック。

<img width="970" alt="14.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/edf4cb97-21ac-5ae8-7a2d-1ca3013b2513.png">

画面下の方のタブを開いて、

<img width="799" alt="15.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/54ecd181-6772-0c81-b11c-71bdcfbb7321.png">


Content-Typeに
「application/x-www-form-urlencoded」を入力して横のチェックマークをぽち。
「マッピングテンプレートの追加」をクリック。

<img width="766" alt="16.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/a1ff7b93-b34b-3cc3-694a-c699b43ec604.png">

出てきたやつに入力。
（これについての解説は参考にしたページをご覧ください）

<img width="631" alt="19.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/cc93294b-1bdb-0176-2820-664421fa6118.png">

```
## convert HTML POST data or HTTP GET query string to JSON

## get the raw post data from the AWS built-in variable and give it a nicer name
#if ($context.httpMethod == "POST")
 #set($rawAPIData = $input.path('$'))
#elseif ($context.httpMethod == "GET")
 #set($rawAPIData = $input.params().querystring)
 #set($rawAPIData = $rawAPIData.toString())
 #set($rawAPIDataLength = $rawAPIData.length() - 1)
 #set($rawAPIData = $rawAPIData.substring(1, $rawAPIDataLength))
 #set($rawAPIData = $rawAPIData.replace(", ", "&"))
#else
 #set($rawAPIData = "")
#end

## first we get the number of "&" in the string, this tells us if there is more than one key value pair
#set($countAmpersands = $rawAPIData.length() - $rawAPIData.replace("&", "").length())

## if there are no "&" at all then we have only one key value pair.
## we append an ampersand to the string so that we can tokenise it the same way as multiple kv pairs.
## the "empty" kv pair to the right of the ampersand will be ignored anyway.
#if ($countAmpersands == 0)
 #set($rawPostData = $rawAPIData + "&")
#end

## now we tokenise using the ampersand(s)
#set($tokenisedAmpersand = $rawAPIData.split("&"))

## we set up a variable to hold the valid key value pairs
#set($tokenisedEquals = [])

## now we set up a loop to find the valid key value pairs, which must contain only one "="
#foreach( $kvPair in $tokenisedAmpersand )
 #set($countEquals = $kvPair.length() - $kvPair.replace("=", "").length())
 #if ($countEquals == 1)
  #set($kvTokenised = $kvPair.split("="))
  #if ($kvTokenised[0].length() > 0)
   ## we found a valid key value pair. add it to the list.
   #set($devNull = $tokenisedEquals.add($kvPair))
  #end
 #end
#end

## next we set up our loop inside the output structure "{" and "}"
{
#foreach( $kvPair in $tokenisedEquals )
  ## finally we output the JSON for this pair and append a comma if this isn't the last pair
  #set($kvTokenised = $kvPair.split("="))
 "$util.urlDecode($kvTokenised[0])" : #if($kvTokenised[1].length() > 0)"$util.urlDecode($kvTokenised[1])"#{else}""#end#if( $foreach.hasNext ),#end
#end
}
```

- デプロイ

保存したら、
アクション＞APIのデプロイをクリック。

<img width="694" alt="17.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/6422c4ed-e0a2-8a9e-949d-c9d7943b4b10.png">

デプロイされるステージを「prod」に設定して、デプロイ。

<img width="583" alt="18.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/600a8737-7dc1-6094-4586-abd97c123dfa.png">


これでAWS側は完成です！

#Slack側の設定

- Outgoing WebHooksのintegrationを追加

<img width="1039" alt="20.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/d7362dec-b79f-3522-f505-e34b77b8777a.png">

- URLを設定

修造を呼びたいチャンネルと、トリガーワード（任意）、
URLには先ほど控えておいたものをペースト。

<img width="952" alt="21.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/228f97c6-2e04-8c1e-1325-2f12617ce170.png">

- Bot名設定

お好みでカスタム。
できたらsave settingsをクリック。

<img width="963" alt="22.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/7b51adf3-76d3-5a4f-009b-cdf2563e298b.png">


#完成！

<img width="628" alt="sample.png" src="https://qiita-image-store.s3.amazonaws.com/0/144427/bb128a24-9a49-7708-4232-1fbbd6df2d05.png">