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の問い合わせをしたら、水素を売るのか？と言われました。