RX100で撮り歩くブログ

RX100やRollei B35で写真を撮ったり何やかんやするブログ

SlackbotのフレームワークBoltでモーダルを使ったアプリを作ってみる

SlackbotのフレームワークといえばHubotなどが有名ですが、Slackが公式に出しているBoltを使ってみました。使用する言語はJavaScriptです。ドキュメントに沿ってHelloと打ったら返事を返してくれるのと、モーダルでフォームに入力し特定のチャンネルに投稿するようなアプリを作ってみます。

slack.dev

コードの準備

フォルダ作成

mkdir my_slack_bot

package.jsonを作ります

yarn init

boltとdotenvをインストール。

yarn add @slack/bolt dotenv

app.js

app.jsを作成し以下のように書きます

const { App } = require("@slack/bolt");
const dotenv = require("dotenv");

dotenv.config();

// Initializes your app with your bot token and signing secret
const app = new App({
  token: process.env.SLACK_BOT_TOKEN,
  signingSecret: process.env.SLACK_SIGNING_SECRET,
});

app.message("hello", async ({ message, say }) => {
  await say(`Hey there <@${message.user}>!!!`);
});

(async () => {
  // Start your app
  await app.start(process.env.PORT || 3000);

  console.log("⚡️ Bolt app is running!");
})();

.env

.envファイルを作り以下のように書いておきます。後でSlackからsigning secretとbot tokenを取得します

SLACK_SIGNING_SECRET=
SLACK_BOT_TOKEN=

Slackでの準備

基本的には公式の手順に沿っていけばhelloぐらいは簡単にいけます。

slack.dev

1. App作成

AppページにあるCreate New Appボタンをクリックし、必要な情報を入力し作成します。

Slack API: Applications | Slack

2. Signing Secret

左メニューにある「Basic Information」をクリック。ページの下のほうにあるApp CredentialsのSigning Secretをshowボタンを押して表示しコピーします。

先ほど作った.envにペーストしておきます

SLACK_SIGNING_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxx
SLACK_BOT_TOKEN=

3. OAuth & Permissions

左メニューにあるOAuth & Permissionsページへ。

最初はOAuth Tokens & Redirect URLsにあるInstall to Workspaceボタンは非アクティブになっていて押せません。

下にスクロールしScopesで「chat:write」を選択します。するとInstall to Workspaceボタンを押せるようになるので、Workspaceにインストールします。

同じページにBot User OAuth Access Tokenが表示されるので、.envに追加します

SLACK_SIGNING_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxx
SLACK_BOT_TOKEN=xoxb-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

イベントの設定

イベントの設定にはRequest URLが必要です。今回はHerokuを使います。ホスティング一覧は公式でも紹介されています。Herokuでやると修正のたびにいちいちデプロイする必要あるので、開発時はGlitchを使うといいかもしれません。

api.slack.com

1. Herokuアカウントの作成

Herokuのサイトからアカウント登録しておきます

2. Heroku CLIをインストール

Macの手順です。Mac以外は公式の手順から。

devcenter.heroku.com

brewでインストール

brew tap heroku/brew && brew install heroku

インストールできたか確認

heroku --version

ログイン

heroku login

アプリ作成

cd my_slack_bot

heroku create

作成すると以下の情報がターミナルに表示されるのでメモしておきます

https://<アプリ名>.herokuapp.com/ | https://git.heroku.com/<アプリ名>.git

コードを修正してHerokuへデプロイ

Herokuへのデプロイも公式でドキュメント化されています。

slack.dev

.gitignoreを作成

.env
/node_modules

Procfileを作成

web: node app.js

git

git add .

git commit -m "first commit"

ローカルリポジトリのリモート設定。URLは先ほどターミナルで表示されたgitのURLです。

git remote add heroku https://git.heroku.com/<アプリ名>.git

push。masterブランチに最新のコードがあることを確認してください(じゃないと最新ですよと言われてpushできない)。

git push heroku master

トークンの設定

heroku config:set SLACK_SIGNING_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxx
heroku config:set SLACK_BOT_TOKEN=xoxb-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

インスタンス立ち上げ

heroku ps:scale web=1

ログを確認

heroku logs -t

以下が出ていればOK

