ChatGPT × kintone × LINEで最強の接客ツールを作ろう！③

この記事は、2023年8月31日開催の **「ChatGPT × kintone × LINEで最強の接客ツールを作ろう！」** のkintone編の記事になります！

https://linedevelopercommunity.connpass.com/event/291907/


前半のハンズオン記事はこちらです！

https://qiita.com/okinakamasayoshi/private/08d36273112000b7cd87

https://qiita.com/cog1t0/private/32669847456a74048bbe

# 自己紹介

![スクリーンショット 2023-08-31 19.44.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/cc88e877-0bc9-c043-c8b3-1aa13cebd6fb.png)
![スクリーンショット 2023-08-31 19.45.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/73eca9b8-7735-7b2d-f9dd-e42c7f11dd87.png)


# kintone側の流れ

![スクリーンショット 2023-08-31 20.07.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/8f5a9065-9ec0-cf8e-45d8-e30b80a5b5a1.png)


今回、LINEで送られてきた問い合わせ内容を元にAIによる感情分析を行い、その結果をkintoneに格納するようにしています。普通に考えれば **「DBに入れずにそのまま直接LINEで返信したらいいのでは？」** と思うかもですが、

- AIによる回答が必ずしも正しい回答とは限らない（人の目を通す必要がある）
- クレーム情報を格納することで集計・分析に利用可能

という観点から、kintoneに格納することにしました。（より実践的な内容って感じです！）

この記事で構築するフローとしては、

1. kintoneに保存された返信内容を確認して、適宜変更を加える（kintone基本機能）
1. kintoneのWebhook×プロセス管理を使って、返信内容をLINEに投稿（返信）
1. kintoneに格納されたクレーム内容を集計・分析

といった流れになります！

# 0. kintoneアプリの説明

前のハンズオン部分でkintoneアプリをテンプレートから作成したと思いますが、そのアプリの構成についてちょっと説明してみたいと思います。ハンズオンとは直接関係ないので、ここはスキップしてもOKです！

## フィールド構成

|フィールド名|フィールドタイプ|説明|
|:--|:--|:--|
|作成日時|作成日時|kintoneにレコードが新規作成された日時（自動挿入）|
|LINE ID|文字列（１行）|LINEのUUIDを保存するフィールド|
|問い合わせ内容|文字列（複数行）|お客様からの問い合わせ内容を保存するフィールド|
|緊急度|ドロップダウン|ChatGPTによる分析結果を保存するフィールド 「高・中・低」の３選択肢|
|返信内容|文字列（複数行）|ChatGPTによる結果を保存するフィールド|

![スクリーンショット 2023-08-29 20.29.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/364763f6-5952-06c1-8bea-a7cb13155a01.png)

:::note 
アプリのテンプレートはこちら
https://drive.google.com/drive/folders/1-0e2H04YVU2u2OISGC1lEK5CDQH0JYhH

アプリテンプレートを用いたアプリ作成の方法はこちらのヘルプをご確認ください。（めちゃ簡単です）
https://jp.cybozu.help/k/ja/user/create_app/app_csv/add_app_template_file.html
:::

# 1. kintone プロセス管理の設定

それでは改めてkintone側のハンズオンといきましょう！
といっても、アプリテンプレートを利用した場合はすでにここも設定済みなのでスキップで大丈夫ですw

kintoneには「プロセス管理」というワークフローの仕組みがあります。今回このワークフローを利用して、 **「ステータスが”LINE送信済”になったら返信内容をLINEに投稿する」** 仕組みを作ってみます。

この仕組みにすることで、人が意図的にLINEに返信内容を送ることができるため、

- 意図せず勝手に送信された
- 間違えて送ってしまった
- 他者の確認を得ずに送信してしまった

ということが防げるようになります。プロセス管理は問い合わせアプリの `歯車 > 設定タブ > プロセス管理` から設定が可能です。
![スクリーンショット 2023-08-29 20.41.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/6f0a1afc-dd7a-4079-8d17-6223975b865f.png)

LINEに投稿するステータスとして今回は `LINE返信済` としてみました。

:::note warn
この「LINE返信済」はのちほどｍake側でも利用するので覚えておいてください。
:::

# makeフロー

次はmake側を設定していきます。makeで作るフローは **「kintone → LINE」** の連携部分です。

:::note warn
makeは1つのフロー内に複数のイベントトリガーが設定できなさそうなため、
今回のフローは **新しく** 作成してください。
:::


先にmakeの全体像をお見せすると、、利用するコネクタはWebhookコネクタとLINEコネクタの2つのみです！
![スクリーンショット 2023-08-29 20.53.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/150a6fe9-ac06-181c-325a-8d231b2c1ace.png)

# 2. Webhookコネクタ

