新卒研修振り返り

新卒研修でSlackからChatGPTを呼べるSlackAppを開発し、社内に導入しました。
その振り返りスライドになります。

Transcript

1. ChatGPTをSlackから呼び出せるサービスを 社内に導入してみた ~誰でも簡単に作れるSlackAppという選択肢を~ 2023.06.27 1 開発一部　那仁満德
2. 自己紹介 2 ▪ 名前: 那仁満德(なりんまんど) ▪ 23卒 ▪ Gyroチーム ▪ 学生時代プログラミングスクールのメンターを2年 ▪ 慶應義塾大学理工学部管理工学科修士卒 元バスケ部 足立区育ち
3. 何を伝えるか 3 ➢ Who ◦ SlackAppを開発したことがない方 ➢ Why ◦ 問題解決の手段にSlackAppという選択肢を持つ ➢ What ◦ SlackAppとは何かとその作り方 ➢ How ◦ の事例をベースに具体→一般化
4. 問題解決の手段にSlackAppという選択肢を ❏ Slackは仕事に根差している ❏ 誰でも簡単に作れる ✨Goal✨ 4
5. アジェンダ 研修の背景 01 SlackAppとは 02 作り方 03 結果 04 5
6. プロダクト開発研修 6 ChatGPTを全社で安全に利用できるサービスの開発(TeamB) https://note.com/buysell/n/n869d53eb9e8f
7. プロダクト開発研修 7 ChatGPTの利用状況(4月に取った事前アンケート) ＝＞継続層は全体の１０％ ＝＞まだまだ普及は進んでいない現状
8. プロダクト開発研修 8 ❏ 普及の観点から第一号をSlackApp(SlackBuddy)として実装 ❏ SlackからChatGPTを利用できるようなUX ChatGPTを全社で安全に利用できるサービスの開発 BuySell Buddy
9. SlackAppとは 9 ❖ Slack上の多様な機能をアプリケーションと して利用できるようにしたもの ➢ 通知、メンション、フォームなど ❖ 他サービスとの連携 何ができるの？
10. 10 ❖ サイドバーにAppとして追加される ➢ Botアカウントとして機能する ❖ 他サービスとの連携ができる ➢ Github、Googleカレンダー通知 SlackApp 特徴
11. 11 ❖ Slack社が提供しているSlackApp のフレームワーク(jsなど) ➢ コードベースの柔軟な開発 bolt https://slack.dev/bolt-js/ja-jp/tutorial/getting-started ❖ cf.ワークフロービルダー ➢ ノーコード。限定的。
12. 12 ❏ Manifests.yamlを作成する ❏ サーバーの処理コードを書く ❏ アプリをSlackのワークスペースにインストールする SlackApp作成に必要な要素 SlackAppのサーバー Slack Eventのリッスン 通知
13. 13 Manifests.yamlを作成する ❖ 各種設定を書く ➢ botの表示名 ➢ scope ➢ request_urlなど ❖ App管理画面のGUI上で設定するこ ともできる _metadata: major_version: 1 minor_version: 1 display_information: name: SlackBuddy description: SlackからBuySellBuddyを呼び出すことができます background_color: '#00A67E' features: app_home: home_tab_enabled: true messages_tab_enabled: true messages_tab_read_only_enabled: false bot_user: display_name: SlackBuddy always_online: true oauth_config: scopes: bot: - app_mentions:read - channels:history - chat:write - chat:write.customize - chat:write.public - commands - groups:history - im:history - im:write - mpim:history - users:read settings: event_subscriptions: bot_events: - app_mention - app_home_opened - message.channels - message.groups - message.im - message.mpim request_url: https://slack-buddy-xxxxxx.a.run.app/slack/events interactivity: is_enabled: true request_url: https://slack-buddy-xxxxxx.a.run.app/slack/events org_deploy_enabled: false socket_mode_enabled: false
14. 14 Manifests.yamlを作成する https://api.slack.com/apps?new_app=1 ❏ SlackAppの作成画面より登録できる
15. 15 サーバーの処理コードを書く const { App } = require('@slack/bolt'); const app = new App({ token: process.env.SLACK_BOT_TOKEN, signingSecret: process.env.SLACK_SIGNING_SECRET }); (async () => { await app.start(process.env.PORT || 3000); console.log('⚡ Bolt app is running!'); })(); ❏ サーバーの起動 ❏ TokenはSlackAppの管理画面より取得する ❏ ローカルサーバーでのデバッグも可能(バイセルのワークスペース)
16. 16 サーバーの処理コードを書く app.event('app_mention', async ({ event, client }) => { const threadId = event.thread_ts || event.ts try { const result = await client.chat.postMessage({ channel: event.channel, thread_ts: threadId, text: `Hello <@${event.user.id}>! ` }); logger.info(result); } catch (error) { logger.error(error); } }); ❖ ex. メンションイベントを受け取り処理する ➢ スレッドに返信(SlackAPI) ❖ 処理中に他サービスとのAPI連 携を書ける✨
17. 17 サーバーの処理コードを書く ❖ event引数のデータ構造 ➢ eventの種類や呼び出された場所に 応じて情報が動的に変わる ▪ ex. thread_ts https://api.slack.com/events/app_mention ❖ 柔軟性◯ ❖ 型定義❌ const threadId = event.thread_ts || event.ts
18. 18 サーバーの処理コードを書く ❖ データ構造の動的さ故？ ➢ TypeScriptのboltはこの辺未整備っぽい https://slack.dev/bolt-js/tutorial/using-typescript ❖ 引数がどんな情報を持っているかは、 公式docを見たり出力しながら調べる
19. 19 サーバーの処理コードを書く ❖ Block Kit ➢ 様々な(richな)UIをJSONで構築する仕組み ▪ Message ▪ Modal ▪ HomeTab ➢ Slack通知APIの引数に設定できる ❖ Block Kit Builderを使うとGUIで簡単にJSONを 生成できる https://app.slack.com/block-kit-builder/T3213CFGS
20. 20 アプリをSlackのワークスペースにインストールする 1. boltサーバーをどこかにデプロイする a. URLをrequest_urlに設定 2. 管理者から許可を貰う 3. SlackAppの管理画面よりinstall実行
21. 問題解決の手段にSlackAppの選択肢を ❖ ChatGPTをSlackから使えるようにしたサービスの導入 ❖ ユーザーから嬉しい声多数 ✨まとめ✨ 21
22. ❖ 社内では毎日100人ほどのアクティブユーザー ❖ メディアから取材も ✨その後✨ 22