カテゴリー内の他の記事

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

フォローする

(著者:サイボウズ 三宅 智子)

Index

概要

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

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

シナリオ

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

_______.png

Slackとは

チームでのコミュニケーションツールです。グループチャット・1対1のダイレクトメッセージ・音声通話などの機能があります。2017年11月17日に日本語版もリリースされました。詳細はこちらをご参照ください。

Flow XOとは

チャットボットの会話ロジックをGUIで(ほとんどノンコーディングで)作成できるツールです。イギリスの会社が開発しています。チャットをするプラットフォームは、SlackFacebook MessengerTelegramTwilio SMSなどから選択できます。また、100以上の連携可能なモジュールやサービスがある点も嬉しいポイントです。詳細はこちらをご参照ください。

完成イメージ

諸々の設定が完了すると、以下のようにSlack上でチャットボット(Attendance_Bot_Chan)とやり取りができます。ボタンクリックでコメントするだけなので、急いでいる朝でも素早く連絡ができます。
※USでお披露目した都合で英語表記になっていますが、実際は日本語でも設定可能です。

demo.gif

会話の流れ

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

logic.png

手順概要

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

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

ワンポイントアドバイス

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

kintoneのアプリ作成

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

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

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

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

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

Slackの設定

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

  1. こちらからSlack Workspaceを新規作成します。(Slackアカウントも自動生成されます)
    作成方法は、こちらをご参照ください。
    sla1.png

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

  3. 新たなウィンドウが立ち上がるので、「APP Name」と「Development Slack Workspace」を入力して、「Create App」ボタンをクリックします。
    sla5.png
    項目名  内容
    App Name Attendance_botchan
    Development Slack Workspace ご自身のWorkspaceを選択
  4. 画面遷移後、少し下にスクロールして、「App Credentials」欄にいきます。
    後ほどFlow XOでこの箇所の情報を転記することになるので、ブラウザのタブを開いた状態にしておきます。
    slack4.png

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

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

Flow XOの設定

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

