Slack と kintone と Flow XO を使って出勤連絡ボットを作ろう!
概要
皆さんこんにちは!kintone にはモバイルアプリもあるけれど、もし普段使っている SNS から kintone にデータ登録できたらよいのにな〜なんて思うことはありませんか?
この Tips では、最近流行りのチャットボット連携で、楽に kintone にデータを登録する方法を紹介したいと思います。
Slack、kintone や Flow XO という 3 つのチャットボットのロジック作成ツールを使います。
このカスタマイズには、それぞれのサービスのアカウント登録が必要です。
シナリオ
会社勤めなら必ず行うのが出勤連絡です。
今回はチャットボットとのやりとりで、遅刻理由を kintone に登録するというシナリオです。
Slack とは
Slack
は、チームでのコミュニケーションツールです。
グループチャット、1 対 1 のダイレクトメッセージや音声通話などの機能があります。
日本語にも対応しています。
Flow XO とは
Flow XO
は、チャットボットの会話ロジックを GUI で(ほとんどノンコーディングで)作成できるツールです。
イギリスの会社が開発しています。
チャットをするプラットフォームは、次のようなさまざまなサービスから選択できます。
また、100 以上の連携可能なモジュールやサービスがある点もうれしいポイントです。
完成イメージ
諸々の設定が完了すると、以下のように Slack 上でチャットボット(Attendance_Bot_Chan)とやりとりができます。
ボタンクリックでコメントするだけなので、急いでいる朝でもすばやく連絡ができます。
メニューが英語表記になっていますが、実際は日本語でも設定可能です。
会話の流れ
上図の会話の流れは、以下になります。
遅刻の理由を投稿した時点で、HTTP Request で kintone にデータが送信されます。
手順概要
チャットボットの作成には各サービスでいくつか細かい設定が必要になります。
今回は以下の順番で設定していきます。
- kintone でのアプリ作成
- Slack の Workspace の作成と設定
- Flow XO の設定(と Slack の追加設定)
ワンポイントアドバイス
- チャットボット作成は、AWS や Bot kit などを使ってカスタマイズするものもあれば、今回のように GUI でほぼノンコーディングで作成できるものもあります。
さまざまなツールがあるので、用途と作成者のスキルに合わせてツール選定をするのがおすすめです。 - FAQ など広く公開する Bot にしたいのか、チーム内勤怠連絡のようにクローズドな Bot にしたいのかによっても、Facebook や Slack など動作プラットフォームも選択する必要があります。
kintone のアプリ作成
まずは、Slack に投稿したデータの登録先となる kintone のアプリの作成をします。
-
kintone にログイン後、以下の画像とフィールド一覧を参考にしてアプリを新規作成します。
アプリの作成方法は、 こちら を参照してください。
フィールドタイプ フィールド名 フィールドコード 日時 Date Date 文字列(1 行) Name Name 文字列(1 行) Message Message -
作成したアプリのアプリ ID をメモしておいてください。
Flow XO 内で HTTP Request をする際に使います。
アプリの URL が https://{subdomain}.cybozu.com/k/<appid>/ の場合、アプリ ID は <appid> の部分の数字です。 -
API トークンを生成してください。
アクセス権は、「レコード追加」にチェックを入れます。
Flow XO 内で HTTP Request する際に使うので、こちらもメモしておいてください。
API トークンの生成方法は、ヘルプサイトを参照してください。
API トークンを生成する
これにて kintone の設定は完了です。
Slack の設定
次は、Slack の Workspace の作成と設定をします。
のちほど Bot 作成ツールの Flow XO で、どの Slack Workspace と紐付けるかを設定することになります。
管理権限のある Workspace をすでにお持ちの方は、新規に作成する必要はありません。
-
Slack | Getting started から Slack Workspace を新規作成します。
Slack アカウントも自動生成されます。
作成方法は、 Slack help Center:Slack ワークスペースを作成する を参照してください。
-
私たちが Slack 上で呼びかける相手となる Slack のアプリを作成します。
slack api にアクセスして、右上の「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のサイト にアクセスして、アカウントを作成します。 無料で使えます。
ログインすると、以下のページに遷移します。
下のスクリーンショットにあるとおり、Flow を作成してから Bot のプラットフォームを設定していきます。
-
それでは Flow を作成しましょう。赤枠の方をクリックします。
A:会話のきっかけメッセージの作成
-
ポップアップ表示された画面上で、Interact > New Message をクリックします。
-
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:最初の呼びかけ
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? 質問内容をテキストで入力します。予約語も利用できます。予約語の使用方法は後述を参照してください。 Choices Just lonely
Late for workショートカットとなるボタンの名前を指定します。 予約語は以下のように入れます。
予約語を入れたい箇所にカーソルを持ってきて、右の XO マークをクリックすると、一覧が出てくるのでここでは「User Name」(Slack のユーザー名)をクリックして入れます。
-
ここまで設定できたら「Next」をクリックして、Filter 画面に遷移します。
今回も特に絞り込みは必要ないので、そのまま「Save」をクリックします。
-
これで B と C の設定は完了です。
最後に先ほどと同様にアクションの名前を「First Question」に変更しておきましょう。
D/E:最初の呼びかけへのユーザーの返答
続いて D と E の設定です。
D:Just lonely 分岐の設定
-
会話が分岐するので、まずは簡単な「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」に変更します。
E:Late for work 分岐の設定
-
次は 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:レコードの追加
-
続いて 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://{subdomain}.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を指定してください。 {
"app":アプリID,
"record": {
"Message": {
"value": 遅刻理由
},
"Name": {
"value": ユーザー名
}
}
}
Flow XOでは、ネストしているデータにアクセスするにはアンダーバー 2 つ(__
)を指定します。 たとえば、MessageのValueをする場合、record__message__value
を指定します。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:返答内容を設定
最後に 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」に変更して 1 つ目は完了です。
-
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}}. -
完成したら以下のように 3 つアクションが並びます。
-
これですべてのフロー設定が完了です!お疲れさまでした。
最後に Test console で正常に動作するか確認しておきましょう。右下の赤枠のアイコンをクリックします。
動作チェック
Test console 画面が右側に立ち上がるので、そこに「hi」と呼びかけてテストしてみてください。
Bot を動かすプラットフォームの設定
-
テストがうまくいったら Bot を動かすプラットフォームの設定に移ります。
左メニューから「Bots」をクリックしてください。
-
「New Bot」をクリックします。
-
今回は Slack 上で動かす Bot を作成するので、「Slack」を選択して、「Next」をクリックします。
-
Create a Bot 画面が立ち上がります。
Name に「Attendance Bot」と記入します。ここから Slack 設定画面も立ち上げながら作業します。
赤枠箇所を手順に沿って設定していきます。
-
まずは Slack の設定画面に移動します。
Slack のタブをブラウザーで閉じてしまった方は、 Slack App にアクセスして作成したアプリを選択すると、以下の設定画面に遷移します。
Basic Information > Add features and functionality の項目を Step 1 から 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 -
忘れずに、「Save 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 URL です。
-
忘れずに「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 にチェックが 2 箇所、Add features and functionality 内にチェックが 3 箇所ついていることを確認できたら 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 完成です!
おわりに
最後まで設定できましたでしょうか?細かい設定が多いですが、GUI で設定できるので可能性が広がりますね。
ぜひ皆さんもチャレンジしてみてください。
各サービスのユーザーガイドは以下になります。設定に困った時は参照してください。
注意事項
- この Tips 内の画像では、一部絵文字や Bot アイコンが表示されていますが、設定手順内ではその箇所を割愛しています。
もし表示したい方は別途設定してください。 - Flow XO の Ask a question アクションで Choice を選択した場合、Slack 上でボタンクリックするとユーザーではなく Bot ユーザーのコメントとして投稿されます。
この Tips は、2017 年 11 月版 kintone、Slack と Flow XO で動作を確認しています。