ShopifyでヘッドレスEC開発する前に知っておきたいこと
こんにちは。
Shopifyを使用したヘッドレス開発についてまとめていきます。
Shopifyは豊富なAPIを提供しており、ヘッドレスECの開発に適しています。Shopifyをバックエンドとして使用してストアフロントの開発を行う際には、いくつかのポイントに注意が必要です。
1.Shopifyの全体像
Shopifyは豊富な情報を提供してくれるドキュメントを提供していますが、その情報の量が多く、全体像を把握するのは非常に困難です。
そのため、ポイントごとに押さえながら進めていくことが重要です。
Shopifyには複数のAPIやアプリが存在しており、初心者にとっては複雑で、全体像を把握しにくいと感じるかもしれません。
ドキュメントを読んでいてもすぐに理解できる仕様にはなっていません。
ヘッドレス開発を行う際には、要点を絞って理解していくことが重要です。
2.ストアについて
Shopifyには通常のShopifyとShopify Partnersという2つの異なる概念が存在しますが、ShopifyとShopify Partnersは厳密には違います。
● Shopify
自分たちのECオンラインストアを月額プランから選択し、すぐに開発を始めることができます。この場合、ストアの管理画面のみが存在します。
● Shopify Partners
ECオンラインストアの構築にとどまらず、マーチャント（ストアオーナー）の支援を仕事とするための機能が提供されています。これは、Shopifyをクライアント企業向けにパートナーとして使用する場合の総合プラットフォームとして機能し、ストアの作成管理やアフィリエイトの作成管理、アプリ作成管理などをサポートします。
3.開発ストアについて
Shopifyでは、ストアを開設すると14日間の無料トライアル期間が提供されます。
無料期間を過ぎると課金が発生しますが、もし課金前にストアを閉じる場合は課金は発生しません。
ただし、ストアが閉じられるため、課金するまでの間はそのストアを使用することはできません。
初めて見ると、「開発時にはどうするの？毎回無料期間で閉じて新しく作らなければならないの？」と思うかもしれませんが、Shopifyではそのような手間を省く仕組みがあります。
開発ストアとは、Shopifyにおいて実際のビジネスストアとは別に、開発者がテストや開発の目的で使用することができるストアのことです。
開発ストアを作成することで、実際のビジネスストアとは別の環境で開発作業を行うことができます。開発ストアでは実際の課金が行われず、無料で使用することができます。
これにより、開発者は安全にテストや実験を行うことができ、本番環境への影響を気にすることなく開発を進めることができます。
開発ストアはShopify Partnersプログラムに参加している開発者に提供される特典の一つです。開発者はパートナーダッシュボードから開発ストアを作成し、必要な開発作業を行うことができます。
開発ストアでは一部の制限があり、本番の決済処理などはできません。
しかし、Shopify Plusの機能の一つであるマルチパス（MultiPass）なども試すことができます。
そのため、開発の際には開発ストアを作成し、開発作業を行うことをおすすめします。
開発ストアを使用することで、本番環境とは独立した環境で機能やプラグインのテストを行い、開発の品質を確保することができます。
4.APIについて
Shopify APIにはStoreFront APIとAdmin APIの2つの異なるAPIが存在します。それぞれREST APIとGraphQL APIの2つの提供方法があります。
● StoreFront API
StoreFront APIはReactやNext.jsなどを使用してヘッドレスフロントエンドを開発する際に主に使用されます。商品の一覧表示やカートへのアイテムの追加や削除、チェックアウト画面の生成など、管理以外の機能を担当する処理を提供しています。
● Admin API
Admin APIは商品管理、注文管理、顧客管理、バルク処理など、管理系の機能を担当する処理を提供しています。ほとんどの機能が可能なAPIであり、ストアの管理に必要な多くの操作が行えます。
5.アプリについて
Shopifyでは3種類のアプリが存在します。
● プライベートアプリ
プライベートアプリは少数のマーチャント向けに開発されるアプリですが、現在新しくアプリを開発する場合は、プライベートアプリではなく、カスタムアプリを開発することが推奨されていますので無視で大丈夫です。
● カスタムアプリ
カスタムアプリは、単一のマーチャント（ストアオーナー）向けに開発されるアプリです。
Shopifyアプリストア（マーケット）には公開されず、カスタムアプリはShopifyパートナーのダッシュボードで管理され、自分のストアのヘッドレス開発ではこちらをメインで使用します。
カスタムアプリを作成するとストアのStoreFront API Token、Admin API Tokenが発行されます。
※個人のストアでカスタムアプリを作成する場合、直接ストアのアプリ作成からカスタムアプリを作成することが可能です。
● 公開アプリ
公開アプリは、Shopifyアプリストアに公開され、世界中のマーチャントに向けて公開され、WordPressにおけるプラグインといった概念に近く、有料のアプリと無料のアプリが存在します。
※公開アプリを自分で作成する場合Shopify Partnersから作成が必要になります。
ここまで見てきた内容を考えると、Shopifyのアプリ開発は結構複雑な部分がありますよね。
全体像を把握するためには多くの情報が必要であり、何ができるのか、また何ができないのかを理解するためには時間と努力が必要です。
Shopifyのエコシステムは非常に広範であり、機能やAPIの組み合わせ次第で様々なことが実現できますが、その分理解するための学習コストもかかることでしょう。
全体像を把握するためにはドキュメントの研究や実際の開発経験が不可欠です。
6..Shopifyは万能ではない
Shopifyは完璧な超人ではありません。
公開されているアプリを活用すれば、柔軟に対応できる場面もありますが、必要な機能を実現するためにはトリッキーなカスタマイズが必要になることもあります。
また、ある機能を実現するためには諦める必要があることもあります。
Shopifyを使用している中で、「これができないの？」という予想外の状況に遭遇することも多いです。
特にログインに関連する部分は、想定外の問題が発生することがありました。
このように、Shopifyは多くの機能を提供していますが、全ての要件に対応できるわけではありません。
開発やカスタマイズにおいては、限定された範囲内で柔軟に対応する必要があることを理解しておくと良いでしょう。
●Shopify Plus マルチパスSSO
Shopify PlusのマルチパスSSOを使用しない場合、ストアフロント画面とShopifyチェックアウト画面の間でログインセッションを継続することができません。
ストアフロントでログインし、アクセストークンが発行されてログイン状態になっていても、チェックアウト画面に移動すると再度ログインが必要になります。
同様に、片方でログアウトしてももう一方ではログアウトされない状態になります。
詳しく以下の図を参照ください。
他にも以下のような場面で「できないのか〜」という状況に遭遇しました。
● 仕入れAPI（仕入れとサプライヤー）のAPIだけが存在しないのでロケーションではない複数の仕入先からの仕入れを自動化できない。
通常WMS側で先に在庫反映する事が多いので敢えて作っていないのかもしれません。
● デフォルトでは注文一覧のフィルタリングがメモなどでソートできずそこまで柔軟ではない。
配送希望日などをメモに入れて運用する場合、メモの配送希望日毎に顧客のフィルタリングを行いたい場合、メモによるソートが無理なので受注webhookのタイミングでタグなどに配送希望日を入れるようにしないといけない。
● Shopify Plusでないとオーソリ（与信確保）の期間が7日間しか保てない。
Shopify Plusの場合オーソリの期間を30日まで伸ばすことができますが、Shopify Plusではない場合7日間しか待てないので予約注文など決済のタイミングをコントロールする場合は注意が必要です。
● APIを使用するときlimitが存在する。
Shopify Plusではlimitの上限が上がりますが、連続で大量のAPIを叩く場合limitに達してAPIを叩けなくことがあります。
● チェックアウト画面をカスタムするためにはShopify Plusでないといけない。
チェックアウト画面で独自にアナウンスを出す場合や、特定の項目を表示しておきたいこともありますがShopify Plusでないとカスタマイズができません。
また、Shopifyを調査している中で、私がオススメしたいアプリが2つあります。
MechanicとShopify Flowです。
6-1.Mechanic
ひとつ目は月額の有料アプリである「Mechanic」というアプリです。
私はこのアプリをShopifyの使用において必須と考えています。
Mechanicは豊富なテンプレートを提供しており、特定のイベントが発生した際に特定の処理を実行することが可能です。以下にいくつかの例を挙げます。
● 受注が行われたタイミングで特定の文字列を注文にタグ付けする。
● 特定の商品を注文したユーザーにタグを付ける。
● 在庫がなくなった際には自動的にメール通知を行う。
開発の工数を大幅に削減してくれるばかりでなく、効率的な運営を実現するのに役立ちます。
MechanicはShopifyの豊富な機能を活用し、よりスムーズな業務フローを実現するための優れたアプリです。ぜひ導入を検討してみてください。
6-2.Shopify Flow
もうひとつはShopify Flowというアプリです。
以前はShopify Plusでしか利用できませんでしたが、最近ではShopify Premium Planでも利用することができるようになりました。
Shopify FlowはMechanicとほぼ同じ機能を備えたワークフロー自動化アプリです。
無料プランでも十分に活用することができるため、おすすめです。
Shopifyのさまざまな作業を効率化し、自動化することができます。ぜひ試してみてください。
7.ShopifyPlusという選ばれしプラン
Shopify Plusと他のプランとの待遇にはかなりの差があります。
これは当然のことですが。
Shopify Plusの料金は月額$2,000と設定されており、年間で約240万円のランニングコストがかかるため、個人使用ではほぼ不可能な金額です。
企業であっても、スモールスタートをしたい場合や初期コストを抑えたい場合には、ランニングコストが負担となることがあります。
Shopify PlusでマルチパスSSOを使用する場合、Auth0を利用することが一般的です。
Auth0は月間アクティブユーザー（MAU）が1万人を超えると有料となり、料金が高額になります。
エンタープライズプランの場合、月額約$1,500の費用が発生します。
toC（顧客向け）ビジネスでは、これはかなりの負担です。
合計すると、月額$3,500、年間420万円になります。
さらに在庫連携や出荷システムでWMS（配送・在庫・入荷管理システム）を導入する場合、月額〇〇万円以上の追加費用がかかることもあります。
ある程度の投資を覚悟してスタートできる場合は問題ありませんが、最小限の投資で始めたい場合は、Shopifyの価値を見出すことが難しい選択肢になるかもしれません。
ヘッドレスでShopifyを使用した制作事例を見てみてください。
ほとんどがShopify Plusではありません。
Shopify PlusのマルチパスSSOを導入すると、ストアフロントとチェックアウト間のログインにおけるシームレスな体験を実現できます。
ただし、金額を考慮すると、ストアフロント側ではログイン状態の管理を諦め、デフォルトのShopify側でのみログインを管理するという方法が一般的です。
このようにセッションを維持することで、ストアフロントとチェックアウトで2回のログインが必要となるというUX（ユーザーエクスペリエンス）の問題を回避できます。
ある意味、諦めも重要な要素となるかもしれません。
Shopifyを導入する際には、できることに限界があることや、いくつかのポイントで失敗する可能性があることに注意が必要です。
しかし、Shopifyは非常に強力なツールでもあり、ヘッドレスECを構築する場合には、Shopifyの導入を検討する価値があるかもしれません。
それでは。
この記事が気に入ったらサポートをしてみませんか？