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

Last updated at 2025-11-04Posted at 2025-11-03

はじめに

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

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

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

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

長くなるので、

に分割してまして、本記事は後者の方(LINE Messaging API)になります。

利用環境

全て個人のアカウントもしくは、それに紐づける形にしました。

他環境での作業

1. n8nのWebhook URLの取得

n8nにて、Webhook URLを取得します。
このWebhook URLは、Messaging APIの設定で使います。

取得方法については、Notion × Dify × n8n × Messaging APIでお問い合せ用のLINEチャットボットを作成する ~ n8nでワークフローを作成する ~ の(3) 各ノードの作成 - Webhookノードを参考にしてください。

LINE Developers / LINE Official Account Managerでの作業

LINE Developers / LINE Official Account Managerにて、

LINE公式アカウントの作成
リッチメニューの作成
LINE Messaging APIの設定

を行っていきます。

LINE Developersログイン

まずは、LINE Developersにログインします。

https://developers.line.biz/ja/
にアクセスし、「コンソールにログイン」をクリック。

ログイン方法を選択し、ログインします。

ログイン方法は、

LINEアカウント
ビジネスアカウント
Yahoo! JAPAN ID

の3つ。

お好みの方法でOK。
自分は、LINEアカウントにしました。

プロバイダーの作成

ログインしたら、以下のような画面になりますので、「新規プロバイダーを作成」をクリック。

「プロバイダー名」を入力し（①）、「作成」をクリック（②）。

LINE Messaging APIの開始

作成したプロバイダーにて（①）、LINE Messaging APIをクリック（②）。

Messaging APIチャネルの作成画面に移動するので、「LINEアカウントを作成する」をクリック。

以下の通り、必要事項を入力し、「確認」をクリック（⑦）

