Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What is going on with this article?
@lmatsul

Javascript で Slack へ通知する手順

More than 1 year has passed since last update.

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)}`)
}
11
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
lmatsul
Windowsアプリケーション開発 → 組み込み開発 → Webシステム開発 → ゲーム関連サーバーサイド開発 と渡り歩いてきて、気づいたらアラフォー。 最近はスマートスピーカーのスキル開発やったり、Webサービス立ち上げてみたり、アプリ作ってみたり、Dockerイジってみたり。 やりたいことや覚えることいっぱいであっぷあっぷしとります。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
11
Help us understand the problem. What is going on with this article?