【Slack】Slack API を使って特定のチャンネルに通知するアプリを追加する全手順

## 概要
Slack API を使用して、任意のチャンネルにメッセージ送信する仕組みを作成する手順を解説。
今回説明するのは、既存アプリの「Incoming Webhook」ではなく、Slack Apps を使用した通知 bot である（正確には、Slack Apps の中で Incoming Webhook 機能を利用して作成する新手法の bot）。

既存の「Incoming Webhook」は、Slack のアプリ一覧から簡単に追加できて、設定も非常に短時間で終わるものだったが、セキュリティ面も含めて非推奨となった。

#### 従来の Incoming Webhook は公式非推奨
Slack 初期からある、カスタムインテグレーション App の「Incoming Webhook」は、**公式で非推奨となり、将来削除される可能性がある** ため、こちらで設定することはオススメしない🙅‍♂️

![スクリーンショット 2023-04-10 15.36.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/83be1a79-1bba-e96e-bc66-585ec1f15fd5.png)
👆 説明の冒頭に、非推奨かつ将来削除する可能性の警告文が書かれている（英文ですが…）

### 前提

- Slack のアカウント作成済み
  - まだ無い方は、無料なので Gmail 等でサクッとアカウントを作ってください

## 手順

まず、Web で使用する Slack アカウントにログインしておき、
`https://api.slack.com/apps` にアクセスする。
![img_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/01ae38a8-5c7e-c9b3-4a53-ce93f12b4914.png)

上記の画面が表示されたら、画面右上の **「Create New App」** ボタンをクリックし、**「From scratch」** を選ぶ。
![img_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/7d8a7a56-2230-c7a4-b854-635867634d01.png)

アプリ名設定ダイアログで、「アプリ名（任意）」を入力して、利用する「ワークペース」を選択する。
![img_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/bfa7f4c1-a9e4-c4a5-5403-eed2a79b1fba.png)

作成完了すると、アプリの管理画面が表示される。
![img_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/8f58c792-12b2-6ed5-e335-5e615868a56c.png)
これで「アプリ」自体の作成はできたが、アプリは「ユーザ」では無いため、アプリがチャンネルに通知をするには、通知者となる「ボットユーザ」を持つ必要がある（まだ現時点では、チャンネルへの通知はできない状態）。

アプリの管理画面から、**Add features and functionality** > **Incoming Webhooks*** を選択する。
![img_05_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/004ea60d-e950-0ea6-6b5f-2b05c393371e.png)

画面遷移後、**「Activate Incoming Webhooks」** を **ON** にして、ウェブフック機能を有効にしておく。
![img_05_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/a4e24db5-e9ee-b100-8bd2-14e8a75018c2.png)

この後、左のメニューから **App Home** を選んでアプリホームを表示すると、**「Your App’s Presence in Slack」** というSlack 上で、ユーザとしてどのように表示するかの設定エリアが追加されている。
**App Display Name** の右の「Edit」ボタンを押して、ユーザとしての表示名を入力する。
![img_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/f3c868ac-d9e9-070a-f113-e8f170eb3f7f.png)

入力値はいずれも任意

- Display Name：Slack 上の表示名
  - 現場は、反映に時間がかかったり、うまく表示されず「アプリ名」が出ることもあるので、アプリ名と合わせた方が無難と思われる
- Default username：このアプリを参照する時に使用するユーザ名（基本的に使う機会は少ない）
  - 大文字の半角英字、日本語や特殊記号などは使用不可。半角英字小文字と `-`, `_` あたりを使用する

![img_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/06e5be7e-5bad-ee74-f0bc-5e58a768b71e.png)

完了すると、画面内に "Bot user added!" と、ユーザが追加されたメッセージが表示される。
![img_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/833a16f6-f00a-f978-bb8d-bc836cd6fa09.png)

デフォルトアイコンを設定したい場合は、**Basic Information** を下にスクロールすると **Display Information** という欄があるので、そこの **「+ Add App Icon」** を選べばアイコン画像が設定できる。（※ 今回は設定しない）
![img_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/0b5ff367-9ef0-8c91-946c-2aa547258263.png)
※ 「アプリ名」を変更したい場合は、ここからいつでも変更可能なので覚えておくと良い👍


もう一度、左の **Features** メニューから **「Incoming Webhooks」** にアクセスする。
![img_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/bf14d2ff-b718-09fe-8a5c-29aaa8a00b4c.png)

下の方にスクロールして、**「Add New Webhook to Workspace」** ボタンを押して、ワークスペースにボットユーザを追加する
![img_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/3285e5cb-4fca-a14d-034f-99b5e20263cd.png)


どのチャンネルに対する通知なのかを選択して「許可する」を押せば、Webhook URL が発行される。
![img_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/14ab59f7-eab0-cc40-b572-221d497b7f40.png)

「Webhook URL」の **「Copy」** ボタンを押せば、API に使用する URL がコピーできる。
![img_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/8b8e0eaf-240d-7694-00a1-82a2b1ddbc38.png)

以上で、API による通知の設定は完了。あとは、この URL を使って投稿メッセージを投げるだけ。

## 動作確認
管理画面の Webhook URL 一覧の部分にすでに curl で動作テストできるコマンドがあるので、それをコピーしてターミナル等から実行しても確認はできる。

- HTTP メソッド：`post`
- URL： 生成されたウェブフック URL
- ヘッダ： `Content-type: application/json`
- 送信データ： `{ "text": "テスト通知です。" }`

以下、API テストツールを使用して動作をチェックした例
![img_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/666030fd-cfdf-93fa-ab98-4fc598bacbef.png)

送信したら、無事に通知が飛んできた :bell: 
![img_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/b6ed9ccb-af09-a5e2-8424-0a4ff1b9ce9d.png)