Apps Scriptリファレンス: Apps Script Reference |障害・課題追跡: IssueTracker |Google Workspace: Status Dashboard - Summary

2017年11月19日日曜日

Slack BOTでMessage Buttonsを使う


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

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

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



事前準備
  • Slack App側の設定をする
    • Appを作成する
    • Incoming Webhookを設定する
    • Interactive Componentsを設定する
    • Outgoing Webhookを設定する

実行するプロセス
  1. Trigger Wordを投稿する
  2. BOT(Outgoing WebHook)がキャッチして.gsにデータを送る
    • ボタン付きのメッセージをSlackに返す
  3. 任意のボタンをクリックする
  4. BOT(Interactive Components)がキャッチして別の.gsにデータを送る
    • クリックされたボタンに応じてSlackにメッセージを返す



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

  • コード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の1つ目の
nameを設定
textを設定
typeをbuttonに設定
valueを設定

2つ目の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を設定する


以下の記事に書きました



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

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

Latest post

Googleドキュメントに見出しを追加したい

今回の例では、ドキュメントの末尾に「見出しD」 を追加します。 見出しA, B, C, Dのスタイルは、見出し3 ( HEADING3 ) に設定しています。  下記Code.gsの  GOOGLE_DOCUMENT_URL を設定して  addHeadingToEnd()  を...