Shopifyウェブフックを使いこなす：ストアオーナーのための完全ガイド

ShopifyのWebhookは、外部アプリケーションとの統合を構築し、Shopifyストアで発生したイベントにリアルタイムで応答するのに役立つ重要なツールです。Webhook サブスクリプションは、Shopify の管理インターフェイスと API を通して Webhook を管理、作成する上で重要な役割を果たします。Shopify ウェブフックは、ストアで発生した特定のイベントに関連するイベントデータを送信します。Shopify の管理者ダッシュボードから Webhook を作成・管理するのは便利ですが、このインターフェースでは Webhook 関連のタスクを自動化することはできません。

この問題を解決するために、Shopify は Webhook API を公開し、ユーザーがプログラムを通して Shopify の Webhook とやり取りできるようにし、それによって機能の幅を広げました。このガイドでは、Shopify API を使用して認証を設定する方法を学び、Shopify webhook API を使用してより自動的かつ効率的に webhook を作成、管理、追跡します。Shopify ストアとの統合を最適化するために、この方法について探求を始めましょう！

Shopifyウェブフックを使いこなす：ストアオーナーのための完全ガイド

Shopifyウェブフックとは？

Shopifyウェブフックとは？

Shopifyウェブフックの定義と目的:どのようにWebhooks の仕組み?

Shopify Webhooks は、Shopify ストアでイベントが発生したときに、Web サイトが他のシステムに通知できる機能です。Webhookサブスクリプションは、アプリをShopifyのデータと同期させ、特定のイベントに関するほぼリアルタイムのデータを受信する上で重要な役割を果たします。ShopifyのWebhooksの例として、新しい注文を作成すると、顧客情報が自動的にCRMシステムに送信され、データを更新することができます。特に、ウェブフックにはこのデータを後で使用するために保存する機能もあります。

Shopify Webhookリソースの想定される使用例

1.商品価格の調整プロモーションや入力価格の変更などのイベントに基づいて、商品価格を自動的に更新します。

2.オーダーを作成する：新しい注文情報を管理システムや会計システムに自動的に更新します。

3.会計ソフトとの統合：注文と支払いのデータを会計ソフトと同期します。

4.顧客への通知：注文状況や商品情報をテキストやインスタントメッセージで顧客に通知。

5.データ収集：データをストレージシステムやデータウェアハウスに自動的にインポートします。

6.データを削除：ストアからアプリをアンインストールすると、顧客データが自動的に削除されます。

7.荷主への通知：荷主に新たな注文に関する通知を送り、納期に間に合うように商品を準備・配送する。

Shopifyウェブフックの作成方法

Shopifyウェブフックの作成方法

Shopify管理画面からShopify Webhookを作成するステップバイステップガイド

1.通知へのアクセスにアクセスする

Shopifyの管理画面にアクセスします。左のメニューから"設定"を選択し、"通知"をクリックします。

2.Webhooksセクションへの移動

このステップでは、ページを下にスクロールして「Webhooks」セクションを見つける。

3.新しいWebhookの作成

Webhooks"セクションを見つけたら、"Create webhooks"というボタンが表示されます。そのボタンをクリックすると、新しいダイアログボックスが表示されます。

スマート・サブスクリプションで収益を拡大

柔軟なプランとスマートな加入者管理ツールで、継続的な収益を構築。

無料で始める

4.イベントとフォーマットの選択

最初のドロップダウンメニューで、以下のshopify webhooksリストからイベントを選択する必要があります：

• ショッピングカートを作成します：新しいショッピングカートが作成されるたびにWebhookを送信します。
• カートを更新します：カートに変更があるたびにWebhookを送信します。
• 支払いを作成する：新しい支払いが作成されたときにWebhookを送信します。
• 支払いをクリアする：支払いがクリアされたときにWebhookを送信します。
• 支払い情報の更新：支払い情報が更新されたときにWebhookを送信します。
• コレクションを作成する：新しいコレクションが作成されたときにWebhookを送信します。
• コレクションを削除する：コレクションが削除されたときにWebhookを送信します。
• コレクションの更新：コレクション情報が更新されたときにWebhookを送信します。
• また、Shopifyストアの注文、顧客、商品、店舗、テーマ、その他のアクティビティの作成、削除、更新など、その他多くのイベントがあります。

