安く・手軽に・現場発　既存資産を生かすSlack×AI検索Botの作り方

by gree_tech

Slide 1

Slide 1 text

安く・手軽に・現場発既存資産を生かす Slack×AI検索Botの作り方株式会社WFS 伊藤一樹　岩見祐哉　梅田匠

Slide 2

Slide 2 text

梅田　匠 2020年にグリー株式会社（現：グリーホールディングス株式会社）へ入社。 3Dモデラー・2Dデザイン・アニメーション・リガーの経験をもとに『聖剣伝説Echoes of Mana』開発中にTAに転向。現在は『ヘブンバーンズレッド』のホームアニメーション制作を兼務しつつ、他プロジェクトも担当主務の傍ら社内における生成AIの活用方法を模索し技術導入や検証を担当株式会社WFS テクニカルアーティスト 2

Slide 3

Slide 3 text

目次 3 UX設計・運用開発の動機と活用方針の考え方技術スタック企画開発α 運用開発β

Slide 4

Slide 4 text

©WFS Developed by WRIGHT FLYER STUDIOS AI検索botについて社内Slack上で動作する開発資料を検索し、スレッドで説明してくれるbot （以後bot 主な機能 - Slackのスレッド内で質問応対し、開発資料から回答する - 画像内の文字も調べることができる - データソース側も画像内の文字を取得する - RAG検索のデータソースをユーザーが追加できる - 追加済み資料の更新も日々反映する 4 ©WFS Developed by WRIGHT FLYER STUDIOS

Slide 5

Slide 5 text

©WFS Developed by WRIGHT FLYER STUDIOS bot の主な機能 - Slackのスレッド内で質問応対し、開発資料から回答する - 画像内の文字も調べることができる - データソース側も画像内の文字を取得する - RAG検索のデータソースをユーザーが追加できる - 追加済み資料の更新も日々反映する 5

Slide 6

Slide 6 text

©WFS Developed by WRIGHT FLYER STUDIOS bot の主な機能 - Slackのスレッド内で質問応対し、開発資料から回答する - 画像内の文字も調べることができる - データソース側も画像内の文字を取得する - RAG検索のデータソースをユーザーが追加できる - 追加済み資料の更新も日々反映する 6

Slide 7

Slide 7 text

©WFS Developed by WRIGHT FLYER STUDIOS bot の主な機能 - Slackのスレッド内で質問応対し、開発資料から回答する - 画像内の文字も調べることができる - データソース側も画像内の文字を取得する - RAG検索のデータソースをユーザーが追加できる - 追加済み資料の更新も日々反映する 7

Slide 8

Slide 8 text

開発の動機と活用方針の考え方 8

Slide 9

Slide 9 text

9 UX設計・運用開発の動機と活用方針の考え方技術スタック企画開発α 運用開発β

Slide 10

Slide 10 text

©WFS Developed by WRIGHT FLYER STUDIOS 開発の動機プロジェクト規模の拡大に比例して人員、とくにアート・プランナーが増加した結果、サポートを担当するエンジニアやテクニカルアーティストに負荷の集中が加速してしまう･･････負荷を分散することはできないだろうか？ 10 企画開発α 運用開発β

Slide 11

Slide 11 text

©WFS Developed by WRIGHT FLYER STUDIOS 開発の動機習熟度の兼ね合いもありサポート担当はそう簡単には増やせない 11 企画開発α 運用開発β

Slide 12

Slide 12 text

©WFS Developed by WRIGHT FLYER STUDIOS 開発の動機習熟度の兼ね合いもありサポート担当はそう簡単には増やせない ↓ 開発情報を持った生成AIなら人員を増やさずに対応できる可能性がある 12 企画開発α 運用開発β

Slide 13

Slide 13 text

©WFS Developed by WRIGHT FLYER STUDIOS 想定したbotの担当業務 13 - Unityや Git,Maya,Photoshopなど開発環境のエラー解消トラブルシューティング環境構築のサポート - プロジェクトに必要なソフトのインストールや設定などの案内企画開発α 運用開発β

