（著者：サイボウズ 三宅 智子）
Index
概要
皆さんこんにちは！kintoneにはモバイルアプリもあるけれど、もし普段使っているSNSからkintoneにデータ登録できたら良いのにな〜なんて思うことはありませんか？
このTipsでは、最近流行りのチャットボット連携で、楽にkintoneにデータ登録をする方法をご紹介したいと思います。SlackとkintoneとFlow XOというチャットボットのロジック作成ツールを使います。（それぞれアカウント登録が必要です）
シナリオ
会社勤めなら必ず行う出勤連絡。今回はチャットボットとのやり取りで、遅刻理由をkintoneに登録するというシナリオです。
Slackとは
チームでのコミュニケーションツールです。グループチャット・1対1のダイレクトメッセージ・音声通話などの機能があります。2017年11月17日に日本語版もリリースされました。詳細はこちらをご参照ください。
Flow XOとは
チャットボットの会話ロジックをGUIで（ほとんどノンコーディングで）作成できるツールです。イギリスの会社が開発しています。チャットをするプラットフォームは、Slack・Facebook Messenger・Telegram・Twilio SMSなどから選択できます。また、100以上の連携可能なモジュールやサービスがある点も嬉しいポイントです。詳細はこちらをご参照ください。
完成イメージ
諸々の設定が完了すると、以下のようにSlack上でチャットボット（Attendance_Bot_Chan）とやり取りができます。ボタンクリックでコメントするだけなので、急いでいる朝でも素早く連絡ができます。
※USでお披露目した都合で英語表記になっていますが、実際は日本語でも設定可能です。
会話の流れ
上図の会話の流れは、以下になります。遅刻の理由を投稿した時点で、HTTP Requestによってkintoneにデータが送信されるようになっています。
手順概要
チャットボットの作成には各サービスでいくつか細かい設定が必要になります。今回は以下の順番で設定していきます。
- kintoneでのアプリ作成
- SlackのWorkspaceの作成と設定
- Flow XOの設定（とSlackの追加設定）
ワンポイントアドバイス
- チャットボット作成は、AWSやBot kitなどを使ってカスタマイズするものもあれば、今回のようにGUIでほぼノンコーディングで作成できるものもあります。様々なツールがあるので、用途と作成者のスキルに合わせてツール選定をするのがおすすめです。
- FAQなど広く公開するBotにしたいのか、チーム内勤怠連絡のようにクローズドなBotにしたいのかによっても、FacebookやSlackなど動作プラットフォームも選択する必要があります。
kintoneのアプリ作成
まずは、Slackに投稿したデータの登録先になるkintoneのアプリの作成をします。
- kintoneにログイン後、以下の画像とフィールド一覧を参考にしてアプリを新規作成します。
アプリの作成方法は、こちらをご参照ください。
フィールドタイプ フィールド名 フィールドコード 日時 Date Date 文字列_一行 Name Name 文字列_一行 Message Message - 作成したアプリのアプリIDをメモしておいてください。Flow XO内でHTTP Requestをする際に使います。
例）https://{subdomain}.cybozu.com/k/xxx/ ←アプリIDはxxxの部分の数字です。 - APIトークンを生成してください。アクセス権は、「レコード追加」にチェックを入れます。Flow XO内でHTTP Requestする際に使うので、こちらもメモしておいてください。
APIトークンの生成方法は、こちらをご参照ください。
これにてkintoneの設定は完了です。
Slackの設定
次は、SlackのWorkspaceの作成と設定をします。後ほどBot作成ツールであるFlow XOにて、SlackのどのWorkspaceと紐付けるか設定することになります。（すでに管理権限のあるWorkspaceをお持ちの方は、新規に作成する必要はありません）
- こちらからSlack Workspaceを新規作成します。（Slackアカウントも自動生成されます）
作成方法は、こちらをご参照ください。
- 私たちがSlack上で呼びかける相手となるSlackのアプリを作成します。
こちらにアクセスして、右上の「Create New App」をクリックしてください。
- 新たなウィンドウが立ち上がるので、「APP Name」と「Development Slack Workspace」を入力して、「Create App」ボタンをクリックします。
項目名 内容 App Name Attendance_botchan Development Slack Workspace ご自身のWorkspaceを選択 - 画面遷移後、少し下にスクロールして、「App Credentials」欄にいきます。
後ほどFlow XOでこの箇所の情報を転記することになるので、ブラウザのタブを開いた状態にしておきます。
- さらに下に行くと、お好みでアプリのアイコンや背景色を設定できます。（任意）
また戻ってきますが、一旦これでSlackの設定は置いておきます。
Flow XOの設定
続いて、Flow XOにて基本設定とチャットボットの会話ロジックを作成します。会話のフロー図は以下になります。赤字A~Gにパーツを分けて説明していきます。
※ここからの設定項目が多いので、もし最後の動作確認だけ見たい方は、こちらに飛んでください。
- Flow XOのサイトにアクセスして、アカウントを作成します。（無料で使えます）
ログインすると、以下のページに遷移します。get startedの画像にある通り、Flowを作成してからBotのプラットフォームを設定していきます。
- まずはFlowの作成です。赤枠の方をクリックします。
ポップアップ表示された画面上で、Interact > New Messageをクリックします。（フロー図のA箇所、会話のきっかけメッセージを設定）
Connect to botsのポップアップ表示が出てくるので、「Connect to all bots」にチェックを入れて「Next」をクリックします。
New message画面に以下の通り必要事項を記入します。記入できたら「Next」をクリックします。
項目名 内容 説明 Words or Phrases hi
Hi
heyBotに呼びかける最初のトリガーワードを設定します。 Message Type Direct Message
Direct Mention
Mentionどのようなメッセージタイプで使用するか決めます。 Show a Shortcut Button? No ショートカットとなるボタンを設置するか決めます。 Additional Welcome Text You can send the reason why you are late for work to kintone answering the bot's question. 簡単な挨拶文言を追加します。
Filter画面では、最初の会話なので特に絞り込みは必要ありません。空の状態で「Save」をクリックします。
そうすると最初のFlowが出来上がります。左上の赤枠箇所でFlowの名前を「Attendance Bot」に変更して、右上で「Flow is not active」になっているので、「On」に切り替えます。また「New Message」と記載されている部分も区別がつくように、「Welcome Message」に変更します。
フロー詳細については、「Edit」や「Filter」ボタンからいつでも編集可能です。
- フロー図のB~GもAと同様に作成していきます。次はBとC箇所、最初の呼びかけへのBotの返答です。
赤枠の「Click here to add an action」ボタンをクリックします。
Select an Action画面で、「Ask a question」をクリックします。
Ask a Question画面で、以下の通り必要事項を記入します。
項目名 内容 説明 Question Type Choice TextかChoiceを設定します。今回はボタンからの選択式にしたいので、Choiceを選択します。 Question Hi {{welcome_message.user_name}}! What's happened? 質問内容をテキストで入力します。予約語も利用できます。（※注1） Choices Just lonely
Late for workショートカットとなるボタンの名前を指定します。
※注1:予約語は以下のように入れます。予約語を入れたい箇所にカーソルを持ってきて、右のXOマークをクリックすると、一覧が出てくるのでここでは「User Name」（Slackのユーザー名）をクリックして入れます。
ここまで設定できたら「Next」をクリックして、Filter画面に遷移します。今回も特に絞り込みは必要ないので、そのまま「Save」をクリックします。
これでBとCの設定は完了です。最後に先ほどと同様にアクションの名前を「First Question」に変更しておきましょう。
- 続いてDとE箇所の設定です。ここから分岐するので、まずは簡単な「Just lonely」分岐から作成します。「Click here to add an action」ボタンをクリックします。
Select an Action画面から「Send a Message」をクリックします。
Send a Message画面で、必要事項を以下の通り記入します。今回も予約語はXOマークから「User Name」を選択して挿入します。
項目名 内容 説明 Message OK! Please feel free to talk to me, {{welcome_message.user_name}}. メッセージ内容を記入します。予約語も利用できます。
Nextボタンをクリックして、Filter画面で絞り込みを設定します。このアクションを起こす条件の指定です。
項目名 内容 説明 Value {{first_question.choice}} 絞り込みのキーとなる値を指定します。 Condition Equals 不等号を指定します。 Value Just lonely 絞り込みの値を指定します。
これでJust lonelyの分岐設定は完了です。こちらの分岐はこれが最後のメッセージになります。最後に「Send a Message」を「Response to lonely」に変更します。
- 次はDのもう一方の分岐、「Late for work」の設定です。「Click here to add an action」をクリックします。
Select an Action画面から、「Ask a question」をクリックします。
Ask a Question画面で、必要事項を以下の通り記入します。
項目名 内容 説明 Question Type Choice TextかChoiceを設定します。今回はボタンからの選択式にしたいので、Choiceを選択します。 Question Please tell me the reason why you are late for work. 質問内容をテキストで入力します。 Choices Train delay
Overslept
Sickショートカットとなるボタンの名前を指定します。
Filter画面で絞り込みを設定します。このアクションを起こす条件の指定です。
項目名 内容 説明 Value {{first_question.choice}} 絞り込みのキーとなる値を指定します。 Condition Equals 不等号を指定します。 Value Late for work 絞り込みの値を指定します。
これでLate for workの分岐設定は完了です。最後に「Ask a question」を「Response to late for work」に変更します。
- 続いてF箇所の設定です。ここでkintoneにHTTP RequestをしてTrain delay, Overslept, Sickいずれかの遅刻理由のレコード追加を行います。これまで同様、Click here to add an actionで新規アクションを追加します。今回はSelect an Action画面から「Make a HTTP Request」をクリックします。
HTTP Request Settings画面で、必要事項を以下の通り記入します。ドメイン名・アプリID・APIトークンは、kintoneアプリ作成の手順でメモした内容を記入してください。記入できたら「Next」をクリックします。
項目名 内容 説明 Request URL https://ドメイン名.cybozu.com/k/v1/record.json リクエスト先のURLを指定します。ドメイン名の箇所をご自身のドメイン名に変更してください。 Method POST リクエストメソッドを指定します。 Content Type JSON Content-typeを指定します。
Data app: アプリID
record__message__value:{{response_to_late_for_work.parsed_answer}}
record__Name__value:{{welcome_message.user_name}}kintoneに送信するJSONデータを指定します。アプリIDはご自身で作成したアプリのアプリIDを指定してください。
遅刻理由ユーザー名Headers X-Cybozu-API-Token:APIトークン ヘッダーを指定します。APIトークンの箇所をご自身で作成したアプリのAPIトークンに変更してください。 JSON Options ✅Enable JSON nesting(use double underscore notation) ネストしているJSONデータを送る場合は、これにチェックを入れます。
Filter画面で、絞り込みを作成します。アクションを実行する条件の指定です。Train delay, Overslept, Sickのいずれかを指定した時に実行したいので、その条件を設定します。
項目名 内容 説明 Value {{response_to_late_for_work.choice}} 絞り込みのキーとなる値を指定します。ここではResponse to late for workアクションの選択肢を指定します。 Condition Equals 不等号を指定します。 Value {{response_to_late_for_work.answer}} 絞り込みの値を指定します。
ここではResponse to late for workアクションへの回答を指定します。
これでHTTP Requestの設定は完了です。
- 最後にG箇所です。それぞれの回答に対するBotからの返答内容を設定してフロー作成は終わりです。Click here to add an actionで新規アクションを追加します。今回はSelect an Action画面から「Send a Message」をクリックします。
Send a Message画面で、必要事項を記入します。記入できたら「Next」をクリックします。
項目名 内容 説明 Message Don't panic! Be careful not to be crushed.
I sent the data to kintone.
Thank you for contacting! Bye {{welcome_message.user_name}}.メッセージの内容を指定します。予約語も利用できます。
Filter画面で、絞り込みを設定します。以下の通り入力できたら「Save」をクリックします。
項目名 内容 説明 Value {{response_to_late_for_work.parsed_answer}} 絞り込みのキーとなる値を指定します。ここではResponse to late for workアクションへの回答を指定します。 Condition Equals 不等号を指定します。 Value Train delay 絞り込みの値を指定します。
できたらSend a Messageを「Message to Train delay」に変更して一つ目は完了です。
- OversleptとSickのケースも同様に設定します。Send a Message画面でメッセージ内容を指定して、Filter画面では遅刻理由に合わせてValueを編集します。
項目名 内容 Message(Oversleptの場合) Hurry up, please!
I sent the data to kintone.
Thank you for contacting! Bye {{welcome_message.user_name}}.Message(Sickの場合) Take care of yourself.
I sent the data to kintone.
Thank you for contacting! Bye {{welcome_message.user_name}}. - 完成したら以下のように３つアクションが並びます。
- これで全てのフロー設定が完了です！お疲れ様でした。最後にTest consoleで正常に動作するか確認しておきましょう。右下の赤枠のアイコンをクリックします。
Test console画面が右側に立ち上がるので、そこに「hi」と呼びかけてテストしてみてください。
- テストがうまくいったらBotを動かすプラットフォームの設定に移ります。左メニューから「Bots」をクリックしてください。
「New Bot」をクリックします。
今回はSlack上で動かすBotを作成するので、「Slack」を選択して、「Next」をクリックします。
Create a Bot画面が立ち上がります。Nameに「Attendance Bot」と記入します。ここからSlack設定画面も立ち上げながら作業します。赤枠箇所を手順に沿って設定していきます。
まずはSlackの設定画面に移動します。Slackのタブをブラウザで閉じてしまった方は、こちらのURLにアクセスして作成したアプリを選択すると、以下の設定画面に遷移します。Basic Information > Add features and functionalityの項目をstep1~3の順で設定します。まずはstep.1の「Bots」をクリックしてください。
「Add a Bot User」をクリックします。
「Display name」と「Default username」と「Always Show My Bot as Online」項目を以下の通り設定します。設定できたら、「Add Bot User」をクリックします。
項目名 内容 Display name attendance_botchan Default username attendance_botchan Always Show My Bot as Online On
忘れずに、「Sava Changes」もクリックして保存します。
また左メニューからBasic Information画面に戻り、「▶︎」をクリックして、「Permissions」をクリックします。
「Install App to Workspace」をクリックして、作成したワークスペースにBot Userを追加します。
認証画面が出てくるので、「Authorize」をクリックします。
「Redirect URLs」をFlow XOのSlack設定画面から転記します。「Add a new Redirect URL」をクリックして、転記した後、「Add」をクリックしてください。
※転記するのは、Flow XOのこちらの画面にあるSlack APP Redirect URIです。
忘れずに「Save URLs」をクリックして保存します。
ここまでできたら、作成したSlackのワークスペースにBot Userが追加されます。もし表示されない場合は、どこかしら設定を間違えているので見直してみましょう。
もう一踏ん張りです！Slack設定画面上で、左メニューからBasic Information画面に戻り、「Add features and functionality」の「▶︎」をクリックして、「Interactive Components」をクリックします。「Request URL」にFlow XOのSlack設定画面にある「Slack App Interactive Messages Action URL」を転記して、「Enable Interactive Components」をクリックします。
※転記するのは、Flow XOのこちらの画面にあるSlack App Interactive Messages Action URLです。
忘れずに「Save Changes」をクリックします。
このようにBuilding Apps for Slackにチェックが２箇所、Add features and functionality内にチェックが３箇所ついていることを確認できたらOKです！
下にスクロールして、「App Credentials」の項目に移動します。ここの「Client ID」と「Client Secret」をFlow XOのSlack設定画面に転記します。
転記する先は以下です。完了したら、「Next」をクリックします。
またこの画面に戻ってきますが、一旦ここで「Done」をクリックします。
Bots画面に「Attendance Bot」が出来上がります。「Edit」をクリックして、下スクロールし「Next」をクリックします。
Test & Distribute画面で「Add to Slack」ボタンをクリックして、認証します。
新規タブが開いて、認証確認画面が出るので、「Authorize」をクリックします。
これで全ての設定が完了です！Slackのワークスペースが立ち上がるので、動作確認をして終了になります。
動作確認
Slack上の「attendance_botchan」宛てに「hi」と呼びかけて、設定したフロー通り動作するか確認してみましょう！
無事「Hi Mikei!」と返答がきました。
遅刻理由もkintoneのアプリにレコード登録されています。
My Bot完成です☆*:.｡. o(≧▽≦)o .｡.:*☆
おわりに
最後まで設定できましたでしょうか？細かい設定が多いですが、GUIで設定できるので可能性が広がりますね。ぜひ皆さんもチャレンジしてみてください。
各サービスのユーザーガイドは以下になります。設定に困った時はご参照ください。
注意事項
- このTips内の画像では、一部絵文字やBotアイコンが表示されていますが、設定手順内ではその箇所を割愛しています。もし表示したい方はご自身で設定をお願いします。
- Flow XOのAsk a questionアクションでChoiceを選択した場合、Slack上でボタンクリックするとユーザーではなくBotユーザーのコメントとして投稿されます。
このTipsは、2017年11月版のkitnone および Slack および Flow XOで確認したものになります。
はじめまして。
現在、お試し期間で検証をしております。
上記の設定を入れてみたのですが、Kintoneへの投稿だけうまくいきません。
Slack上ではBOTは正常に動いています。
権限まわりが怪しいと思い、確認したのですが、ちゃんと権限も設定されていました。
他に原因として考えられるものはありますでしょうか？
環境としてはSlackはフリープランでKintoneはお試し期間中です。
よろしくおねがいします。
Sho Ichikawa 様
いつもお世話になっております。developer network事務局です。
kintoneの認証部分で失敗している可能性があります。
再度、kintoneの設定 部分にあるAPIトークンの生成、
Flow XOの設定 部分にあるのAPIトークン記載部分をご確認いただきたいです。
よろしくお願いいたします。