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
94
新卒研修振り返り
新卒研修でSlackからChatGPTを呼べるSlackAppを開発し、社内に導入しました。
その振り返りスライドになります。
m-narin
December 21, 2023
Tweet
Share
More Decks by m-narin
See All by m-narin
転職後のキャッチアップで工夫したこと
narin0520
0
380
技術ブログのすゝめ
narin0520
0
18
技術ブログをCLI管理する
narin0520
0
69
Other Decks in Programming
See All in Programming
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
3.7k
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
120
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
1
540
DMMオンラインサロンアプリのSwift化
hayatan
0
270
ecspresso, ecschedule, lambroll を PipeCDプラグインとして動かしてみた (プロトタイプ) / Running ecspresso, ecschedule, and lambroll as PipeCD Plugins (prototype)
tkikuc
2
2.3k
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
10
1.4k
動作確認やテストで漏れがちな観点3選
starfish719
5
880
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
3
630
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
500
ファインディの テックブログ爆誕までの軌跡
starfish719
1
790
Vue.jsでiOSアプリを作る方法
hal_spidernight
0
120
時計仕掛けのCompose
mkeeda
1
200
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
52k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Music & Morning Musume
bryan
46
6.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Automating Front-end Workflow
addyosmani
1367
200k
A Tale of Four Properties
chriscoyier
157
23k
Faster Mobile Websites
deanohume
305
30k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
3k
The Cult of Friendly URLs
andyhume
78
6.2k
We Have a Design System, Now What?
morganepeng
51
7.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
270
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