Go to Qiita Advent Calendar Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@C_HERO(ChiHaRu)

Notion × Dify × n8n × Messaging APIでお問い合わせ用のLINEチャットボットを作成する ~ n8nでワークフローを作成する ~

Last updated at Posted at 2025-11-03

はじめに

【Dify×Notion】ナレッジ検索＋回答生成のチャットフローを作るで、Notion × Difyを使用したお問い合わせ用のチャットフローを作成したのですが、より実用的なものを作ってみたくなり、n8nとLINE Messaging APIを組み合わせて、お問い合わせ用のLINEチャットボットを作成しました。

ものすご〜くザックリしてますが、フローイメージは、以下のような感じ。

スクリーンショット 2025-11-03 14.18.46.png

そして、UIイメージは、以下の通りとなります。

S__4390914.jpg

今回、覚書きも兼ねて、記事を書きました。

長くなるので、

に分割してまして、本記事は前者の方(n8nバート)になります。

利用環境

本記事における利用環境は、以下の通り。

  • n8n: クラウド版

登録後、最初の2週間無料で使えるので、サクッと始めるために今回はクラウド版をチョイスしました。

補足事項

2週間経過すると、実行が不可になることはおろか、作成したワークフローを見ることすらできなくなってしまうようので、ゆっくり取り組みたい方、ゆくゆく実運用化を検討している方は、Docker環境を作成してngrokなどローカル環境を外部公開できるようにするツールを使うのもアリかな、と。

他環境での作業

1. DifyのAPIシークレットキーの取得

使用するDifyのチャットフローより、APIシークレットキーを取得し、控えておきます。
コチラに手順を記載しているので、よければ参考にしてください。

DifyのAPIシークレットキーは、HTTP Request1で使用します。

2. LINE Messaging APIのチャンネルアクセストークンの取得

HTTP RequestとHTTP Request2で使用します。
Notion × Dify × n8n × Messaging APIでお問い合せ用のLINEチャットボットを作成する ~ LINE Messaging APIでLINE公式アカウントからの問い合わせを可能にする ~の内容の実施がこれからかと思いますので、一旦はダミーで入力し、作業を実施した後に正規の値を入力してください。

n8nでの作業

それでは、n8n上で作業をしてきましょう！
今回は、以下のようなワークフローを作成します。

スクリーンショット 2025-10-23 0.36.08.png

(1) サインアップ

まずは、サインアップします。
n8nのトップページにアクセスし、「Get Started」をクリック。

スクリーンショット 2025-11-02 14.28.53.png

必要事項を入力し（①）、「Start free 14-day trial」をクリック（②）。

スクリーンショット 2025-11-02 15.01.12.png

※この後も簡単な質問のようなものが続きます。

(2) ワークフローの作成

まずは、ワークフローを作成します。
画面左の「+」をクリックし（①）、「Workflow」をクリック（②）。
スクリーンショット 2025-11-02 14.19.18.png

すると、以下のような画面に遷移するので、画面左上の赤枠の欄をクリックして、チャットフロー名を入力しておきましょう。
スクリーンショット 2025-11-02 15.24.20.png

(3) 各ノードの作成

続いて、ノードを作成していきましょう。

以下の手順では、

  • 原則、上のスクショの左から、同じ位置に複数のノードがある場合は、上から
  • デフォルト値から変更が必要な部分のみ

記載しています。

Webhookノード

まずはいちばん左端のWebhookノードから作成します。
初期状態では、画面の中央部に「Add first step...」と下に書かれた「+」のみがありますので、それをクリック。

スクリーンショット 2025-11-02 15.34.31.png

すると、以下のような画面右端にノード検索用のウィンドウが出てきます。

スクリーンショット 2025-11-02 15.37.08.png

検索ボックスに「Webhook」と入力すると（①）、候補が出ますので、「Webhook」を選択しましょう（②）。

スクリーンショット 2025-11-02 15.39.41.png

「Webhook」ノードの編集画面が出ますので、以下の通り入力。
入力が完了したら、右上の「×」をクリックしましょう（⑤）。

