事前準備

Cloud Functions

firebase init Cloud Functionsのプロジェクトを作成する
Typescript のプロジェクトを用意
デプロイ先のURLを控える

Slack App

api.slack.com でSlackアプリの作成
App Credentials の signing secret を控える
OAuth & Permissions で User token か Bot token(xoxb) を控える
- 画面下 Scopes で chat:write を追加する
Event Subscriptions
- Request URL にデプロイ先に URL + "/events" を入力
- message.channels リスナーを追加

参考: Slackアプリでチャンネルにメッセージを送信する方法 - Carpe Diem

sekitats

環境変数のセット

firebase functions:config:set slack.secret=xxx
firebase functions:config:set slack.token=xxx

functions:secrets:setが追加され、functions:config:setが非推奨になった模様
functions:secrets:setが追加され、Functionsのconfigを使った環境変数が非推奨になった話

sekitats

オウム返しするコードを書く

// index.ts
import {reciever} from "./slack/app";

export const helloWorld = functions.https.onRequest(reciever.app);

// slack/app.ts
import * as functions from "firebase-functions";
import {App, ExpressReceiver} from "@slack/bolt";

export const reciever = new ExpressReceiver({
  signingSecret: config.slack.secret,
  endpoints: "/evnets"
});

const app = new App({
  token: config.slack.token,
  reciever,
})

useSlackEvents(app);

import {App} from "@slack/bolt";

export const useSlackEvents = (app: App) => {
  app.message(/.*/, async ({message, say}) => {
    const msg = (message as GenericMessageEvent)
    say(`<@${msg.user}> ${msg.text}`);
  });
}

user, text のところで怒られる。

プロパティ 'user' は型 'KnownEventFromType<"message">' に存在しません。

参考：【Slack Bot開発】HubotとBoltを使用して感じたことまとめ

sekitats

ビルド＆関数をデプロイ

$ npm run build
$ firebase deploy --only functions:helloWorld

参考: Firebase Cloud Function をローカルで実行する - star__hoshi's diary

slack で何か投稿する

sekitats

ボタンを返却する

Block Kit Builder

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

app.message(/.*/, async ({message, say}) => {
    const msg = (message as GenericMessageEvent);
    if (msg.text) {
        await say({
            blocks: [
                {
                    "type": "section",
                    "text": {
                        "type": "mrkdwn",
                        "text": msg.text,
                    },
                },
                {
                    "type": "actions",
                    "elements": [
                        {
                        "type": "button",
                        "text": {
                            "type": "plain_text",
                            "text": "進む",
                        },
                        "style": "primary",
                        "value": "go",
                        "action_id": "button_go",
                        },
                        {
                        "type": "button",
                        "text": {
                            "type": "plain_text",
                            "text": "逃げる",
                        },
                        "style": "danger",
                        "value": "withdraw",
                        "action_id": "button_ withdraw",
                        },
                    ],
                },
            ]
        });
    }
});

sekitats

ボタンクリックのイベントを取得する

事前準備

Interactivity & Shortcuts
- ONにする
- Request URL に先に用意したPOSTのエンドポイントを入力
Cloud Functions のエンドポイントを追加する
- ボタンをクリックによって、POSTリクエストが送られるの app.action でイベントリスナーを追加
- eventTypeは blocks の block_idと合わせる

app.action("button_go", async ({body, ack, respond}) => {
    const blocks = [{
        "type": "section",
        "text": {
            "type": "plain_text",
            "text": "進むが押されました。",
            "emoji": true,
        },
    }];
    await ack();
    await respond({
        blocks,
        replace_original: true,
    });
});

app.action("button_withdraw", async ({ack, respond}) => {
    await ack();
    await respond({
        delete_original: true,
    });
});

イベントアクションに対するレスポンスにはrespond() メソッドを使う。

このスクラップは2023/02/12にクローズされました