ShopifyはノーコードでECサイトを構築できる便利なサービスです。さらに、Shopifyは外部のベンダーに対してAPIを提供しているため、外部企業はAPIを活用してShopifyで使用できるアプリを提供しています。Shopifyで展開しているアプリはShopifyのAPIを活用して作られています。
今回は、ShopifyのAPIで使われているGraph QLとは何かと、導入する目的やメリットを解説します。ぜひ最後までご覧ください。
Contents
そもそもGraphQLとは？
そもそもGraphQLとは何なのでしょうか？クライアントとサーバーを仲介する役割を担っているのがAPIですが、GraphQLはAPIにリクエストを送付するクエリ言語です。クエリ言語とは、サーバーに問い合わせするための言語です。APIとはアプリケーション・プログラミング・インターフェースの頭文字を取ってAPIと呼ばれています。クライアントとサーバーを仲介する役割を担います。
APIをレストランの例にたとえると、それぞれの役割は次のとおりです。
- 料理を注文し食事をするユーザー（クライアント）
- 料理を作る厨房（サーバー）
- 注文の受付と料理を届ける店員（API）
クライアントとサーバーを繋げる役割を担っているのがAPIです。GraphQLはクライアントのリクエストをサーバー側に伝える役割を果たす言語といえます。
REST APIとGlaphQLの違い
Shopifyでは以前、クエリ言語としてREST APIを使用していました。REST APIとGraph QLは何が違うのでしょうか？GraphQLが持っている主な特徴は、リクエストされた要求のみ受け取りが可能です。
REST APIはRESTの4原則を満たすシステムシンプルなWebシステムを設計する思想のことです。RESTの4原則とは次のとおりです。
| Uniform Interface | 統一インターフェース |
| Addressability | アドレス可能性（それぞれの情報は識別URIで表現） |
| Connectability | 接続性（リンク情報が含まれる） |
| Stateless | 都度アウトプットを導く |
参照元：Hubspot『REST APIとは？特徴と活用シーンを解説』より
REST APIは別々の情報にアクセスするためには、それぞれのAPIごとにエンドポイントが必要です。それに比べてGraphQLのエンドポイントは1つなので、リクエストの送信回数が少なく済みます。
他には、取得したい情報に対し1対1でレスポンスを返すGraphQLと違い、REST APIはすべてのデータを返します。不要なデータまで取得してしまうのがREST APIのデメリットといえるでしょう。
GlaphQLを導入するメリット
GlaphQLを導入するメリットを解説します。GraphQLを導入するメリットは主に次の3点です。
- リクエストの回数が少なく済ませられて、複数のリソースにアクセスできる
- データは最小限のもののみ取得できる
- 既存のクエリは残したままでAPIを更新できる
GlaphQLはエンドポイントが1つなのでリクエスト回数も少なく済みます。そのためサーバー側に負荷をかけずに情報を取得できることがメリットです。
また、REST APIはエンドポイント内に含まれる情報をすべて取得してしまいますが、GlaphQLは必要不可欠のものしか取得しません。APIのリクエスト回数が少なく済む分、オーバーフェッチ、アンダーフェッチがほとんどありません。
オーバーフェッチとアンダーフェッチとは
- オーバーフェッチ：多くのデータをリクエストすること
- アンダーフェッチ：1度のリクエストで十分なデータが得られない場合、2度以上のリクエスト送信すること
どちらもサーバー側の負荷が増えるため、オーバーフェッチもアンダーフェッチも少ないに越したことはありません。
導入する際のデメリット
GlaphQLを導入するデメリットは、2015年に登場したばかりなので情報量が少ないのはデメリットといえます。
REST APIからGlaphQLを導入するには、少ない情報をもとに取得しなければならないため時間がかかります。REST APIと異なり、キャッシュが複雑になりやすいのもデメリットの一つです。
GraphQLを使って作られている代表的なAPI「Storefront」とは？
ShopifyではREST APIとGraphQLのどちらも使用したAPIが存在します。Shopifyの提供している代表的なAPIが、REST APIとGraph QLのどちらを使用しているかチェックしてみましょう。
| Shopify API | REST | GraphQL |
|---|---|---|
| Admin API | 一部はアクセスできますがTranslationAPIsにはアクセス不可 | 〇 |
| Storefront API | 不可 | 〇 |
| Partner API | 不可 | 〇 |
| Marketing activities API | 〇 | 不可 |
| Ajax API | 〇 | 不可 |
参照：Shopify専門メディア イチ役【Shopify API】GraphQLとREST の徹底比較
Shopify APIの一つである「Storefront API」は、Shopifyで制作したECサイト以外のWebサイトやスマートフォンのアプリ、ビデオゲームなどで購入してもらうために活用します。Shopifyのサイト以外で、顧客が商品やコレクションなどを閲覧し、商品を購入できるようにする機能を提供するAPIです。
- ECサイト以外の自社メディアでの販売
- ShopifyのECサイトでは実現できない他のサービスとの連携
- スマートフォンのアプリで販売
- ビデオゲームで商品を販売
StorefrontAPIを導入すると、上記の内容ができるようになります。
Storefrontが果たす役割と導入すべき理由
StorefrontAPIが果たす役割は、Shopify上で展開しているECサイトの販売情報を、そのまま他に展開できることです。StorefrontAPIを導入する方法は次のとおりです。
- アクセストークンを発行する
- Storefront APIに対してリクエストを送信する
- Storefront API上に商品を表示する
アクセストークンの発行は、Shopify管理画面から発行できます。Shopify管理画面の左側一番下にある「設定」をクリックしてください。アプリと販売チャネルをクリックすると右上に「アプリの開発」という文字が表示されるので、こちらをクリックします。「カスタムアプリ開発を許可」というボタンが表示されるのでクリックしてください。
カスタムアプリ開発許可をクリックすると、カスタムアプリの作成画面に遷移します。作成したいアプリの名前を付けて「アプリを作成」をクリックしましょう。アプリの作成手続きが完了すると、「API資格情報」を選択する画面が表示されます。
続いて、StorefrontAPIスコープの設定を行います。StorefrontAPIスコープの設定をすることで、Shopifyに掲載している情報をどこまで提供するのか範囲を選択できます。APIキーとシークレットキーが発行されます。
設定のタブをクリックするとStorefrontAPIアクセススコープの提供範囲が表示されるので、必要な箇所にチェックを入れて開発したアプリのインストールを開始しましょう。インストールが完了するとアクセストークンの発行完了です。
後はStorefrontAPIから取得したデータ（JavaScriptコード）を、Shopifyの情報を掲載したいサイトのjsファイルにコピーして貼り付けるだけです。
Storefront APIで利用可能なShopifyのデータ
StorefrontAPIで利用可能なShopifyのデータは次のとおりです。
- カート情報
- チェックアウト（商品購入後の画面）
- 共通（Common objects）
- お客様（顧客情報）
- ストア
- 注文商品（Orders、Products）
GraphQLを使用して作られているStorefrontAPIを活用すると、Shopify独自言語のLiquidを使用しなくても、JavaScriptやReactといった言語でShopifyサイトを立ち上げできます。StorefrontAPIを実装するためのSDK（ソフトウェア開発キット）は、JavaScript用とAndroidやiOS向けのものと、Unity向けが提供されています。
Shopify APIとはECサイトと外部サービスを連携するのに必要
ShopifyはAPIを公開しているため、サードパーティ（パートナー）が作成したアプリと連携しやすいメリットがあります。Shopify APIは、サイトデザインをカスタマイズしたりECサイトの機能を拡張したりしたいときに使用します。Shopifyの中でよく使われているAPIは、先ほど紹介したStorefrontAPIを含めると5種類に分類できるでしょう。
Shopifyでよく使われているAPI
Shopifyでよく使われているAPIは、次の通りです。先ほど紹介したStorefrontAPIも含みます。
| Admin API | 各サービスやアプリケーション等をShopifyと繋げて使用するためのAPI |
| Storefront API | 商品や顧客・注文などの情報を取得できるAPI |
| Partner API | 開発支援しているクライアント等のShopifyダッシュボードにアクセスできるAPI |
| Shopify Themes | デザインカスタマイズをするためのAPI |
| Marketing activities API | マーケティングに関する機能を管理できるAPI |
Shopify Admin API
REST APIとGraphQLの両方からアクセスできるAPIで、ほかのサービスやアプリケーションをShopify上と繋げる役割を果たすAPIです。Shopifyに本来備わっている基本機能以外に、独自機能を追加できるようになります。Shopify Admin APIでできることは以下の通りです。
- 商品、在庫、注文、配送など、Shopifyのストア情報を読み書きする
- アプリでShopifyの既存の機能を拡張する
- 店舗の在庫を他のマーケットプレイスにチャネルで接続する
- アプリの拡張機能で、Shopifyの管理画面やShopifyのPOS（販売時点情報管理）に新機能を追加する
参照：Shopify.dev Shopify Admin API
Shopifyで利用できる管理画面と別に管理画面を作成したいときや、Shopifyの在庫データと、ほかのショッピングサイトとのデータを連動したいときに活用します。
大型のECサイトであれば、楽天などのモールと自社ECサイトと両方に同じ商品を展開しているケースは多いでしょう。Admin APIを活用すると、どちらかのサイトで売れた商品の在庫をそれぞれのサイトで減らす処理ができます。
Partner API
Partner APIは、Shopifyパートナープログラムに登録しており、Shopifyのサイト構築を多く引き受けている方にピッタリです。クライアントごとにShopifyの管理画面で確認しなくてはならないのは不便です。自らが管理画面を構築して、まとめて管理したいと考える方も多いでしょう。
Partner APIは、Shopifyパートナーとして登録している方が、構築したECサイトのクライアントの情報を読み取るプログラムを提供しています。それは即ち、クライアントとEC構築しているパートナーと両方の管理が楽になります。たとえば、以下の画面でPartnerAPIが活用されるでしょう。
- Shopifyパートナーとして、構築したECサイトの売上を自動で集計したいとき
- Shopifyパートナーとして、開発したアプリの利用率や離脱率を算出してダッシュボードを作成したいとき
PartnerAPIは、GraphQLのみ提供されているAPIです。REST APIでは使用できないので注意しましょう。
Shopify Themes
Shopify Themesは、Shopifyに数多く存在しているECサイトのサイトデザインテーマをカスタマイズ可能にするAPIです。Shopifyには元々、販売する商品の種類によりさまざまなデザインのサイトを用意しています。
それぞれプログラムやデザインは出来上がった状態で、希望のテーマを選ぶだけで、ノーコードで実装できます。Shopifyには無料・有料含めて多種多様のテーマを利用できますが、同じテーマを選ぶと同じようなECサイトが出来上がります。
テーマを一から作るにはLiquidやソースの知識が無いので無理だけれど、カスタマイズなら可能な場合は、既存のテーマを元にカスタマイズを加えると独自のECサイトの完成です。もちろんカスタマイズだけでなく、新規で一からテーマを作り上げることも可能です。
Marketing activeties API
ECサイトに限らずマーケティング活動は多岐に渡ります。ブログなどの記事投稿やソーシャルメディアへの投稿や、Web広告の活用、メールマーケティングなどさまざまです。
ソーシャルメディアの投稿やWeb広告、メールマーケティングといった活動は、Shopifyの管理画面で行うのではなく別画面を立ち上げての操作となります。さまざまな管理画面を開かなくてはならず作業も煩雑になりがちです。
Marketing activeties APIはすでにマーケティングに関連するアプリではなく、自分に合うアプリを自己開発したいときに使用します。このAPIを使用すると、マーケティング活動の管理がShopify管理画面で集約できるので1か所にまとめられます。
まとめ
GlaphQLついての解説と共に、現時点でShopifyが提供しているAPIの中で、REST APIとGraphQLの利用割合についても説明しました。Shopifyには、外部サービスと連携したり構築したECサイトの情報を、自社メディアやソーシャルメディアやアプリ等で販売できるように情報を抽出したりできるAPIが揃っています。
Shopify APIの中ではREST APIのみアクセスできるものと、GraphQLのみアクセスできるものと、両方混合したタイプと大きく3種類に分かれます。クライアントからサーバーに問い合わせをリクエストしたときに、必要なものだけレスポンスが返ってくるGraphQLは今後も広がっていくことでしょう。
Shopifyは各種のAPIの提供やサードパーティアプリの開発も盛んで、ノーコードでECサイトを構築し様々なサービスと連携できるのが魅力です。ECサイト構築を手掛けるShopifyパートナーにとって、ECサイト構築する上でAPIの利用及びGraph QLの知識を習得し活用していく必要があります。
当社NDPマーケティングは、メディア「Shopify Guide」の運営によってShopifyの最新情報やノウハウを常に蓄積してきています。Shopifyエキスパートによる構築をご希望であったり、ShopifyでECサイトの新規制作・リニューアル、Web広告などによるプロモーションを行いたいとお考えだったりする方は、こちらの問い合わせフォームからお気軽にお問い合わせください。