5.URLの入力とWebhookの追加

URLセクションには、データを保存するURLアドレスを入力できます。ただし、Webhookは以下のURLを返すことができないことを覚えておきましょう：

• "internal"で終わるURL（例：thisshop.com/i Internal）。
• ローカルサーバー。
• Shopifyのドメイン名（例：shopify.comやmyshopify.com）。
•  www.example.com。

6.オプション：ウェブフックのテスト

送信したい情報が正しいURLに送られることを確認するには、「テストメッセージを送信」リンクをクリックしてウェブフックをテストできます。これにより、入力したURLが正しく機能していることを確認できます。

Shopify APIを使用してShopify Webhooksを作成する代替方法

Shopify APIを使用してShopify Webhooksを作成する代替方法

ShopifyストアAPIのセットアップ

To create webhooks on Shopify using the API, you need to access the webhook API endpoint at https://{shop}.myshopify.com/admin/{version}/webhooks.json (remember to replace the values in {} equal to your worth).

これを行うには、必要なデータをこのエンドポイントにPOSTリクエストを送信する必要があります。任意のHTTPクライアント（Postman、Curlなど）を使用できます。このチュートリアルでは、使いやすく便利なReqBinを使用します。

このチュートリアルで作成するWebhookの場合、"Create Order "イベントのような注文関連のイベントをサブスクライブする必要があります。このイベントは、あなたのストアで新しい注文が作成されたときにトリガーされます。

ウェブフック・リクエストで送信されるデータは、以下の構造でなければなりません：

{

  "webhook": {

    "topic"："orders/create"、

    "address": "{webhook_url}",

    "フォーマット"："json"

  }

}

前のコードでは webhook は json 形式になっているので、{webhook_url} を Hookdeck CLI セッションで作成した webhook URL に置き換えるのを忘れないでください。

ブラウザを開き、https://reqbin.com。API URL をアドレスフィールドに貼り付け、リクエストメソッドを POST に選択する。認証のために、以下のようにヘッダーセクションにX-Shopify-Access-Tokenフィールドを追加します（MY_ACCESS_TOKENをShopifyアプリのパスワードに置き換えてください）：

これで、ヘッダーの情報がIngredientsセクションの詳細にマッピングされます。次にコンテンツセクションに行き、リクエストオブジェクトをペーストします。下のスクリーンショットの例で、リクエストの設定方法を見ることができます：

Sendボタンをクリックして、新しいWebhookを生成します。完了すると、以下のように成功した応答が返ってくるはずです：

これは、Shopifyストアの注文やテーマ作成などのイベントに対するウェブフックの作成に成功したことを示しています。

さらに、APIを通じて、更新、検索、削除などの他のWebhookアクションを実行することもできます。これらの操作の詳細については、Shopify webhook API ドキュメントを参照してください。

スマート・サブスクリプションで収益を拡大

柔軟なプランとスマートな加入者管理ツールで、継続的な収益を構築。

30％オフ

ウェブフックをテストする

さて、ローカルのWebhooksのキャプチャと受信APIを設定し、API経由でWebhooksを登録したら、いよいよ設定をテストしてみましょう。

登録されたイベントのWebhookを受信するには、新しい注文を作成することでイベントをトリガーします。これはShopifyの管理画面で簡単にできます。Ben Simmons 76er ジャージを注文した例です：

注文を作成した後、Shopify は注文/作成イベントのウェブフックを発行します。

このメッセージは Hookdeck CLI セッションで以下のように表示されます：

ログと ウェブフックインフォメーション

