Difyで「手相占いを行うチャットボット」を開発する方法について徹底解説！

URL：https://cloud.dify.ai/signin

「GitHub」または「Google」アカウントを用いてDifyではアカウントを作成します。

手順や複雑さに違いはないため、普段よく使用するアカウントを選んで作成しましょう。
画面の指示に従い「GitHub」または「Google」アカウントでログインを行えば、Difyアカウントの作成は完了です。

アカウント作成またはログインが完了すると、Difyのトップページに移動します。

この画面右上に表示されている「自身のアカウント名」をクリックし、表示されるメニューから「設定」を選択します。

「モデルプロパイダー」を選択し、LLMの設定画面に移動します。

ChatGPTとClaudeに関しては標準でモデルの組み込みが行われているため、この2つのLLMのどちらかを使用してDifyを利用する場合には、

ChatGPTの場合は、OpenAIタブの横にある「API-KEYセットアップ」
Claudeの場合は、ANTHROPICタブの横にある「API-KEYセットアップ」

をクリックして、APIキーのセットアップ画面を表示します。
表示された画面にそれぞれのAPIキーを入力すると接続が完了し、Difyで使用できるようになります。

※ChatGPTの利用に限り、API接続を行わなくても一定回数無料で使用することが可能です。

ステップ2と同様に、「モデルプロパイダー」を選択しLLMの設定画面に移動します。

この画面の下に表示されている、「モデルプロパイダを追加」から、使用したいLLMを探し、カーソルを合わせます。
カーソルを合わせると「モデルを追加」または「セットアップ」という表示が現れるため、そちらをクリックします。

表示された画面の指示に従い、モデルタイプの選択やAPIキーなどの求められた情報を入力すると接続が完了し、Difyで使用できるようになります。

※この設定は必須ではありません。特定のLLMをDifyで使用したい場合のみ設定を行なってください。

LLMの接続を行ったらホーム画面に移動し、「アプリを最初から作成」というボタンを選択します。

表示される画面で以下のように設定を行い、「作成する」ボタンをクリックします。

アプリタイプ：チャットボット
オーケストレーション：Chatflow
アプリアイコン：任意のものを選択
アプリ名：任意の名前を入力

画面右上の「機能」を選択します。

機能設定画面にて、「画像をアップロード」という項目をオンに変更します。

機能設定画面を閉じて、Difyのアプリ構築画面から「LLM」というブロックを選択します。

「モデル」を開き、”GPT-4o”や”Gemini”などの画像のアップロードが可能なAI言語モデルを選択します。

「SYSTEM」には、”手相を占ってほしい”ということが伝わるプロンプトを記入します。

画面右上に表示されている「公開する」というボタンから、Difyで開発したアプリを公開します。

画面左側のメニューから、「APIアクセス」を選択します。
表示される画面の右上にある「APIキー」というボタンを選択してAPIキーを発行します。

ここで発行したAPIキーは後ほど使用するため、必ず控えておきましょう。

URL：https://manager.line.biz

URLにアクセスをしたら、LINEへログインを行いましょう。

アカウントリスト画面の左側に表示されている「作成」を選択します。

表示されたフォームに必要項目を記入して、LINE公式アカウントを作成します。

アカウント作成完了後に表示されるアカウント管理画面で、右上に表示されている「設定」を選択します。

設定画面のメニューから「Messaging API」を開き、「Messaging APIを利用する」を選択します。

プロパイダーを作成という項目にチェックを入れ、プロパイダー名を入力します。
プロパイダー名は外部に公開されることがないため、自身が管理しやすい名前を設定しましょう。

プロパイダー名を入力したら、画面下の利用規約を確認し、「同意する」を選択します。

プロパイダー設定後に、ステータスが「利用中」になっていればMessaging APIの利用設定は完了です。

続けて、「その他の設定はLINE Developerから行えます。」というテキストまたは以下のURLから、LINE Developerに移動します。

URL：https://developers.line.biz/ja/

画面右上の「コンソール」を選択します。

コンソール画面左側のメニューから、先ほど作成した「プロパイダー」を選択します。

プロパイダーのチャネル設定画面で、こちらも先ほど作成をした「LINE公式アカウント」を選択します。

「Messaging API設定」を開き、一番下に表示されている「チャネルアクセストークン (長期)」を発行します。

後ほどチャネルアクセストークンは使用するため、必ず発行後に控えておきましょう。

URL：https://make.com

画面右上に表示されている「Get started free」からアカウントを作成します。

アカウントは、「メールアドレス」または「Googleなどの外部サービスアカウント」を用いて作成することが可能です。
アカウント作成後には、アンケートやチュートリアルを確認し、Organization画面まで移動します。

