Slackの特定のchannelで
helloと投稿したら「Good」と「so so」のボタンが表示され
クリックしたボタンに応じた処理をしてメッセージを返す
ということを試した時の手順です
もっと簡単なやり方がありそうな気もしますが
意図した仕組みを実現できた方法を書いていきます
事前準備
- Appを作成する
- Incoming Webhookを設定する
- Interactive Componentsを設定する
- Outgoing Webhookを設定する
実行するプロセス
- Trigger Wordを投稿する
- BOT(Outgoing WebHook)がキャッチして.gsにデータを送る
- 任意のボタンをクリックする
- 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を設定する
以下の記事に書きました
Trigger Word(s)をhelloに設定しておきます
（上記のリンク先の記事ではbot@になっている箇所です）
試してみる
helloと投稿すると「Good」と「so so」のボタンが表示されます
「Good」を選択すると対応した応答メッセージが返ってきます
「so so」を選択すると対応した応答メッセージが返ってきます
参考
