LoginSignup
6
8

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-02-25

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とチャンネルに書き込みアプリから返答が来たら完成!
6
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
8