2023/06/24 技育CAMPアドバンス チーム勝成「GenieSlack」

2023年6月24日開催 技育CAMPアドバンス
チーム勝成 発表資料

デモンストレーション：
https://www.youtube.com/watch?v=DBlnx5NhuOk

ランディングページ：
https://www.genieslack.kusshi.dev/

ブログ：
https://blog.hatena.ne.jp/kusshi/kusshi.hatenablog.jp/edit?entry=820878482943999896

Transcript

1. GenieSlack by チーム勝成
2. 情報のストックを、 もっと⼿軽に
3. あの時Slackで⾒たはずのメッセージが ⾒当たらない…
4. でも、情報をストックするのは ⼤変…💦
5. GenieSlackが解決します
6. SlackのメッセージをesaにストックするSlackアプリ
7. 操作はリアクション⼀つだけ リアクションに反応して ストック先のURLを返信 :summarize: 記事の書かれた esaへのリンク
8. メッセージはMarkdown形式に変換 ChatGPTを使ってメッセージをMarkdownに変換 タイトルは「実⾏時刻 + メッセージの要約」本⽂は「箇条書き」 with Markdownに変換
9. 追記先記事は⾃動で決定 ChatGPTを使って⽂章のジャンルを判断し GenieSlack/ で始まるタイトルのesa記 事の中から投稿先を決定 with
10. デモンストレーション
11. 追加開発⚙ 
12. 実⽤性向上を⽬指した機能改善 1. ハードコーディングを解消し、投稿先記事をユーザが作成できるよう改善 2. タイトルにメッセージの要約を使⽤するよう改善
13. 公開アプリ化 Slackアプリとして公開し、誰でも使えるようにしました https://www.genieslack.kusshi.dev/ このQRコードから アプリをインストールできます！
14. アーキテクチャの 刷新 ユーザ Slack Nginx Slackイベント⽤ サーバ ラウンディングページ (Gatsby) esa OAuth⽤サーバ (Flask) esa API OpenAI API EC2 インスタンス RDS (MySQL) GitHub Pages + Actions ⼀般公開にあたり 未経験の技術にも 多数挑戦（⻘字部 分）
15. ハッカソンvol2：モブプログラミングで相談しながら開発 今回：オンライン会議、ハドルミーティング、対⾯での共同作業を実施 共同作業で開発 オンライン共同作業 実施回数 合計18回 オンライン共同作業 実施時間 合計33時間 ＋ 研究室で会ったときに相談
16. 技術⾯では、話しきれないくらい⾊々こだわりました ❖ Dockerを使った冪等性のある環境の構築 ❖ Gatsbyによる⾼速なWebページの開発 ❖ ChatGPTの最新機能Function Callingによるカテゴリ判定性能の向上 ❖ セキュリティに配慮したOAuth認証サーバの構築 ❖ コストとセキュリティに配慮したインフラ選定 詳しくはAppendix & 交流タイムでお話しましょう！
17. 情報のストックを、 もっと⼿軽に
18. Appendix☕  技術的なこだわり
19. Dockerを使った環境構築 コマンド1つで実⾏でき、冪等性のある快適な環境を実現 Nginx Slack イベント⽤ サーバ esa OAuth⽤ サーバ network docker compose 5000 3000 “docker compose up -d” だけで構築！
20. Gatsbyを使ったLP作成 GatsbyJSを採用し、SSGで速いLPを目指しました Lighthouse, PageSpeed Insightsの両方で高スコアを獲得 Lighthouse (Mobile) PageSpeed Insights (Mobile)
21. 最新技術の導⼊ ChatGPTのFunction Calling (6/13リリース機能) を導⼊し、構造的な出⼒を 得られるようにしました Slackの メッセージ Pythonの 関数 JSON functions = [{ 'name': 'get_summarize_info' , 'description' : '要約結果の情報を得る ', 'parameters' : { 'type': 'object', 'properties' : { 'title': { 'type': 'string', 'description' : '要約したメッセージのタイトル ', }, 'category': { 'type': 'string', 'description' : f"要約したメッセージのカテゴリ " } }, 'required': ['title', 'category'], } }] ChatGPT (Function Calling) ChatGPTに教えた関数の説明
22. セキュリティに配慮したOAuthの実装 機能性だけでなく、セキュリティにも配慮しています ユーザのSlackが攻撃者のesaと結びつくと 情報流出につながる ユーザの Slackワーク スペース 攻撃者の esaチーム ユーザの esaチーム 対策 1. stateパラメータを使った CSRF対策を⾏う 2. GenieSlackインストールか らesa連携までに時間制限を 設ける 3. セッションの有効期間を 短くする 4. slackのワークスペースIDは 対応する乱数にして URLのパラメータに含める
23. コストとセキュリティに配慮したインフラ選定 なるべくコストを抑えつつ、セキュリティに関わる部分は妥協せず選定 EC2は無料枠内で使⽤。GatsbyのビルドやVSCode Remote SSHに耐えら れなかったため、GitHub ActionsとDockerでカバー。 RDSインスタンス本体は無料枠内で使⽤。暗号化に使⽤するKMSは、有償 だったが妥協せず採⽤。 LPのホスティングには、無償で信頼性の⾼いGitHub ActionsとGitHub Pages を採⽤。