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
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
SwiftUI Viewの責務分離
elmetal
PRO
0
150
Immutable ActiveRecord
megane42
0
130
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
Domain-Driven Transformation
hschwentner
2
1.9k
sappoRo.R #12 初心者セッション
kosugitti
0
230
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
Featured
See All Featured
Fireside Chat
paigeccino
34
3.2k
GitHub's CSS Performance
jonrohan
1030
460k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Done Done
chrislema
182
16k
Making Projects Easy
brettharned
116
6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
BBQ
matthewcrist
86
9.5k
Bash Introduction
62gerente
610
210k
How to Ace a Technical Interview
jacobian
276
23k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
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