Javascript で Slack へ通知する手順

Slack へ Javascript から簡単な通知を送りたいことがあったので、手順をメモしておきます

公式の設定手順は こちら

App の作成

まずは通知を送るための App を作成します

https://api.slack.com/apps へアクセスして「Create New App」をクリックし、
以下の入力、選択をします

項目	説明
App Name:	通知用 App の名前を入力します
Development Slack Workspace:	通知を送りたい Slack のワークスペースを選択します

入力、選択したら「Create App」をクリックします

App の設定

「Create App」をクリックしたら作成した App の設定画面に遷移するので、
そこで「Incoming Webhooks」をクリックし、「Activate Incoming Webhooks」の Off を On に切り替えます

すると下部に Webhook URL のリストが表示されるので「Add New Webhook to Workspace」をクリックします

投稿先のチャンネルを選択する画面が表示されるので、投稿先にしたいチャンネルを選択して「許可する」をクリックします

Webhook URL が追加されたらコピーしておいて、Slack 側の設定は完了です

Javascript の処理

Javascript からは、以下のような関数を追加して呼び出せば OK です

// JQuery の $.ajax を使った場合
function slack(message) {
    const url = '[コピーしておいた Webhook URL]';
    const data = {
        text: message
    };
    $.ajax({
        type: 'POST',
        url:  url,
        data: `payload=${JSON.stringify(data)}`
    });
}

// XMLHttpRequest を使った場合
function slack(message) {
    const url = '[コピーしておいた Webhook URL]';
    const data = {
        text: message
    };
    const xml = new XMLHttpRequest();
    xml.open("POST", url, false);
    xml.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8");
    xml.send(`payload=${JSON.stringify(data)}`)
}