webhook のログや情報を調べるには、Hookdeck CLI を使ってイベントページへの URL を提供し、そこで webhook のデータを分析することができます。この URL は webhook を作成した時に CLI 出力に表示されます。この URL をコピーしてブラウザで開くと、ヘッダセクションのウェブフックタイトルを含むイベントページのウェブフックの詳細が表示されます。

ウェブフックのペイロードの内容を見ることもできます。

最後に、ローカルAPIがウェブフックのペイロードを記録していることを確認する。ブラウザで、ローカルAPIの/fetch-webhooks-logsエンドポイントにアクセスすると、以下のような画面が表示されるはずです（最初のオブジェクトはスキップしてください）：

すでにウェブフックID、注文の総アイテム数、ウェブフックが送信された時間を記録することができます。

あなたの Shopifyのウェブフック

ShopifyからのWebhookを検証することは、このソースから受信したデータの完全性を保証するための重要なステップです。Shopify が webhook を送信するとき、それはまた、webhook ペイロードの暗号化されたバージョンを含む X-Shopify-Hmac-Sha256 ヘッダを含みます。これは公開鍵と HMAC 暗号化アルゴリズムを使用して行われます。

あなたのシステムでウェブフックを検証するには、同じ公開鍵とHMACアルゴリズムを使ってウェブフックのペイロードの暗号化されたバージョンを再計算する必要があります。そして、その結果を X-Shopify-Hmac-Sha256 ヘッダーで送信された値と比較する。もしそれらが一致すれば、これはペイロードが有効であり、Shopifyから来たことを意味する。しかし、一致しない場合は、データの改ざんや変更があるかもしれないので、この状況に適切に対処する必要がある。

あなたのコードでは、この検証は通常、server.jsファイルにあるvalidPayloadのようなミドルウェア関数を通して行われます。

const sigHeaderName = 'x-shopify-hmac-sha256'；

const sigHashAlg = 'sha256'；

const secret = "xx-xx-x"；

.....

/* 関数validatePayload(req, res, next) {

    if(req.method == "POST"){.

        もし(!req.rawBody) {なら

            return next('Request body empty')

        }

        const body = req.rawBody；

        const hmacHeader = req.get(sigHeaderName)；

        //Create a hash based on the parsed body

        const hash = crypto

            .createHmac(sigHashAlg, secret)

            .update(body, "utf8", "hex")

            .digest("base64")；

        // Compare the created hash with the value of the X-Shopify-Hmac-Sha256 Header

        if (hash !== hmacHeader) {.

            return next(`Request body digest (${hash}) did not match ${sigHeaderName} (${hmacHeader})`)

        }

    }

    return next()

}

app.use(validatePayload);*/。

Shopify APIでの認証

ShopifyのAPIを使用する際に、プライベートアプリの認証情報を使って認証できる3つの方法をご紹介します：

1) ユーザー 名とパスワードの組み合わせ

アプリがベーシック認証をサポートしている場合、リクエストURLに直接認証情報を渡すことができます。これは、URLの先頭にユーザー名とパスワードを追加することで行います。例えば

    https://{username}:{password}@{shop}.myshopify.com/admin/api/{version}/webhooks.json

    その中にいる：

    - {username}:  is your API key.

    -  {password}:  is your private app's password.

    -  {shop}: is the subdomain of your Shopify store, for example,  myshop.

    -  {version}:  is the API version you are using, e.g.  2021-10 .

この URL を使用して Shopify API に送信されたリクエストは、自動的に認証されます。

2) 認証トークンを使用する

    クライアントがベーシック認証をサポートしていない場合は、認証トークンを使用できます。トークンは、ストアアプリのAPIキーとパスワードを組み合わせて生成され、生成された文字列をbase64でエンコードします。このトークンは、リクエストの "Authorization "ヘッダーで送信される。例えば

認証ベーシック NDQ3OGViN2FjMTM4YTEzNjg1MmJhYmQ4NjE5NTZjMTk6M2U1YTZlZGVjNzFlYWIwMzk0MjJjNjQ0NGQwMjY1OWQ=