Slide 14

Slide 14 text

©WFS Developed by WRIGHT FLYER STUDIOS 想定したbotの担当業務 14 - Unityや Git,Maya,Photoshopなど開発環境のエラー解消トラブルシューティング環境構築のサポート - プロジェクトに必要なソフトのインストールや設定などの案内 ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 15

Slide 15 text

©WFS Developed by WRIGHT FLYER STUDIOS 15 - unityや Git,maya,Photoshopなど開発環境のエラー解消トラブルシューティング質問の内容から直接的な問題解決にアプローチしてしまいわかりづらい上に問題を解決していない ©WFS Developed by WRIGHT FLYER STUDIOS

Slide 16

Slide 16 text

©WFS Developed by WRIGHT FLYER STUDIOS 16 環境構築のサポート - プロジェクトに必要なソフトのインストールya設定などの案内始めは問題なく案内をしてくれるが･･･・ ©WFS Developed by WRIGHT FLYER STUDIOS

Slide 17

Slide 17 text

©WFS Developed by WRIGHT FLYER STUDIOS 17 環境構築のサポート - プロジェクトに必要なソフトのインストールから設定などの案内会話を重ねていくうちに本来のワークフローの説明から逸れてしまう ©WFS Developed by WRIGHT FLYER STUDIOS

Slide 18

Slide 18 text

©WFS Developed by WRIGHT FLYER STUDIOS 実践してみた！けれど･･･ Botは「トラブルシューティング」・「環境構築のサポート」どちらにも向いていなかった 18 ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 19

Slide 19 text

©WFS Developed by WRIGHT FLYER STUDIOS 実践してみた！けれど･･･なぜか？ 19 ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 20

Slide 20 text

©WFS Developed by WRIGHT FLYER STUDIOS 実践してみた！けれど･･･それぞれに必要な機能の認識が間違っていました 20 ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 21

Slide 21 text

©WFS Developed by WRIGHT FLYER STUDIOS 実践してみた！けれど･･･ 21 トラブルシューティング - 具体的な問題の解決方法・開発資料を提示する機能 - 不明瞭な質問に対して、具体的な問題点を推測して絞り込む機能 ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 22

Slide 22 text

©WFS Developed by WRIGHT FLYER STUDIOS 実践してみた！けれど･･･ 22 トラブルシューティング - 具体的な問題の解決方法・開発資料を提示する機能 - 不明瞭な質問に対して、具体的な問題点を推測して絞り込む機能しつもんだけだとこたえがきまらないかも ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 23

Slide 23 text

©WFS Developed by WRIGHT FLYER STUDIOS 実践してみた！けれど･･･ 23 環境構築のサポート - 明確に定まったワークフローを会話形式で順番通りに提示する機能 - フローの途中で起きた問題をトラブルシューティングする機能 ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 24

Slide 24 text

©WFS Developed by WRIGHT FLYER STUDIOS 実践してみた！けれど･･･ 24 - 不明瞭な質問に対して、具体的な問題点を推測して絞り込む機能 - 具体的な問題の解決方法・開発資料を提示する機能トラブルシューティング環境構築のサポート - 明確に定まったワークフローを会話形式で順番通りに提示する機能 - フローの途中で起きた問題をトラブルシューティングする機能企画開発α 運用開発β

Slide 25

Slide 25 text

©WFS Developed by WRIGHT FLYER STUDIOS 実践してみた！けれど･･･ 25 - 不明瞭な質問に対して、具体的な問題点を推測して絞り込む機能 - 具体的な問題の解決方法・開発資料を提示する機能トラブルシューティング環境構築のサポート - 明確に定まったワークフローを会話形式で順番通りに提示する機能 - フローの途中で起きた問題をトラブルシューティングする機能企画開発α 運用開発β

Slide 26

Slide 26 text

