🧑‍🔧

【Shopify.dev和訳】Apps/Flow/Triggers

2021/09/16に公開約7,500字

この記事について

この記事は、Apps/Flow/Triggersの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Shopify Flow トリガー

トリガーは、Shopify Flow のワークフローコンポーネントです。これはワークフローを開始するイベントを表し、ストアまたはアプリで発生する可能性があります。アプリを Shopify Flow に接続して、アプリで発生するイベントがワークフローをトリガーできるようにすることができます。

このガイドでは、アプリにトリガーを追加して、アプリが Shopify Flow に送信するプロパティを定義する方法を示します。

要件

次のものがあることを確認してください。

  • Shopify Flow に情報を送信するために使用できるテスト Web サーバー。既存の Web サーバーを使用できます。この Web サーバーは、POST リクエストを Shopify Flow に送信できる必要があります。
  • テスト Web サーバーで動作するテストアプリ。
  • Shopify Flowとテストアプリがインストールされている開発ストア。

考慮事項

Shopify プロパティ

トリガーを作成するときに、トリガーが Shopify Flow に送信するプロパティを追加します。カスタムプロパティまたは事前定義された Shopify プロパティを追加できます。

Shopify プロパティを使用すると、Shopify リソースの識別子を Shopify Flow に送信できます。その後、マーチャントはリソース全体を条件とアクションで使用できます。各 Shopify プロパティの 1 つをトリガーに追加できます。

Shopify プロパティのタイプ 説明
customer_id カスタマーのグローバルに一意の ID。アプリにはread_customersスコープが必要です。
order_id オーダーのグローバルに一意の ID。アプリにはread_ordersスコープが必要です。
product_id プロダクトのグローバルに一意の ID。アプリにはread_productsスコープが必要です。

たとえば、トリガーはカスタマー ID を Shopify Flow に送信します。マーチャントは、カスタマーの合計支出額をチェックする条件を作成できます。そのアクションで、マーチャントはカスタマーのテンプレート変数({{customer.email}}など)を含めることができます。

1.トリガーを追加する

次の手順は、都市の気温が変化したときに天気情報を Shopify Flow に送信するトリガーを作成する方法を示しています。

  1. パートナーダッシュボードで、Shopify Flow アプリ拡張機能を開きます。
    a. アプリをクリックして、テストアプリを開きます。
    b. 拡張機能をクリックしてから、フローをクリックします。
  2. トリガーの追加をクリックして、トリガーのタイトルと説明を入力します。例えば:
フィールド 入力するコンテンツ
Trigger title 天候の変化
Trigger description 天気が変わったときにトリガーします
  1. トリガーの詳細フィールドの下に表示されるGraph QL エンドポイントhttps://{shop}.myshopify.com/admin/api/2021-07/graphql.json)をテキストファイルにコピーします。
    アプリはこのエンドポイントを使用して、POST リクエストを Shopify Flow に送信します。
  2. プロパティの追加をクリックしてデータ型を選択し、マーチャントがトリガーを選択したときに Shopify フローに表示されるプロパティを作成します。
    たとえば、次の値を含む 2 つのプロパティを作成します。
プロパティ プロパティ名
プロパティ 1 データタイプ:短いテキスト
フィールド名:都市の場所
ラベル:天気が変わった都市
プロパティ 2 データタイプ:ナンバー
フィールド名:気温
ラベル:華氏の温度(最も近い整数に丸められます)
  1. 保存をクリックします。

Shopify フローでのプロパティの表示のされ方

プロパティは、マーチャントがトリガーを使用するときに使用できる条件として Shopify Flow に表示されます。

Shopify Flow はまた、これらのプロパティを使用して、ワークフローアクションで使用するマーチャントに対応する Liquidテンプレート変数を作成します。Shopify Flow は、これらのプロパティのテンプレート変数を作成するときに、スペースを削除し、各単語の最初の文字の大文字と小文字を変更することで、プロパティ名を凝縮します。たとえば、{customerEmail}です。