3) "X-Shopify-Access-Token "ヘッダーを使用する。

最後の方法は、プライベートアプリのパスワードと共に "X-Shopify-Access-Token "ヘッダーを使用することです。このパスワードはリクエストのヘッダーで送信されます。例えば

    X-Shopify-Access-Token: {my_app_password}

これら3つの方法で、アプリを認証し、Shopifyから安全かつ効率的にWebhookを送受信することができます。

Shopify APIを使用したShopify Webhooksの設定と受信

Shopify APIを使用してWebhookを作成し、Webhookロギングを設定する前に、以下の手順を実行する必要があります：

Webhook サブスクリプションを設定するには、Webhook を受信するエンドポイントを定義し、イベントメッセージのトピックを指定します。

1. デモAPIコードをコピーし、あなたのマシン上でローカルに実行する。
2. Hookdeck CLI を使ってローカルの API エンドポイントを指す webhook URL を作成してください。
3. Shopify APIを使用してWebhookを作成します。
4. サブスクリプションイベントを発行して、Webhookをテストしてください。
5. ウェブフックのログを確認し、ウェブフックが機能したことを確認してください。
6. ウェブフックのペイロードを確認します。

Shopify API を使用して Webhook サブスクリプションを作成、有効化、および変更することは、アプリを Shopify のデータと同期させるために非常に重要です。webhook サブスクリプションを作成するには、HTTPS リクエストを受け取るエンドポイントを定義し、SSL 設定が正しく設定されていることを確認する必要があります。webhook ペイロードを適切に処理することは、特定のイベントに関するほぼリアルタイムのデータを処理するために不可欠です。Webhook サブスクリプションは、Shopify の管理インターフェイスまたは API から確認、作成、変更できます。

これらのステップを踏めば、Webhookを効果的に作成し、テストする準備が整います。それでは始めましょう！

デモAPIをクローンするには、以下の手順を実行する：

1ターミナルを開き、以下のコマンドを実行してAPI用のアプリケーション・リポジトリーをクローンする：

git clone -single-branch -branch shopify-webhooks

コマンドでプロジェクトのルート・ディレクトリに移動する：

cd nodejs-webhook-server-example

1. 以下のコマンドを使用して、必要な依存関係をインストールする：

npmインストール

1. インストールが完了したら、Node.jsサーバーをコマンドで起動できる：

npmスタート

1. これでAPIクライアントが起動し、APIが現在実行中で、ポート1337で接続を待ち受け中であることを示すメッセージが画面に表示される。

このアプリケーションには2つのエンドポイントがある：

• /log-shopify-webhook : このエンドポイントはShopifyからwebhookを受け取り、インメモリデータベースに保存します。ウェブフックのペイロードから情報のサブセットを含む単純なオブジェクトをキャプチャします。
• /fetch-webhooks-logs : このエンドポイントは、ログに記録されたウェブフック・データのセットを取得するために呼び出すことができます。

Hookdeck CLI を使って webhook URL を作成するには、以下のステップを実行してください：

1. ターミナルを開き、以下のコマンドを実行する（注：サンプル・プロジェクトを使用していない場合は、ポートの値1337をAPIが実行されているポート番号に置き換えてください）：

フックデッキ・リスナー 1337

       2.このコマンドは対話型セッションを開始し、CLI が Webhook URL を作成したいエンドポイントに関する情報を尋ねてきます。以下は、質問とそれに対する回答です。各回答の後に必ず Enter キーを押してください。

必要な情報が利用可能になると、CLI は Webhook URL を生成するプロセスを開始します。処理が完了すると、画面に URL が表示され、CLI はリクエストを受信する準備ができたことを通知します。

注：CLIをゲストモードで使用している場合、ダッシュボードにアクセスするには、コンソールからゲストログインURLリンクを使用する必要があります。これをコピーしてブラウザに貼り付けると、ゲストログインセッションが開始されます。

