ShopifyとGatsbyJSでヘッドレスコマースサイトを作る方法
こんにちは、代表兼エンジニアの高崎です。
寒くなってまいりましたが、皆様お体の調子は大丈夫でしょうか。
私達の会社では「世界観を作ってモノが売れるを、すべての人へ。」をミッションに主に製造小売のお客様のECサイトを制作しているのですが、現在、高速で開発効率の高い次世代のECサイトの作り方「ヘッドレスコマース」を研究しています。
この記事では基本を共有できればと思います。
目次
ヘッドレスコマースとは
従来型のECサイトが「デザイン（フロントエンド）」と「データ（バックエンド）」が一体化していたのに対し、ヘッドレスコマースは、「デザイン」と「データ」がきれいに分離したコマースサイトの作りです。
ヘッドレスを採用する理由
主にサイトの動作速度と開発効率を上げることができることから海外のD2Cブランドのサイトで採用が進んでいます。
とくにサイトの表示速度が２秒遅くなるだけで直帰率は50%増加すると言われているので、コンバージョンの改善に影響が高いでけでなく、SEO面での優位性もあります。
そのためヘッドレスコマースは、メディアコマースと呼ばれる「コンテンツで集客して商品の販売に結びつける」ECサイトには特に向いていると言えます。
具体的なメリットは以下です。
- サイトのフロントエンドを静的にできるため、CDNという高速なサーバーで配信することができる。
- サイトをGoogleの推奨する次世代のWebの作り方「PWA（Progressive Web Apps）」で作ることができるので高速でSEOに有利なサイトを作ることができ、スマホで電波が通じないときなどにある程度オフラインキャッシュでページを表示できる。
- Webサイトとは別にスマホアプリなどを作りたい場合などのマルチデバイス展開がしやすい。
- 商品データはShopifyなどのEコマースSaaS、コンテンツはWordPressといったCMSで作ってる場合、
- バックエンドとフロントエンドを完全に切り離せるので、分業しやすく属人性を廃することができる（スターエンジニアに依存したりせずに済む）
- バックエンドが複数あってもフロントエンドの開発は一つで済む（WordPressとShopifyで別々にテーマ開発したりせずに済む。ダブルメンテナンスや独自言語を学習する必要がない）
- サーバレスで構築できるので、サーバーメンテナンスなどを考える必要なくお客さんの体験のデザインに貴重なエンジニアの開発リソースを集中できる
現時点でヘッドレスを採用するデメリット
- フロントエンドに静的技術しか使えないので、OGP、お問い合わせフォーム、サイト内検索、コメント、レビューなどの動的要素を使った機能がある場合どう置き換えるか検討する必要がある（それぞれ代替手段はある）。
- サードパーティ制プラグイン、アプリは対応してないことがほとんどで、いざというときは自力実装になる覚悟が必要
ヘッドレスを採用したShopifyを使ったECコマースサイトの事例
こちらの記事が詳しいです。
20 examples of Headless commerce powered by Shopify | We Make Websites
国内の事例は見つけられなかったのですが、ご検討の方はぜひ弊社にご相談ください！
また国内でのヘッドレス事例を知ってるよって方、下の感想フォームより教えていただけるとすごくうれしいです。
Shopify導入メリット
こちらの記事ではShopifyをバックエンドとしてヘッドレスコマースを作ります。Shopifyのメリットに関しては以下をご覧ください。
GatsbyJSとは？
フロントエンドはGatsbyJSで作ります。
GatsbyJSはReactベースの静的サイトジェネレーターです。
Vue.jsにとってのNuxt.jsのイメージですね。
GatsbyJSのメリット
- GatsbyJSの作りに添うだけでPWA対応でき、PWAに対応してるのでネイティブアプリを作らなくてもAndroidのプレイストアにアプリとして並べることができる。
-
ドキュメントが温もりを感じるぐらい親切で豊富（英語のみ）。
-
ShopifyといったサービスやWordPressやContentfulといったCMSとAPI連携するためのプラグインが豊富。
ShopifyとGatsbyJSでヘッドレスコマースサイトを作る
ここから本題であるShopifyとGatsbyJSでヘッドレスコマースサイト作る方法に移ります。
1.Gatsbyをインストールする
本家のドキュメントがとても丁寧にできてるので、こちらを参照してGatsbyJSをインストールします。
2.ShopifyでStorefront APIを有効化する
ヘッドレスコマースサイトを作るために、ShopifyのStorefront APIを有効化します。
2-1.管理画面の「アプリ管理」→「プライベートアプリを管理」をクリック
2-2.「新しいプライベートアプリを作成する」をクリック
2-3.赤枠のアプリ名、メールアドレスを入力し、「このアプリがストアフロントのAPIを使用してストアフロントデータにアクセスできるようにする」のチェックボックスにチェックを入れます。
2-4.使用するAPIにチェックを入れ、保存を押します。
2-5.確認画面が出てくるので「私は理解しています。アプリを作成します。」をクリックしてアプリを作成します。
2-6.ストアフロントのアクセストークンが発行されるので、コピーしておきます。
3.GatsbyJSのShopifyスターターキットを使う
これでヘッドレスコマースサイトを作成する準備が整いました。ここから、こちらのGatsbyJSスターターキットを使って実際の構築に入りたいと思います。（動作デモ）
3-1.ターミナルで以下コマンドを実行し、スターターキットをダウンロードしてプロジェクトを作成します。
gatsby new gatsby-shopify-starter https://github.com/AlexanderProd/gatsby-shopify-starter
3-2.以下コマンドでプロジェクトのルートディレクトリを展開します。
cd gatsby-shopify-starter
3-3.プロジェクトのルートディレクトリに開発環境用の設定ファイル「.env.development」と本番環境の設定ファイル「.env.production」が生成されます。こちらに自分のShopifyストアの情報を記載します。
SHOP_NAME=自分のShopifyストアのアカウント名（〇〇.myshopify.comの〇〇の部分）に置き換える
SHOPIFY_ACCESS_TOKEN=2-6で発行したアクセストークンに置き換える
＊間違えてこのアクセストークンが外に公開されないように細心の注意をお願いします。.envファイルの取り扱い、GitHubを始めとしたGitレポジトリにプッシュする際は公開設定などにご注意ください。
3-4.以下コマンドで開発用サーバーを起動します
gatsby develop
3-5.http://localhost:8000/アクセスし以下のように自分のストアの商品が表示されれば成功です！
3-6.以下コマンドで、本番環境用のファイルが生成されます。
gatsby build
本番公開したい場合、ここで生成されたプロジェクトのルートディレクトリ直下にあるpublicディレクトリ以下のファイルをサーバーにアップします。
おまけ：Firebaseにデプロイする
上記３−６で、静的に生成したサイトをホスティングする手段としては、NetlifyかFirebaseがメジャーだと思います。Firebaseの方がより高速というデータがあり、私達の会社ではFirebaseを使うことが多いです。
ホスティング方法は以下をご覧ください。
まだまだ新しい技術ですので、この記事にお気づきの点がありましたら下の感想フォームよりご連絡いただけるとうれしいです。
長期的にはこの作り方の方がサイトの動作が高速で開発効率が高く、エンジニアのリソースをより顧客体験部分に集中させることができるのでECサイトやCMSは、どんどんヘッドレスになっていくと感じています。
また今回は基本の話のみでしたが、私達の会社では自社のECサイトをヘッドレスにリニューアルしている最中なので、実際の案件での知見ものちのちこのブログで共有できたらと思います。
興味ある方は私達の会社のTwitterをフォローください！
2020年3月24日追記 実際にヘッドレスコマースサイトを作っての学びをこちらの記事にしました。
どうぞ宜しくお願いします！