GASでSlackのinteractive messageの作成 ① Webhookアプリ編

Google Apps Scriptでとあるメッセージを元に選択肢を返し、その選択肢に応じて反応するbotみたいなものを簡易的に作成。

ChatOps目指してデプロイフローを構築するための前弾として

今回作るもの

• Slackのmessageに対し反応するアプリ
• アプリ設定

1. Slackでアプリ作成

1. https://api.slack.com/ から右上のYour Appsをクリック
2. 真ん中あたりのCreate New Appをクリック
3. アプリ名と適用するWorkSpaceを設定して作成
4. アプリ一覧から先ほど作ったアプリ名をクリック
5. サイドバーにあるIncoming Webhooksを選択
6. Add new Webhook to Workspaceをクリックしチャンネルを指定し連携する。
7. URLが発行される。（のちのコードで使う）

2. コードの作成

今回はこのコードで書きました。
エラーハンドリングとかまでは詳しくやっていないです。（簡易的なので）
SlackがこのアプリのURLを叩き、doPostが作動するようになっています。

doPost.gs

function doPost(e) {
  var params = JSON.parse(e.postData.getDataAsString());
  var response = {};
  if(params.type === 'url_verification') {
    response = {'challenge':params.challenge};
  } else if(params.type === 'event_callback'){
    if(params.event.type == 'message') {
      response = eventHandler(params.event);
    }
  }
  
  return ContentService.createTextOutput(response).setMimeType(ContentService.MimeType.JSON);
}

function eventHandler(event){
  if(event.text == 'dinner') {
     return sendSlack();
  }
  return {};
}

if(params.type === 'url_verification') { response = {'challenge':params.challenge}; ここの表記は認証時のパラメーターにSlack側からchallengeを送られてくるので、challengeで返すように書いています。
普段はelse if部分を通ります。

今回はdinnerというチャットに対して反応するように作成しました。
SpreadSheetに記入した文字に対して反応するように追加改修する予定

slackでテキストを生成して送るところを別ファイル化

sendSlack.gs

function sendSlack() {
  
  var url = "https://hooks.slack.com/services/YOUR_SLACK_HOOK_URL"
  var payload = createPayload()
   var options =
   {
     "method" : "post",
     "contentType" : "application/json",
     "payload" : JSON.stringify(payload)
   };
  return UrlFetchApp.fetch(url, options);
}

function createPayload() {
  var attachments = [{
            "text": "どっち食べたい?",
            "fallback": "Sorry, no support for buttons.",
            "callback_id": "ButtonResponse",
            "color": "#3AA3E3",
            "attachment_type": "default",
            "actions": [
              {
                    "name": "button",
                "text": "お寿司:sushi:",
                    "style": "primary",
                    "type": "button",
                    "value": "お寿司"
              },
              {
                    "name": "button",
                "text": "しゃぶしゃぶ:cut_of_meat:",
                    "style": "danger",
                    "type": "button",
                    "value": "しゃぶしゃぶ"
              }
            ]
          }];      
  
  return {
     "attachments": attachments,
     "username" : "InteractiveNotification",
    　　"text": "todays dinner"
   };
}

2. アプリの作成

1. GASの上部メニューより、公開 → ウェブアプリケーションとして公開
2. 一番下のアプリケーションにアクセスできるユーザーを全員（匿名ユーザーを含む）にする。
3. 更新を押す
4. URLが発行されるので残しておく。

3. Slackアプリの設定

1. Slackアプリ設定ページのサイドバーにEvent Subscriptionsという項目があるので選択
2. GASのアプリ作成時に発行されたURLにRequest URLに貼り付ける
3. Subscribe to Workspace EventsにあるAdd Workspace Eventをクリックして、message.channelsをセットし保存する。
4. dinnerとチャンネルに書き込みアプリから返答が来たら完成！