スクリーンショット 2025-11-02 15.44.51.png

項目 入力値
①HTTP Method POST
②Path inquery
③Respond When Last Node Finishes
④Response Data First Entry JSON

そうすると、Webhookノードが出来上がっています。
次のノード追加のために、右方に突き出た「+」をクリックすると（①）、画面右にノード検索ウィンドウが起動するので、検索ボックスに次のノード名を入力して（②）、検索、追加します。

スクリーンショット 2025-11-02 15.54.28.png

以後は基本的にはこの作業の繰り返しとなります。

なお、作成したWebhookのProduction URLは、で使用します。
編集画面にて、「Production URL」をクリックするとその下に表示されるURL控えておきましょう。

スクリーンショット 2025-11-03 13.28.35.png

Edit Fieldsノード

スクリーンショット 2025-11-02 18.53.44.png

先ほど作成したWebhookノードの次に、Edit Fieldsノードを追加します。
編集画面の「Add Field」を2回クリックし、

スクリーンショット 2025-11-02 18.39.00.png

Fields to Set に2つの欄ができたら、以下の通り入力しましょう。

スクリーンショット 2025-10-23 0.05.49.png

Fields to Set・その0

項目 入力値
name data
T String
= 以下に記載
  • 入力値 
    {{ $json.body.events[0].postback?.data || $json.body.events[0].message.text }}

Fields to Set・その1

項目 入力値
name replyToken
T String
= 以下に記載
  • 入力値 
    {{$json.body.events[0].replyToken}}

Switchノード

続いて、Switchノードを追加します。

今回は、6つの条件分岐を作成します。

先ほど作成hした、Edit Fieldsノードの右にSwitchノードを検索・追加したら、編集画面にて、「Add Routing Rule」を5回クリックして、

スクリーンショット 2025-11-02 18.56.10.png

合計6つのRouting Rules欄を作成し、以下のように入力しましょう。

スクリーンショット 2025-10-23 0.09.33.png

Routing Rules・その0

問い合わせ開始用です。

項目 入力値
value1 {{ $node['Edit Fields'].json['data'] }}
T is equal to
value2 start-inquiry

Routing Rules・その1

項目 入力値
value1 {{ $node['Edit Fields'].json['data'] }}
T is equal to
value2 register-info

Routing Rules・その2

項目 入力値
value1 {{ $node['Edit Fields'].json['data'] }}
T is equal to
value2 order-info

Routing Rules・その3

項目 入力値
value1 {{ $node['Edit Fields'].json['data'] }}
T is equal to
value2 not-found

Routing Rules・その4

項目 入力値
value1 {{ $node['Edit Fields'].json['data'] }}
T is equal to
value2 finish-inquiry

Routing Rules・その5

項目 入力値
value1 true
T is equal to
value2 true

Code in JavaScript

スクリーンショット 2025-11-02 19.30.59.png

Switchノードの1番上（Routing Rules・その0）に、Code in JavaScriptを繋げ、以下のように入力します。

スクリーンショット 2025-11-02 19.32.49.png

項目 入力値
①Mode Run Once for All Items
②Language JavaScript
③JavaScript 以下に記載
入力値
    const options = [
      { label: "登録情報について", data: "register-info" },
      { label: "注文について", data: "order-info" }
    ];
    
    const actions = options.map(opt => ({
      type: "postback",
      label: opt.label,
      data: opt.data,
      displayText: opt.label
    }));
    
    return [
      {
        json: {
          messages: [
            {
              type: "template",
              altText: "サポート内容を選択してください",
              template: {
                type: "buttons",
                text: "サポートセンターです。\nご用件を選択いただくか、ページ下部より入力・送信してください。",
                actions
              }
            }
          ]
        }
      }
    ];

Code in JavaScript1

スクリーンショット 2025-11-02 19.32.17.png

Switchノードの上から2番目（Routing Rules・その1）に、Code in JavaScriptを繋げ、以下のように入力します。

スクリーンショット 2025-11-02 19.39.11.png

項目 入力値
①Mode Run Once for All Items
②Language JavaScript
③JavaScript 以下に記載
入力値