⚡️ Bolt app is running!

Request URLを登録

slackアプリのEvent Subscriptionsページへ遷移。

Request URLに先ほどターミナルで表示されたherokuのURLに/slack/eventsをつけて入力します。問題なければ緑色でVerifiedと表示されます。

https://<アプリ名>.herokuapp.com/slack/events

Subscribe to bot eventsまでスクロールし、message.channelsを追加します。すると右下のsave changesがクリックできるようになるので保存します

ここまでやった後Slackでbotを追加したいチャンネルでアプリを招待し、「hello」と打つとメンションで返事してくれるはずです。

モーダルを作る

Slackのショートカット機能からモーダルを開き、入力した値を特定のチャンネルに表示するというものを作ります。

ショートカット作成

まずはショートカットを作ります。Interactivity & Shortcutsページへ。

Request URLに先ほどReqest URLで使ったURLと同じものを入力

https://<アプリ名>.herokuapp.com/slack/events

Create New Shortcutをクリック。Grobalか On messagesのどちらかを選びます。今回はGrobalで。次のページで必要事項を入力。Callback IDはこの後コーディングする時に使うのでメモしておきます。今回はCallback IDをopen_modalとしておきます

f:id:mismith:20210209102752p:plain

app.jsに以下を追加します。Callback IDのopen_modalに反応してモーダルが開くようにするコードです。viewを作ります。

const modalView = require("./modal_view");

app.shortcut("open_modal", async ({ shortcut, ack, context }) => {
  ack();

  try {
    const result = await app.client.views.open({
      token: context.botToken,
      trigger_id: shortcut.trigger_id,
      view: modalView,
    });
  } catch (error) {
    console.error(error);
  }
});

modal_view.jsを作成し以下のように書きます。optional: trueにすると必須項目ではなくなります。callback_idは送信時に受け取るidとして使います。

module.exports = {
  title: {
    type: "plain_text",
    text: "モーダルタイトル",
  },
  submit: {
    type: "plain_text",
    text: "送信する",
  },
  blocks: [
    {
      type: "input",
      block_id: "edit_title",
      label: {
        type: "plain_text",
        text: "タイトル",
      },
      element: {
        type: "plain_text_input",
        action_id: "title_action",
      },
    },
    {
      type: "input",
      block_id: "edit_rema",
      element: {
        type: "plain_text_input",
        action_id: "remarks_action",
        multiline: true,
      },
      label: {
        type: "plain_text",
        text: "備考欄",
        emoji: true,
      },
      optional: true,
    },
  ],
  type: "modal",
  callback_id: "view_1",
};

送信時に特定のチャンネルに投稿するためapp.jsに以下を追加します。modal_view.jsで書いたcallback_idに反応するようにします。チャンネルは#randomに投稿するようにします。

app.view("view_1", async ({ body, ack, view, client }) => {
  await ack();

  const title = view["state"]["values"]["edit_title"]["title_action"];
  const remarks = view["state"]["values"]["edit_remarks"]["remarks_action"];

  try {
    client.chat.postMessage({
      channel: "#random",
      attachments: [
        {
          blocks: [
            {
              type: "section",
              text: {
                type: "plain_text",
                text: title.value,
                emoji: true,
              },
            },
            {
              type: "section",
              text: {
                type: "plain_text",
                text: `備考: ${remarks.value ? remarks.value : "ー"}`,
                emoji: true,
              },
            },
          ],
        },
      ],
    });
  } catch (e) {
    console.log(e);
  }
});

モーダルを使ってみる

メッセージ入力の左下にショートカットがあるのでクリックします。作成したショートカットがあるので選択するとモーダルが開きます。必要事項を入力し送信すると#randomチャンネルに投稿されます

f:id:mismith:20210209104242p:plain

モーダルや送信メッセージのblock-kit-builder

以下のサイトでモーダルや送信メッセージの整形を試すことができます。左側で追加したい項目を選ぶと真ん中のプレビューに追加されます。右側のpayloadでプレビューのコードを取得できます。モーダルで送信ボタンを押してみるとpayloadの隣のActions Previewで受け取る値をみることができます。

https://app.slack.com/block-kit-builder/

参考サイト

api.slack.com

qiita.com

qiita.com