flow8.png

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

    ログインすると、以下のページに遷移します。get startedの画像にある通り、Flowを作成してからBotのプラットフォームを設定していきます。
    flow1.png

  2. まずはFlowの作成です。赤枠の方をクリックします。
    flow1.png

    ポップアップ表示された画面上で、Interact > New Messageをクリックします。(フロー図のA箇所、会話のきっかけメッセージを設定)
    flow2.png

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

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

    項目名  内容 説明
    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. 簡単な挨拶文言を追加します。

    Filter画面では、最初の会話なので特に絞り込みは必要ありません。空の状態で「Save」をクリックします。
    flow5.png

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

  3. フロー図のB~GAと同様に作成していきます。次はBとC箇所、最初の呼びかけへのBotの返答です。
    赤枠の「Click here to add an action」ボタンをクリックします。
    flow9.png

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

    Ask a Question画面で、以下の通り必要事項を記入します。
    flow11.png

    項目名  内容 説明
    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のユーザー名)をクリックして入れます。
    flow12.png

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

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

  4. 続いてDとE箇所の設定です。ここから分岐するので、まずは簡単な「Just lonely」分岐から作成します。「Click here to add an action」ボタンをクリックします。
    flow14.png

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

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

    項目名  内容 説明
    Message OK! Please feel free to talk to me, {{welcome_message.user_name}}. メッセージ内容を記入します。予約語も利用できます。

    Nextボタンをクリックして、Filter画面で絞り込みを設定します。このアクションを起こす条件の指定です。
    __________2017-12-08_16.31.32.png
    項目名  内容 説明
    Value {{first_question.choice}} 絞り込みのキーとなる値を指定します。
    Condition Equals 不等号を指定します。
    Value Just lonely 絞り込みの値を指定します。


    これでJust lonelyの分岐設定は完了です。こちらの分岐はこれが最後のメッセージになります。最後に「Send a Message」を「Response to lonely」に変更します。
    flow18.png
  5. 次はDのもう一方の分岐、「Late for work」の設定です。「Click here to add an action」をクリックします。
    flow19.png

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

    Ask a Question画面で、必要事項を以下の通り記入します。
    flow21.png

    項目名  内容 説明
    Question Type Choice TextかChoiceを設定します。今回はボタンからの選択式にしたいので、Choiceを選択します。
    Question Please tell me the reason why you are late for work. 質問内容をテキストで入力します。
    Choices Train delay
    Overslept
    Sick
    ショートカットとなるボタンの名前を指定します。


    Filter画面で絞り込みを設定します。このアクションを起こす条件の指定です。
    flow22.png

    項目名  内容 説明
    Value {{first_question.choice}} 絞り込みのキーとなる値を指定します。
    Condition Equals 不等号を指定します。
    Value Late for work 絞り込みの値を指定します。


    これでLate for workの分岐設定は完了です。最後に「Ask a question」を「Response to late for work」に変更します。
    flow23.png
  6. 続いてF箇所の設定です。ここでkintoneにHTTP RequestをしてTrain delay, Overslept, Sickいずれかの遅刻理由のレコード追加を行います。これまで同様、Click here to add an actionで新規アクションを追加します。今回はSelect an Action画面から「Make a HTTP Request」をクリックします。
    flow24.png

    HTTP Request Settings画面で、必要事項を以下の通り記入します。ドメイン名・アプリID・APIトークンは、kintoneアプリ作成の手順でメモした内容を記入してください。記入できたら「Next」をクリックします。
    flow25.png
    flow26.png
    項目名  内容 説明
    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を指定してください。

    {
        "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のいずれかを指定した時に実行したいので、その条件を設定します。
    flow29.png
    flow30.png

    項目名  内容 説明
    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の設定は完了です。
    flow31.png


  7. 最後にG箇所です。それぞれの回答に対するBotからの返答内容を設定してフロー作成は終わりです。Click here to add an actionで新規アクションを追加します。今回はSelect an Action画面から「Send a Message」をクリックします。
    flow32.png

    Send a Message画面で、必要事項を記入します。記入できたら「Next」をクリックします。
    flow33.png

    項目名  内容 説明
    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」をクリックします。
    flow34.png

    項目名  内容 説明
    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」に変更して一つ目は完了です。
    flow35.png
  8. 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}}.
  9. 完成したら以下のように3つアクションが並びます。
    flow36.png

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

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

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

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

    今回はSlack上で動かすBotを作成するので、「Slack」を選択して、「Next」をクリックします。
    flow41.png
    Create a Bot画面が立ち上がります。Nameに「Attendance Bot」と記入します。ここからSlack設定画面も立ち上げながら作業します。赤枠箇所を手順に沿って設定していきます。
    flow42.pngflow43.png

    まずはSlackの設定画面に移動します。Slackのタブをブラウザで閉じてしまった方は、こちらのURLにアクセスして作成したアプリを選択すると、以下の設定画面に遷移します。Basic Information > Add features and functionalityの項目をstep1~3の順で設定します。まずはstep.1の「Bots」をクリックしてください。
    sla8.png

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

    「Display name」と「Default username」と「Always Show My Bot as Online」項目を以下の通り設定します。設定できたら、「Add Bot User」をクリックします。
    sla10.png

    項目名  内容
    Display name attendance_botchan
    Default username attendance_botchan
    Always Show My Bot as Online On

    忘れずに、「Sava Changes」もクリックして保存します。
    sla11.png

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

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

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

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

    ※転記するのは、Flow XOのこちらの画面にあるSlack APP Redirect URIです。
    sla29.png


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

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

    もう一踏ん張りです!Slack設定画面上で、左メニューからBasic Information画面に戻り、「Add features and functionality」の「▶︎」をクリックして、「Interactive Components」をクリックします。「Request URL」にFlow XOのSlack設定画面にある「Slack App Interactive Messages Action URL」を転記して、「Enable Interactive Components」をクリックします。
    sla20.png

    ※転記するのは、Flow XOのこちらの画面にあるSlack App Interactive Messages Action URLです。
    sla30.png

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

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

    sla22.png

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

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

    またこの画面に戻ってきますが、一旦ここで「Done」をクリックします。
    sla32.png

    Bots画面に「Attendance Bot」が出来上がります。「Edit」をクリックして、下スクロールし「Next」をクリックします。
    sla31.png

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

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

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

動作確認

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

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

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

My Bot完成です☆*:.。. o(≧▽≦)o .。.:*☆

おわりに

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

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

注意事項

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

このTipsは、2017年11月版のkitnone および Slack および Flow XOで確認したものになります。

 

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
Sho Ichikawa

はじめまして。

現在、お試し期間で検証をしております。

上記の設定を入れてみたのですが、Kintoneへの投稿だけうまくいきません。

Slack上ではBOTは正常に動いています。

権限まわりが怪しいと思い、確認したのですが、ちゃんと権限も設定されていました。

他に原因として考えられるものはありますでしょうか?

環境としてはSlackはフリープランでKintoneはお試し期間中です。

よろしくおねがいします。

Sho Ichikawaにより編集されました
Avatar
cybozu Development team

Sho Ichikawa 様

いつもお世話になっております。developer network事務局です。

 

kintoneの認証部分で失敗している可能性があります。

再度、kintoneの設定 部分にあるAPIトークンの生成、

Flow XOの設定 部分にあるのAPIトークン記載部分をご確認いただきたいです。

 

よろしくお願いいたします。

 

 

ログインしてコメントを残してください。