Slack と kintone と Flow XO を使って出勤連絡ボットを作ろう!

著者名:三宅 智子(サイボウズ株式会社)

目次

概要

皆さんこんにちは!kintone にはモバイルアプリもあるけれど、もし普段使っている SNS から kintone にデータ登録できたらよいのにな〜なんて思うことはありませんか?

この Tips では、最近流行りのチャットボット連携で、楽に kintone にデータを登録する方法を紹介したいと思います。
Slack、kintone や Flow XO という 3 つのチャットボットのロジック作成ツールを使います。
このカスタマイズには、それぞれのサービスのアカウント登録が必要です。

シナリオ

会社勤めなら必ず行うのが出勤連絡です。
今回はチャットボットとのやりとりで、遅刻理由を kintone に登録するというシナリオです。

Slack とは

Slack (External link) は、チームでのコミュニケーションツールです。
グループチャット、1 対 1 のダイレクトメッセージや音声通話などの機能があります。
日本語にも対応しています。

Flow XO とは

Flow XO (External link) は、チャットボットの会話ロジックを GUI で(ほとんどノンコーディングで)作成できるツールです。
イギリスの会社が開発しています。
チャットをするプラットフォームは、次のようなさまざまなサービスから選択できます。

また、100 以上の連携可能なモジュールやサービスがある点もうれしいポイントです。

完成イメージ

諸々の設定が完了すると、以下のように Slack 上でチャットボット(Attendance_Bot_Chan)とやりとりができます。
ボタンクリックでコメントするだけなので、急いでいる朝でもすばやく連絡ができます。
メニューが英語表記になっていますが、実際は日本語でも設定可能です。

会話の流れ

上図の会話の流れは、以下になります。
遅刻の理由を投稿した時点で、HTTP Request で kintone にデータが送信されます。

手順概要

チャットボットの作成には各サービスでいくつか細かい設定が必要になります。
今回は以下の順番で設定していきます。

  1. kintone でのアプリ作成
  2. Slack の Workspace の作成と設定
  3. Flow XO の設定(と Slack の追加設定)

ワンポイントアドバイス

  • チャットボット作成は、AWS や Bot kit などを使ってカスタマイズするものもあれば、今回のように GUI でほぼノンコーディングで作成できるものもあります。
    さまざまなツールがあるので、用途と作成者のスキルに合わせてツール選定をするのがおすすめです。
  • FAQ など広く公開する Bot にしたいのか、チーム内勤怠連絡のようにクローズドな Bot にしたいのかによっても、Facebook や Slack など動作プラットフォームも選択する必要があります。

kintone のアプリ作成

まずは、Slack に投稿したデータの登録先となる kintone のアプリの作成をします。

  1. kintone にログイン後、以下の画像とフィールド一覧を参考にしてアプリを新規作成します。
    アプリの作成方法は、 こちら (External link) を参照してください。

    フィールドタイプ フィールド名 フィールドコード
    日時 Date Date
    文字列(1 行) Name Name
    文字列(1 行) Message Message
  2. 作成したアプリのアプリ ID をメモしておいてください。
    Flow XO 内で HTTP Request をする際に使います。
    アプリの URL が https://{subdomain}.cybozu.com/k/<appid>/ の場合、アプリ ID は <appid> の部分の数字です。

  3. API トークンを生成してください。
    アクセス権は、「レコード追加」にチェックを入れます。
    Flow XO 内で HTTP Request する際に使うので、こちらもメモしておいてください。
    API トークンの生成方法は、ヘルプサイトを参照してください。
    API トークンを生成する (External link)

これにて kintone の設定は完了です。

Slack の設定

次は、Slack の Workspace の作成と設定をします。
のちほど Bot 作成ツールの Flow XO で、どの Slack Workspace と紐付けるかを設定することになります。
管理権限のある Workspace をすでにお持ちの方は、新規に作成する必要はありません。

  1. Slack | Getting started (External link) から Slack Workspace を新規作成します。
    Slack アカウントも自動生成されます。
    作成方法は、 Slack help Center:Slack ワークスペースを作成する (External link) を参照してください。

  2. 私たちが Slack 上で呼びかける相手となる Slack のアプリを作成します。
    slack api (External link) にアクセスして、右上の「Create New App」をクリックしてください。

  3. 新たなウィンドウが立ち上がるので、「APP Name」と「Development Slack Workspace」を入力して、「Create App」ボタンをクリックします。

    項目名 内容
    App Name Attendance_botchan
    Development Slack Workspace ご自身のWorkspaceを選択
  4. 画面遷移後、少し下にスクロールして、「App Credentials」欄にいきます。
    のちほど Flow XO でこの箇所の情報を転記することになるので、ブラウザーのタブを開いた状態にしておきます。

  5. さらに下に行くと、お好みでアプリのアイコンや背景色を設定できます。
    設定は任意です。

