SlackのIncoming WebhookとJavaScriptでSlackに通知する

以前以下の記事でSlack APIでアプリを作成してそのトークンを使う方法はやりましたが、esaとかのサービスを参考にするとIncoming WebhookでWebhook URLを取得する方法かなと思って試してみました。

blog.mismith.me

Webhook URLを取得

以下のIncoming WebHooksのページから「Slackに追加」をクリック

https://slack.com/apps/A0F7XDUAZ--incoming-webhook-

チャンネルを選択し「Incoming WebHooksを追加する」

するとこのようなWebhook URLが生成される

https://hooks.slack.com/services/{token}

登録済みのIncoming WebHooks一覧はこちら

https://slack.com/apps/A0F7XDUAZ--incoming-webhook-?next_id=0

JavaScriptで送信する

取得したIncoming WebHooksでSlackに送信します

const sendSlack = (newItem) => {
    const payload = {
      // slackに送信する内容
      blocks: [
        {
          type: 'section',
          text: {
            type: 'mrkdwn',
            text: '新規投稿',
          },
        },
        {
          type: 'section',
          fields: [
            {
              type: 'mrkdwn',
              text: newItem.title,
            },
          ],
        },
      ],
    }

    const url = 'https://hooks.slack.com/services/{token}'

    fetch(url, {
      method: 'POST',
      body: JSON.stringify(payload),
    })
      .then((responce) => {
        console.log(responce)
        if (!responce.ok) {
          alert('エラーです')
        }
      })
      .catch((error) => {
        console.log(error.message)
      })
  }

参考サイト

qiita.com

qiita.com

qiita.com