Shopifyで出来ることが増えている

弊社でも「Shopify」でECサイトを作らせていただくことが増えております。
このご要望にはこのアプリ、この機能にはこのapiといったことにも慣れてきたと感じています。

Shopifyの特徴については、以前のブログにまとめられています。
→yepがIT導入支援事業者に採択されました！

そして、「Shopify Flow」がスタンダードプランでも無料で使用できるようになったり、
翻訳アプリの「Translate & Adapt」が2022年の9月にリリースされたり、
日々できることが増えていっているShopify。

一番使いたいのが「Hydrogen + Oxygen」
参照：Hydrogen: Shopify’s opinionated framework for building headless e-commerce

Hydrogenとは？

Reactベースのフレームワークであり、開発者が素早く構築をスタートして開発をするために必要なすべてを備えています。

1.高速なユーザーエクスペリエンス：高速な読み込みとレスポンシブ
2.マーチャントのための最高の機能：パーソナライズされた、文脈的で、動的なコマース
3.優れた開発者エクスペリエンス：簡単で、メンテナンスしやすく、楽しいこと

参照：Hydrogenを使用したストアフロントはなぜパフォーマンスが高いのか

Oxygenとは？

Oxygen は、Hydrogen ストアフロント向けに Shopify が推奨する展開プラットフォームです。
Oxygenが使用できるのは2022年11月1日現在、以下となっています。

Oxygen は、Shopify PlusプランとShopify Plus パートナーのサンドボックス ストアでのみ利用できますが、Shopify プランと Advanced プランでも間もなく利用できるようになります。
参照：Oxygen overview

Hydrogenで構築し、Oxygenでデプロイが理想形ですが、
Shopify Plusには入っていないためまだ、使用できていません。
間もなくがどれくらい間もなくなのか、焦らしてきます。
Oxygen以外だとcloudflare等でデプロイが可能です。

ちなみにShopifyのプラン名は日本語と英語で違っていて、英語でドキュメントを読んでいる際には、注意が必要です。
日本：ベーシック、スタンダード、プレミアム
英語：Basic、Shopify、Advanced

Hydrogenを試してみる

Hydorgenをローカル環境のVirualboxに構築をしてみました。

#nodejsとyarnをインストールする
curl -sL https://rpm.nodesource.com/setup_16.x | bash –
yum install -y nodejs
npm install -g yarn

#ディレクトリ作成
mkdir h2
cd h2

#作成
npm init @shopify/hydrogen

#移動
cd hydrogen-app

#virtualboxの場合
vi vite.config.js
  server: {
    host: true
  }

#hydrogen.config.jsの編集
storeDomain：ストア名.myshopify.com
storefrontToken：ストアフロントAPIのアクセストークン

#run
npm run dev

#アクセス
ブラウザからlocalhost:3000でアクセス

余談ですが、ShopifyにHydrogenの問い合わせをしたら、水素を売るのか？と言われました。