catch-img

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

はじめに

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

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

shopifyに関するお問い合わせをするボタン

shopify資料のダウンロードをするボタン


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


目次[非表示]

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



連携設定について

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

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

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

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

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

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


2)アプリの設定
・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側の設定と構成例などをご紹介できればと思いますので引き続きよろしくお願いいたします。

shopifyに関するお問い合わせをするボタン

shopify資料のダウンロードをするボタン

shopify構築サービスバナー

トランスコスモスShopifyエンジニア
トランスコスモスShopifyエンジニア
トランスコスモスは日本で7社しかない最上位の「Shopifyプラスパートナー」です。最上位認定を堅持しShopifyでのECサイト制作・Shopifyアプリ開発を担うのが、トランスコスモスShopifyエンジニアチームです。Shopifyアプリの解説・紹介、Shopifyの基本的な使い方など制作や開発の過程で得られた知見をご紹介します。

Shopify導入についてのサービス問い合わせ

Shopifyアプリ解説・紹介記事


【無料】セミナー動画視聴


EC関連サービス


トランスコスモスのEC全領域を網羅するサービス


従業員(メンバー)インタビュー


トランスコスモスの定量的な強み

お気軽に
お問い合わせください

Shopify(ショッピファイ)
ECストア構築・運用代行

トランスコスモスは日本最上位の「Shopifyプラスパートナー」企業です
ロジスティクスサービス

 記事カテゴリー

【週間ランキング】ECブログ人気記事

ロジスティクス関連 新着記事

【初心者必見!】Shopifyマニュアル

 Tag(タグ)一覧

正社員募集(求人)

 【無料】資料ダウンロード

Shopify認定パートナー企業

shopify plus partner
トランスコスモスは最上位の「Shopify Plus partner(ショッピファイプラスパートナー)」です。
Shopifyでのサイト制作ならお任せください!
ECソリューションをお届けするサービスサイト

トランスコスモス株式会社
CX事業統括
ECX本部

〒150-0011
東京都渋谷区東1-2-20
渋谷ファーストタワー
050-1751-7700(代表)

経済産業省が定める「DX認定事業者」
トランスコスモスは経済産業省が定める「DX認定事業者」
トランスプラス
トランスコスモスの全社的な情報を発信するオウンドメディア
cotra
コンタクト/コールセンターに携わる方への情報サイト
トランスコスモス株式会社
企業サイト(コーポレートHP)
Global Digital Transformation Partner.
お客様企業のデジタル・トランスフォーメーション・パートナー。
shopify構築・制作・運用