はじめに
参画中のプロジェクトで、Google Apps Script（GAS）を使用したslack通知機能を作成したので、その手順を紹介します。
今回は、画面のボタンを押すと通知を送る仕様で作りたいと思います。
slack側の設定
1. Incoming WebHooksのアプリを追加
2. Incoming WebHooksのページがブラウザで開かれるので、
通知を送信したいチャンネルを選択して、「Incoming WebHooks インテグレーションの追加」をクリックする。
3. WebHook URLが発行されるので、控えておく。
GASプロジェクトの作成
※既にプロジェクト作成済みの場合は省略してください。
1. ブラウザでgoogledriveを開く
2. 任意のフォルダ内で右クリック
3. 「その他」→「Google Apps Script」を選択
コード
gasは下記の通り。
notifySlack()のurlには、先ほど発行したWebHook URLを記載します。
common.gs
function doGet(e) {
const template = HtmlService.createTemplateFromFile('index');
template.deployURL = ScriptApp.getService().getUrl();
const htmlOutput = template.evaluate();
return htmlOutput;
}
function doPost(e) {
notifySlack();
const template = HtmlService.createTemplateFromFile('index');
template.deployURL = ScriptApp.getService().getUrl();
const htmlOutput = template.evaluate();
return htmlOutput;
}
function notifySlack() {
const url = "XXXXXXX" // WebHook URL
let userName = "slack通知" // 通知アプリの名前
let icon = ":christmas_tree:" // アプリのアイコン
let message = "<!channel>\n\n` + `通知を送りました！`" // メッセージ文言
let jsonData = {
"username": userName,
"icon_emoji": icon,
"text": message
}
let payload = JSON.stringify(jsonData)
let options =
{
"method": "post",
"contentType": "application/json",
"payload": payload
};
// 通知を送信
UrlFetchApp.fetch(url, options);
}
画面のhtmlは下記の通り。
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="text-center m-4">
<form class="mb-5" method="POST" action="<?= deployURL ?>">
<p>ボタンを押すとslack通知を送信します 🔔</p>
<button type="submit" class="btn btn-primary" name="notify" value="true">通知</button>
</form>
</div>
</body>
</html>
実際に通知を送る
コードを記載したら、実際に通知を送信してみます。
1. GASプロジェクト右上部にあるデプロイボタンを押した後、「デプロイをテスト」をクリックします。
2. 表示されたウェブアプリのURLをクリックします。
3. 先ほどのhtml画面が表示されますので、通知ボタンを押す。
チャンネルに送信されました！
通知メッセージについて
最後に、＠channelなどのメンションやアイコンの記載方法を紹介します。
- メンション
| メンション | 記載方法 | メンション対象 |
|---|---|---|
| ＠channel |
<!channel> |
チャンネルに参加していて、送信時に「アクティブなステータス」のメンバー |
| ＠here | <!here> |
チャンネル内のメンバー全員（ログイン状態は関係しない） |
| ＠everyone | <!everyone> |
ゲストを除く#general 内のメンバー全員（ログイン状態は関係しない、#generalでのみ使用可） |
- アイコン
先ほどのgasコード内のlet icon = ":christmas_tree:"で、好きな絵文字を通知アプリのアイコンにすることができます。
絵文字のコードは、下記のサイトを参考にしました。
おわりに
思ったより簡単に作成することができました。
GASを使う際は参考になったら嬉しいです！