©WFS Developed by WRIGHT FLYER STUDIOS 26 - Unityや Git,Maya,Photoshopなど開発環境のエラー解消トラブルシューティング環境構築のサポート - プロジェクトに必要なソフトのインストールや設定などの案内 ©WFS Developed by WRIGHT FLYER STUDIOS 活用法の方針転換 - 具体的な問題点の解決方法・開発資料を提示する機能開発資料のお手軽検索企画開発α 運用開発β

Slide 27

Slide 27 text

技術スタック 27

Slide 28

Slide 28 text

伊藤一樹 2015年、オンラインゲーム開発会社に入社。 2020年にグリー株式会社（現：グリーホールディングス株式会社）へ入社。『ヘブンバーンズレッド』のサーバー開発リードなど、複数プロジェクトに関わる。現在は新規プロジェクトとDataPlatformチームを兼務し、AIを活用したソリューション開発に従事。株式会社WFS リードエンジニア 28

Slide 29

Slide 29 text

29 UX設計・運用現場発・実践から見えた活用法技術スタック企画開発α 運用開発β

Slide 30

Slide 30 text

技術スタック ● Slack ● Cloud Run Functions ● Cloud Run Jobs ● Python ● Vertex AI Search ● Gemini API 30 とてもふつうだよ ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 31

Slide 31 text

技術スタック 31 バッチ処理リアルタイム処理 Vertex AI Search Cloud Scheduler Cloud Run Jobs データソース (HTML, PDF, CSV等 ) Cloud Run Functions Slack 企画開発α 運用開発β

Slide 32

Slide 32 text

紆余曲折ありました 32 企画開発α 運用開発β

Slide 33

Slide 33 text

©WFS Developed by WRIGHT FLYER STUDIOS まずは要件を再確認してみよう 33 ● 独自のドキュメントを使用して質問に回答できるSlack Bot ○ 社内向けツールで開発コスト、使用頻度ともに高くない - Unityや Git,Maya,Photoshopなど開発環境のエラー解消トラブルシューティング環境構築のサポート - プロジェクトに必要なソフトのインストールや設定などの案内 ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 34

Slide 34 text

©WFS Developed by WRIGHT FLYER STUDIOS 「安く・手軽に」を実現するためにノーコードで使えるGoogle CloudのConversational Agentsを使ってみた顧客からのお問い合わせ対応を自動化するチャットボットが作成できるサービスです 34 ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 35

Slide 35 text

©WFS Developed by WRIGHT FLYER STUDIOS 「安く・手軽に」を実現するためにノーコードで使えるGoogle CloudのConversational Agentsを使ってみたそれっぽいものはできたが、細かいところのチューニングが難しかった... →最新Modelが使えないとか →データストアの検索精度とか →画像によるマルチモーダルでのクエリができないとか 35 ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 36

Slide 36 text

©WFS Developed by WRIGHT FLYER STUDIOS やっぱり自分でつくろう Cloud Run Functions →無料枠で収まる Gemini API →他のAIと比べてinputもoutputも数分の1程度のコスト Vertex AI Search →ちょっと高い 36 ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 37

Slide 37 text

バッチ処理を覗いてみよう 37 バッチ処理リアルタイム処理 Vertex AI Search Cloud Scheduler Cloud Run Jobs データソース (HTML, PDF, CSV等 ) Cloud Run Functions Slack 企画開発α 運用開発β

Slide 38

Slide 38 text

©WFS Developed by WRIGHT FLYER STUDIOS バッチ処理 38 Cloud Scheduler Cloud Run Jobs データソース (HTML, PDF, CSV等 ) Cloud Storage 1. 1日1回ジョブを起動 Vertex AI Search ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 39

Slide 39 text

©WFS Developed by WRIGHT FLYER STUDIOS バッチ処理 39 Cloud Scheduler Cloud Run Jobs データソース (HTML, PDF, CSV等 ) Cloud Storage 2. 最終更新日時に変更があった資料のみ追加・更新 Vertex AI Search ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 40

Slide 40 text

©WFS Developed by WRIGHT FLYER STUDIOS バッチ処理 40 Cloud Scheduler Cloud Run Jobs データソース (HTML, PDF, CSV等 ) Cloud Storage 3. GCSから Vertex AI Searchにインポート Vertex AI Search ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 41

