Outgoing WebHooksの代わりをSlack APPで実装する

OutgoingWebHooks と GoogleCloudFunction でSlackチャンネル内の発言に応じた情報の抽出をおこなっていたが
公式は以下のように発表した
<img width="675" alt="スクリーンショット 2019-04-03 17.20.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/354659/9d4f0027-67c1-9893-6ea9-688f53649f88.png">

>これは、従来のカスタム統合に関する情報（チームがSlackと統合するための古い方法）に関する情報を探しているためです。これらの統合はより新しい機能を欠いており、将来廃止される可能性があり、おそらく削除されるでしょう。私達はそれらの使用をお勧めしません。

めっちゃ便利だったのに。。。
親愛なる友を亡くした悲しみは大きいが落ち込んでいる場合じゃない

**代替えのアプリを作らなければ！！**

<img width="671" alt="スクリーンショット 2019-04-03 17.27.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/354659/fb51b16e-abe9-16ab-0945-7b86b5f30d36.png">

>代わりに、私たちはあなたがそれらの置き換えについて読むことを勧めます - Slackアプリ。スラックのアプリケーションを構築することができるだけで、独自のワークスペースのかのApp Directoryを介して配布され、彼らは最新かつ最高のAPIとUI機能を使用することができます。

公式も自分で作れと言っているようだ
まあ確かに自由度が増したほうが拡張性があるから開発者としては嬉しいかも

とりあえず実装してみる

# Slack APPの作成
[https://api.slack.com/apps](https://api.slack.com/apps)にアクセスして、App NameとWorkspaceを入力して **Create App** で新しいアプリを作成
<img width="558" alt="スクリーンショット 2019-04-03 17.37.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/354659/98d91d66-f3e6-2066-c990-ec9fa9995844.png">
# Bot Usersの作成
作成後、基本情報ページに遷移するので、必要な機能を追加していく
今回はOutgoing WebHooksの代わりなので、Botの設定はいらないが、自動返信なども設定したいのでBotの基本設定も行う
<img width="1440" alt="スクリーンショット 2019-04-03 17.44.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/354659/00eac7c3-0bea-bf6c-46fe-492417a9eb36.png">
まずはワークスペースを監視するBotの追加をおこなう
<img width="1440" alt="スクリーンショット 2019-04-03 17.47.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/354659/3101564d-e03b-1eca-cc85-f4fbaf1b219c.png">
<img width="1440" alt="スクリーンショット 2019-04-03 17.48.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/354659/989e4dcf-bcc3-4c55-e8f8-f358ce4f7273.png">
必要な情報を記入してBot Userを作成
<img width="1440" alt="スクリーンショット 2019-04-03 17.49.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/354659/1d83eb81-7c20-2b3c-bd02-d2584eedd2c6.png">

# Event Subscriptionsの有効化
ワークスペース内で起きたイベントに応じて指定したURLにアクセスするように設定する
Request URLに希望のURLを記入
<img width="1440" alt="スクリーンショット 2019-04-03 17.57.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/354659/8ac098cf-a877-f11f-2b7b-4f0e224b6219.png">
**ここで普通にGCFやGASのURLを書き込んでも怒られる**
Event Subscriptions の受け取り先になるには、そのサーバーを所有していることを証明する必要があるため、既存のファイルに以下の処理をコピペ。

何をやっているかというと、URLを記入欄に入力してきた瞬間に`challenge`っていう値が投げられてくるから`challenge`っていう値を投げ返すだけ

```javascript:index.js
if (payload.type === 'url_verification') {
  return res.status(200).json({ 'challenge': payload.challenge });
}
res.status(200).send('OK');
```

処理を実行するイベントを選択
<img width="1440" alt="スクリーンショット 2019-04-03 18.06.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/354659/4fd44f4b-5c70-bdb8-adba-315ce1bd4c58.png">
ご丁寧に説明までつけてくれている
今回はチャンネルにメッセージが投稿されたのをトリガーに処理を実行するので **message.channels** を選択

<img width="631" alt="スクリーンショット 2019-04-03 18.07.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/354659/12576bce-32d8-9368-ffe1-f4693e3a09fe.png">

Bot Eventsも同様に　**message.channels** を選択

<img width="657" alt="スクリーンショット 2019-04-03 18.10.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/354659/b6d7edbc-b483-8838-886a-71668a6b31d8.png">
SaveChangeで設定を保存

# ワークスペースへのインストール
設定の **OAuth & Permissions** の **Scopes** で、`bot` を追加します。
<img width="741" alt="スクリーンショット 2019-04-03 18.27.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/354659/bc66c22d-ff7f-bd71-5603-cb45bb66fe25.png">

あとは　<img width="207" alt="スクリーンショット 2019-04-03 18.30.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/354659/f47475fa-f133-790f-3b44-862e144f663e.png">　を押してSlackワークスペースへのインストールが完了

# 情報の取得
**message.channels event** を用いて情報を取得すると以下のように飛んでくるので好きに料理する
<img width="662" alt="スクリーンショット 2019-04-03 18.40.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/354659/1c286255-72ca-e5fb-f4c0-5912bbc2e09d.png">

```javascript:index.js
if (payload.event && payload.event.type === 'message'){
  console.log(payload.event); // payload.eventの中に上記画像の情報が含まれる
}
```

文献が英語ばっかりなので拒否反応が出るのはわかるけど
使ってみたらかなり自由度が高くて使いやすいからオススメ