🗂

n8nで外部アプリと会話してみよう：Webhook × JSON応答の超入門ハンズオン

に公開
API
JSON
Webhook
n8n
ハンズオン
tech

n8nを使うと、ノーコードで「外部アプリ ⇄ 自動処理」の橋渡しができます。

今回はその第一歩として、Webhookを使ってPOSTされたデータに応答を返すフローを、ハンズオン形式で構築してみましょう。

1. 今回つくるもの

n8nでのワークフローは以下の画像の通りである。

自作のWebアプリやターミナルから userId をPOSTすると、

n8nが「こんにちは、〇〇さん」と返してくれる簡単なAPIを作ります。

完成イメージ：

    $Url = "https://your-n8n-domain.com/webhook-test/from-app"
    $Body = @{
      userId = "guest"
    } | ConvertTo-Json

    Invoke-RestMethod -Uri $Url -Method Post -Body $Body -ContentType "application/json"

レスポンス：

{
  "ok": true,
  "data": {
    "message": "guestさん、こんにちは！"
  }
}

メモ

この記事では例としてドメインを your-n8n-domain.com としています。

実際の環境では自分のサーバー名やVPSのURLを使ってください。

2. Webhookノードの設定

まずは外部アプリからデータを受け取る「入り口」となるノードを作ります。

設定内容

項目 値
HTTP Method POST
Path from-app
Authentication None
Respond Using Respond to Webhook Node

Webhook URL は以下のように表示されます：

https://your-n8n-domain.com/webhook-test/from-app

メモ:

  • “Test URL” はフローを手動でテストする時に使います。
  • “Production URL” は、ワークフローを「有効化」した状態で使う本番用URLです。

3. Make Greetingノードの設定

Webhookで受け取ったJSONの userId を利用して、挨拶メッセージを作ります。

項目 値
Mode Manual Mapping
Field to Set greeting
Value {{ $json.body.userId }}さん、こんにちは！

これで、入力データ { "body": { "userId": "guest" } } に対して、

greeting というキーに "guestさん、こんにちは！" が格納されます。

メモ:

$json は「直前のノードからの入力データ」を表します。

ドット記法 ($json.body.userId) でネストされた値を簡単に取得できます。

4. Respond to Webhookノードの設定

最後に、作成した挨拶メッセージを呼び出し元に返す設定を行います。

項目 値
Respond With JSON
Response Body {{ ({ ok: true, data: { message: $json.greeting } }) }}

この設定により、POSTされたデータをもとに生成したメッセージがJSON形式で返ります。

5. 実際にテストしてみよう

  1. Webhookノードで「Listen for Test Event」をクリック

  2. 別のターミナルで以下のコマンドを実行：

    $Url = "https://your-n8n-domain.com/webhook-test/from-app"
$Body = @{
  userId = "test-user"
} | ConvertTo-Json

Invoke-RestMethod -Uri $Url -Method Post -Body $Body -ContentType "application/json"

  3. n8nが以下のように応答すれば成功です：

    {
  "ok": true,
  "data": {
    "message": "test-userさん、こんにちは！"
  }
}

6. よくあるトラブルと解決法

症状 原因 対策
レスポンスが返らない Webhookの“Respond”設定が誤っている 「Using Respond to Webhook Node」を選択する
undefinedさん と出る JSONパスの指定ミス $json.body.userId を確認
Method Not Allowed が出る HTTPメソッドがPOST以外 -X POST をつけて再送信

7. まとめ：Webhookで広がる自動化の世界

これで、あなたのn8nが外部アプリと直接通信できるAPIサーバになりました。

たった3つのノードで「POSTを受けて動的に応答する」仕組みが作れることがわかります。

この仕組みを応用すれば、

  • Webフォームの自動返信

  • Slack通知の自動化

  • Webアプリからのイベント連携

    など、あらゆる自動化の起点を作ることができます。

n8nの魅力は「理解できる自動化」。

ブラックボックスなコードより、可視化されたワークフローでロジックを共有できる点が初心者にも優しいのです。

Discussion