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
95
新卒研修振り返り
新卒研修でSlackからChatGPTを呼べるSlackAppを開発し、社内に導入しました。
その振り返りスライドになります。
m-narin
December 21, 2023
Tweet
Share
More Decks by m-narin
See All by m-narin
転職後のキャッチアップで工夫したこと
narin0520
0
390
技術ブログのすゝめ
narin0520
0
19
技術ブログをCLI管理する
narin0520
0
72
Other Decks in Programming
See All in Programming
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
Formの複雑さに立ち向かう
bmthd
1
720
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
DROBEの生成AI活用事例 with AWS
ippey
0
130
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
RailsConf 2023
tenderlove
29
1k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Side Projects
sachag
452
42k
Why Our Code Smells
bkeepers
PRO
335
57k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
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