Node-REDでSlack bot 2019年8月時点

#Node-RED入門といえば、Slack Bot
IBM Cloud ライトアカウントなどでNode-REDを始めたらSlack botは定番の入門ネタです。
Slack botを作るときには、Bot APIトークンを使った方法がありましたが、Node-RED側のSlackノードやSlack側の仕様変更により、作り方を現在の仕様に合わせる必要が出てきました。
#Node-REDの環境の準備
こちらは、[IBM Cloud ライトアカウント](https://www.ibm.com/jp-ja/cloud/lite-account)を使って用意します。IBM Cloud ライトアカウント以外の方法としては、AWSやAzureなどにインストールする方法があります。

#Slack アプリの作成
入力したものを返す基本のBotとします。Bot APIトークンを発行していた時と異なり、2019年8月現在のSlack botは、SlackアプリとしてBotを作成します。

## Slack Botの作成
Slack APIの[Your Apps](https://api.slack.com/apps)から、「Create New App」をクリックします。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/66f4c95b-5b96-f94f-82f9-c3867ebc988a.png)

「Create a Slack App」画面に、「App Name」に英数字でアプリ名と、アプリの配置先として「Development Slack Workspace」で使用中のワークスペースを選び、「Create App」をクリックします。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/1656420f-51da-7ec3-fa72-a2f042941114.png)


「Add features and functionality」で「Bots」をクリックします。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/9f2f714b-207c-9c94-fb34-65601bab909b.png)

##トークンの発行
「Bot User」で、「Add a Bot User」ボタンをクリックします。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/fa044f2d-032f-b0b2-6186-6cbb844cbf44.png)

「Bot User」画面で、「Display name」と「Default useranme」を入力し、「Always Show My Bot as Online」を「On」とし、「Add Bot User」ボタンをクリックします。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/7e660ec9-b978-045e-2bcf-d95501d249d5.png)　

「Bot User」画面の画面左側の「Settings」、「Install App」をクリックし、「Install App to Your Team」画面を表示します。「Install App to Workspace」ボタンをクリックします。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/f27733b6-767b-a11b-e884-69ef5900bac8.png)

「許可する」ボタンをクリックし、本人確認を行います。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/2894a812-346d-1bb9-9f39-9fc9097b91f3.png)

「Installed App Settings」で表示された「Bot User OAuth Access Token」を後ほど使用しますので、「Copy」ボタンをクリックしてメモ帳などの適当なエディタに貼り付けておきます。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/440a1640-a844-33ea-814a-ff9636e397f6.png)

コピーした後は、Slack Client画面に移動しておきます。画面左側の「App」に下図のようにBot名が表示されているはずです。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/609109a6-aa92-7093-e6bd-a1130f9f325f.png)

#Node-REDでSlack Bot
## Slackノードを追加
Node-REDにアクセスし、画面右上の「三」→「パレットの管理」→「ノードを追加タブ」の順にクリックしまして、「node-red-contrib-slack」を「ノードを追加」を押し追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/762e08ca-6f73-9cbd-6057-a7d417625056.png)

##フロー作成
下図になるように、フローを作ります。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/c1b64fe9-4b0d-aeea-1673-84a58ab7544e.png)

サンプルコードをインポートします。インポートする場合は、画面右上の「三」→「読み込み」→「クリップボード」を表示し、下記サンプルコードを貼り付け、「読み込み」ボタンをクリックします。

```
[{"id":"74d16458.3e634c","type":"tab","label":"Slack Bot","disabled":false,"info":""},{"id":"a1e78e11.8f082","type":"slack-rtm-in","z":"74d16458.3e634c","client":"83702296.02a97","name":"","events":"message","x":100,"y":40,"wires":[["bd830fde.1e402"]]},{"id":"bd830fde.1e402","type":"function","z":"74d16458.3e634c","name":"返信文","func":"msg.topic = \"message\";\nmsg.payload = {\n    channel: msg.payload.channel,\n    text: msg.payload.text\n}\nreturn msg","outputs":1,"noerr":0,"x":290,"y":40,"wires":[["421b615b.a4ed2"]]},{"id":"421b615b.a4ed2","type":"slack-rtm-out","z":"74d16458.3e634c","client":"83702296.02a97","name":"","x":470,"y":40,"wires":[["ffe55177.1a273"]]},{"id":"ffe55177.1a273","type":"debug","z":"74d16458.3e634c","name":"debug slack post","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":670,"y":40,"wires":[]},{"id":"83702296.02a97","type":"slack-config","z":"","name":""}]
```

サンプルをインポートしない場合は、Node-REDの画面左側で、カテゴリ「ソーシャル」に「slack-rtm-in」と「slack-rtm-out」、カテゴリ「機能」の「function」ノード、カテゴリ「出力」の「debug」ノードを配置します。

###「slack-rtm-in」ノード
「slack-confing」の右隣のペン型のアイコンをクリックします。
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/20a8cc31-d7bf-5244-d959-df2156693274.png)
「Token」に先程貼り付けた「Bot User OAuth Access Token」を貼り付け、「更新」ボタンをクリックします。続けて、「完了」ボタンをクリックします。
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/6fb39028-f5df-369e-a994-aae7b2b68f72.png)

### 「function」ノード(返信文と表示されているノード)
下図のようになるようにコードを記述します。
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/48c8e2ea-8c74-d2c9-aaf6-c46e9a1cf1ca.png)

###「slack-rtm-out」ノード
「slack-confing」の右隣のペン型のアイコンをクリックします。
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/8075242a-92ab-affd-456f-c221fb0f1ef4.png)
「Token」に先程貼り付けた「Bot User OAuth Access Token」を貼り付け、「更新」ボタンをクリックします。続けて、「完了」ボタンをクリックします。
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/3de3514c-52bc-2792-05b5-9d3a5f991909.png)

###「debug」ノード
「slack-rtm-out」ノードの後に、カテゴリ「出力」の「debug」ノードを配置します。
![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/e0b68b64-9b4e-c4af-771f-8e2a6b92873b.png)

##デプロイ
線ですべてのノードを結びます。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/c1b64fe9-4b0d-aeea-1673-84a58ab7544e.png)

画面右上の「デプロイ」をクリックします。
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/cd11a2ea-d535-77f1-49c5-a44011323173.png)

##動作確認
Slackアプリとして作成したSlack Botの動作確認のため、下図のようにSlack Client画面左側の「App」下のSlack Bot名をクリックし、メッセージを送信します。送信したメッセージと同じ内容が返ってくるはずです。
![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/6945cb19-460a-581c-a865-c6510803f06d.png)

これでオウム返しのSlack Botが出来ましたので、IBM Cloud ライトアカウントで使えるWatsonサービスや無料で使えるデータベースサービスCloudantにSlack Botのログを蓄積し、Watson Studio上のJupyter NotebookでCloudantに蓄積したログを可視化やCSV形式でダウンロードなど実施できます。