Tips

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の項目をStep0から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で動作を確認しています。