Dify ハンズオン！クーポン情報を定期的に LINE に通知する仕組みをつくってみよう
Dify にはワークフローという仕組みがあり、作業の自動化に特化したアプリケーションです。
ボタンを押したり、定期的に実行したい場合に利用します。
1. この体験会で作るもの「LINE にクーポンを通知してくれる（半）自動投稿 Bot 」
1-1. 「ビックカメラのクーポンを定期的に LINE に通知する仕組み」を作ります。
Dify のワークフローを使って、次の仕組みをつくります。
1. ビックカメラのWebサイトにアクセスしてクーポン情報を取得し、
2. クーポン情報を整理して、
3. LINE に通知を行う
今回は、ボタンを押すことでこれらの処理を実行できるところまでのハンズオンをします！
もちろん、この仕組みを応用して、自動投稿にすることも可能です。
完成系のフローはこちらです。
2. ビックカメラの LINE 連携ボット作成ハンズオン
2-1. 準備: ワークフローアプリ作成まで
Dify のワークフローの準備
- Dify のアカウントがあることを確認します。
- ログイン後の画面に入れることを確認しましょう。
- ログイン後の画面に入れることを確認しましょう。
- ワークフロー用のアプリを作成します
-
最初から作成をクリック -
ワークフローを選択 -
アプリ名には好きな名前を入れてください。私は「クーポンお知らせ LINE 」にしました。
-
以下のような画面が表示されたら準備完了です。
ワークフローの補足
ノードと呼ばれるブロックを線で繋げて様々な処理を作れます。
一連の処理をまとめたアプリケーションをワークフローと呼びます。
ノードには、LLM を呼び出すノード,プログラムを書くノードなど様々あり、応用がしやすいです。
2-2. LINE 通知の仕組みを作る
まずは LINE に投稿する仕組みを作ってみます。
2-2-1. 通知を行うLINEアカウントの準備
最終的には以下を用意します。
- 公式ラインのアカウント
- ユーザーID
- アクセストークン
LINE 公式アカウントの準備
LINE Developersから、コンソール→LINEアカウントでログイン→ログインと進みます。
プロバイダーの作成をし、好きなプロバイダー名を入れ、チャネルは Messaing API を選択します。
LINE 公式アカウントを作成するを選択し、アカウントの作成に必要な情報を入れていきます。
業種や運用目的などには特に決まりはありませんが「個人」で設定してください。
入力情報の確認→申し込み完了と進み、LINE Official Accout Managerに移動します。
移動すると同意を求められるので、特に問題なければ同意へと進んでください。
LINE DevelopersとLINE Official Accout Managerの両方を利用します。
LINE Official Accout Managerから Messaging API の利用を始めます。
設定→Messaging API と進み、Messaging APIを利用するを選択します。
プロバイダーの選択を求められるので、初めに LINE Developers で作成したプロバイダーを選びます。
プライバシーポリシーと利用規約には何も入力しなくて大丈夫です
これでLINE Official Accout Managerは、役目を終えたので閉じてしまって大丈夫です。
続いて、LINE Developers に戻り、先ほど作成したプロバイダーを選択すると、様々設定を行う画面になります。もう一息です。
チャネルの基本設定のタブから、あなたのユーザーID を取得します。下の方にスクロールしていくと見つかります。コピーしておいてください。
Messaging API設定のタブから、チャネルアクセストークン を発行します。これも下の方にスクロールしていくと見つかります。コピーしておいてください。
最後に、ご自身のスマートフォンで LINE を開くと作成したアカウントから挨拶メッセージが送られていることを確認してください。もしアカウントが見つからなければ、Messaging API設定のタブにあるQRコードをスマートフォンで読み込んで、ご自身のLINE で友達追加してください。このアカウントからメッセージが送られてきます。
2-2-2 Dify のノードに LINE の情報を設定
LINE Developers は、役目を終えたので閉じてしまって大丈夫です。Dify のワークフローに戻ります。
LINE アカウントの情報を環境変数として設定します。右上に小さくENVと書かれているアイコンをタップし、＋環境変数を追加を選択します。
以下の2つを設定してください。
-
ユーザーID
- タイプ：Secret
- 名前：to
- 値：コピーしておいた
あなたのユーザーIDの値
-
アクセストークン
- タイプ：Secret
- 名前：line_channel_access_token
- 値：コピーしておいた
チャネルアクセストークンの値
これであなたの LINE アカウントを動かす準備が整いました！
2-3. LINE 投稿のテスト
Dify に慣れるため、 LINE にメッセージを送ってみましょう。
開始のノードから「＋」をタップしコードとHTTPリクエストのノードを選択します。
コードノードの設定
言語を PYTHON3 → JAVASCRIPT に変更。
プッシュメッセージの送り方の詳細はこちらから確認できます。
- 入力変数
- 変数名：
to、変数を設定：(ENV)to
- 変数名：
- JavaScript
function main({to}) { const messageObj = { "to": to, "messages":[ { "type":"text", "text": "Difyのハンズオン中！" } ] }; return {result: JSON.stringify(messageObj)}; }
こんな感じです。
続いてHTTPリクエストを以下のように設定しましょう。
HTTPリクエストノードの設定
- API
- POST
https://api.line.me/v2/bot/message/push
- ヘッダー
- キー：
Authorization、値：Bearer (ENV)line_channel_access_token - キー：
Content-Type、値：application/json
- キー：
- ボディ
- JSON、{x}result
では、右上の実行ボタンを押してみましょう。
LINE にメッセージが送られたら成功です。
2-4. ビックカメラのサイトからデータを取得 - SCRAPEノード
スクレイピングノードを追加（ビックカメラのサイトからデータを取得）します。
2-4-1. Firecrawl の登録
マーケットプレイスから Firecrawl をインストールします。ノードを追加するときにツールタブにするとマーケットプレイスで検索を選ぶとマーケットプレイスに遷移します。
インストール後に Firecrawl を選びサイドバーから認証に進みます。
取得方法からFirecrawlのサインインの画面に遷移するので、任意の方法でアカウントをつくり、アカウントからAPI keyを取得します。
Dify に戻り、FireCrawlの認証画面に API key を入れてください。URLは入れなくてOKです。
2-4-2. SCRAPE ノード作成
改めて、画面の「＋」をクリックしてSCRAPEノードを探して追加しましょう。 Firecrawl のサービス内にあります。
設定は1つだけです。
- URL to scrape:
https://www.biccamera.com/bc/c/service/coupon/index.jsp
このノードでWebサイトの情報を取得できます。
2-5. 取得したデータをLLM ノードを追加
Webサイトの情報は様々なHTML文字列が入っているので文字列から必要な文字を抽出したいです。これを生成AIを使ってコーディングせずに取得します！
SCRAPE ノードの後ろに LLM ノードを追加します。
また、開始ノード、SCRAPEノード、LLMノードを線で繋いでください。
LLM ノードの設定
- モデル：
GPT-4o-mini - SYSTEM：
ビックカメラのクーポン情報の一覧のテキストが送られてきます。 - タイトル - 画像URL - 商品リンクURL - 有効期限 を抽出してリストアップしてください。 ## 出力 - 出力は最初の2件のクーポンだけ出力してください。 - マークダウン形式にせず、プレーンなテキストで出力してください。 - USER：
SCRAPE>{x}text
USERはメッセージの追加で編集できます
Difyではこのように変数と呼ばれる保存領域に情報を入れて次のノードにデータを流して処理をします。
2-6. LINE へ送信するノードとの接続
最後にこれまでのノードをつなげていきます。LLM ノードの後ろにコードノード、HTTPリクエストと続くようにします。
コードノードに少し変更を加えます。生成AIがつくったテキストを受け取るようにします。
コードノードの修正
-
入力変数を追加
- 変数名：sendCoupon、変数を設定：
LLM>{x}text
- 変数名：sendCoupon、変数を設定：
-
JavaScript の変更
function main({to, sendCoupon}) { const messageObj = { "to": to, "messages":[ { "type":"text", "text": sendCoupon } ] }; return {result: JSON.stringify(messageObj)}; }
LLM で生成した内容を sendCoupon という名前の変数にして、LINE で送るメッセージとして扱っています。
最後に、終了のノードをつけましょう。
2-7. テストと実行
最後に右上の実行を押すと処理がスタートし、 LINE に情報が通知されます。
成功すると通知が送られます。
3. Tips: 自動投稿
自動投稿したいですよね。Dify の機能だけでは現状自動投稿できないですが、API アクセスから API 経由でこのワークフローを実行させることができます。
外部サービス利用となり、環境的に利用できない場合もあるので試したい人は隙間時間か宿題で試してみましょう。
- GitHub Actions からの自動実行:
- GAS での自動実行:
- Make から自動実行メモ:
4. チャレンジ課題
早く終わった人は以下を試してみましょう。
- LLMの応答をカスタマイズして、自分に合った通知にしてみよう
- 自分が気になる情報を他のサイト取ってみよう
5. まとめ
ここでは Dify での情報取得（スクレイピング）とLINE 連携を試しました。
ワークフローの利用イメージがなんとくでもイメージできていたらと思います。
Discussion