Shopifyウェブフックの使い方

Shopifyのウェブフックを設定するには？

ShopifyでWebhookを設定するには2つの方法がある。1つ目はAPIを利用する方法、2つ目はShopifyの管理画面を利用する方法です。

API を使用したい場合は、HTTP POST リクエストを作成し、Shopify REST Admin API の Webhook リソースに送信する必要があります。

Shopifyの管理インターフェイスから設定したい場合は、以下の3つのステップに従ってください：

ステップ1：管理画面で「設定」を選択し、「通知」に進みます。

ステップ 2: Webhooks を見つけて選択し、Create webhook をクリックします。

ステップ3：聴きたいフォーマットを選択します。JSONでもXMLでもかまいません。

Webhookを作成したら、その整合性を確認する必要があります。その方法については、ShopifyでWebhookをテストする方法をお読みください。

ShopifyでWebhookをテストするには？

Beeceptorのようなパブリックなサービスを使うこともできるし、ローカルでサーバーを動かすこともできる。ローカルでサーバーを実行する場合は、ngrokやPagekiteのようなサービスを使用して公開されていることを確認してください。以下はウェブフックのエンドポイントとしてサポートされていないURLです：

• "internal "で終わるすべてのURL（例：thisshop.com/internal）
• ローカルサーバー
• Shopifyのドメイン（例：shopify.comやmyshopify.comなど）
• www.example.com のような偽ドメイン

Shopifyの管理画面でWebhookをテストするには、以下のようにします：

ステップ1: NotificationsセクションでWebhooksセクションを見つけます。

ステップ2：テストしたいWebhookの横にあるSend test notificationボタンをクリックします。

その後、設定されたウェブフックURLにサンプルのウェブフックが送信されます。

ShopifyでWebhookエンドポイントを作成するには？

Shopifyでウェブフックエンドポイントを作成するには、エンドポイントが有効なSSL証明書を持つHTTPSウェブフックアドレスであることを確認する必要があります。これは、エンドポイントがShopifyからのイベント通知を正しく受信し、処理できることを保証します。さらに、Webhook リクエストが Shopify からのものだけで、改ざんされていないことを確認するための検証も実装する必要があります。

2. 安全で信頼性の高いWebhookのベストプラクティス

安全で信頼性の高いWebhookのベストプラクティス

安全なURLエンドポイントとデータ暗号化の重要性を強調。

アプリが一時的に利用できなくなり、ウェブフックが失われた場合、URLエンドポイントを保護し、復元時にデータを暗号化することが重要です。アプリが復活したときに情報を修正し保護するには、以下の手順に従ってください：

1.URLエンドポイントのセキュリティを確認する：エンドポイントがHTTPSプロトコルを使用し、有効なSSL証明書を持っていることを確認し、データ交換をセキュリティの脅威から保護する。

2.リストア時にデータを暗号化する：ウェブフック・ハンドルにデータを統合する前に、不正な開示やアクセスを防ぐために、データが完全に暗号化されていることを確認してください。

3.ウェブフックの再登録エンドポイントのテストと検証の後、必要なウェブフックを再登録し、それらが確立された安全基準に準拠していることを確認します。

これらの手順を適用することで、アプリケーションがオンラインに戻ったときに、情報とデータが安全かつ効果的に保護されるようになります。

ユニーク：エラーの処理とウェブフックの配信を確実にするためのヒントを提供します。

Shopifyは効果的な重複排除メカニズムを適用し、多くのアクティビティによる重複や過負荷を防ぎます。このメカニズムにより、最新の情報を含むウェブフックが10秒ごとに1つだけ発行されるようになります。

