初めてのWebhookを作成しましょう

このガイドでは、空のアプリから、ご自身のシステムが指定したタイミングで実行されるShopify Flowワークフローの作成までをご案内します。所要時間は約10分です。

1. Webhookを作成する

Webhook → Webhookの作成。このページではまず、このWebhookを呼び出す対象を尋ね、それに合わせて設定を行います：

ご回答	内容
自動化ツール（n8n、Make、Zapier、自作のコードなど）	生成されたトークンで、ツールに貼り付ける準備ができています
Webhook（Stripe、GitHubなど）に署名を行うサービス	選択されたサービスの署名検証については、署名付きWebhookの検証をご覧ください。
ブラウザまたはストアフロントのスクリプト	CORSが有効になっています。詳細は CORS、アプリのプロキシURL、およびブラウザからの呼び出しをご覧ください。
特にありません - スケジュールに従って実行してください	タイマーに基づいてURLを取得するWebhookです。その「スケジュール」タブが次に開きます。詳細は定期的なURLポーリングをご覧ください。
その他、または後で決める	認証方法はご自身でお選びください

後でわかるような名前（「ウォレットカードのリマインダー」、「お問い合わせフォーム」など）を付けて、保存してください。設定はすべて後から変更可能です。

これで、ショートコードで終わるWebhookのURL（例：https://.../webhook/ab12cd34）が取得できました。このURLが、お使いのシステムがPOSTリクエストを送信するエンドポイントです。

「このWebhookを何が呼び出すか」と尋ねる「Webhookの作成」ページで、「なし - スケジュールに従って実行」が選択されており、次に「スケジュール」タブが開く旨の注記が表示されています — Webhookの作成は、それを呼び出す対象から始まります。その回答に応じて、適切な認証設定が行われます。「なし - スケジュールに従って実行」を選択すると、次に「スケジュール」タブが表示されます。

Webhookエディタ：左側に名前と認証情報、右側にステータス、Webhook URL、Webhook IDが記載された「エンドポイント」カードがあり、その上には「ライブプレビュー」、「テスト」、「使用状況」が表示されます。 — Webhookエディタです。左側に設定項目があり、右側の「エンドポイント」カードには、送信者に伝えるWebhookのURLと、Shopify Flowで使用するWebhook IDが表示されています。

2. 発信者が本人であることを証明する方法を決定します

Webhook を開き、認証方法を選択してください。詳細な比較については、認証をご覧ください。要約すると、以下の通りです：

静的トークン ― ほとんどの方にとって最適です。「生成」ボタンを押して、トークンをコピーし、 X-Api-Keyヘッダーにそれを記載してください。
HMAC SHA-256 - リクエストに署名を行う送信者向け（Stripe、GitHubなど）。
なし - テスト用のみです。URLを知っている人なら誰でも、このワークフローを実行できます。

3. どの分野に関心があるか教えてください

[詳細設定] で、JSON ペイロードの中から最大 4 つのフィールドをマッピングしてください。システムから次のようなデータが送信される場合：

「詳細設定」タブでは、フィールド1からフィールド4がそれぞれorderId、status、total、noteに割り当てられています — 詳細設定：リクエスト本文から最大4つの値をマッピングします。これらは、Shopify Flow の fieldOne から fieldFour として受け取られます。

json

{ "customer": { "email": "someone@example.com" }, "orderId": "1001" }

fieldOne を orderId に、fieldTwo を customer.email にマッピングします。ネストされたパスにはドットを使用します。詳細はペイロードのマッピングとShopify Flow変数をご覧ください。

4. テストリクエストを送信する

「History」に、リクエストヘッダー、ペイロード、ステータス、所要時間、および識別子を含む1つの呼び出しが開かれました — テストリクエストを実行すると、その呼び出しが「履歴」に、受信したペイロードとともに表示されます。

bash

curl -X POST https://your-app-url/webhook/ab12cd34 \
  -H "Content-Type: application/json" \
  -H "X-Api-Key: your-token" \
  -d '{"orderId":"1001","customer":{"email":"someone@example.com"}}'

「履歴」を開いてください。そのリクエストのステータス、ヘッダー、ペイロードが表示されます。もし表示されない場合は、沿革とトラブルシューティングにすべての拒否理由が記載されています。

5. Shopify Flowワークフローを作成する

Shopify Flow で、「**Webhook Trigger」**トリガーから始まるワークフローを作成してください。

トリガーを追加し、「**イベントの記録」**をクリックしてください。
ここに戻ってきて、「**履歴」**でその呼び出しを開き、「再生」を押してください。Shopify Flowには現在、実際に扱うための実際のペイロードの例です。フィールド名を推測するよりもずっと簡単です。
条件を追加します：Webhook ID が、Webhook の ID（Webhook ページに表示されています）と一致するように設定してください。すべての「Webhook Trigger」ワークフローは、すべてのWebhookからイベントを受信するため、このこの条件があるからこそ、ワークフローはこの1つだけに反応するのです。
{{fieldOne}} を使用して、{{fieldFour}} にアクションを追加してください。
ワークフローを有効にしてください。

「Webhookトリガー」ステップの下にある「＋」マークをクリックすると、「アクション」と「条件」のオプションが表示されました。 — ステップの下にある「＋」記号には、ワークフローを構成する2つの要素、すなわち「条件」と「アクション」が示されています。

Shopify Flowの条件：Webhook IDが、あるWebhookのIDと一致する — すべてのワークフローの最初のステップは、Webhook ID に関する条件です。これにより、この Webhook に対してのみワークフローが実行されます。

Shopify Flowの「Webhookトリガー」用「変数を追加」パネルで、webhookIdおよびfieldOneからfieldFourまでを、最近のリクエストからのサンプル値とともに一覧表示します — トリガーがワークフローに送信する内容：Webhook ID と、マッピングされた 4 つのフィールドです。これらは、最近のリクエストの値とともに表示されています。

Shopify Flowの「内部メールを送信」アクションで、件名にfieldOneとfieldTwoを、本文にfieldThreeとfieldFourを含める — マッピングされたフィールドは、Shopify Flowのアクションで変数が使用される場所であればどこでも使用できます。ここでは、社内メールの件名や本文で使用しています。

完成したワークフロー：Webhookトリガー、Webhook IDに基づく条件、そして「True」分岐で内部メールを送信する — 完成したワークフローは、トリガー、Webhook ID に基づく条件、そして「True」分岐でのアクションという流れになります。

6. 公開する

本番環境のシステムをWebhookのURLに設定してください。「**履歴」**で最初の数件の呼び出しを確認し、正常に受信され、処理が成功していることをご確認ください。

送信者がタイムアウト後に再試行を行う場合は、重複配送防止を有効にして、再試行によってワークフローが2回実行されないようにしてください。

「Webhook」ページには、6つのWebhookが一覧表示されており、それぞれに呼び出し回数、認証情報、および「有効」または「無効」を示すバッジが表示されています。 — 「Webhook」ページです。各行には、Webhookが呼び出された回数、呼び出し元の認証方法、および有効かどうかが表示されます。右側のメニューから、Webhookを有効化、無効化、または削除することができます。