画面下部の+ボタンより「Webhook」を選択して、「Custom Webhook」を選択します。
![スクリーンショット 2023-08-30 11.30.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/f84ea376-0501-27d2-4427-bc425acdd735.png)

Webhookコネクタをまだ利用していない場合は「Add」より新しいhookを準備します。
![スクリーンショット 2023-08-30 11.32.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/a895ac2b-e889-5bdd-796a-28e5ee198bdc.png)
Webhook nameは適当でOKです！
![スクリーンショット 2023-08-30 11.34.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/1e39487a-598b-2b13-95b6-27d9be9170d1.png)

Saveを押すと「Copy address to clipboard」のボタンが出るのでクリックして（コピペして）、「OK」を押します。
![スクリーンショット 2023-08-30 11.37.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/02e53b3e-2f71-5a92-6919-96f8dba1d172.png)
これでWebhookのコネクタ設定は完了です。


# 3. kintone Webhookの設定

次は、先ほどmake上でコピペしたWebhook URLをkintoneに埋め込み、簡単な動作確認もしてみたいと思います。kintoneにはWebhookが搭載されており、

- レコードが新規追加されたとき
- レコードが更新されたとき
- レコードが削除されたとき
- レコードのコメントがあったとき
- ステータスが変更されたとき

のイベントをトリガーにそのレコードデータを特定URL宛に飛ばすことができます。

kintoneのレコード一覧より `歯車 > 設定 > Webhook` と進み、左側にある＋ボタンより新規追加します。今回はkintoneのプロセス管理をトリガーにするので、「ステータスが変更されたとき」にチェックを入れてください。
![スクリーンショット 2023-08-30 11.39.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/896a3845-f6eb-cd9c-9df2-ded7db5c1237.png)

:::note warn
URLを貼り付ける際 `https://` は重複するので取り除いてください
:::

保存してアプリの更新をすれば完了です！
![スクリーンショット 2023-08-31 8.46.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/82a35eda-983f-f4c4-dfb9-d436df8a39d9.png)


## 簡易動作テスト

まずmake側の **「Run once」** をクリックして、待機状態にしておきます。
![スクリーンショット 2023-08-30 14.24.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/056c5a87-9a30-e255-568a-9be761aedc05.png)
![スクリーンショット 2023-08-30 14.25.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/160c11a5-f430-bc3a-2cbd-fcb7f5597a25.png)
この状態でWebhookURLにデータを飛ばすと、makeが動くようになります。

次に、kintone側で実際にWebhookを飛ばしてみたいと思います。おそらく前のハンズオンのところでkintoneにデータ登録はできていると思いますが、もしデータがなければ適当にレコードを1件登録してください。

（一覧の左側の青色ノートマークより）1件データを開いてもらうと、「返信する」というプロセスボタンが表示されると思います。
![スクリーンショット 2023-08-30 14.22.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/c0b14f8f-f29b-a7a9-7987-ee3f4e16f8bd.png)

プロセスを動かすとmake側の画面が待機画面から完了画面に切り替わります。（Webhookコネクタの右上に数字が出ていればOKです！）
![スクリーンショット 2023-08-30 14.27.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/c7559ef1-9177-81d5-f5e4-3203b6adc6c3.png)

この数字をクリックすると、kintoneから飛んできたレコードデータを確認することができます。
![スクリーンショット 2023-08-30 14.28.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/4901231b-6d86-db81-6b09-bc0766ba490a.png)

この画面と同じようにデータが確認できれば、動作確認は完了です！

# 4. LINEコネクタ

次はLINE側のコネクタ設定を行います。

LINEコネクタを選択いただき、`Send a Push Message` を選択します。
![スクリーンショット 2023-08-30 14.32.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/fa47fcbe-642d-4084-5218-8cc356380750.png)

おそらくConnection部分は前のハンズオンのところで設定済みなので同じやつを利用してください。Messageを開くとText部分が表示されるので

- To: kintoneのLINE IDフィールドの値（`record:LINE_ID:value`）
- Text: kintoneの返信内容フィールドの値（`record:返信内容:value`）

を設定します。
![スクリーンショット 2023-08-30 14.32.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/9889f4fb-7b78-775a-1f2b-ac491c695595.png)
![スクリーンショット 2023-08-30 14.33.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/22bcca47-562c-bac0-d736-fef1322ed1b3.png)

:::note alert
kintoneの値は value の中にあるので、必ずvalueを選択してください!!
![スクリーンショット 2023-08-30 14.37.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/018d713e-962c-c63e-917b-a442128b148c.png)
:::

# 5. フローの条件分岐

4までの処理で一連の流れは実現できているのですが、このままだとkintoneのプロセスが動くたびにLINEに返信内容を投稿してしまいます。今回は **ステータスが「LINE送信済」になったらLINEに投稿する** という条件があるので、make側で条件分岐を設定します。
![スクリーンショット 2023-08-30 15.16.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/9a5a6fbd-783a-54c8-3445-b499cd66c865.png)

