見出し画像

anybotとkintoneを連携させてみた！

yo4shi80

まず、今回やったこと

anybotのwebhookをIFTTTで受け取りkintoneのAPIを呼び出してみました！すべてローコードで実現できます。

はじめに

先日行われたウェビナーに参加して、LINEミニアプリとツール連携でDXを実現することができることを知りました。

このセミナーでは、実際にLINEとanybotとローコード（Google cloud function）で、サービスをローンチされた事例も紹介されていて、私もやってみよう！と思い今回トライしてみました！

今回使っているツールについて

今回使うツールの紹介をさせていただきます。

anybot

まずanybotですが、エボラニ社が提供しているサービスになります。

https://anybot.me/　より引用

LINEなどを使ったミニアプリの開発をスムーズにできるPFで様々なところで利用が拡大されているようです。私も利用させていただいています。

kintone

こちらはご存知の方が多いのではないかと思うのですが、サイボウズ社が提供しているサービスになります。

https://kintone.cybozu.co.jp/ より引用

ローコード、ノーコードの世界で活用されることが多いツールでAPIや開発環境も充実しています。以下が開発者用のサイトです。

https://developer.cybozu.io/hc/ja

IFTTT

こちらもご存知の方が多いのではないでしょうか？

https://ifttt.com/ より引用

「IF This Then That」の頭文字を取っていて、「もし、これをしたら、あれをする」という意味です。特に様々なクラウドサービスが〜〜したら、〜〜をする、というサービス連携で使われることが多いです。
IoTでの利用も多いです。

今回は、anybotとkintoneの間をつなぐサービスとして利用しています。通常はGoogle の cloud functionや、AWSのlambdaなどで連携を実装しますが、ローコードでの実装をしたい！と思い、IFTTTを選定しました。

この手のサービスは他にも

などがあります。ただ、これらのサービスについては、連携機能の回数制限が厳しいため今回採用していません。LINEと連携場合を考えると、ユーザーの行動起因で連携機能が何度も呼び出される可能性がある、ので、IoTでの利用も多く、連携機能を何度も呼び出す用途には適していると考えたIFTTTを選定しています。

今回実現したいこと

まず、今回実現したいことを整理すると、「LINEのミニアプリ経由でユーザーがアクションしたデータをkintone上で保管する」です。
例えば、ユーザーがLINE経由で連絡先を登録した場合に、それを管理する帳簿をkintone上に作成し保管する、というイメージです。

システム図

ではこれらを実現するシステムを考えてみます。以下のものでとりあえず作ってみることにします。

このようにして、ユーザーの操作をkintoneのデータベースに保存することにします。

anybotでミニアプリを作成する

LINEミニアプリをつくるためには、通常はLIFF（LINE Frontend Framework）でのプログラミングが必要になります。

ただ、anybotを使えばLINEミニアプリはノーコードで比較的簡単に作れます。今回はこの詳細には触れませんが、もしご興味ある方は以下の記事や、ミニアッパーのイベントなどに参加されるのが良いかと思います！

（ご要望があれば記事化もしていきたいと思います）

anybotのミニアプリからwebhookを飛ばす

連携の設定を進めていますが、まずは以下の赤枠のところを進めてみましょう。

anybotのミニアプリからwebhookを飛ばす設定

anybotのミニアプリを実装できたら、その通知をwebhook経由で飛ばす準備をしておきましょう。anybotの会話フローの中で簡単に設定が可能です。

よくあるのは、ユーザーが登録した、問い合わせをした、など重要なタイミングでこの通知を飛ばす設定をするのがよいと思います。

ここで、このあとのIFTTT連携のために、anybotのwebhook設定画面で以下のように設定することを覚えておいてください！

  • webhookURLはIFTTTで後で取得したものを入力すること

  • 項目名は、value1,value2,value3を利用すること

です。この設定をしていれば、このあと、スムーズにIFTTTと連携できるはずです。今回はこのvalue1,2に入れた内容をkintoneに反映させることにします。

IFTTTの設定

まず、IFTTTの登録をしましょう（今回は無料プランで十分です）

登録ができたら、連携のためのアプレットを作成します。順を追って説明します。まずアプリを作成します。

その後、If Thisの部分のaddを選択し

サービスとしてwebhookを選んでください。

トリガーを選択しますが、web requestを選んでください。

イベント名は、anybot_webhook　としてください。

続いて、Then Thatもwebhookを選択し

Make a web request を選択してください。これでAPIのリクエストが可能になります。