既にアカウントを保有している方は「Log in」からログインを行います。

画面左側のメニューから「Scenarios」を開きます。

Scenariosの一覧画面から、右上に表示されている「Create a new scenario」を選択します。

シナリオの構築画面で、「プラス記号」のボタンを選択し、検索ボックスに「LINE」と入力します。

その後、「Watch Events」を選択します。

「Watch Events」を追加後、表示される画面で「Add」を選択し、その後「Create a connection」を選択します。

「Channel Access Token」の入力欄が表示されるため、ここに「手順2 – ステップ9」で取得したチャネルアクセストークンを入力し、「Save」を選択します。

「Channel Access Token」を入力し、保存すると、Webhookが発行されます。
後ほど使用するため、必ず控えておきましょう。

Webhookを控えたら、「OK」を選択します。

LINE Official Account Managerから、作成したLINE公式アカウントの「Messaging API設定画面」を開きます。

Webhook URLの入力欄に先ほど取得したwebhookを入力して、「保存」を選択します。

画面左側のメニューから、「応答設定」を開きます。

応答機能の設定画面で、「Webhook」のみをオンにして、それ以外は全てオフに変更します。

Makeに戻り、先ほど追加したLINE機能の右側に表示されている「プラスボタン」を選択します。

検索ボックスに「LINE」と入力し、「Download a Message Attachment」を選択します。

「Message ID」という入力欄を選択し、表示されるメニューの中から、「Message ID」を選択します。
選択をしてもMessageID欄にテキストが反映されない場合は、ドラッグ&ドロップでMessageIDを入力します。

画像のように、MessageIDの入力欄に緑色のテキストが入力されていれば問題ありません。
「OK」を選択して、保存しましょう。

ステップ9と同様に「プラスボタン」を選択し、HTTPという項目の中にある「Make a request」を追加します。

以下のように設定を行います。

Evaluate all states as errors：No
URL：https://api.dify.ai/v1/files/upload
Method：POST
Headers Item1
　Name：Authorization
　Value：Bearer DifyAPIキー　*BearerとAPIキーの間は半角スペース
Body type：Multipart/form-data
Fields Item1
　Field type：File
　Key：file
　File：LINE – Download a Message Attachment
Fields Item2
　Field type：Text
　Key：user
　Value：{{1.events[].source.userId}}
Parse response：Yes

ステップ12と同様に、HTTPの「Make a request」を追加し、以下のように設定を行います。

Evaluate all states as errors：No
URL：https://api.dify.ai/v1/chat-messages
Method：POST
Headers Item1
　Name：Authorization
　Value：Bearer DifyAPIキー　*BearerとAPIキーの間は半角スペース
Headers Item2
　Name：Content-Type
　Value：application/json
Body type：Raw
Content type：JSON (application/json)
Request content：

{
"inputs": {},
"query": "手相を占ってください",
"response_mode": "blocking",
"conversation_id": "",
"user": "abc-123",
"files": [
{"type": "image",
"transfer_method": "local_file",
"upload_file_id":"aaa"
}
]
}

Parse response：Yes

これから行う工程で実際のデータを取得する必要があるため、「Run once」を選択してMakeを動かします。

「手順2 – ステップ1」にてログインを行ったLINEアカウントに、公式LINEが自動的にお友達追加されているので、「Run once」を選択した後に、適当な画像を1枚公式LINEに送信します。

送信後、画像のようにそれぞれのモデルの上に数字(今回の場合は1)が表示されていれば問題ありません。

ステップ15にて設定を行った「Request content」という項目の10行目を編集します。

「aaa」と入力していた項目を、HTTPから取得した「Data ID」に差し替えます。

HTTPモデルの右側に表示されている「プラスボタン」を選択して、LINEの「Send a Reply Message」を追加します。

以下のように設定を行います。

Reply Token：{{1.events[].replyToken}}
Messages Item1
　Type：Text
　Text：{{4.data.answer}}
Notification Disabled：No

Messages Item1の「{{data.answer}}」という項目がメニューから見つからない場合は、ステップ15と同様に一度Makeを動かしてから、再度設定を行いましょう。

Makeを起動しても「{{data.answer}}」という項目が見つからない場合、何かしらの設定やAPIキーなどを間違えている可能性があります。
一度全ての設定を見直し、間違えている箇所があれば修正を行いましょう。

ここまでの設定が全て完了したら、ステップ15を参考にMakeを動かします。
公式LINEに画像を送信して、正しく占い結果が届いたら構築は成功です。

最後に、画面左下に表示されている公開ボタンを「オン」に変更しましょう。
オンに変更をしたら、全ての構築作業が完了です。

公式LINEを宣伝して、さまざまな人に占いチャットボットを利用していただきましょう。