Conditionのほうに `record:ステータス:value` を選びます。
![スクリーンショット 2023-08-30 15.16.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/a7344bdf-1dfe-bcd9-fcd9-52f4720d5553.png)

Text operations は `Equal to` のままで、値に `LINE返信済` と記入します。
![スクリーンショット 2023-08-30 15.17.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/4b7215ce-1af4-7aaf-0dd9-d6b6811ed03d.png)

こうすることで、ステータスが「LINE返信済」のときだけ、このフローが通るようになります。

# 6. 全体の動作確認

これで全体の流れが開発できたので、動作確認をしてみましょう。

まず、makeのシナリオ一覧から **自動起動をON** にしてください。
![371127612_690344559185788_8736662158045554088_n.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/e53fe946-8d51-9309-e680-a8310e597956.png)


これがChatGPTが作成した文章です。
![スクリーンショット 2023-08-30 16.04.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/54c62084-dac9-07ac-a546-9c28aad8310f.png)

こちらをもう少し丁寧めに変更しました。
![スクリーンショット 2023-08-30 16.05.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/10d5567f-84dc-d888-74f8-f445d4d3481c.png)

プロセス管理を回すと・・
![スクリーンショット 2023-08-30 16.17.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/e14d1b6e-cde8-9c3b-8b44-3b9c9c02b65d.png)

kintone上で修正した内容で返信が届きました！
![Screenshot_20230830-161743.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/1f097c71-0bcd-9250-753e-21d7408a7974.png)

# Ex. kintone上での分析

kintoneには基本機能としてグラフ機能があるため、簡単な集計や分析はノーコードで実現可能です。
レコード一覧画面のグラフアイコンをクリックすることで好きなグラフを作成することができます。
![スクリーンショット 2023-08-29 21.03.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/15ef9726-fd6c-3831-6bd9-a5569eadd5dc.png)

![スクリーンショット 2023-08-29 21.03.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/9282a70a-0567-e606-0adb-47318527388e.png)
![スクリーンショット 2023-08-29 21.04.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/cf2b614a-bb2a-13e3-fdcf-5a655518de0e.png)

今回は「緊急度」だけをAIで分析させましたが、他にも「ジャンル」「属性」「言語」など、さまざまな情報をAIに分析させてkintoneに格納することで、好きな切り口でクレーム情報を二次利用することができます！

# Ex. kintoneに格納されたLINE IDの利活用

LINE Botの機能として、
**「同じプロバイダ−の中であれば別のBotからも同じLINE IDを利用してメッセージが投稿可能」** 
というのがあります。

つまり `Bot A` とのやりとりで取得したLINE ID（ユーザーの宛先）を `Bot B` で利用することができます。

そのためにはLINE IDをBot間で共有する必要があるのですが、まさにここでkintoneの出番となります。今回の問い合わせ管理Bot経由で取得したLINE IDを使って、別のBotから任意のテキストを送信してみました！

1. アプリは適当なものを作りましょう
![スクリーンショット 2023-08-31 18.39.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/d84ba127-07f6-b9cb-3300-54a30674193c.png)

2. makeのフローは先ほどのやつほぼ同じです（コネクション部分の条件はいらないです）
LINE Botは今回用の新しいBotを設定します。
![スクリーンショット 2023-08-31 18.41.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/65472c5c-c0f9-8d04-3caa-1dc52eaca868.png)

3. kintoneのWebhookは「レコード追加時」と「編集時」にチェックをいれてみます（テストが簡単なのでw）
![スクリーンショット 2023-08-31 18.35.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/7780f4fe-7ddb-34d9-3c30-abb7ac49bf76.png)

4. 先ほどの問い合わせ管理Botから登録されたLINE IDをコピーして、
![スクリーンショット 2023-08-31 18.31.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/f5451a74-4319-e7e8-9c5a-5d76f05a458d.png)

5. 新しく用意したアプリのLINE IDに貼り付けて返信内容を記載して保存をすると・・
![スクリーンショット 2023-08-31 18.32.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/f986a168-49da-6081-c33f-eeba89b00b32.png)

6. 別のBotからメッセージが届きました！
![Screenshot_20230831-183213.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/5e2bf4d5-fcc4-6968-d05e-4eeb6daccba4.png)

今回はLINE IDはコピペをしたのですが、kintoneにはルックアップという別アプリのデータを参照する機能があるので、それを利用すればわざわざコピペをせずにLINE IDを活用することができます。

こんな形でLINE IDをkintoneで管理することで、複数のBotで利用可能になります。

:::note alert
LINEの規約によりLINE IDの使いまわしは「同一サービス内でのみ可能」となっているので、悪用はしないでくださいw
:::