アクションのフィールドを埋めるように言われますが、一旦、以下の情報で埋めておいてください。

その他は空欄でOKです。URLは、ダミーURLとして、以下で結構です。
https://xxxxxx.cybozu.com/k/v1/record.json?app=xx
あとでkintoneの設定をする際にここの情報をもう一度修正します。

これで一旦、アプレットの作成が完了しました。

次にwebhookを利用するための認証情報を取得するために以下にアクセスします。

こちらのdocumentationをクリックしてください。

ここをクリックすると以下の情報が出てくると思います。

このkey情報を使って、以下のURLを皆さんご自身で作成してください。（ここのページの中段にもありますが、jsonがURLに入ったURLではないので注意してください！）

https://maker.ifttt.com/trigger/anybot_webhook/with/key/ここにキーの文字列を入れる

このURLを先程anybotの画面で説明した、「webhookURLはIFTTTで後で取得したものを入力すること」に入力してください。

kintoneとの接続

最後にkintoneとの接続をしてみましょう。
まずkintoneの開発者環境を取得します（すでに商用環境のライセンスをお持ちの方は不要で）

https://developer.cybozu.io/hc/ja/signin

少し私も理解が及んでいないのですが、ライセンスを申し込むときにgmailなどのフリーメールでは登録ができず、法人メールアドレスが必要かもしれません。

 作成後、ログインをしていただき、アプリを作成しましょう。

今回はテンプレートから、顧客リストを選びましょう

作成後連携の設定のために、以下をクリックして

これでAPIトークンが生成されます。APIトークンの文字列は保存しておいてください。アクセス権は以下の通り設定しておいてください。

この後、保存ボタンを押して、戻ったところでアプリの更新を必ずクリックしてください！
kintoneでよく間違えるポイントの一つで、アプリを更新を忘れがちです。

kintoneのAPIを呼び出す

ここまでで準備が整いましたので、IFTTTからkintoneのAPIを呼び出す設定をしていきたいと思います。kintoneのREST APIの一覧は以下のとおりです。

https://developer.cybozu.io/hc/ja/articles/360000313406

今回は先程の顧客リストに、LINEミニアプリから飛んできたwebhookを使って、データを登録することにします。該当のAPIは

https://developer.cybozu.io/hc/ja/articles/202166160#step1

です。こちらを見ると、

https://xxx.cybozu.com/k/v1/record.json?app=yy

の記述をするようです。ここで、xxxは皆さんのサイボウズアカウントのアドレスに従って変更してください。`app=yy` の部分は、皆さんのアプリのIDを入れてください。アプリのIDは先程作成したアプリを開いたときのURL

https://xxx.cybozu.com/k/yy/

のyyの部分になります。

リクエストボディは以下の設定にします。IFTTT側で受け取った、value1,2を会社名、部署名としてkintoneの先程のデータベースの値として代入します。appのところに、appIDとして先程の値を入れるのを忘れないでください。

{ 
  "app": "yy", 
  "record": 
    { 
      "会社名": { "value": "{{Value1}}" }, 
      "部署名": { "value": "{{Value2}}" } 
    }
}

これらを使ってIFTTT側の設定を最後にすることにします。

IFTTTでのkintoneとの連携設定

IFTTTの画面に戻っていただいて、settingsをクリックします。

Thenのところをクリックしてwebhookのアクションを設定しましょう。そこで以下のように入力内容を修正します。

URLは先程と同様にxxx,yyを修正してください。

トークンを入力し、Bodyのところのyyも修正してください。Value1,Value2というとことは、Add ingredientをクリックすると出てきます。

これで設定は完了です。

動作確認

これでanybotからのwebhookを受けて、kintoneに入力する設定が可能になりました。動作確認をするために、IFTTTのwebhookURLをcURLでリクエストする例を書いておきます。

curl -X POST -H "Content-Type: application/json" -d '{"value1":"test1","value2":"test2","value3":"test3"}' https://maker.ifttt.com/trigger/anybot_webhook/with/key/xxx

xxxの部分はIFTTTのkeyを入力してください。これでIFTTT経由で、kintoneにデータが入力されるはずです。

まとめ

今回は、anybotとkintoneを連携させる方法について説明してみました。IFTTTを使ってシンプルに実装しましたが、kintoneのさらなる活用、またそれ以外のツールとの連携の幅も広がりそうです。
まずはこのような方法でプロトタイピングを行い、その後、本格的な実装を行うのも良いかもしれません。
今後もミニアプリに関連した記事を作成していきたいと思いますので、よろしくお願いします！