おおくまねこ

職業プログラマーです。興味のある話題を書いています。

Slack のチャンネルにメッセージを送信するために Incoming Webhook を使って送信する

はじめに

概要

Slack にメッセージを送信するため、コマンドラインcurl やプログラムから

HTTPリクエストをよるAPIを用いた投稿をする方法がありますが、

そのやり方をいつも忘れてしまうので履歴として残しています。

 

Slack API にリクエストするアプリケーションを作成するのは

1年に1回とかが私にはいいところなので、

作るたびにやり方を忘れてしまっていたりUIがかわったりしているので

備忘録としても記載することにしました。

 

Slack API でポストする方法は3つありますが、

その中で Incoming Webhook を選んだ強い理由はありません。

token の管理をアプリケーション側でしなくてよいことくらいかなと思うのですが、

他のでもよかったのかもしれません。

ひとまずの動作確認をしたかったので以上のものを選びました。

 

2021年8月時点の使い方、UIの操作方法になります。

ユースケース

どういうケースで Slack API からの投稿を行いたいかというと、

機械的に実行した結果を Slack に投稿したい場合や、

システムにイベントが発生した時に、その内容や通知を Slack に飛ばしたい場合かと思います。

 

なお、今回の内容では触れることはないんですが、

私の場合は Github API で取得したPRの情報などを形成して

内容を Slack に通知したいというユースケースを実現するためのプログラムを作成しようとしました。

(頻度しては1か月に1回とかくらいですが)

 

参考にさせていただいた内容

以下のブログの「Incoming Webhooks を使う」を参考にしました。

説明は丁寧ですし、「Bot token を使う場合」、「User Tokenを使う場合」についても詳細に書かれているので、とても参考になる内容でした。

christina04.hatenablog.com

 

内容

Slack の workspace は事前に作成済みを想定しています*1

 

実際にやることの内容は以下になります。

  • 投稿する App を作成します(作成済みのものを使う場合は不要)
  • 「Incoming Webhooks」を有効にする

投稿するApp の作成

ワークスペースにログインした状態で、以下にアクセスして投稿用の App を作成します。

Slack API: Applications | Slack

 

「Create New App」をクリックして、Appを作成することができます。

 

f:id:keyno63:20210810003405p:plain

クリックすると、ダイアログが表示されるので、「From scratch」を選択します。

さらにダイアログが表示され、Appの名称・使うワークスペースの選択をすればAppを作成されます。

f:id:keyno63:20210810003856p:plain

今回は「test_app」という名前で作成しました。

隠している部分は、自分の workspace を選択しています。

 

Incoming Webhooks の有効化

 App を作成すると「Basic Information」という画面に遷移していると思います。

f:id:keyno63:20210810004917p:plain

遷移できていない場合や、既存の app から有効化する場合は、

先ほどの「Your Apps」画面から使いたい App を選択することで遷移することができます。

 

「Basic Information」にある「Add features and functionality」から、

「Incoming Webhooks」を選択します。

f:id:keyno63:20210810005035p:plain

 

遷移先の画面で、右上にある Incoming Webhook の有効を行い、

画面の下のほうにあるボタンをクリックして投稿先のチャンネルを選択するようにします。

f:id:keyno63:20210810005617p:plain

投稿先のチャンネルを選択する画面は以下のようになっています。

今回は「general」に投稿するようにします。

f:id:keyno63:20210810005838p:plain

「許可する」 をクリックすると、Webhook URL が作成されます。

f:id:keyno63:20210810010043p:plain

Webhookを作る作業としては以上で完了です。

 

動作確認

実際にURLにリクエストして確認します。

curl などで動作確認も可能です。

TypeScript でアプリケーションを作っていたので、以下のようなサンプルコードを使って確認します*2

const slackBotClient = axios.create({
baseURL: "https://hooks.slack.com/services",
responseType: "json",
headers: {
"Content-Type": "application/json"
}
});

const botData = {
text: "bot message"
};

slackBotClient.post(webHookPath, botData)
.then(
v => {
console.log("slack bot")
console.log(v.data)
}
)

実行すると、以下のような結果が標準出力されます。

// > npx tsc && node dist/index.js
//
// slack bot
// ok

Slack のチャンネルを確認すると、メッセージが投稿されているのが確認できます。

f:id:keyno63:20210810011020p:plain

 

最後に

これで Slack のチャンネルにプログラムからチャットを投稿できるようになりました。

*1:未作成の場合は以下を参考にしてください。

Slack ワークスペースを作成する | Slack

*2:「axios」という HTTP Client を使って確認しています。「webHookPath」という変数に今回作った webhook URL を設定しています。。