Slackとkintoneでチャットボット開発タイムトライアル

Transcript

1. Welcome to kintone devCamp 2018! Slack & kintone 連携セッションです 1 • 事前準備 1. Chrome ブラウザ 2. kintone 環境(システム管理権限のあるアカウント) ▼ お持ちでない方は、下記より30日間お試し環境をお申し込みください https://kintone.cybozu.co.jp/jp/trial/ 3. Slack アカウントとワークスペースの環境 ▼ Slack アカウントとワークスペースの作成 https://slack.com/get-started 4. Flow XO の環境 ▼ Flow XO アカウントの取得 http://www.flowxo.com/ 5. 資料のダウンロード http://bit.ly/devCamp2018_paper
2. Slackとkintoneで チャットボット開発タイムトライアル！ 2018/8/2 Slack Japan Sotaro Mizoguchi Cybozu Inc. Tomoko Miyake
3. Tomoko Miyake (ミケ) • Cybozu Inc. Developer Relation 所属 • kintone devCamp, cybozu developer networkの住人 • Slack ファンの一人です！足元に注目 3
4. Let’s develop slack chatbot together!!! 60 min. 4
5. 目次 • チャットボットとは • シナリオとツール紹介 • チャットボット開発 ハンズオン • kintone アップデート先取り！ • おまけ 早い方はこちらに 進んでOK! 追いつくのが大変に なったら聞くのに集中 でもOK! 5
6. チャットボットとは
7. チャットボットとは • 対話型ロボット • iPhoneのSiriのように人間が決めたロジックで 返事をしてくれるようにプログラムされたもの • 最近は、顧客サポート用のFAQボットなど企業でも運用されるようになってきた • Slack/Facebook/LINEなどのメッセージングプラットフォームや Webサイト上に組み込まれるケースが多い 7
8. 目指すはOne Platform! • Slack をフロントに様々なサービスのデータにアクセス • チャットボットでより直感的にデータにアクセス 8
9. 開発をスタートする前に考えよう • 開発の流れ 1. やりたいことを決める 2. ユーザーがBOTに話しかけるインターフェースとなるプラットフォームを決める 3. 人間が話す自然言語処理と会話フローを開発するためのツールを選ぶ 4. ユーザーとBOTの会話フロー（ロジック）を考える 5. 会話フローを組み立てる（コーディング or GUIツール） 6. テストをする ユーザー BOT 質問 回答 情報検索・取得 （HTTPリクエスト） 情報回答 社内DBや グループウェア 9
10. シナリオとツール紹介
11. シナリオ • Slack のチーム利用を想定 • 社内FAQの検索ボット • kintone モバイルもあるけど、検索ができない... • Slackから社内FAQ のデータにアクセスして Q & Aを確認できるように開発していきます こんにちは Mikei！ 社内FAQを検索するよ 検索したいキーワードを入力してね こんにちは ×× 〇〇だよ。 また分からないことが あったら聞いてね 関連するデータはなかったよ kintoneは単語検索だから 注意ね HTTP GET Request 11
12. ツール • 2016年イギリスの会社が開 発 • チャットボットの会話ロジックを GUIで(ほぼノンコーディング で)開発できるツール • チャットのプラットフォームは、 Slack/Facebook Messenger/Telegram/T wilio SMSなどから選択可能 • 100以上の連携可能なモ ジュールあり • https://flowxo.com/ 参考：チャットボット開発ツール比べをしてみた！ https://kintone-blog.cybozu.co.jp/developer/000350.html レコード操作 ロジック開発 12
13. チャットボット開発ハンズオン ここからが 本番！
14. ハンズオンの流れ 1. CSV から kintone アプリ作成 & データ入力 2. Slack のワークスペースとアプリの設定 3. Flow XO の設定 4. Slack アプリの追加設定 5. Flow XO Bot の Slack への追加 6. 動作確認 14
15. 1. CSVから kintoneアプリ作成 & データ入力 • 「社内FAQ.csv」 ファイルをダウンロード 15
16. • CSVから kintoneアプリを作成 1 2 16
17. • ガイダンスに沿って CSV を読み込む (1/3) • 「作成を開始する」ボタンをクリック 17
18. • ガイダンスに沿って CSV を読み込む (2/3) • 「すべてにチェックを入れる」をクリック > 「アップロードへ進む」ボタンをクリック 2 1 18
19. • ガイダンスに沿って CSV を読み込む (3/3) 1. 「参照」から CSV ファイルをアップロード 2. プレビューでデータの確認 3. フィールドタイプの確認 (文字列(1行)) 4. 「作成」ボタンをクリック 1 2 3 4 19
20. • 作成されたアプリとデータの確認 1 2 3 URL内のアプリIDをメモ https://{subdomain}.cybozu.com/k/xxx/ ↑アプリIDはxxxの部分の数字 20
21. • 歯車マークからフィールドコードの変更 (kintoneの項目を指定するために必要) 1 2 21
22. • 歯車マークからフィールドコードの変更 (kintoneの項目を指定するために必要) 1 2 フィールド名 フィールドコード Question Question Answer Answer 22
23. • 認証のための APIトークンを作成 • 「設定」タブをクリック > 「API トークン」をクリック 1 2 23
24. • 認証のための APIトークンを作成 • 「生成する」ボタンをクリック > 「アクセス権」で「レコード閲覧」をチェック > APIトークンをメモ > 「保存」ボタンをクリック • 「アプリを更新」ボタンをクリック 1 2 3 5 4 24
25. Slack チャットボットからアクセスするデータの箱は完成！ アプリID と APIトークンはメモしておいてね 25
26. 2. Slack のワークスペースとアプリの設定 • まず管理権限のある Slack ワークスペースがあるか確認 (ブラウザもしくはアプリ) • まだの方は、以下よりワークスペースを新規作成 https://slack.com/get-started 26
27. • Slack アプリを作成 (呼びかける相手) 以下のURLにアクセス https://api.slack.com/apps?new_app=1 1 2 3 社内FAQ ※作成したワークスペースを選択
28. • 「App Credentials」内の以下をメモ もしくはタブを開いたままにする ※後ほどFlow XOに転記のため • Client ID • Client Secret • Verification Token 28 1 2 3
29. Slack ワークスペースとアプリの設定は一旦完了！ また戻ってくるよ！ App Credentials の画面はタブで開いておこう 29
30. 3. Flow XO の設定 • 右の会話を作成していくフェーズ • 以下よりFlow XOにアクセス https://flowxo.com/ 30 こんにちは Mikei！ 社内FAQを検索するよ 検索したいキーワードを入力してね こんにちは ×× 〇〇だよ。 また分からないことが あったら聞いてね 関連するデータはなかったよ kintoneは単語検索だから 注意ね HTTP GET Request
31. • 「+ New」をクリック • 「Blank Flow」をクリック 31 1 2
32. • 「New Message」をクリック • 「Connect to all bots」に チェックを入れて「Next」をクリック 32 1 2 3 チャットボットとの最初の合言葉の設定
33. • New Message の各項目を設定して 「Next」ボタンをクリック • Words or Phrase • 「こんにちは」を入力 (合言葉！) • Message Types • Direct Message • Direct Mention • Mentionにチェックを入れる • Filter は何もせずに「Save」ボタンをクリック 33 1 2 3 4
34. • 「Untitled Flow」の箇所を「社内FAQ」に名前を変更 • Flowが「Off」になっているので、「On」に切り替え 34 1 2
35. • 「Click here to add an action」をクリック • 「Ask a Question」をクリック 35 1 2 FAQ 検索のキーワードを質問するための Action
36. • Ask a Question の項目を設定して、「Next」ボタンをクリック • Filter は何もせずに「Save」をクリック 36 Question こんにちは、{{new_message.user_name}}！ 社内FAQを検索するよ。検索したいキーワードを入力してね。 1 2 3
37. • 新たな Action が追加されたことを確認 • 「＋」マークより新規 Action を追加 • 「Make a HTTP Request」をクリック 37 1 2 kintoneの社内FAQアプリを検索するための Action
38. • HTTP Request Settings の各項目を設定 (kintoneにGET Requestする箇所) • 「Next」をクリックして、Filterはそのままで「Save」をクリック 38 Request URL https://ドメイン名.cybozu.com/k/v1/records.json Method GET Content Type JSON Data app: アプリID query: Question like "{{ask_a_question.parsed_answer}}" Headers X-Cybozu-API-Token: APIトークン
39. • 新たな Action が追加されたことを確認 • 「+」をクリックして、新規Action を追加 • 「Send a Message」をクリック 39 検索結果を伝えるための Action(キーワードヒットした場合) 1 2
40. • Send a Message の項目を設定して、「Next」をクリック ※Flow XOでは、ネストしているデータにアクセス する時、アンダーバー2つ(__)を指定 ex) records__Answer__value 40 Message {{make_a_http_request.data__records_+_Answer__value &&}} また分からないことがあったら聞いてね！ GETで受け取ったデータ配列を処理
41. • Filter を設定して、「Save」をクリック 41 Value {{make_a_http_request.data__records__0}} Condition Is not empty 1 2 検索結果がゼロのケースを省く
42. • 「+」ボタンから新たなAction を追加 • 「Send a Message」をクリック 42 検索結果を伝えるための Action(キーワードヒットなしの場合) 1 2
43. • Send a Message の項目を設定して、「Next」をクリック 43 Message 関連するデータはなかったよ kintoneは単語検索だから注意ね 1 2
44. • Filterを設定して、「Save」をクリック 44 検索結果がゼロのケース Value {{make_a_http_request.data__records__0}} Condition Is empty 1 2
45. • Flowの設定はすべて完了！ • チャットボックスをクリックしてテスト 45
46. • Test Consoleで会話して動作確認 46
47. • 左メニューより「Bots」をクリックして、Flowを動かすメッセージプラットフォームを設定 • 「New」ボタンをクリック • 「Slack」をクリックして、「Next」をクリック 47 1 2 3 4
48. • Bot の各項目を設定して、タブを開いたままにする 48 Name 社内FAQ Language Japanese Slack App Client ID Slackアプリの画面 > App Credentials > Client IDをコピー&ペイスト Slack App Client Secret Slackアプリの画面 > App Credentials > Client Secretをコピー&ペイスト
49. 4. Slack アプリの追加設定 • Slack アプリの設定画面に戻る タブを閉じてしまった方は、 以下のURLからアプリにアクセス https://api.slack.com/apps • Basic Information > Add features and functionality を1~4の順に設定 49 1 2 3 4
50. • 「Bots」をクリックして、「Add a Bot User」をクリック • 「Default name/username」を「faq」に変更、「On」に変更して、「Add Bot User」 をクリック 50 1 2 3 4 5
51. • 左メニューより「Basic Information」をクリック • 「▶︎」をクリックして、「Permissions」をクリックして、 「Install App to Workspace」をクリックして、「許可する」ボタンをクリック 51 1 2 3 4
52. • Redirect URLs > Add a new Redirect URL より Flow XO 画面で生 成された Redirect URL をコピー&ペイストして、「Save URLs」をクリック 52
53. Bot User • の「faq」が追加されたことを確認 53
54. • Basic Information > Interactive Componentsをクリック 54
55. • Interactivityを「On」にして、Flow XO 画面の 「Slack App Interactive Messages Action URL」を Slackの「Request URL」にコピー&ペイストして、「Save Changes」ボタンをクリック 55
56. • 以下のように項目の設定が完了していることを確認 56
57. 5. Flow XO Bot の Slack への追加 • Flow XO > 左メニューの Bots > 社内FAQ > 「Edit」ボタンをクリック • 「Next」ボタンをクリックして、Test & Distribute 画面に移動 • 「Add to Slack」ボタンをクリック 57 1 3 4 これでチャット ボット完成！ 2
58. 6. 動作確認 • 最後にSlack で App > faq を開いて動作確認 58 合言葉は 「こんにちは」 成功したかな？
59. kintone アップデート先取り！
60. 何ができるようになるの？ • kintone アプリ(プロセス管理設定あり)から、 自分が作業者になった時に通知を送る設定が簡単に できるようになります！ ※kintone に登録済みのメールアドレスと 一致しているSlack アカウントに通知 1 2 60
61. 動くとこんな感じ 61
62. おまけ
63. おまけ • 時間に余裕のある方は... • developer network の記事にチャレンジ！ ▼ SlackとkintoneとFlow XOを使って出勤連絡ボットを作ろう！ https://developer.cybozu.io/hc/ja/articles/115005537606 • 自作アイデアでチャレンジ！ 完成品は、ぜひハッシュタグ(#slack #chatbot)付きでSNSにアップしてください〜 • Slack 連携はチャットボット以外にも、サーバーが必要になりますが、 Slash Command やWeb API や Actions などを使うこともできます。 出勤連絡 タスク 管理 タイム カード 63
64. Thank you!