【Slack】Incoming Webhooksを使ってSlack通知を飛ばそう

はじめに

エラーハンドリングで実装者側がEUのエラーを確認できるようにエラー内容をslackに通知する必要があったので、その実装の振り返り記事になります。

Incoming Webhooksの設定

1, 次のurlにアクセスする。
https://api.slack.com/apps

2, 赤枠の「create new app」を押下する。

3, モーダル赤枠の「from scratch」を押下する。

4, 次のモーダルに切り替わるのでApp_Name（今回の例だと「slack-test」）の入力とワークスペース（今回の例だと「やまなか道場」）を選択する。

ワークスペースのドロップダウンに希望のワークスペースがない場合は青枠の「Sign into different workspace」を押下してワークスペースを追加する必要がある。

全て完了したら「Create App」を押下する。

5, 登録が終わると次の画面が表示されるので、赤枠の「Incoming Webhooks」を押下する。

6, Incoming Webhooksページに遷移できていることが確認できる。

7, Incoming Webhooksをアクティブにする。

アクティブにすると「Webhook URLs for Your Workspace」が開放されていることが確認できる。

8, Incoming Webhooksページをアクティブにして下部にスクロールし赤枠の「Add New Webhook to Workspace」を押下する。

9, 次のページに遷移することが確認できる。

投稿先（今回の例だと「Shun」）を選択し「許可する」を押下する。

10, 先程のIncoming Webhooksページに戻るので下部にスクロールするとWebhook URLが生成されていることが確認できる。

また⑧で確認したサンプルのYOUR_WEBHOOKS_URL_HEREの箇所が生成したWebhook URLに置き換わっているので赤枠の「Copy」を押下しターミナルで動作確認をする。

11, ターミナルで先程のコマンドを実行するとslackに通知が飛んでいることを確認することができる。

フロント側からslack通知させる

先ほどの生成したWebhook URLを使用してフロント側からslack通知を行う（Reactでの実装を想定しています。）

import axios from "axios";

const handleSlack = () => {
  axios.post("WEBHOOKS_URL", JSON.stringify({ text: "yo some text" }));
};

サーバー側からslack通知させる

先ほどの生成したWebhook URLを使用してフロント側からslack通知を行う（expressでの実装を想定しています。）

const request = require("request");

const handleSlack = () => {
  request.post({
    uri: "WEBHOOKS_URL",
    headers: { "Content-type": "application/json" },
    json: { text: "yo some text" },
  });
};

最後に

n番煎じの記事になってしまいましたがslack通知の実装について振り返ることができました。

もし間違いなどがありましたらご指摘いただけますと幸いです。

最後までご覧いただきありがとうございました。