👩‍💻

【Shopify.dev和訳】Storefront API/Getting started

2021/10/23に公開約10,300字

この記事について

この記事は、Storefront API/Getting startedの記事を和訳したものです。

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

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

Storefront API の使用方法

Storefront APIは、製品、コレクション、顧客、チェックアウト、およびその他のストア リソースに GraphQL を使用して認証なしでアクセスでき、カスタムの購買体験を構築できます。

このチュートリアルでは、Storefront API を使用して一般的なタスクを実行する方法を説明します。

必要条件

  • プライベート アプリまたはカスタム アプリを作成し、アプリのセットアップで Storefront API へのアクセスを有効にしていること。パブリック アプリを作成した場合は、アプリを販売チャネルにする必要があります。

  • プライベートアプリの場合は、プライベートアプリページの Storefront API セクションで有効にする権限を選択しました。Storefront API アクセストークンは、Storefront API を有効にしてプライベートアプリを保存した後、コピー/ペーストできるようになります。

  • カスタム アプリとパブリック アプリでは、OAuth中に認証されていない Storefront API アクセス スコープを要求しています。
    次の URL 例では、未認証のスコープを要求しています。

    https://{shop_id}.myshopify.com/admin/oauth/authorize?client_id={client_id}&scope=unauthenticated_read_product_listings,unauthenticated_write_checkouts,unauthenticated_write_customers,unauthenticated_read_customer_tags,unauthenticated_read_content,unauthenticated_read_product_tags&redirect_uri=https://www.google.com/&state=nonce1
    
  • パブリック アプリまたはカスタム アプリがインストールされると、StorefrontAccessToken REST リソースまたはstorefrontAccessTokenCreate GraphQL mutationを使用して、管理 API から Storefront API アクセストークンを要求できます。

  • アプリが Storefront API アクセストークンを取得したら、Storefront API への各要求の要求ヘッダーにそれを含めます。

    X-Shopify-Storefront-Access-Token: {storefront-access-token}
    
  • ストアでは、商品商品バリエーションコレクションを作成しています。

おすすめポイント

Shopify パートナーであれば、Storefront API のクエリをテストするために開発ストアを作成することができます。

Storefront GraphQL エンドポイント

すべての Storefront API のクエリは、1 つの GraphQL エンドポイントで実行され、POST リクエストのみを受け付けます。

POST https://{shop_id}.myshopify.com/api/2021-07/graphql.json

1. 製品の検索

製品の一覧を取得するには、products を照会します。products フィールドでは、引数(例えば first)を使用して、取得する結果の数を指定します。

次の例では、ストア内の最初の 5 つの商品の ID を取得する方法を示しています。取得する結果のセットを選択する詳細については、「GraphQL で結果をページングする」を参照してください。

クエリ POST /api/2021-07/graphql.json

{
  products(first: 5) {
    edges {
      node {
        id
      }
    }
  }
}
json response
{
  "data": {
    "products": {
      "edges": [
        {
          "node": {
            "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzQzNTM1NTQ2NDUwMTQ="
          }
        },
        {
          "node": {
            "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzQzNTM1NTQ3MTA1NTA="
          }
        },
        {
          "node": {
            "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzQzNTgxNTkwMDc3NjY="
          }
        },
        {
          "node": {
            "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzU1OTE0ODQ4NTgzOTA="
          }
        },
        {
          "node": {
            "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzU2MDY3MTA2NzM0MzA="
          }
        }
      ]
    }
  }
}

2. 単一の製品を取得する

製品はグローバルに一意な ID で識別され、これを使って情報を照会することができます。単一の製品を検索するには、nodeのクエリルートから開始し、製品 ID を指定します。

クエリを実行します。POST /api/2021-07/graphql.json

{
  node(id: "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzU2MDY3MTA2NzM0MzA=") {
    id
    ... on Product {
      title
    }
  }
}
json response
{
  "data": {
    "node": {
      "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzU2MDY3MTA2NzM0MzA=",
      "title": "Black Ban Glasses"
    }
  }
}

3. プロダクトバリアントの取得

商品のバリエーションとは、サイズ違いや色違いなど、商品の異なるバージョンを表します。Product type のvariantsをクエリすることで、製品に関連する variant を取得できます。

クエリを実行します。POST /api/2021-07/graphql.json

{
  node(id: "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzQzNTM1NTQ3MTA1NTA=") {
    id
    ... on Product {
      variants(first: 5) {
        edges {
          node {
            id
          }
        }
      }
    }
  }
}
json response
{
  "data": {
    "node": {
      "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzQzNTM1NTQ3MTA1NTA=",
      "variants": {
        "edges": [
          {
            "node": {
              "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8zMTM2NTgxODc0NDg1NA=="
            }
          },
          {
            "node": {
              "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8zMTM3MzI0OTk3MDE5OA=="
            }
          },
          {
            "node": {
              "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8zMTM3Mzk3Nzg3ODU1MA=="
            }
          },
          {
            "node": {
              "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8zMTM3NDEwOTgwMjUxOA=="
            }
          },
          {
            "node": {
              "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8zMTM3NDgzNTk3NDE2Ng=="
            }
          }
        ]
      }
    }
  }
}

