Slide 1
Slide 1 text
Slack API Wrapper
BoltでBotを爆速開発
@mako_makok
2021/04/28 第二回 Web API LT会
Slide 2
Slide 2 text
自己紹介
● 名前: 小林允(@mako_makok)
● 所属: 株式会社ラクス
● 楽楽勤怠のバックエンドエンジニア
● たまにフロントエンドもやる
● Spring Boot/Java/Kotlin/TypeScript/React
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
使ったもの
● Cloud Functions(Firebase)
● Firebase Firestore
● Bolt For JavaScript
Slide 5
Slide 5 text
Bolt For JavaScript
● Slackアプリ構築用のフレームワーク
● Slack API Team謹製
● Slack API Client + Receiver + 便利な型定義
● TypeScriptで書かれている
● For JavaScriptだけでなく他の言語でもSDKが提供されている
○ Python, Java
Slide 6
Slide 6 text
Initialize
トークンを発行してAppに放り込む
import { App } from '@slack/bolt'
const app = new App({
token: process.env.SLACK_BOT_TOKEN,
signingSecret: process.env.SLACK_SIGNING_SECRET,
})
Slide 7
Slide 7 text
Slack API Client
● 第2引数のリスナーがclientを持っている
● new Appしたときの認証情報がそのまま利用される
app.event('team_join' , async ({ event, client }) => {
try {
await client.chat.postMessage ({
channel: 'foo',
text: `いらっしゃい、 <@${event.user.id}>! 🎉`,
})
} catch (error) {
console.error(error)
}
})
Slide 8
Slide 8 text
Slack API Client
● Slack APIはAPIが頻繁に更新、機能追加される
● たまに破壊的な変更も入る
● Slack APIチームがメンテしているので、変更に追従してくれる
● TypeScriptで書かれているので型安全にAPIのパラメータを書くことがで
きる
Slide 9
Slide 9 text
Slack API Client
● 便利なユーティリティ
○ ack()
○ respond()
■ Slackからのリクエストに対して同期、非同期でレスポンスを返
す
○ say()
■ postMessageの簡略版
say(`いらっしゃい、<@${event.user.id}>! 🎉`)
Slide 10
Slide 10 text
Slash Command(http)
slash command request
response
Slackアプリ
Slackのサーバ 自前のサーバ
※3秒以内にレス
ポンスを返す必
要あり
Slide 11
Slide 11 text
Boltで実装した場合
import { App, ExpressReceiver } from '@slack/bolt'
import { config } from './functions.setting'
export const expressReceiver = new ExpressReceiver
({
signingSecret: config.slack.secret,
endpoints: '/events'
})
export const app = new App({
receiver: expressReceiver
,
token: config.slack.token,
processBeforeResponse: true,
})
レシーバーの設定
endpointsの内容がそのまま
ルーティングされる
Slide 12
Slide 12 text
Boltで実装した場合
export const register = (app: App) => {
app.command('/register-word', async ({ ack, body, context, command }) => {
await ack()
await app.client.views.open({
token: context.botToken,
trigger_id: body.trigger_id ,
view: {
type: 'modal',
callback_id: VIEW_ID,
...
})
app.view(VIEW_ID, async ({ ack, view, context, body }) => {
await ack()
...
})
}
App.commandでイベントを
定義
App.viewはview上の実装
基本的にformの操作など
Slide 13
Slide 13 text
まとめ
● Slack API wrapper + slash command開発用のMWの提供
● APIクライアントとして使うだけでも便利だし、ガッツリslash command開
発するにはもってこい
● 今Slackアプリ開発するならほぼこれ一択
FirebaseでBoltを動かすサンプル👉
https://github.com/mako-makok/connpass-notificator