項目	入力値
①アカウント名	任意のアカウント名を入力
②メールアドレス	メールアドレスを入力
③業種(大項目）	プルダウンから近いものを選択
④業種(小項目）	プルダウンから近いものを選択
⑤運用目的	運用目的にチェック
⑥主な使い方	主な使い方を選択

内容を確認し、「完了」をクリック。

この時点で作成した公式アカウントから自身のLINEにメッセージが来ます。

LINE公式アカウントが作成されるので、「LINE Official Account Managerへ」をクリックして次に進みましょう。

Messaging APIチャネルの作成

続いて、Messaging APIチャネルの作成を行います。
ここからは暫くLINE Official Account Managerでの作業となります。

「情報利用に関する同意について」が出るので、内容を確認し「同意」をクリック。

「LINEヤフーグループへの情報提供に関する個別規約への同意について」が出るので、内容を確認し「同意」をクリック。

すると、以下のような画面に遷移するので、右端の「設定」をクリック。

左メニューの「Messaging API」を選択し（①）、「Messaging APIを利用する」をクリック（②）。

「プロバイダーを選択」モーダルが出るので、作成したプロバイダ名を選択し（①）、「同意する」をクリック（②）。

「プライバシーポリシーと利用規約」が出ます。
こちらは、任意項目のため、入力できる場合のみ入力し、「OK」をクリック。

確認画面が出るので、内容を確認の上、「OK」をクリック。

Messaging APIの設定

WebhookURLを設定します。
左メニューの「Messaging API」をクリックし（①）、Webhook URLにn8nのURLを入力し（②）、「保存」をクリック（③）。

応答設定

続いて、応答設定です。
左メニューの「応答設定」をクリックし（①）、以下の通り設定します。

項目	入力値
②挨拶メッセージ	トグルOFF
③Webhook	トグルON
④応答メッセージ	トグルOFF

チャネルアクセストークンの有効化

LINE Developersに戻り、チャネルアクセストークンを有効化します。
プロバイダをクリックし（①）、Messaging API設定タブをクリック（②）。

Webhook設定が以下の通りとなっていることを確認。

項目	入力値
③Webhook URL	n8nのURL（Messaging APIの設定で設定したものと同じ）
④Webhookの利用	トグルON

画面を最下部までスクロールし、チャネルアクセストークンの「発行」ボタンをクリック。

チャネルアクセストークンが発行されるので、コピーします。

リッチメニュー登録

リッチメニュー登録を実施します。
通常のリッチメニュー登録は、LINE Official Account Managerよりできますが、今回使用するpostbackは無理っぽかったので、curlで登録しました。

{}で囲われた内容については、自身の環境のもので置き換えて実行してください。

リッチメニュー登録

まずは、リッチメニュー登録から。

実行コマンド

curl -v -X POST https://api.line.me/v2/bot/richmenu \
-H 'Authorization: Bearer {チャンネルアクセストークン}' \
-H 'Content-Type: application/json' \
-d '{
  "size": { "width": 2500, "height": 843 },
  "selected": true,
  "name": "menu-with-postback",
  "chatBarText": "メニュー",
  "areas": [
    {
      "bounds": { "x": 0, "y": 0, "width": 833, "height": 843 },
      "action": { "type": "message", "text": "商品を探す" }
    },
    {
      "bounds": { "x": 834, "y": 0, "width": 833, "height": 843 },
      "action": { "type": "message", "text": "注文履歴" }
    },
    {
      "bounds": { "x": 1667, "y": 0, "width": 833, "height": 843 },
      "action": {
        "type": "postback",
        "data": "start-inquiry",
        "displayText": "サポートに問い合わせる"
      }
    }
  ]
}'

以下のように、ステータス200と、最終行に、richMenuIdがJSON形式で返ってきてればOK!

実行結果サンプル

#　...（省略）...
* upload completely sent off: 660 bytes
< HTTP/2 200 
< x-xss-protection: 1; mode=block
< x-line-request-id: 1234abcd-5ef6-7gh8-i9j0-1l23mn456789
< x-frame-options: DENY
< x-content-type-options: nosniff
< pragma: no-cache
< expires: 0
< date: Mon, 28 Sep 2025 17:43:12 GMT
< content-type: application/json
< content-length: 58
< cache-control: no-cache, no-store, max-age=0, must-revalidate
< server: legy
< 
* Connection #0 to host api.line.me left intact
{"richMenuId":"richmenu-123456a78b9012c5de345f78gh9i0123"}%

表示されたrichMenuIdは後で使うので控えておきましょう。

登録結果確認

念の為、正しく登録できたか確認しておきます。

実行コマンド

curl -v -X GET https://api.line.me/v2/bot/richmenu/list \
-H 'Authorization: Bearer {チャンネルアクセストークン}'

以下のようにステータス200と、登録したリッチメニューの情報が返ってこればOK!

実行結果サンプル

* Request completely sent off
< HTTP/2 200 
< x-xss-protection: 1; mode=block
< x-line-request-id: 1234abcd-5ef6-7gh8-i9j0-1l23mn456789
< x-frame-options: DENY
< x-content-type-options: nosniff
< pragma: no-cache
< expires: 0
< date: Mon, 28 Sep 2025 17:45:34 GMT
< content-type: application/json
< content-length: 552
< cache-control: no-cache, no-store, max-age=0, must-revalidate
< server: legy
< 
* Connection #0 to host api.line.me left intact
{"richmenus":[{"richMenuId":"richmenu-123456a78b9012c5de345f78gh9i0123","name":"menu-with-postback","size":{"width":2500,"height":843},"chatBarText":"メニュー","selected":true,"areas":[{"bounds":{"x":0,"y":0,"width":833,"height":843},"action":{"type":"message","text":"商品を探す"}},{"bounds":{"x":834,"y":0,"width":833,"height":843},"action":{"type":"message","text":"注文履歴"}},{"bounds":{"x":1667,"y":0,"width":833,"height":843},"action":{"type":"postback","data":"start-inquiry","displayText":"サポートに問い合わせる"}}]}]}%

画像登録

続いて、画像登録です。
以下のコマンドを実行して、リッチメニューの画像登録をしましょう。

配色や文字サイズがガタガタですみませんが、以下に今回使った画像サンプルを貼っておきます。

実行コマンド

curl -v -X POST https://api-data.line.me/v2/bot/richmenu/{richMenuId}/content \
-H 'Authorization: Bearer {チャンネルアクセストークン}' \
-H 'Content-Type: image/png' \
-T {画像ファイル名}

以下のようにステータス200と、最終行が空のJSON形式で返ってこればOK!

実行結果サンプル

* upload completely sent off: 25705 bytes
< HTTP/2 200 
< server: openresty
< date: Mon, 28 Sep 2025 17:47:05 GMT
< content-type: application/json
< content-length: 2
< x-line-request-id: 1234abcd-5ef6-7gh8-i9j0-1l23mn456789
< x-content-type-options: nosniff
< x-xss-protection: 1; mode=block
< cache-control: no-cache, no-store, max-age=0, must-revalidate
< pragma: no-cache
< expires: 0
< x-frame-options: DENY
< 
* Connection #0 to host api-data.line.me left intact
{}%

ユーザーへのリッチメニュー割り当て

ユーザーへのリッチメニューの割り当てを行います。
忘れがちですが、これをしないとLINEに表示されませんので、忘れず実行しましょう。
以下は全てのユーザーにリッチメニューを割り当てるコマンドです。

実行コマンド

curl -v -X POST https://api.line.me/v2/bot/user/all/richmenu/{richMenuId} \
  -H 'Authorization: Bearer {チャネルアクセストークン}'

以下のようにステータス200と、最終行が空のJSON形式で返ってこればOK!

実行結果サンプル

* Request completely sent off
< HTTP/2 200 
< x-xss-protection: 1; mode=block
< x-line-request-id: 1234abcd-5ef6-7gh8-i9j0-1l23mn456789
< x-frame-options: DENY
< x-content-type-options: nosniff
< pragma: no-cache
< expires: 0
< date: Mon, 28 Sep 2025 17:50:21 GMT
< content-type: application/json
< content-length: 2
< cache-control: no-cache, no-store, max-age=0, must-revalidate
< server: legy
< 
* Connection #0 to host api.line.me left intact
{}%

ここまで完了すると、LINE公式アカウントにリッチメニューが表示されるようになります。

動作確認

作成したLINE公式アカウントより、「お問い合わせはこちら」をクリックして動作確認をスタートさせます。

チャットボットからの返答や、自由入力の結果、想定の結果が返ってこれば成功です！

終わりに

手順の中で、難しかったのはリッチメニューの準備。
LINE DevelopersやLINE Official Account Managerに触るのが初めてだったこともあり、postbackの設定が画面からでは無理そうなことに気づくのに、かなり時間がかかりました。

応答内容によっては、最後LINEに返答を返すところ（n8nで言うところのHttp Request2）で失敗するケースがあったので、解明が必要（文字数制限は大丈そうなんだけどな、、

あと、もし実運用に移すなら、以下も考慮に入れる必要がありそうです。

選択肢を選んでもらって回答を返す分については、Google SheetsやNotion Databaseなどに質問と回答を表形式で準備して検索させる→対応する回答を返す、でも良いかも（Difyによる検索が地味に時間かかるし、クレジット消費するの勿体無い
ユーザーが誤って入力した時に返答を返すのはコスト面を考えるとよろしくないので、
- お問い合せモード中かどうかのステータスを保持させて、フラグがONの場合のみ問い合わせできるようにする
- 問い合わせ専用のLINE公式アカウントを別途作成する

　等の対策をする

勢いで作ってしまった感は否めないので、スタンダードな作り方をちゃんと確認して適用できるようにしていきたいです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up