Shopifyアプリ開発についてのまとめ

Yuma Ito

Shopifyとは

手軽にECサイトの開発・運用を行うことができるECプラットフォームであり、世界No.1のシェアを誇る。
特徴としては、

サブスクリプションモデル（月額$29～）であり、初期費用が不要
豊富なテンプレートを利用してデザインをカスタマイズできる
アプリと呼ばれる追加機能を組み込むことで、自由に機能を拡張することができる
など。
公式サイト

Yuma Ito

Shopifyパートナープログラム

開発者やデザイナー、ストア構築やクライアント紹介事業者用のプログラム。

Shopifyを無料で利用できる。デモ用ストアの構築も可能。※ストアがオープンする（有料プランに変わる）まで
ストア構築やクライアント紹介による継続的な収益の獲得
API を使ったストアのカスタマイズや、開発したアプリ・テーマの販売
Shopify アカデミーの無料受講
- Shopify アカデミーは、Shopify パートナーにのみ提供されるオンライントレーニングおよび認定プログラムです

登録はShopify パートナープログラム | Shopify パートナーになるから。
具体的な手順は以下のブログからダウンロードできるPDF参照。

Shopifyを紹介する：クライアントにShopifyをおすすめする方法（ダウンロード版 Shopify パートナースタートガイド付き） — Shopify パートナー

Yuma Ito

Shopifyアプリの開発に役立つサイト集

Shopifyのブログでかなり手厚く解説されている。

Yuma Ito

Shopifyアプリ開発で行ったことメモ

基本的にShopifyアプリの開発方法 — Shopify パートナーやAPIドキュメントを参考に作業する。

Yuma Ito

アカウントを作成する。
Shopify パートナープログラム | Shopify パートナーになる

Yuma Ito

開発用ストアを作成する。

管理画面ダッシュボードにアクセス
ストア管理＞ストアを追加する＞開発ストア
各種フォームに入力（ストア名など）
完了

管理画面から商品をいくつか追加した。

Yuma Ito

アプリの種類

アプリの種類 · Shopify ヘルプセンター

公開アプリ：Shopifyアプリストアまたは開発者のWebサイトからインストールできる。複数のShopifyストアにインストール可能で販売できる。
カスタムアプリ：特定のShopifyストア向けのアプリ。APIや管理画面にアクセスせずにアプリを作成できる。（※APIを利用できない）
プライベートアプリ：特定のShopifyストア向けのアプリ。APIの利用が可能。プライベートアプリ · Shopify ヘルプセンター

プライベートアプリの追加

そのストアでのみ利用するアプリ（プライベートアプリ）を追加する。

管理画面＞アプリ管理
「プライベートアプリを管理する」をクリック
（注意事項を読み）プライベートアプリの開発を有効にするをクリック
プライベートアプリの名前、Admin APIの権限、ストアフロントAPIの権限を設定
完了するとAPIキーとパスワードなどのクレデンシャル情報が発行される

Yuma Ito

Shopify Admin APIについて

Adimin APIはShoifyストアのデータのやり取りをするためのAPI
- ストア情報（商品、在庫、注文、発注など）の読み書き
- アプリによる機能の拡張
- アプリ拡張機能による管理画面やPOSの機能追加
GraphQLとRESTの2種類がある（GraphQLが推奨されている）
Admin APIを利用するには認証が必要
APIの利用制限あり。Shopify API rate limits

Shopify Admin API

Yuma Ito

Shopify StoreFront APIについて

Webサイトやアプリなど、どこでもShopifyの購入体験を得ることができるためのAPI
- オンラインストアやPOSなどの既存のチャネルでは満たせない要件がある場合に役立つ。
- 製品情報へのアクセス、注文の作成、決済をプログラムで行います。
ユースケース
- ShopifyではないWebサイトで商品を売る場合
- EC基盤としてShopifyを利用し、特定の販売店向けのアプリを作成する場合
- Unityで作成されたゲームなどで直接商品を販売する場合
GraphQL APIのみ。REST APIはない。
StoreFront APIを利用するアプリは認証が必要
API呼び出しの利用制限あり。他のAPIとは異なり、ショップのIDではなく購入者のIPアドレスに対して適用される。Shopify API rate limits

参考：Shopify Storefront API

Yuma Ito

StoreFront APIの認証

アクセストークンが必要
- プライベートアプリの場合、管理画面から取得する
- パブリックアプリの場合、OAuthを利用して取得する
リクエストヘッダにアクセストークンを付ける必要がある
```
X-Shopify-Storefront-Access-Token: < storefront-access-token >
```

Yuma Ito

Storefront API SDK

Storefront APIを利用するためのSDKが公開されている

JavaScript Buy SDK
Buy Button JS
Android Buy SDK
iOS Buy SDK
Unity Buy SDK

Shopify Storefront API SDKs

Yuma Ito

JavaScript Buy SDK

Shopify APIをベースとして、ショップから商品やコレクションを取得したり、商品をカートに追加、精算を行うことができる。

単一商品または商品コレクションの情報の取得
ショッピングカートの作成
顧客にオプションや個数を選択させる
単一商品またはカート全体の精算用URLの生成

Shopify Storefront API Javascript SDK

JavaScript Buy SDKを利用するためには、プライベートアプリでアプリを作成する必要がある。
Getting started with the JS Buy SDK for Storefront API

Yuma Ito

SDKのインストール

JavaScript Shopify Buy SDK (JSDoc: Home)
Shopify Buy SDKの型定義パッケージ (@types/shopify-buy - npm) ※TypeScriptを利用する場合

npm install shopify-buy
npm install -D @types/shopify-buy

Yuma Ito

サンプルコード

ドキュメントに載っている。

クライアントの初期化（必須）

import * as ShopifyBuy from 'shopify-buy';

const client = Client.buildClient({
  domain: 'your-shop-name.myshopify.com',
  storefrontAccessToken: 'your-storefront-access-token' // 管理画面からトークンを取得して記載
});

※トークンなどは環境変数に記述しておくとよい。

商品の全件取得＆商品IDとタイトル（商品名）の表示

products = await client.product.fetchAll();
products.forEach((product) => {
  console.log(product.id);
  console.log(product.title);
});

Yuma Ito

For performance reasons, we recommend that you don't use checkout objects as carts. Instead, you should store the variant IDs and quantities in the browser's localStorage. When the user is ready to check out, use the stored variant IDs and quantities in the checkout mutations.

とあるように、checkoutオブジェクトをショッピングカートとして利用しない方が良い。
実際にやってみたところ、APIのリクエストが最低0.5秒かかるので、パフォーマンスが悪かった。
Getting started with Shopify Storefront API

Yuma Ito

@types/shopify-buy v2.10.4ではCartオブジェクトにcheckoutUrlというプロパティが型定義ファイルに記述されているが、実際には存在しない。

代わりに、webUrlというプロパティが存在し、これが支払い画面に遷移するURLである。
Checkout

このスクラップは2021/08/07にクローズされました