プロパティ名

プロパティ名は、自己記述的で読みやすいものである必要があります。文の大文字と小文字を使用し、単語をスペースで区切ります(アンダースコアやハイフンではありません)。これらの名前には、英字(a-z、A-Z)とスペースのみを含めることができます。

Shopify Flow に送信するペイロードでこれらのプロパティを参照する場合は、これらの名前を入力してください(短縮バージョンは使用しないでください)。たとえば、{ properties: { "City location": string } }

2.Web サーバーを構成します

Web サーバーで、HTTP リクエストを Shopify Flow に投稿する機能を追加してから、flowTriggerReceiveミューテーションを使用します。 POST リクエストは 1MB 未満である必要があり、本文に次のコンテンツが含まれている必要があります。

  • トリガーの ID
  • アプリのトリガーを作成したときに定義したプロパティ情報
  • マーチャントのストアのアクセストークン
  • アプリに関連付けられた API 秘密鍵を使用するハッシュベースのメッセージ認証(HMAC)ヘッダー
  • トリガー情報を Shopify Flow に送信するイベントに関係するリソースの名前と URL

これらの詳細は Shopify フローのログに表示されるため、ユーザーとマーチャントはトラブルシューティング時にそれらを使用できます。たとえば、天気の変化のトリガーに関係するリクエストには、次のリソースが含まれる可能性があります。

"resources": [
  {
    "name": "Weather changes",
    "url": "http://www.example.com/weather/toronto"
  }
]

POST リクエストでは、GraphQL エンドポイントhttps://{shop}.myshopify.com/admin/api/2021-07/graphql.jsonを使用する必要があります。ここで、{shop}は、トリガーを使用するワークフローを持つストアを指し、2021-07は、現在の安定した API バージョンを参照します。この URL は、トリガーを作成したときにパートナーダッシュボードに表示されたものと同じです。

以下は、POST 本文の例です。

mutation
{
  flowTriggerReceive(body:"{
    \"trigger_id\": \"41ce92fc-154d-5963-ba19-8df5ed8e7e66\",
    \"resources\": [
      {
        \"name\": \"Weather changes\",
        \"url\": \"http://www.example.com/weather/toronto\"
      }
    ],
    \"properties\": {
      \"City location\": \"Toronto\",
      \"Temperature\": \"30\"
    }
  }") {
    userErrors {field, message}
  }
}

3.トリガーをテストする

パートナーダッシュボードでトリガーを作成し、Web サーバーでそのサポートを追加したら、Shopify フローでトリガーをテストできます。

  1. 開発ストアで、アプリ用に作成したトリガーを使用するワークフローを作成します。
  2. Web サーバーで、トリガー情報を Shopify Flow に送信するイベントを実行します。

テスト環境では、次のコマンドを実行して、トリガー情報をテストストアに送信できます。 Shopify Flow がアプリから POST リクエストを受信すると、トリガーを含むワークフローが開始されます。

Terminal
curl -X POST "https://{shop}.myshopify.com/admin/api/2021-07/graphql.json" \
-H "Content-Type: application/graphql" \
-H "X-Shopify-Access-Token: 555555555555555" \
-d '
mutation
{
  flowTriggerReceive(body:"{
    \"trigger_id\": \"41ce92fc-154d-5963-ba19-8df5ed8e7e66\",
    \"resources\": [
      {
        \"name\": \"Weather changes\",
        \"url\": \"http://www.example.com/weather/toronto\"
      }
    ],
    \"properties\": {
      \"City location\": \"Toronto\",
      \"Temperature\": \"30\"
    }
  }") {
    userErrors {field, message}
  }
}'

次のステップ

  • Shopify Flowをよく理解し、コネクタの構築について学びます。
  • アプリを Shopify Flow に接続して、ワークフローアクションの実行時にアプリがデータと情報を受信できるようにします。
  • 有効なワークフローでトリガーを使用しているストアについて、Shopify Flow から Webhookを受信する方法を学びます。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます