kintone

サンタの業務改善 kintone2 Advent Calendar 2019 | 24日目

kintone2 Advent Calendar 2019 | 24日目

はじめに

初めてご覧いただく方は初めまして、Teruと申します。
今回は初参加のくせに12/24を選択してしまい大変後悔しております。

さて、今回取り組むのは「サンタの業務改善」です。
サンタクロースにアンケートをとったところ、
やはり「何が欲しいのか」を知るのがなかなか難しいということでした。

近年は子どもの思考力も向上しており、
「何が欲しいのかをだれにも言わないでおこう!」となる子どもも少なくないようです。

このサンタとしての緊急事態を救うべく、kintoneを用いることにしました。

kintoneにサンタを登場させる

子どもは敏感です。
サンタさんにだけ、欲しいものを伝えたいのです。
親ではなくサンタに。

さて、これを解決する手段を私は思いつきました。
子どもが普段の業務で触れているkintoneにサンタが登場し、
欲しいものを聞いてきたとしたらどうでしょうか。

当然答えてしまうはずです。何が欲しいのかを。

Landbotを使って子どもから欲しいものを聞こう

今回使うのはLandbot ( https://landbot.io/ )というチャットボットを
ノンコードでホームページ上に導入できるシステムです。

チャットボットを用いてほしいものを聞く流れは以下の通り。

① チャットボットで名前・欲しいものを聞く
② 子どもがチャットボットに上記の情報を入力する
③ チャットボットに入力された情報がプレゼントアプリに登録される

チャットボットを作成する

まずはチャットボットを設置しましょう。
landbotのHPから設定を行います。

Try it now!から順に進めていくと、設定画面が現れます。

画面左側にはkintone同様様々なパーツが用意されており、
それを右側に配置していくことでチャットボットが作れます。
(kintoneユーザーにはきっと慣れている操作なはず)

今回は名前を聞く→欲しいものを聞く→kintoneに登録という流れですから
最後の登録処理のみコーディングが必要です。
landbotはノンコードで作れるのですが、
もちろんコーディングもできるようになっています。
このような形式で作成完了です。

チャットボットをkintoneに設置する

それでは作成したチャットボットをkintoneに設置しましょう。
今回は気づいてもらえないと意味がありませんから
すべての画面に表示させるようにします。

kintone全体のカスタマイズに適用する3つのファイル

① https://js.cybozu.com/jquery/3.4.1/jquery.min.js
② https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js
③ 下記のコード

jQuery.noConflict();
(function ($) {
    $('body').append('<script>' + 
  'var myLandbot = new LandbotLivechat({' +
    'index: "landbot上で生成されたURLを入力する",' +
  '});' +
'</script>');
})(jQuery);

この状態でkintoneを開くとどの画面にもチャットボットが出現するようになります。

欲しいものを登録するアプリを作成する

大エラー大会を改善するまで

ここまで作って私は大きな壁に立ちはだかりました。

CORS (Cross-Origin Resource Sharing) エラーというやつです。

CORS (Cross-Origin Resource Sharing)  とは?

簡単に言えば、同じドメイン上からしかデータを取得等できない仕組みのことです。
kintoneと別のドメインとの通信がブロックされます。
セキュリティ上非常に重要なルールだそうです。

CORSを防ぐよりもノンコードでできた

私の技術力ではCORSを防ぐ手立ては思いつきませんでした。
そのミニマムな技術力では対抗できないと悟った私は、
(なんせ締め切りが迫っていたので勉強もできず…)
ノンコードで解決しちゃえ!という発想力勝負に出ました。

Microsoft Flowと連携させる!

さて、そもそもなぜエラーが出たのかは説明しましたが、
どういう流れを組んでいたのかをもう一度説明しましょう。

①kintoneにチャットボットが出現
②チャットボットに入力した文字をチャットボット側が受け取る
③チャットボット内部からkintoneのアプリへ登録する

この、②→③の流れでエラーが発生しました。
そのため、とにかく別の方法を考える必要があったのです。

そこで思いついたのはMicrosoft Flowとメールを使った方法です。

①kintoneにチャットボットが出現
②チャットボットに入力した文字をチャットボット側が受け取る
③チャットボットからメールを送信する(チャットボット標準機能)
④メール受信をトリガーに、メールの内容を解析し、kintoneに登録する(Microsoft Flow)

この流れにすることで、なんとノンコードですべてを実現することができました。

landbot側を修正

メール送信機能は標準で用意されているので、下記の通りに。
件名に名前、本文にプレゼント内容を入れます。

Microsoft Flowの設定

なんてシンプルなんだ。

これだけ。

実際の挙動

チャットボット

kintone アプリ