また戻ってきますが、いったんこれで Slack の設定は置いておきます。

Flow XO の設定

続いて、Flow XO にて基本設定とチャットボットの会話ロジックを作成します。
会話のフロー図は以下になります。赤字 A から G にパーツを分けて説明していきます。
ここからの設定項目が多いので、もし最後の動作確認だけ見たい方は、 動作確認 を参照してください。

  1. Flow XOのサイト (External link) にアクセスして、アカウントを作成します。 無料で使えます。

    ログインすると、以下のページに遷移します。
    下のスクリーンショットにあるとおり、Flow を作成してから Bot のプラットフォームを設定していきます。

  2. それでは Flow を作成しましょう。赤枠の方をクリックします。

A:会話のきっかけメッセージの作成

  1. ポップアップ表示された画面上で、Interact > New Message をクリックします。

  2. Connect to bots のポップアップ表示が出てくるので、「Connect to all bots」にチェックを入れて「Next」をクリックします。

  3. New message 画面に以下のとおり必要事項を記入します。
    記入できたら「Next」をクリックします。

    項目名 内容 説明
    Words or Phrases hi
    Hi
    hey
    Botに呼びかける最初のトリガーワードを設定します。
    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. 簡単な挨拶文言を追加します。
  4. Filter 画面では、最初の会話なので特に絞り込みは必要ありません。
    空の状態で「Save」をクリックします。

    そうすると最初の Flow ができあがります。

  5. 左上の赤枠箇所で Flow の名前を「Attendance Bot」に変更して、右上で「Flow is not active」になっているので、「On」に切り替えます。
    また「New Message」と記載されている部分も区別がつくように、「Welcome Message」に変更します。
    フロー詳細については、「Edit」や「Filter」ボタンからいつでも編集可能です。

フロー図の B から G も、A と同様に作成していきます。

B/C:最初の呼びかけ

B と C は、最初の呼びかけへの Bot の返答です。

  1. 赤枠の「Click here to add an action」ボタンをクリックします。

  2. Select an Action 画面で、「Ask a question」をクリックします。

  3. 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 のユーザー名)をクリックして入れます。

  4. ここまで設定できたら「Next」をクリックして、Filter 画面に遷移します。
    今回も特に絞り込みは必要ないので、そのまま「Save」をクリックします。

  5. これで B と C の設定は完了です。
    最後に先ほどと同様にアクションの名前を「First Question」に変更しておきましょう。

D/E:最初の呼びかけへのユーザーの返答

続いて D と E の設定です。

D:Just lonely 分岐の設定
  1. 会話が分岐するので、まずは簡単な「Just lonely」分岐から作成します。
    「Click here to add an action」ボタンをクリックします。

  2. Select an Action 画面から「Send a Message」をクリックします。

  3. Send a Message 画面で、必要事項を以下のとおり記入します。
    今回も予約語は XO マークから「User Name」を選択して挿入します。

    項目名 内容 説明
    Message OK! Please feel free to talk to me, {{welcome_message.user_name}}. メッセージ内容を記入します。予約語も利用できます。
  4. Next ボタンをクリックして、Filter 画面で絞り込みを設定します。
    このアクションを起こす条件の指定です。

    項目名 内容 説明
    Value {{first_question.choice}} 絞り込みのキーとなる値を指定します。
    Condition Equals 不等号を指定します。
    Value Just lonely 絞り込みの値を指定します。
  5. これで Just lonely の分岐設定は完了です。
    こちらの分岐はこれが最後のメッセージになります。
    最後に「Send a Message」を「Response to lonely」に変更します。

E:Late for work 分岐の設定
  1. 次は D のもう一方の分岐、「Late for work」の設定です。
    「Click here to add an action」をクリックします。

  2. Select an Action 画面から、「Ask a question」をクリックします。

  3. 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
    ショートカットとなるボタンの名前を指定します。
  4. Filter 画面で絞り込みを設定します。
    このアクションを起こす条件の指定です。

    項目名 内容 説明
    Value {{first_question.choice}} 絞り込みのキーとなる値を指定します。
    Condition Equals 不等号を指定します。
    Value Late for work 絞り込みの値を指定します。
  5. これで Late for work の分岐設定は完了です。
    最後に「Ask a question」を「Response to late for work」に変更します。