4. 商品のメディアを取得する

Storefront API を使用して製品のメディアを取得し、ストアフロントに表示することができます。

Productのメディアを検索するには、製品タイプにmediaフィールドを指定します。次に、フラグメントを使用して、可能なメディア タイプごとに返したいフィールドを指定します。

クエリを実行します。POST /api/2021-07/graphql.json

{
  node(id: "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzQzNTM1NTQ3MTA1NTA=") {
    ... on Product {
      id
      media(first: 10) {
        edges {
          node {
            mediaContentType
            alt
            ...mediaFieldsByType
          }
        }
      }
    }
  }
}

fragment mediaFieldsByType on Media {
  ... on ExternalVideo {
    id
    embeddedUrl
  }
  ... on MediaImage {
    image {
      originalSrc
    }
  }
  ... on Model3d {
    sources {
      url
      mimeType
      format
      filesize
    }
  }
  ... on Video {
    sources {
      url
      mimeType
      format
      height
      width
    }
  }
}
json response
{
  "data": {
    "node": {
      "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzQzNTM1NTQ3MTA1NTA=",
      "media": {
        "edges": [
          {
            "node": {
              "mediaContentType": "VIDEO",
              "alt": "Comparison video showing the different models of watches.",
              "sources": [
                {
                  "url": "https://videos.shopifycdn.com/c/vp/2a82811738ca41e7a508e6744028d169/SD-360p.mp4?Expires=1575744400&KeyName=core-signing-key-1&Signature=OPKELzhY-kYTx9QH9x6NJA9IqnI=",
                  "mimeType": "video/mp4",
                  "format": "mp4",
                  "height": 360,
                  "width": 640
                }
              ]
            }
          },
          {
            "node": {
              "mediaContentType": "IMAGE",
              "alt": "Polaris watch",
              "image": {
                "originalSrc": "https://cdn.shopify.com/s/files/1/1768/1717/products/IGQ.png?v=1560528103"
              }
            }
          }
        ]
      }
    }
  }
}

5. コレクションの取得

コレクションとは、ストアオーナーが商品を整理したり、ストアを見やすくするために作成できる、商品のグループを表します。例えば、マーチャントは、フットウェアなどの特定のタイプの商品を販売するためのコレクションを作成することができます。

マーチャントは、製品を個別に選択するか、製品を含めるかどうかを自動的に判断するルールを定義することで、コレクションを作成できます。

次の例では、コレクションとそのコレクションに属する製品を検索する方法を示しています。

クエリ。POST /api/2021-07/graphql.json

{
  collections(first: 2) {
    edges {
      node {
        id
        products(first: 5) {
          edges {
            node {
              id
            }
          }
        }
      }
    }
  }
}
json response
{
  "data": {
    "collections": {
      "edges": [
        {
          "node": {
            "id": "Z2lkOi8vc2hvcGlmeS9Db2xsZWN0aW9uLzI2MTM5NzI1MDA3MA==",
            "products": {
              "edges": [
                {
                  "node": {
                    "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzY1NDExNTM4NjE2NTQ="
                  }
                },
                {
                  "node": {
                    "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzQzNTgxNTkwMDc3NjY="
                  }
                },
                {
                  "node": {
                    "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzU1OTE0ODQ4NTgzOTA="
                  }
                }
              ]
            }
          }
        },
        {
          "node": {
            "id": "Z2lkOi8vc2hvcGlmeS9Db2xsZWN0aW9uLzI2MTM5NzI4MjgzOA==",
            "products": {
              "edges": [
                {
                  "node": {
                    "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzQzNTM1NTQ3MTA1NTA="
                  }
                },
                {
                  "node": {
                    "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzU1OTE0ODQ4NTgzOTA="
                  }
                }
              ]
            }
          }
        }
      ]
    }
  }
}

次のステップ

  • GitHub のstorefront-api-learning-kitプロジェクトでは、Insomnia HTTP クライアントで使用できるサンプルクエリの完全なセットにアクセスできます。
  • GitHub のstorefront-api-examplesプロジェクトでは、さまざまなオープンソース・ライブラリを使ったサンプル・アプリケーションにアクセスできます。
  • ウェブサイト、アプリ、ビデオゲームなど、顧客がいる場所でユニークな購買体験を実現するために使用できるさまざまなツールについてご紹介します。
  • Storefront API へのフィードバックをお願いします。

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

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