const options = [
  { "label": "ID・パスワードを忘れた", "data": "ID・パスワードを忘れた" },
  { "label": "登録情報を変更したい", "data": "登録情報を変更したい" },
  { "label": "問い合わせたい内容が見つからない", "data": "not-found" },
];

const actions = options.map(opt => ({
  type: "postback",
  label: opt.label,
  data: opt.data,
  displayText: opt.label
}));

return [
  {
    json: {
      messages: [
        {
          type: "template",
          altText: "サポート内容を選択してください",
          template: {
            type: "buttons",
            text: "ご質問内容を選択してください。",
            actions
          }
        }
      ]
    }
  }
];

Code in JavaScript2

スクリーンショット 2025-11-02 19.47.59.png

Switchノードの上から3番目（Routing Rules・その2）に、Code in JavaScriptを繋げ、以下のように入力します。

スクリーンショット 2025-11-02 19.45.06.png

項目 入力値
①Mode Run Once for All Items
②Language JavaScript
③JavaScript 以下に記載
入力値

const options = [
  { "label": "注文をキャンセルしたい", "data": "注文をキャンセルしたい" },
  { "label": "商品の配送状況を確認したい", "data": "商品の配送状況を確認したい" },
  { "label": "返品・返金について知りたい", "data": "返品・返金について知りたい" },
    { "label": "問い合わせたい内容が見つからない", "data": "not-found" },
];

const actions = options.map(opt => ({
  type: "postback",
  label: opt.label,
  data: opt.data,
  displayText: opt.label,
}));

return [
  {
    json: {
      messages: [
        {
          type: "template",
          altText: "サポート内容を選択してください",
          template: {
            type: "buttons",
            text: "ご質問内容を選択してください。",
            actions
          }
        }
      ]
    }
  }
];

Code in JavaScript3

スクリーンショット 2025-11-02 19.50.25.png

Switchノードの上から4番目（Routing Rules・その3）に、Code in JavaScriptを繋げ、以下のように入力します。

スクリーンショット 2025-11-02 19.50.55.png

項目 入力値
①Mode Run Once for All Items
②Language JavaScript
③JavaScript 以下に記載
入力値

const options = [
  { label: "問い合わせを終了する", data: "finish-inquiry" },
];

const actions = options.map(opt => ({
  type: "postback",
  label: opt.label,
  data: opt.data,
  displayText: opt.label
}));

return {
  json: {
    messages: [
      {
        type: "template",
        altText: "メニューを選択してください",
        template: {
          type: "buttons",
          text: "お手数ですが、以下のお問合せ先までご連絡ください。\n\n総合フリーダイヤル: 0120-xx-xxxx\n平日: 9:30-20:00\n土日祝日: 9:30-17:30\n",
          actions
        }
      }
    ]
  }
};

HTTP Request

スクリーンショット 2025-11-02 20.20.23.png

Switchノードの上から5番目（Routing Rules・その4）に、HTTP Requestを繋げ、以下のように入力します。

スクリーンショット 2025-11-02 20.22.38.png
スクリーンショット 2025-11-02 20.22.50.png

項目 入力値
①Method POST
②URL https://api.line.me/v2/bot/message/reply
③Send Headers トグルON
④Specify Headers Using Fields Below
⑤Header Parameters1: Name Authorization
⑥Header Parameters1: Value Bearer {LINE Messaging APIのチャンネルアクセストークン}
⑦Header Parameters2: Name Content-Type
⑧Header Parameters2: Value application/json
⑨Send Body トグルON
⑩Body Content Type JSON
⑪Specify Body Using JSON
⑫JSON 以下に記載
入力値
{
  "replyToken": "{{ $node['Edit Fields'].json['replyToken'] }}",
  "messages": [
    {
      "type": "text",
      "text": "お問い合わせを終了します。\nありがとうございました。"
    }
  ]
}

HTTP Request1

スクリーンショット 2025-11-02 21.19.33.png

Switchノードの一番下（Routing Rules・その5）に、HTTP Requestを繋げ、以下のように入力します。