F:レコードの追加

  1. 続いて F の設定です。
    ここで kintone に HTTP Request をして「Train delay」「Overslept」「Sick」のいずれかの遅刻理由のレコードを追加します。
    これまで同様、Click here to add an action で新規アクションを追加します。
    今回は Select an Action 画面から「Make a HTTP Request」をクリックします。

  2. 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データを送る場合は、これにチェックを入れます。
  3. 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 からの返答内容を設定してフロー作成は終わりです。

  1. Click here to add an action で新規アクションを追加します。
    今回は Select an Action 画面から「Send a Message」をクリックします。

  2. 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}}.
    メッセージの内容を指定します。予約語も利用できます。
  3. Filter 画面で、絞り込みを設定します。
    以下のとおり入力できたら「Save」をクリックします。

    項目名 内容 説明
    Value {{response_to_late_for_work.parsed_answer}} 絞り込みのキーとなる値を指定します。ここではResponse to late for workアクションへの回答を指定します。
    Condition Equals 不等号を指定します。
    Value Train delay 絞り込みの値を指定します。
  4. できたら Send a Message を「Message to Train delay」に変更して 1 つ目は完了です。

  5. 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}}.
  6. 完成したら以下のように 3 つアクションが並びます。

  7. これですべてのフロー設定が完了です!お疲れさまでした。
    最後に Test console で正常に動作するか確認しておきましょう。右下の赤枠のアイコンをクリックします。

動作チェック

Test console 画面が右側に立ち上がるので、そこに「hi」と呼びかけてテストしてみてください。

Bot を動かすプラットフォームの設定

  1. テストがうまくいったら Bot を動かすプラットフォームの設定に移ります。
    左メニューから「Bots」をクリックしてください。

  2. 「New Bot」をクリックします。

  3. 今回は Slack 上で動かす Bot を作成するので、「Slack」を選択して、「Next」をクリックします。

  4. Create a Bot 画面が立ち上がります。
    Name に「Attendance Bot」と記入します。ここから Slack 設定画面も立ち上げながら作業します。
    赤枠箇所を手順に沿って設定していきます。

  5. まずは Slack の設定画面に移動します。
    Slack のタブをブラウザーで閉じてしまった方は、 Slack App (External link) にアクセスして作成したアプリを選択すると、以下の設定画面に遷移します。
    Basic Information > Add features and functionality の項目を Step 1 から 3 の順で設定します。

  6. Step 1 の「Bots」をクリックしてください。

  7. 「Add a Bot User」をクリックします。

  8. 「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
  9. 忘れずに、「Save Changes」もクリックして保存します。

  10. また左メニューから Basic Information 画面に戻り、「▶︎」をクリックして、「Permissions」をクリックします。

  11. 「Install App to Workspace」をクリックして、作成したワークスペースに Bot User を追加します。

  12. 認証画面が出てくるので、「Authorize」をクリックします。

  13. 「Redirect URLs」を Flow XO の Slack 設定画面から転記します。
    「Add a new Redirect URL」をクリックして、転記した後、「Add」をクリックしてください。

    転記するのは、Flow XO のこちらの画面にある Slack APP Redirect URL です。

  14. 忘れずに「Save URLs」をクリックして保存します。

    ここまでできたら、作成した Slack のワークスペースに Bot User が追加されます。
    もし表示されない場合は、どこかしら設定を間違えているので見直してみましょう。

  15. もう一踏ん張りです!Slack 設定画面上で、左メニューから Basic Information 画面に戻ります。

  16. 「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 です。

  17. 忘れずに「Save Changes」をクリックします。

  18. このように Building Apps for Slack にチェックが 2 箇所、Add features and functionality 内にチェックが 3 箇所ついていることを確認できたら OK です!

  19. 下にスクロールして、「App Credentials」の項目に移動します。
    ここの「Client ID」と「Client Secret」を Flow XO の Slack 設定画面に転記します。

  20. 転記する先は以下です。完了したら、「Next」をクリックします。

  21. またこの画面に戻ってきますが、いったんここで「Done」をクリックします。

    Bots 画面に「Attendance Bot」ができあがります。

  22. 「Edit」をクリックして、下スクロールし「Next」をクリックします。

  23. Test & Distribute 画面で「Add to Slack」ボタンをクリックして、認証します。

  24. 新規タブが開いて、認証確認画面が出るので、「Authorize」をクリックします。

これですべての設定が完了です!Slack のワークスペースが立ち上がるので、動作確認をして終了になります。

動作確認

Slack 上の「attendance_botchan」宛てに「hi」と呼びかけて、設定したフローとおり動作するか確認してみましょう!

無事「Hi Mikei!」と返答がきました。

遅刻理由も kintone のアプリにレコード登録されています。

My Bot 完成です!

おわりに

最後まで設定できましたでしょうか?細かい設定が多いですが、GUI で設定できるので可能性が広がりますね。
ぜひ皆さんもチャレンジしてみてください。

各サービスのユーザーガイドは以下になります。設定に困った時は参照してください。

注意事項

  • この Tips 内の画像では、一部絵文字や Bot アイコンが表示されていますが、設定手順内ではその箇所を割愛しています。
    もし表示したい方は別途設定してください。
  • Flow XO の Ask a question アクションで Choice を選択した場合、Slack 上でボタンクリックするとユーザーではなく Bot ユーザーのコメントとして投稿されます。
information

この Tips は、2017 年 11 月版 kintone、Slack と Flow XO で動作を確認しています。