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月に取った事前アンケート) ＝＞継続層は全体の１０％ ＝＞まだまだ普及は進んでいない現状 

プロダクト開発研修 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