【DEC CMS×Shopify連携】第2回：Shopifyでの設定と使用するAPIについて

2022-11-28 07:31（更新：2024-12-19 04:54）トランスコスモスShopifyエンジニアDEC CMS

Shopify ショッピファイ

■はじめに

前回はShopifyとCMS連携についての連携の概要とDECCMSについてご紹介させていただきました。今回はShopify側で必要な設定や使用しているAPI等についてご紹介させていただきます。

■SaaS型プラットフォーム（DEC CMS)

第1回：DEC CMSについてと連携機能の特徴
第2回：Shopifyでの設定と使用するAPIについて（本記事）
第3回：DEC CMSの設定と構成例について

目次[非表示]

1.連携設定について
2.使用しているAPI（内容）について
3.まとめ

連携設定について

連携にはAPIを使用して連携します。また、APIを使用するにあたってGraphQLと呼ばれるAPIを効率的に呼び出す仕組みを使用しており、DEC CMS側からはGraphQLクエリをShopify側に送信しデータの送受信を行います。

GraphQLサンプル
リクエスト内容

応答はJSON形式で受け取ります。

DEC CMSとの連携にてShopify側の設定は管理サイトで「Shopify側のアプリ」を設定し各データに対してAPIからのアクセスを許可することから始まります。

１）Shopifyアプリの作成
設定メニューから「アプリと販売チャネル」を選択し、「アプリを開発」を選択します。

アプリ名を入力し、「アプリを作成」ボタンをクリックしアプリの初期設定を始めます。

２）アプリの設定
・AdminAPI、ストアフロントAPIの権限を設定
作成したアプリに対してShopifyの情報をAPIを通じて取得するためにそれぞれのAPIについて権限を設定します。AdminAPI(管理用）、ストアフロントAPI（フロント用）それぞれについて権限が必要です。

各APIでは連携に必要な項目にチェックを設定します。
※対象の項目に対して読み込み（read)、書き込み（write)を設定することで連携先からアクセス可能とします。

アプリがインストールされるとAPIアクセスに必要なトークン情報等が発行されます。
※ここで発行されるトークン情報等は連携先のCMS側で必要となりますので保存しておいてください。

これで、Shopify側の設定は完了です。CMS側からGraphQLを使用して商品情報等にアクセスしてデータ連携を行うようになりましたので、次回はCMS側の設定をご紹介させていただきます。

使用しているAPI（内容）について

連携で使用するAPIについては以下の内容を取得しています。

・使用API
▼Admin API

商品（products）
商品メディア（images）
商品バリエーション（variants）
コレクション（collection）
クーポン（codeDiscountNodes）
自動ディスカウント（automaticDiscountNodes）

▼Store Front API

ブログ（blogs)
ブログ記事（articles）
ページ（pages）

・リファレンスサイト

GraphQLで取得できる内容については以下のサイトでリファレンスが公開されていますので、ご参考までに。
https://shopify.dev/api/

・CMS側での呼び出し内容を少しご紹介

CMS側では上記GraphQLを使用して商品情報などを取得できます。組み合わせ次第で様々な情報を取得できますので、内容によってカスタマイズすることも可能です。

例）商品情報の取得の場合

query products_basic_next {								
  # 商品情報								
  products(first: 250, after: "{前ページの最終のカーソル値}",  query:"updated_at:>{最終実行日時}") {								
    edges {								
      node {								
        id								
        title								
        description								
        updatedAt								
        # 価格範囲								
        priceRange {								
          # 最大価格								
          maxVariantPrice {								
            amount								
            currencyCode								
          }								
          # 最小価格								
          minVariantPrice {								
            amount								
            currencyCode								
          }								
        }								
        # 商品バリエーション判定								
        hasOnlyDefaultVariant								
        # 検索エンジン用の情報								
        seo {								
          title								
          description								
        }								
        publishedOnCurrentChannel								
        # 分類								
        productType								
        vendor								
        # タグ								
        tags								
      }								
      # カーソル								
      cursor								
    }								
    # 次ページ判定（Product)								
    pageInfo {								
      hasNextPage								
    }								
  }								
}

まとめ

今回はShopify側の連携設定および使用しているAPIや内容などをご紹介させていただきました。Shopifyのアプリ設定は簡単に設定できるのでCMSの連携以外にもいろいろと有効な内容を設定できそうです。次回はDEC CMS側の設定と構成例などをご紹介できればと思いますので引き続きよろしくお願いいたします。