Slide 41 text

©WFS Developed by WRIGHT FLYER STUDIOS バッチ処理 Vertex AI Searchのデータストア ● 料金 ○ インデックス料金 ■ Webページなら2万ページくらいまで無料(目安) ○ レイアウトパーサー ■ HTMLなど構造を解析して、意味のあるかたまりでチャンクを作成してくれる ■ これがまぁまぁ高い(10$ per 1000pages) 41 企画開発α 運用開発β

Slide 42

Slide 42 text

リアルタイム処理を覗いてみよう 42 バッチ処理リアルタイム処理 Vertex AI Search Cloud Scheduler Cloud Run Jobs データソース (HTML, PDF, CSV等 ) Cloud Run Functions Slack 企画開発α 運用開発β

Slide 43

Slide 43 text

©WFS Developed by WRIGHT FLYER STUDIOS リアルタイム処理 43 1. SlackからEvent通知 Cloud Run Functions Slack Vertex AI Search ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 44

Slide 44 text

©WFS Developed by WRIGHT FLYER STUDIOS リアルタイム処理 44 2. Gemini APIにSlackスレッドとシステムプロンプトを渡す Cloud Run Functions Slack Vertex AI Search ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 45

Slide 45 text

©WFS Developed by WRIGHT FLYER STUDIOS リアルタイム処理 45 3. Functional Callingで資料をベクトル検索する Cloud Run Functions Slack Vertex AI Search ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 46

Slide 46 text

©WFS Developed by WRIGHT FLYER STUDIOS リアルタイム処理 46 4. 得られた資料をGemini APIに要約してもらい、ユーザーへの回答を作成する Cloud Run Functions Slack Vertex AI Search ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 47

Slide 47 text

©WFS Developed by WRIGHT FLYER STUDIOS リアルタイム処理 Cloud Run Functions, Gemini, Vertex AI Search ● 料金 ○ ほぼかかりません(300件で月1000円以下) 47 ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β

Slide 48

Slide 48 text

©WFS Developed by WRIGHT FLYER STUDIOS リアルタイム処理お手軽さと回答精度はトレードオフ ● Vertex AI Search ○ 非構造化検索 + 構造化検索機能 (実装多い、コスト低い) ■ チャンク毎に元データを返す ■ 自由度高い ○ 非構造化検索 + 構造化検索機能 + AIモード (実装少ない、コスト高い) ■ クエリに対してVertex AI Search側のGeminiで要約して回答してくれる ■ 自由度低い 48 企画開発α 運用開発β

Slide 49

Slide 49 text

Slide 50

Slide 50 text

©WFS Developed by WRIGHT FLYER STUDIOS リアルタイム処理回答精度をあげるために ● Vertex AI SearchはFunctional Callingで呼び出す ○ Geminiが会話のコンテキストやプロジェクトの性質などを加味したクエリを作成してくれる。 ■ 例) 今日はいい天気ですね... ところで、環境構築のやり方教えて。 ● 「環境構築やり方」で検索してくれる 50 企画開発α 運用開発β

Slide 51

Slide 51 text

©WFS Developed by WRIGHT FLYER STUDIOS リアルタイム処理回答精度をあげるために ● Vertex AI Searchの検索結果はフィルタリングする ○ modelScore ■ ページ全体のクエリとの合致度 ○ chunkScore ■ ページの一部分(chunk)とクエリとの合致度 ■ chunkScoreが高いものを優先したほうが、ユーザーが意図したデータになることが多かった(体感) 51 企画開発α 運用開発β

Slide 52

Slide 52 text

岩見　祐哉 2011 年にグリー株式会社（現：グリーホールディングス株式会社）へ入社し、Publishing業務に従事。 2018年よりライトフライヤースタジオにて、『ダンまち〜メモリア・フレーゼ〜』『ヘブンバーンズレッド』のリードスクリプターとしてイベント実装をおこなう。現在ではイベント実装に加え、チームに在籍しているスクリプター25名以上のディレクションも行っている。株式会社WFS　リードスクリプター 52

