Dify で LINE ボットを作成しよう

LINE にクーポンを通知してくれる（半）自動投稿 Bot

1-1. ビックカメラのクーポンを定期的に LINE に通知する仕組み

Dify のワークフローを使って、

1. ビックカメラのWebサイトにアクセスしてクーポン情報を取得し、
2. クーポン情報を整理して、
3. LINE に通知を行う

仕組みを作ります。

完成系のフローはこちらです。

---

2. ビックカメラの LINE 連携ボット作成ハンズオン

2-1. 準備: ワークフローアプリ作成まで

• ワークフロー用のアプリを作成します
  • 最初から作成をクリック
  • ワークフローを選択
  • アプリ名には好きな名前を入れてください。私は「クーポンお知らせ LINE 」にしました。

以下のような画面が表示されたら準備完了です。

ワークフローの補足
ノードと呼ばれるブロックを線で繋げて様々な処理を作れます。
一連の処理をまとめたアプリケーションをワークフローと呼びます。
ノードには、LLM を呼び出すノード,プログラムを書くノードなど様々あり、応用がしやすいです。

2-2. Line 通知の仕組みを作る

まずは LINE に投稿する仕組みを作ってみます。

2-2-1. 通知を行うLINEアカウントの準備

最終的には以下を用意します。
- 公式ラインのアカウント
- ユーザーID
- アクセストークン

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 の情報を設定

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リクエストを以下のように設定しましょう

• 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_channel_access_tokenやresultは変数として入力します。"/"を押すと候補が出てきます。
なお、Bearerの後には半角スペースが空くので注意してください。

では、右上の実行ボタンを押してみましょう。
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ノードを線で繋いでください。

設定は以下です。

• モデル：GPT-4o-mini
• SYSTEM：

    ビックカメラのクーポン情報の一覧のテキストが送られてきます。
    - タイトル
    - 画像URL
    - 商品リンクURL
    - 有効期限
    を抽出してリストアップしてください。
    
    ## 出力
    - 出力は最初の2件のクーポンだけ出力してください。
    - マークダウン形式にせず、プレーンなテキストで出力してください。
  

• USER：SCRAPE > {x}teext

USERはメッセージの追加で編集できます

Difyではこのように変数と呼ばれる保存領域に情報を入れて次のノードにデータを流して処理をします。

2-6. LINE へ送信するノードとの接続

最後にこれまでのノードをつなげていきます。LLM ノードの後ろにコードノード、HTTPリクエストと続くようにします。

コードに少し変更を加えます。生成AIがつくったテキストを受け取るようにします。

• 入力変数を追加

  • 変数名：sendCoupon、変数を設定：LLM >{x}text

• 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 に情報が通知されます。

---

5. まとめ

Dify での情報取得（スクレイピング）とLINE 連携を試しました。

Dify のバージョンが古いので UI が異なります。

---