LoginSignup
14

More than 3 years have passed since last update.

Javascript で Slack へ通知する手順

Posted at

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)}`)
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14