SlackAppのためのBoltを使い倒す、ある一つの例 / An Example of SlackApp with fully using up Bolt

このスライドは【Ginza.SlackApp #1】の発表資料です
https://slackapp.connpass.com/event/154648/

SlackAppを作るのに公式フレームワークであるBoltを使っています。
ExpressReceiverを使うことでフルに使い倒して作ってる1例をご紹介します。

- - -
参考リンク
Bolt 入門ガイド（公式）
https://slack.dev/bolt/ja-jp/tutorial/getting-started

GitHub: challenge-every-month/cem-app
https://github.com/challenge-every-month/cem-app

SlackApp快速開発 - ローカル開発環境構築(with Bolt + TypeScript)
https://blog.solunita.net/develop-slack-app-comfortably-fast-with-bolt-and-typescript/

SlackApp快速開発 - デプロイ(GAE with CircleCI)
https://blog.solunita.net/develop-slack-app-comfortably-fast-deploying-on-gae-with-ci/

SlackApp快速開発 - BoltでHTTPリクエストを受け、Cronで定時実行
https://blog.solunita.net/develop-slack-app-comfortably-fast-receive-http-request-for-cron/

SlackApp快速開発 - Firestoreでデータ保持したり読み出したりする
https://blog.solunita.net/develop-slack-app-comfortably-fast-with-firestore/

Transcript

1. SlackAppのための Boltを使いたおす ある⼀つの例 2019-12-14 Ginza.SlackApp #1 @AquiTCD: ツチダ アキノブ
2. SlackApp？
3. Bot ? App ? 何が違うの？
4. すごい Bot Bot です App みたい もはや App App です
5. すごい Bot Bot です App みたい もはや App App です 実例を交えて このへんの話をします
6. アジェンダ - 今⽇話すこと • ⾃⼰紹介 • Slackコミュニティ良いぞ • 活動内容 • SlackApp化して運営を円滑にしよう • 実装した機能 • BoltからExpressへ • Expressでできること • SlackAppからWebAppへ
7. Who am I ? Aqui TSUCHIDA ⼟⽥ 明信 @AquiTCD サーバーサイドエンジニア 趣味: フロントエンド開発 #料理 #元武道家 #ゲーマー #元バックパッカー https://aquitcd.github.io/Pentazemin/ja/ Pentazemin: Electron製タスク管理アプリ https://aquitcd.github.io/yantan/ja/ YANTAN: Chrome拡張 Rubyist, JSer
8. 家族Slack運⽤してます • 帰宅⽬安報告App • 今⽇はこちらの話ではなく…
9. 毎⽉何かに挑戦する Slackコミュニティ onth very hallenge C E M
10. 活動 内容
11. Challenge Every Month is 何？ 毎⽉何かに挑戦するSlackコミュニティ • ⽉初に今⽉のチャレンジを宣⾔ • 途中で進捗報告したり • Times（分報）したり • 励ましたり、相談したり • ⽉末にチャレンジのふりかえり
12. CEM SlackApp化要件 ⽉初: 今⽉のチャレンジを宣⾔ 今⽉は… ・こんなことや ・あんなことに 挑戦します！ これこれこんな理由や背景で…
13. CEM SlackApp化要件 ⽉末: 今⽉のチャレンジ結果をふりかえり 今⽉は… ✅ こんなことは達成！ ❌ あんなことは未達成 でした。 これこれこんな理由や背景で…
14. SlackApp化
15. CEM SlackApp アーキテクチャ Google App Engine Google Firestore (DB) Bolt GCP Procject
16. CEM SlackApp アーキテクチャ Google App Engine の運⽤ポイント • AlwaysFree という無料枠 • Node.js Standard 環境 • デプロイもわりと楽 • Firestoreと繋ぐのが楽 • Cronで定期実⾏も可
17. CEM SlackApp アーキテクチャ Bolt is 何? • Slack謹製 • SlackAppフレームワーク • ⽇本語ドキュメント有り • トリガーが書きやすい • 特に Interactive Components • 実は裏はExpress
18. 実際の動き
19. CEM 新規登録 /new ⼊⼒フォームモーダル を開く
20. CEM 新規登録 /new ⼊⼒フォームモーダル を開く Firestore に Insert
21. CEM 表明 /publish でデータをチャットに 投稿 Firestoreから データ取得して Post
22. CEM 表明 /publish でデータをチャットに 投稿 Firestoreから データ取得して Post
23. CEM ふりかえり /review モーダルを開いてセレクト
24. CEM ふりかえり /review モーダルを開いてセレクト Firestore データを Update
25. CEM 新規登録 Firestoreから データ取得して Post /review モーダルのボタンで投稿
26. CEM 新規登録 Firestoreから データ取得して Post /review モーダルのボタンで投稿
27. Bolt から Express へ
28. 普通のBolt
29. ExpressReceiver を使ったBolt
30. ExpressReceiver を使ったBolt Express
31. ExpressReceiver を使ったBolt つまり何が嬉しいの？ • エンドポイント作れる • HTTPリクエスト受けれる • Web Cronで動く • Webページも表⽰できる • APIサーバーとしても動作できる
32. HTTPリクエストで動く 例: HTTPリクエストを受けてメッセージ PRϚʔδ
33. HTTPリクエストで動く 例: HTTPリクエストを受けてメッセージ PRϚʔδ CIでデプロイ開始
34. HTTPリクエストで動く 例: HTTPリクエストを受けてメッセージ PRϚʔδ CIでデプロイ開始 デプロイ完了
35. HTTPリクエストで動く 例: WebCronで処理 + メッセージ Cron: ⽉初にリマインド
36. HTTPリクエストで動く 例: WebCronで処理 + メッセージ Cron: ⽉初にリマインド ※ ここでSlackの
 Incoming Webhookでは出来ないような
 複雑な処理やDBのデータも使える
37. Webページ & APIサーバー SlackからDBに DBからJSONに JSONからWebに
38. SlackApp Can Be
39. SlackApp Can Be WebApp On Slack
40. SlackApp can be WebApp on Slack! 特徴 • ⼊⼒はSlackから • 認証、認可はSlackまかせ • 出⼒（表⽰）はWebサイト • Slack外にも広げていける
41. 今⽇のまとめ • Slackコミュニティ良いぞ！ • でも運営を続けるのはなかなか⼤変 • だから極⼒、⾃動化しよう • Boltはイベントトリガーが書きやすい • Boltベースでも機能を広げていける • ⼯夫次第ではどんどん応⽤できる
42. Boltは ただの お気軽SlackApp フレームワーク に 留まらない！
43. 参考リンク https://slack.dev/bolt/ja-jp/tutorial/getting-started Bolt ⼊⾨ガイド（公式） https://blog.solunita.net/develop-slack-app-comfortably-fast-with-bolt-and-typescript/ SlackApp快速開発 - ローカル開発環境構築(with Bolt + TypeScript) https://blog.solunita.net/develop-slack-app-comfortably-fast-deploying-on-gae-with-ci/ SlackApp快速開発 - デプロイ(GAE with CircleCI) https://blog.solunita.net/develop-slack-app-comfortably-fast-receive-http-request-for-cron/ SlackApp快速開発 - BoltでHTTPリクエストを受け、Cronで定時実⾏ https://blog.solunita.net/develop-slack-app-comfortably-fast-with-firestore/ SlackApp快速開発 - Firestoreでデータ保持したり読み出したりする https://github.com/challenge-every-month/cem-app GitHub: challenge-every-month/cem-app