Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
新卒研修振り返り
Search
m-narin
December 21, 2023
Programming
1
110
新卒研修振り返り
新卒研修でSlackからChatGPTを呼べるSlackAppを開発し、社内に導入しました。
その振り返りスライドになります。
m-narin
December 21, 2023
Tweet
Share
More Decks by m-narin
See All by m-narin
プロになるためのWeb技術入門
narin0520
0
27
転職後のキャッチアップで工夫したこと
narin0520
0
490
技術ブログのすゝめ
narin0520
0
23
技術ブログをCLI管理する
narin0520
0
88
Other Decks in Programming
See All in Programming
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
120
階層化自動テストで開発に機動力を
ickx
1
450
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
350
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
460
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
570
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
360
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
8
1k
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.2k
What's new in Adaptive Android development
fornewid
0
130
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
How to train your dragon (web standard)
notwaldorf
96
6.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Become a Pro
speakerdeck
PRO
29
5.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
The Language of Interfaces
destraynor
158
25k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Typedesign – Prime Four
hannesfritz
42
2.7k
Transcript
ChatGPTをSlackから呼び出せるサービスを 社内に導入してみた ~誰でも簡単に作れるSlackAppという選択肢を~ 2023.06.27 1 開発一部 那仁満德
自己紹介 2 ▪ 名前: 那仁満德(なりんまんど) ▪ 23卒 ▪ Gyroチーム ▪
学生時代プログラミングスクールのメンターを2年 ▪ 慶應義塾大学理工学部管理工学科修士卒 元バスケ部 足立区育ち
何を伝えるか 3 ➢ Who ◦ SlackAppを開発したことがない方 ➢ Why ◦ 問題解決の手段にSlackAppという選択肢を持つ
➢ What ◦ SlackAppとは何かとその作り方 ➢ How ◦ の事例をベースに具体→一般化
問題解決の手段にSlackAppという選択肢を ❏ Slackは仕事に根差している ❏ 誰でも簡単に作れる ✨Goal✨ 4
アジェンダ 研修の背景 01 SlackAppとは 02 作り方 03 結果 04 5
プロダクト開発研修 6 ChatGPTを全社で安全に利用できるサービスの開発(TeamB) https://note.com/buysell/n/n869d53eb9e8f
プロダクト開発研修 7 ChatGPTの利用状況(4月に取った事前アンケート) =>継続層は全体の10% =>まだまだ普及は進んでいない現状
プロダクト開発研修 8 ❏ 普及の観点から第一号をSlackApp(SlackBuddy)として実装 ❏ SlackからChatGPTを利用できるようなUX ChatGPTを全社で安全に利用できるサービスの開発 BuySell Buddy
SlackAppとは 9 ❖ Slack上の多様な機能をアプリケーションと して利用できるようにしたもの ➢ 通知、メンション、フォームなど ❖ 他サービスとの連携 何ができるの?
10 ❖ サイドバーにAppとして追加される ➢ Botアカウントとして機能する ❖ 他サービスとの連携ができる ➢ Github、Googleカレンダー通知 SlackApp
特徴
11 ❖ Slack社が提供しているSlackApp のフレームワーク(jsなど) ➢ コードベースの柔軟な開発 bolt https://slack.dev/bolt-js/ja-jp/tutorial/getting-started ❖ cf.ワークフロービルダー
➢ ノーコード。限定的。
12 ❏ Manifests.yamlを作成する ❏ サーバーの処理コードを書く ❏ アプリをSlackのワークスペースにインストールする SlackApp作成に必要な要素 SlackAppのサーバー Slack
Eventのリッスン 通知
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 Manifests.yamlを作成する https://api.slack.com/apps?new_app=1 ❏ SlackAppの作成画面より登録できる
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 サーバーの処理コードを書く 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 サーバーの処理コードを書く ❖ event引数のデータ構造 ➢ eventの種類や呼び出された場所に 応じて情報が動的に変わる ▪ ex. thread_ts
https://api.slack.com/events/app_mention ❖ 柔軟性◯ ❖ 型定義❌ const threadId = event.thread_ts || event.ts
18 サーバーの処理コードを書く ❖ データ構造の動的さ故? ➢ TypeScriptのboltはこの辺未整備っぽい https://slack.dev/bolt-js/tutorial/using-typescript ❖ 引数がどんな情報を持っているかは、 公式docを見たり出力しながら調べる
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 アプリをSlackのワークスペースにインストールする 1. boltサーバーをどこかにデプロイする a. URLをrequest_urlに設定 2. 管理者から許可を貰う 3. SlackAppの管理画面よりinstall実行
問題解決の手段にSlackAppの選択肢を ❖ ChatGPTをSlackから使えるようにしたサービスの導入 ❖ ユーザーから嬉しい声多数 ✨まとめ✨ 21
❖ 社内では毎日100人ほどのアクティブユーザー ❖ メディアから取材も ✨その後✨ 22