GenieSlack by チーム勝成

情報のストックを、 もっと⼿軽に

あの時Slackで⾒たはずのメッセージが ⾒当たらない…

でも、情報をストックするのは ⼤変…💦

GenieSlackが解決します

SlackのメッセージをesaにストックするSlackアプリ

操作はリアクション⼀つだけ リアクションに反応して ストック先のURLを返信 :summarize: 記事の書かれた esaへのリンク

メッセージはMarkdown形式に変換 ChatGPTを使ってメッセージをMarkdownに変換 タイトルは「実⾏時刻 + メッセージの要約」本⽂は「箇条書き」 with Markdownに変換

追記先記事は⾃動で決定 ChatGPTを使って⽂章のジャンルを判断し GenieSlack/ で始まるタイトルのesa記 事の中から投稿先を決定 with

デモンストレーション

追加開発⚙ 

実⽤性向上を⽬指した機能改善 1. ハードコーディングを解消し、投稿先記事をユーザが作成できるよう改善 2. タイトルにメッセージの要約を使⽤するよう改善

公開アプリ化 Slackアプリとして公開し、誰でも使えるようにしました https://www.genieslack.kusshi.dev/ このQRコードから アプリをインストールできます！

アーキテクチャの 刷新 ユーザ Slack Nginx Slackイベント⽤ サーバ ラウンディングページ (Gatsby) esa OAuth⽤サーバ (Flask) esa API OpenAI API EC2 インスタンス RDS (MySQL) GitHub Pages + Actions ⼀般公開にあたり 未経験の技術にも 多数挑戦（⻘字部 分）

ハッカソンvol2：モブプログラミングで相談しながら開発 今回：オンライン会議、ハドルミーティング、対⾯での共同作業を実施 共同作業で開発 オンライン共同作業 実施回数 合計18回 オンライン共同作業 実施時間 合計33時間 ＋ 研究室で会ったときに相談

技術⾯では、話しきれないくらい⾊々こだわりました ❖ Dockerを使った冪等性のある環境の構築 ❖ Gatsbyによる⾼速なWebページの開発 ❖ ChatGPTの最新機能Function Callingによるカテゴリ判定性能の向上 ❖ セキュリティに配慮したOAuth認証サーバの構築 ❖ コストとセキュリティに配慮したインフラ選定 詳しくはAppendix & 交流タイムでお話しましょう！

情報のストックを、 もっと⼿軽に

Appendix☕  技術的なこだわり

Dockerを使った環境構築 コマンド1つで実⾏でき、冪等性のある快適な環境を実現 Nginx Slack イベント⽤ サーバ esa OAuth⽤ サーバ network docker compose 5000 3000 “docker compose up -d” だけで構築！

Gatsbyを使ったLP作成 GatsbyJSを採用し、SSGで速いLPを目指しました Lighthouse, PageSpeed Insightsの両方で高スコアを獲得 Lighthouse (Mobile) PageSpeed Insights (Mobile)

最新技術の導⼊ 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に教えた関数の説明

セキュリティに配慮したOAuthの実装 機能性だけでなく、セキュリティにも配慮しています ユーザのSlackが攻撃者のesaと結びつくと 情報流出につながる ユーザの Slackワーク スペース 攻撃者の esaチーム ユーザの esaチーム 対策 1. stateパラメータを使った CSRF対策を⾏う 2. GenieSlackインストールか らesa連携までに時間制限を 設ける 3. セッションの有効期間を 短くする 4. slackのワークスペースIDは 対応する乱数にして URLのパラメータに含める

コストとセキュリティに配慮したインフラ選定 なるべくコストを抑えつつ、セキュリティに関わる部分は妥協せず選定 EC2は無料枠内で使⽤。GatsbyのビルドやVSCode Remote SSHに耐えら れなかったため、GitHub ActionsとDockerでカバー。 RDSインスタンス本体は無料枠内で使⽤。暗号化に使⽤するKMSは、有償 だったが妥協せず採⽤。 LPのホスティングには、無償で信頼性の⾼いGitHub ActionsとGitHub Pages を採⽤。