Google Apps Script試行錯誤 Blog: Slack BOTでMessage Buttonsを使う

Slackの特定のchannelで
helloと投稿したら「Good」と「so so」のボタンが表示され
クリックしたボタンに応じた処理をしてメッセージを返す

ということを試した時の手順です

もっと簡単なやり方がありそうな気もしますが
意図した仕組みを実現できた方法を書いていきます

事前準備

Slack App側の設定をする

Appを作成する
Incoming Webhookを設定する
Interactive Componentsを設定する
Outgoing Webhookを設定する

実行するプロセス

Trigger Wordを投稿する
BOT(Outgoing WebHook)がキャッチして.gsにデータを送る

ボタン付きのメッセージをSlackに返す

任意のボタンをクリックする
BOT(Interactive Components)がキャッチして別の.gsにデータを送る

クリックされたボタンに応じてSlackにメッセージを返す

今回使うコード.gsは２つあります
それぞれやっていることと設置する場所が異なります

コード1.gs

ボタンを表示するためのコードです
これをWebアプリにしたURLをOutgoing WebhookのRequest URLに設定する

コード2.gs

クリックされたボタンに応じて処理するためのコードです
これをWebアプリにしたURLをInteractive ComponentsのRequest URLに設定する

Webアプリにする方法はこちら

コード1.gs

function doPost(e) {
  var INCOMING_WEBHOOK_URL = "URL";
  var data = {
    "text": "choices",
    "attachments": [{
      "text": "how are you?",
      "fallback": "fallback message",
      "callback_id": "callback_button",
      "color": "#3AA3E3",
      "attachment_type": "default",
      "actions": [{
          "name": "feeling",
          "text": "Good",
          "type": "button",
          "value": "Good"
        },
        {
          "name": "feeling",
          "text": "so so",
          "type": "button",
          "value": "so so"
        }
      ]
    }]
  }
  var params = {
    'method': 'post',
    'payload': JSON.stringify(data)
  };
  UrlFetchApp.fetch(INCOMING_WEBHOOK_URL, params);
}

意訳.gs

この機能は以下を実行する
作成したincoming web hookのurlを設定する
dataを作る
textを設定する
attachmentsの
textを設定
fallbackを設定
callback_idを設定
colorを設定
attachment_typeを設定
actionsの１つ目の
nameを設定
textを設定
typeをbuttonに設定
valueを設定

２つ目のactionの
nameを設定
textを設定
typeをbuttonに設定
valueを設定




paramsを作る
methodをpostに設定
payloadを設定

paramsを付けてURLをたたく

コード2.gs

function doPost(e) {
  var payload = JSON.parse(e["parameter"]["payload"]);
  var value = payload["actions"][0]["value"];
  var link = "<https://www.google.co.jp/search?q=" + value + "|" + value;
  if (value == "Good") {
    var text = link + ">が選択されました。Goodの応答文"
  } else {
    var text = link + ">が選択されました。Good以外の応答文"
  }
  var reply = {
    "replace_original": false,
    "response_type": "in_channel",
    "text": text
  };
  var output = ContentService.createTextOutput(JSON.stringify(reply));
  output.setMimeType(ContentService.MimeType.JSON);
  return output
}

意訳.gs

この機能は以下を実行する
送られてきたpayloadのJSONを解析する
payloadの中のactionsの0番目のvalueを取得し
Google検索のリンクを作成し
もしvalueがGoodなら
Goodの応答文をtxtに入れて
それ以外なら
Good以外の応答文をtextに入れて

replyを作る
replace_originalを設定する（もとのメッセージを置き換えるならtrue）
response_typeを設定する
textを設定する

replyをJSONに変換してContentServiceでoutputする
MimeTypeを設定して
outputを返す

1. Slack App側の設定をする

Appを作成する

左サイドのexpand_moreメニューを開いてManage appsをクリック

AppsのBuildをクリック

Start Buildingをクリック

Create an Appをクリック

App Nameに任意の名称を入力
Development Slack Workspaceを選択
右下のCreate Appをクリック

Incoming Webhookを設定する

①Featuresの Incoming Webhooksをクリック
②offをクリックしてonにする

Add New Webhook to Workspaceをクリック

Post toにchannelを設定して
Authorizeをクリック

このWebhook URLが
コード1.gsのINCOMING_WEBHOOK_URLのURLになります

Interactive Componentsを設定する

①Featuresの Interactive Componentsをクリック

②Enable Interactive Componentsをクリック

コード2.gsのWebアプリのURLをここに設定する
下部のEnable Interactive Componentsをクリックする

Outgoing Webhookを設定する

以下の記事に書きました

Slack側の設定をする（Outgoing Webhookの設定）

Trigger Word(s)をhelloに設定しておきます
（上記のリンク先の記事ではbot@になっている箇所です）

試してみる

helloと投稿すると「Good」と「so so」のボタンが表示されます

「Good」を選択すると対応した応答メッセージが返ってきます

「so so」を選択すると対応した応答メッセージが返ってきます

参考

Attaching interactive message buttons
https://api.slack.com/docs/message-buttons

Attaching content and links to messages
https://api.slack.com/docs/message-attachments

A field guide to interactive messages
https://api.slack.com/docs/interactive-message-field-guide

上記公式のリファレンス以外にも多くの記事を参考にさせていただきました

Sunday, November 19, 2017

Slack BOTでMessage Buttonsを使う