Node.js
Slack
slackbot

今更ながらSlackBotを作ってみた:ダイアログ

前回からの続きで、SlackBotをカスタマイズしていきます。

 今更ながらSlackBotを作ってみた

 今更ながらSlackBotを作ってみた:Slach Commands

 今更ながらSlackBotを作ってみた:Interactive Components

今回はダイアログです。

何かの申請書の入力だったり、アンケート回答がわかりやすいかもしれません。

詳細は以下を参照してください。

slack api: Interacting with users through dialogs

 https://api.slack.com/dialogs


Permission設定

前回までを進めていただいている場合は、特に追加の権限付与は不要です。


サーバ側の実装

の前に、ダイアログを表示するきっかけとして、SlashCommandsを設定します。

(ダイアログ表示の際には、trigger_idが必要です。SlashCommandsからのメッセージにはそれが含まれています)

Features-Slash Commandsを開きます。

image.png

Create New Commandボタンを押下して、作成します。

image.png

サーバ側の実装です。

app.commandは変更、それ以外は追加です。


controllers\slack_testbot\index.js

app.command(async (body, web) =>{

if(body.command == '/hi'){
var hour = new Date().getHours();

var greeting = 'こんにちは';
if( 5 <= hour && hour <= 9 )
greeting = 'おはよう';
else if( 18 <= hour && hour < 5 )
greeting = 'こんにちは';

var message = {
text: greeting + '!' + (body.text ? (' ' + body.text + " です。") : '')
};
app.responseMessage(body.response_url, message );
}else if( body.command == '/query'){
var message = {
text: "選択肢を表示します。",
blocks: blocks,
};
app.responseMessage(body.response_url, message );
}else if( body.command == '/dialog'){
options.trigger_id = body.trigger_id;
app.dialogOpen(options);
}
});

app.submission(async (body, web) =>{
var message = {
"text": '回答ありがとうございました。',
};
app.responseMessage(body.response_url, message );
});

app.cancellation(async (body, web) =>{
var message = {
"text": 'キャンセルされました。',
};
app.responseMessage(body.response_url, message );
});

var options = {
dialog: {
callback_id: "dialog1",
title: "試食のアンケート",
submit_label: "送信する",
notify_on_cancel: true,
elements: [{
type: "text",
label: "試食した食べ物",
name: "name",
placeholder: 'food'
},
{
label: "評価",
type: "select",
name: "review",
options: [{
label: "すごく美味しい",
value: "very_good"
},
{
label: "美味しい",
value: "good"
},
{
label: "普通",
value: "normal"
},
{
label: "不味い",
value: "bad"
},
{
label: "すごく不味い",
value: "very_bad"
}
]
},
{
type: "textarea",
label: "その他",
name: "others",
hint: "好きに書いてください",
optional: "true"
}
]
},
trigger_id: ''
};


app.commandにおいて、受信したメッセージに含まれるtrigger_idを利用しています。


動作確認

今回も、AndroidのSlackアプリで動作確認しました。

/dialogを入力すると、

image.png

ダイアログが表示されました!

image.png

こんな感じで入力して、右上の送信するを押下すると、

image.png

app.submissionが呼ばれ、レスポンスメッセージが返されました。

image.png

サーバ側では、app.submissionのコールバック関数に、以下のデータが返ってきています。

  "submission": {

"name": "ハンバーグ",
"review": "very_good",
"others": null
},

ちなみに、送信せずに、戻る をすると、以下のようにapp.cancelleationが呼ばれ、レスポンスメッセージが返ってきます。

image.png

以上