【スーパーの女神】商品について聞いたら答えてくれるおねえさんを創り出す

## 「誰でも」「すぐに使える」商品検索機能を備えたおねえさんがほしい！
　こんにちは、便利なおねえさんを創り出すことに全身全霊をかける女、ゆいです。

 
 　前回はGoogleスプレッドシートに書かれたデータを基に、商品名を入力するとJANコードを教えてくれるお姉さんを創り出しました。
 
 https://qiita.com/yui214391/items/ff68421d0935c6bad9e9


　※前回はGoogleスプレッドシートにあるデータを返してくれるLINEbotでした。（Makeによるフローチャートはこちら↓）
 
 <img width="７0%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3779323/7de8b309-6e05-9bb7-cdef-140865a7d8c6.png">

 
　前回では、
「シートにない商品名、JANコードは返答できない」
「メーカーが違う同じ商品の区別がつかない」
　という2つの問題点を持っていました。



 …ので、今回はその問題を払拭すべく、ChatGPTを搭載してデータベースを広げようと考えました！
 




<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3779323/84f5e5df-4710-e86c-6273-89b6885275c0.png">

 


 
 　というわけで、今回のご紹介は、DifyとMakeを活用して、ChatGPTがネット内を検索し、知識を拾って質問の答えを返してくれるLINEbotおねえさんの設計図を記しにきました。
  
　★★今回はChatGPTに、記事の執筆も手助けしてもらいました。★★

## 今回のゴール

　このプロジェクトのゴールは、LINEbotを使ってユーザーからのメッセージに自動で返事をするシステムを作成することです。
 　Difyを使ってボットのデータベースを構築し、Make（旧Integromat）を使ってワークフローの自動化を行いました。


<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3779323/6363afca-3f93-cd1b-9677-c546218778dc.png">








### 使用したツール

- **Dify**: ボットのデータベース構築に使用。
- **Make**: ワークフローの自動化ツール。
- **LINE Developers**: LINEbotの設定と管理に使用。

## 具体的な手順

### Step 1: LINEbotの作成
ここについては前回作成したおねえさんのbotをつかいます。
記事の最初にリンクを貼ったので、そちらを参照お願いします。

### Step 2: Difyでフローチャートを作成

次に、Difyを使って自動で検索してChatGPTが返事をしてくれる流れを作ります。

（Difyでは簡単にAPIを作成できるので、Makeに組み込めます。）

Difyでのフローチャートのつくりかたはこちらを参考にしました。

https://qiita.com/minorun365/items/4c5dba1de7977c386249




![スクリーンショット 2024-06-04 5.42.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3779323/2c62b581-64e3-967e-c9d5-22a16430e846.png)

引用した記事を元に作成したフローチャートはこうなります。
実際に検索してみてもらうと、返答が返ってきました！

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3779323/45cd2bac-0dd9-1a8f-f437-14bfaa5386b7.png">

情報に間違いはなさそうです。

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3779323/5bd13c4c-8dad-9666-8ea5-efebac6f119e.png">

これで私の代わりにDifyが知りたいことを検索してくれる仕組みを作れました。



### Step 3: Makeでワークフローを自動化

できたDifyのAPIを、Makeを使って、LINEbotと連携させるワークフローを作成します。

#### ワークフローの設定

![スクリーンショット 2024-05-30 3.50.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3779323/6be429a5-ee6b-1fdc-2c1c-42a7d7fbb42b.png)

1. **新しいシナリオを作成**: Makeのダッシュボードで新しいシナリオを作成します。
2. **トリガーの設定**: LINEbotからのメッセージをトリガーに設定します。
3. **アクションの設定**: トリガーされたメッセージをDifyのAPIに送信し、返ってきた応答をLINEbotに返すように設定します。

<img width="40%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3779323/f031160b-4d7e-806d-0f69-2d3e8e33b318.png">

<img width="43%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3779323/53599fb4-7065-9db5-bc95-3df8f3f82289.png">

<img width="40%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3779323/29bdf55b-a274-5284-a254-00735887763b.png">

上記は今回のモジュールの中身です。
詳細はほぼ以下の記事をコピペしたので、元記事を参照ください。

https://qiita.com/cog1t0/items/00a9e608925578e0cf44

私からは再現する際に躓いた点を記しておきます。
MakeとDifyを接続するモジュール内の部分です。

![スクリーンショット 2024-06-04 5.52.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3779323/6ecc5ff1-8408-15e0-597f-b10dc318b98e.png)

<img width="６0%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3779323/ed362bf8-a45a-7d0e-19b4-ff8a690f169b.png">



:::note warn
ポイント
上記部分、Request contentの中ですが、
![スクリーンショット 2024-06-04 6.02.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3779323/dcc74636-96c6-bd71-2a84-98b201502269.png)
Difyのフローチャートの「開始」で設定した変数名を記入しないとうまく接続されません。

:::






### Step 4: 動作確認とデバッグ

設定が完了したら、実際にLINEbotにメッセージを送信して動作確認を行います。


https://x.com/YUI447486742018/status/1796055513278644355

これで「いつでも」「だれでも」「手軽に」商品検索ができるようになりました！







## ChatGPTの活用場面

今回のプロジェクトでは、以下の場面でChatGPTを活用しました。

- **エラーの発見**:でできたエラーをコピーしてChatGPTにはりつけ、どう直すべきかを教えてもらいました。


- **記事の執筆**: このQiita記事の構成や内容をChatGPTに提案してもらい、効率よく執筆しました。

### 使用したプロンプト

以下は、ChatGPTに対して使用したプロンプトの一例です。


```User
## 命令書:
あなたは{ブロガー}です。
以下の制約条件と入力文をもとに{ブログの記事}を出力してください。
## 制約条件:
•文字数は2000文字程度。
•重要なキーワードを取り残さない。
•文章を簡潔に書いてください。

## DifyとMakeを使ってLINEbotを制作した流れをQiitaにマークダウン方式で記入してください。
記入する上でわからない事があれば質問してください。
```
記事を執筆するにあたって、土台を作ってもらうという意味ではかなり役にたちました。
ですが、読みやすさよりも事実のみを羅列した形になりがちなので、肉付け必須です。
骨組みを作ってもらう、という使い方をするように考えると良いと思います。

### 今後追加したいこと
- **リッチメニューの作成** 
- **分割してJANコード検索モードとその他の検索モードにしたい**

<img width="40%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3779323/cfde6164-0196-71f3-9517-d763c41bdbaa.png">

※画像はイメージ（仮）です。


　今回は追加できませんでしたが次のアップデート予定としては上記を考えています！

###