スクリーンショット 2025-11-02 21.34.15.png
スクリーンショット 2025-11-02 21.34.29.png

項目 入力値
①Method POST
②URL https://api.dify.ai/v1/chat-messages
③Send Headers トグルON
④Specify Headers Using Fields Below
⑤Header Parameters1: Name Authorization
⑥Header Parameters1: Value Bearer {DifyのAPIシークレットキー}
⑦Header Parameters2: Name Content-Type
⑧Header Parameters2: Value application/json
⑨Send Body トグルON
⑩Body Content Type JSON
⑪Specify Body Using JSON
⑫JSON 以下に記載
入力値
{
  "inputs": {},
  "query": "{{ $node['Edit Fields'].json['data'] }}",
  "response_mode": "blocking",
  "conversation_id": "",
  "user": "user-001"
}

Code in JavaScript4

スクリーンショット 2025-11-02 21.49.30.png

HTTP Request1に、Code in JavaScriptを繋げ、以下のように入力します。

項目 入力値
①Mode Run Once for Each Items
②Language JavaScript
③JavaScript 以下に記載

Modeは、他箇所と異なり、Run Once for Each Itemsとなります。

入力値

const answer = $json.answer;

const options = [
  { label: "問い合わせを終了する", data: "finish-inquiry" },
];

const actions = options.map(opt => ({
  type: "postback",
  label: opt.label,
  data: opt.data,
  displayText: opt.label
}));

return {
  json: {
    messages: [
      {
        type: "template",
        altText: "メニューを選択してください",
        template: {
          type: "buttons",
          text: `${answer}\n\n終了する場合は、「問い合わせを終了する」をタップしてください`,
          actions
        }
      }
    ]
  }
};

HTTP Request2

スクリーンショット 2025-11-02 21.57.49.png

一番右端に、Http Requestノードを作成し、以下のように入力します。

スクリーンショット 2025-11-02 20.22.38.png
スクリーンショット 2025-11-02 21.54.05.png

項目 入力値
①Method POST
②URL https://api.line.me/v2/bot/message/reply
③Send Headers トグルON
④Specify Headers Using Fields Below
⑤Header Parameters1: Name Authorization
⑥Header Parameters1: Value Bearer {LINE Messaging APIのチャンネルアクセストークン}
⑦Header Parameters2: Name Content-Type
⑧Header Parameters2: Value application/json
⑨Send Body トグルON
⑩Body Content Type JSON
⑪Specify Body Using JSON
⑫JSON 以下に記載
入力値
{
  "replyToken": "{{ $node['Edit Fields'].json['replyToken'] }}",
  "messages": [
    {
      "type": "template",
      "altText": "{{ $json.messages[0].altText }}",
      "template": {{ JSON.stringify($json.messages[0].template) }}
    }
  ]
}

"template": {{ JSON.stringify($json.messages[0].template) }}のvalueは、""で囲わないでください。

入力が完了したら、

  • Code in JavaScript
  • Code in JavaScript1
  • Code in JavaScript2
  • Code in JavaScript3
  • Code in JavaScript4

と繋げましょう。

(4) 公開

「Save」ボタンをクリックして（①）編集内容を保存したら、「Activate」のトグルをONにすると公開状態になります（②）。

スクリーンショット 2025-11-02 22.15.23.png

エンドポイントのURLを知っていれば誰でも使用できてしまうので、使わない時はトグルをOFFにしておきましょう。

終わりに

今回n8nで作成したワークフローについて、Difyでも頑張れば作れなくはなさそうでしたが、

  • switchによる条件分岐を使いたかったのと、
  • 役割分担

の観点から、LINEからの問い合わせの受付と返答はn8nに持たせました。

実際やってみた感想としては、変数入りのJSONの扱い方が特に難しかったです。

冒頭でも書いた通り続きの作業は、

Notion × Dify × n8n × LINE Messaging APIでお問い合せ用のLINEチャットボットを作成する ~ LINE Messaging APIでLINE公式アカウントからの問い合わせを可能にする ~

にて。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?