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

前回からの続きで、SlackBotをカスタマイズしていきます。
　[今更ながらSlackBotを作ってみた](https://qiita.com/poruruba/items/ac147fbf0de92f6fad42)
　[今更ながらSlackBotを作ってみた：Slach Commands](https://qiita.com/poruruba/items/b386247d8ace78488f67)
　[今更ながらSlackBotを作ってみた：Interactive Components](https://qiita.com/poruruba/items/759f0eaba798d90419ea)

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

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

slack api: Interacting with users through dialogs
　https://api.slack.com/dialogs

# Permission設定

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

#サーバ側の実装

の前に、ダイアログを表示するきっかけとして、SlashCommandsを設定します。
(ダイアログ表示の際には、trigger_idが必要です。SlashCommandsからのメッセージにはそれが含まれています）

Features－Slash Commandsを開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/bbafee57-57f2-cc50-bd09-befd0ecc2f22.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/146ebeda-0451-90cb-a001-49c6e5893d0b.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/0a1ea845-192b-c6b8-28b6-3f533cba7681.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/2ed6f260-b897-7841-48da-1a178ec08c59.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/6ed5afbe-cff2-64a3-efd9-82247f637482.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/64f64869-bcfb-b92c-50e5-880fc38cbf4e.png)

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/450cdd9e-12a9-2f47-3882-6c4ccc31398a.png)

以上