例えるなら新しい商品を作成し、10秒以内に継続的に更新する場合、2つのウェブフックだけが生成されます。最初のWebhookは商品作成イベントを記録し、2番目のWebhookはその期間後の最終更新を提供します。Webhook イベントを効果的に管理し、正確な配信を保証するには、エラー処理と品質管理戦略を Webhook 処理に組み込む必要があります。これには、エラーを迅速に認識し回復するための対策や、重複したり無視されたりしたウェブフック・イベントに対処するための一時的な状態の保存などが含まれます。このアプローチは、処理効率の最適化に役立つだけでなく、データが正確かつ確実に配信されることを保証し、Shopify webhook システムのサービス性を向上させます。

スケーリングとトラブルシューティング

大量のWebhookの潜在的な課題（スケーリング、エラー処理）について説明します。

アプリケーションがウェブフックを処理するのに3秒必要だとします。しかし、同時に3つのウェブフックを受信した場合、所要時間は9秒となり、タイムアウトが切れる前に2つ目のウェブフックを完了することはできません。

例えば、花を販売するShopifyストアがあり、1日平均10件の注文を処理しているとします。顧客からの注文があったときに、配送サービスを開始するようにウェブフックを設定しました。配送サービスは1日の平均注文数を簡単に処理しますが、バレンタインデーが近づくと、注文数は1日300件に増えます。

デリバリーサービスで毎日300件のWebhookを受信し始めると、アプリケーションのサーバーリソースはすぐに消費され、サービスエラーによってWebhookがドロップされるようになります。Webhookがドロップされ始めると、注文して支払いを済ませた多くの顧客が注文を受け取れなくなります。

では、このような避けられない状況を最小限に抑えるにはどうすればいいのだろうか。標準的な解決策の1つは、サーバーのハードウェア機能を拡張して処理速度を上げることです。また、Webhookジョブを分散させるために水平スケーリング技術を使用することもできます。

しかし、Shopifyで素早く応答する最善の方法は、非同期でwebhookを処理することです。このアプローチでは、Shopifyはレスポンスを受け取る前に、あなたのアプリがwebhookの処理を終えるまで待つ必要がありません。

ShopifyのWebhookに 非同期処理を実装する方法の1つは、Shopifyとあなたのアプリの間にメッセージブローカーを使うことです。この仲介者はShopifyからwebhookを受信し、すぐにShopifyにレスポンスを送り返します。そしてブローカーは、あなたのアプリケーションが処理できる速度でウェブフックをあなたのアプリケーションにルーティングします。

こうすることで、Shopifyのウェブフックがタイムアウトすることはなく、アプリがサーバーリソースを使い果たすこともありません。

• Webhookの一般的な問題のトラブルシューティングのためのリソースを提供しています。

あなたのアプリがShopify webhooksを使用している場合、失敗したwebhook配信通知を監視し、処理することが重要です。Shopifyは、19回連続して再送信に失敗した場合、Webhookを削除します。Webhook 配信メトリクスレポートを使用して、配信エラーのトラブルシューティングを行い、パフォーマンスを向上させることができます。アプリのユーザーに影響を与えないように、失敗した Webhook 配信通知を監視して処理するようにしてください。

ウェブフックで配送状況を確認する

• ウェブフック配信の失敗通知

Webhookが13回連続で配信に失敗した場合、Shopifyはメールで通知します。問題が解決されるか、ウェブフックが削除されるまで、通知は毎日送信されます。パートナーダッシュボードのアプリの通知はアプリのAPIメールに送信され、カスタムアプリの通知は開発者のメールで送信されます。

結論

このガイドでは、ShopifyのWebhookを使用して、ストアの管理と他のアプリとの統合を最適化する方法を探りました。ウェブフックの作成からデータの整合性のテストと検証まで、概要と安全で効果的な実装方法をご紹介します。

Webhookを活用して、より自動化された柔軟なストアを実現しましょう。非同期処理を適用し、ウェブフックの配信エラーに対するソリューションを使用することで、ピーク時でも常に効率的に統合を実行することができます。Webhookのパワーを活用することで、Shopifyストアのオペレーションを最適化し、卓越したカスタマーエクスペリエンスを提供することができます。Webhook の可能性を最大限に引き出し、今すぐストアをアップグレードしましょう！