はじめに

参画中のプロジェクトで、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通知を送信します &#128276;</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を使う際は参考になったら嬉しいです！