【Node.js】Slackアプリの作り方



## まず

Slack Api のサイトへ
https://api.slack.com/apps


「Create an App」をクリック
[![Image from Gyazo](https://i.gyazo.com/9e1538d8be28ecadf13a25c7ebc4ae14.png)](https://gyazo.com/9e1538d8be28ecadf13a25c7ebc4ae14)

「From Scratch」をクリック
[![Image from Gyazo](https://i.gyazo.com/c56640fe0b9b38b8e5e1e48d1f2cddda.png)](https://gyazo.com/c56640fe0b9b38b8e5e1e48d1f2cddda)

「App Name」 を入力、
ワークスペースを選んで、
「Creare App」をクリック
[![Image from Gyazo](https://i.gyazo.com/9d744fa465aad8ed9f47b5a5acdfa789.png)](https://gyazo.com/9d744fa465aad8ed9f47b5a5acdfa789)

こんな画面になる。
[![Image from Gyazo](https://i.gyazo.com/ad46d0d3047df39b0af96de1ce3e3a1e.png)](https://gyazo.com/ad46d0d3047df39b0af96de1ce3e3a1e)

この画面はこのままにしておく。

<br>

## Node.js

```
$ npm init -y
$ npm i @slack/bolt
```

環境変数を使うので
```
$ npm i --save dotenv
```

以下のファイルを作成する
- index.js 
- .env 


[![Image from Gyazo](https://i.gyazo.com/1be9906ec5fe63a987689eae9c4d3a44.png)](https://gyazo.com/1be9906ec5fe63a987689eae9c4d3a44)

### 環境変数

```.env
OPENAI_API_KEY="OpenAIのAPI"
SLACK_SIGNING_SECRET="SlackのSigning Secret"
SLACK_BOT_TOKEN="SlackのBot User OAuth Token"
```

#### SLACK_SIGNING_SECRET 
環境変数「SLACK_SIGNING_SECRET」 は以下
[![Image from Gyazo](https://i.gyazo.com/bf00a3ff1a31e4523df677ada93ca59e.png)](https://gyazo.com/bf00a3ff1a31e4523df677ada93ca59e)

#### SLACK_BOT_TOKEN
環境変数「SLACK_BOT_TOKEN」 は以下

Settings > Install App 
[![Image from Gyazo](https://i.gyazo.com/6ac5202bf9c866fc38ea5390c865a921.png)](https://gyazo.com/6ac5202bf9c866fc38ea5390c865a921)

このように「Please add at least one feature or permission scope to install your app.」というメッセージが表示されている場合は　

[![Image from Gyazo](https://i.gyazo.com/6c6502c2966a01e16dba0132a43facf4.png)](https://gyazo.com/6c6502c2966a01e16dba0132a43facf4)

[![Image from Gyazo](https://i.gyazo.com/fca74e9e0bf70e3437df9fb803a95fb3.png)](https://gyazo.com/fca74e9e0bf70e3437df9fb803a95fb3)

「app_mentions:read bot scope」 を追加。
[![Image from Gyazo](https://i.gyazo.com/9fb910601de2bda7e18ad5ea091dfbe7.png)](https://gyazo.com/9fb910601de2bda7e18ad5ea091dfbe7)

再度
Install App > Install to workspace
[![Image from Gyazo](https://i.gyazo.com/d93881caf33d61467d63cb3c2506fa39.png)](https://gyazo.com/d93881caf33d61467d63cb3c2506fa39)

こんな画面になったら「許可する」をクリック
[![Image from Gyazo](https://i.gyazo.com/dec7d668e20e11c0f06bd18719a903e6.png)](https://gyazo.com/dec7d668e20e11c0f06bd18719a903e6)

以下をコピーして .env ファイルの「SLACK_BOT_TOKEN」　にペーストする、
[![Image from Gyazo](https://i.gyazo.com/6d851c6ecaa49d63d65c42a0b46637d5.png)](https://gyazo.com/6d851c6ecaa49d63d65c42a0b46637d5)

　<br>

OAuth & Permissions　の
Add an OAuth Scope で
メッセージ送信の機能の権限設定である chat:write を追加
[![Image from Gyazo](https://i.gyazo.com/dab83e864cf4df3ddf2cb12a7231bfca.png)](https://gyazo.com/dab83e864cf4df3ddf2cb12a7231bfca)

reinstall しなさいというメッセがきたらそのとおりにする。
<br>


### コード

以下のコードを入力する。（おうむ返しするアプリ）

``` index.js
'use strict';

require("dotenv").config();

const { App } = require('@slack/bolt');

const app = new App({
  token: process.env.SLACK_BOT_TOKEN,
  signingSecret: process.env.SLACK_SIGNING_SECRET
});

//メッセージが投稿された時に呼ばれるメソッド
app.message(async ({ message, say }) => {
  await say(message.text);
});
//アプリが起動時に呼ばれるメソッド
(async () => {
  await app.start(process.env.PORT || 3000);
  console.log('⚡️ Bolt app is running!');
})();
```


## 実行

### ngrok

正式にデプロイする前に、ローカルサーバーで試すためにngrokを使った。

ngrokをインストール
```
$ npm install -g ngrok
```

ngrokを起動
```
$ ngrok http 3000
```

次のイベントの設定に使う Request URLを控える。
Request URLは　下の画像のURL + /slack/events
[![Image from Gyazo](https://i.gyazo.com/d7d724fb464dac4bee29775718998f3f.png)](https://gyazo.com/d7d724fb464dac4bee29775718998f3f)
たとえば
```
https://4453-2405-6587-a0-900-d52f.ngrok.io/slack/events
```

<br>
ngrokは起動したままで、
プログラムを実行する。

```
node index.js
```
<br>


### イベントの設定

Event Subscriptions 
- Enable Events の設定を On
- さきほど控えたRequest URL を入力
  
Request URL に問題がない場合は入力フィールドの上に緑のチェックマークが表示される。

[![Image from Gyazo](https://i.gyazo.com/80e99df8b2265dc8277fa6c329db3ebd.png)](https://gyazo.com/80e99df8b2265dc8277fa6c329db3ebd)




<br>
今の画面を少し下にスクロールして、<br>
「Subscribe to bot events」　 > 「Add Bot User Event」をクリック

[![Image from Gyazo](https://i.gyazo.com/5069fc67114819a28b649eafd798d11a.png)](https://gyazo.com/5069fc67114819a28b649eafd798d11a)

以下の３つを追加し、「Save Changes」をクリック
- message.im（オウム返しボットDM内でメッセージを送った際のイベント）
- message.groups（プライベートチャンネル内でメッセージを送った際のイベント）
- message.channels（パブリックチャンネル内でメッセージを送った際のイベント）

[![Image from Gyazo](https://i.gyazo.com/d743841db31141e73ec1dbd9980d8b9d.png)](https://gyazo.com/d743841db31141e73ec1dbd9980d8b9d)



こんなメッセがでたら、
「reinstall your app」をクリック
[![Image from Gyazo](https://i.gyazo.com/d644877e9acf7fed762c1feb247c5ae9.png)](https://gyazo.com/d644877e9acf7fed762c1feb247c5ae9)


### Slackアプリの追加
Slackに行き、このアプリを追加したいチャンネルで以下
[![Image from Gyazo](https://i.gyazo.com/99581644f8c595574516af1da1dbf125.png)](https://gyazo.com/99581644f8c595574516af1da1dbf125)

もしSlackでこんなメッセージがあれば
[![Image from Gyazo](https://i.gyazo.com/5974ab04888f726d2ba41129ce892685.png)](https://gyazo.com/5974ab04888f726d2ba41129ce892685)

Slack Apiの管理ページから、
「App Home > Show Tabs」
「Allow users to send Slash commands and messages from the messages tab」の欄にチェックを入れる。



オウム返しアプリが出来た。
[![Image from Gyazo](https://i.gyazo.com/7f7a3e3776d70ce4c98aef61218a7326.png)](https://gyazo.com/7f7a3e3776d70ce4c98aef61218a7326)



以上です。