Slide 53

Slide 53 text

53 UX設計・運用現場発・実践から見えた活用法技術スタック企画開発α 運用開発β

Slide 54

Slide 54 text

©WFS Developed by WRIGHT FLYER STUDIOS 開発資料が1万件以上！作成された仕様書/開発資料が大量にあり、読みきれずに問題が起こってしまう事例が多々ありました。資料は適切に読まれることが大事！そのため本Botが活用されるよう UXの設計と運用フローを整えました。 54 企画開発α 運用開発β

Slide 55

Slide 55 text

Slide 56

Slide 56 text

©WFS Developed by WRIGHT FLYER STUDIOS ・最小限の言葉（ai）で呼び出せるように・スレッド形式で応答ができるように・スレッド内の会話が保存されるように・クローズドチャットでも使えるように・可読性を考えMarkdown記法に 56 ai デバッグメニュー何がある？「デバッグメニュー」について検索してみたよ！主な機能は以下の通りだよ。〜〜〜〜〜企画開発α 運用開発β ai 詳しく補足して「デバッグメニュー」についてもっと詳しく知りたいんだね！前回の説明に加えて、〜〜〜〜〜具体事例

Slide 57

Slide 57 text

©WFS Developed by WRIGHT FLYER STUDIOS ・画像の問い合わせもできるように 57 企画開発α 運用開発β ai このエラー何「バリデート失敗しました」というエラーメッセージで検索してみたよ画像に表示されているエラーメッセージは、指定されたファイルのバリデーションに失敗したことを示しているよ。このエラーの詳細を確認するには◯◯というツールを使うのがおすすめだよ〜〜〜〜〜具体事例

Slide 58

Slide 58 text

©WFS Developed by WRIGHT FLYER STUDIOS ・タグ付けで登録可能！・毎日更新されたページをSlackに表示 58 企画開発α 運用開発β engineer 今日読んだ資料を頭の中で整理してるよ 10分くらいかかりそう -------------------------------------------- 総ページ数 all：44ページ engineer：314ページ art：738ページ ~~~~~ 新規ページ数 engineer: １ページ ~~~~ 更新ページ数 engineer: 2 ページ art: 4 ページかかった時間: 4分50秒具体事例

Slide 59

Slide 59 text

©WFS Developed by WRIGHT FLYER STUDIOS とにかくかわいくする！・かわいいに特化したイラスト！・Botっぽい話し方をしない！ 59 ©WFS Developed by WRIGHT FLYER STUDIOS 企画開発α 運用開発β ai 今日もかわいいねわぁ、ありがとう！そう言ってもらえると、とっても嬉しいな！プロジェクトのみんなの役に立てるように、これからも頑張るね！具体事例

Slide 60

Slide 60 text

Slide 61

Slide 61 text

Slide 62

Slide 62 text

まとめ 62

Slide 63

Slide 63 text

©WFS Developed by WRIGHT FLYER STUDIOS まとめ ● 生成AIは柔軟さが目立つのでつい過度な期待をしてしまいますが、とうぜん得手不得手がある ● 他のツールと同じように目的にあわせた機能、機能にあわせた使い方が大切 63

Slide 64

Slide 64 text

©WFS Developed by WRIGHT FLYER STUDIOS まとめしかし他のツールと違う点として、AIならではの柔軟性による特徴があります例 ● 入力に厳密な正確性を求めないこと ● マルチモーダルで画像を用いた検索 ● 柔軟性を前提にしたUXの設計 ● 定型文ではない返答によるBotのパーソナリティの獲得 64

Slide 65

Slide 65 text

©WFS Developed by WRIGHT FLYER STUDIOS まとめ ● 自社でつくる事で他社のパッケージ化されたサービスよりも安価に稼働 ● クラウドサービスが整ってきたことで比較的手軽な選択肢もある ● 万能ではないので、要件にあわせた技術選定は必須 65