Closed5

Hydrogen で始める Shopify を利用する独自 Storefront 開発

fujimotoshinjifujimotoshinji

Shopify は Storefront（ECサイト）を開発する選択肢を大きく 2つ用意しています。

  • テーマと呼ぶテンプレートによる開発
  • Storefront API を利用して独自 UI で開発

前者はデータ登録すればすぐにプロダクトレディな状態からスタートでき、Liquid という独自言語でカスタマイズも容易にできます。
一方で EC サイトの規模が大きくなって画面増やしたり、外部 API のデータを利用しようとすると 1から Liquid で画面作ったり、JavaScript を埋め込んだり、少し大変になってきます。
そういう場合に後者の選択肢を利用できます。

API を利用した開発はエンジニアが持つ技術スタックから選定するのが一番ですが、一つの選択肢として Hydrogen があります。

ここでは以下を調査してみます。

  • Hydrogen とは？
  • Hydrogen の開発の始め方
fujimotoshinjifujimotoshinji

Hydrogen とは？

https://shopify.dev/docs/custom-storefronts/hydrogen

Hydrogen は Remix フレームワークをベースした Shopify Storeafront API を簡単に利用するためのフレームワークです。
Hydrogen は以下のような機能を持ちます。

  • Remix フレームワークとの統合
    • loader や action で Shopify の機能を容易に呼び出すことができる
  • Remix に限らず他の React フレームワークでも利用できる
    • UI パーツとして利用可能な React コンポーネントを用意している
  • サンプル Storefront 実装
    • Hydrogen で実装した商品閲覧、カート、購入、アカウント管理まで可能なサンプル EC を生成できる
  • 実行環境（Oxygen）との統合
    • Shopify が管理する実行環境に簡単にデプロイできる
fujimotoshinjifujimotoshinji

Hydrogen の開発の始め方

https://shopify.dev/docs/custom-storefronts/hydrogen/getting-started/quickstart

ローカルでサンプル EC を起動してみます。

npm コマンドで 4つの設定項目をインタラクティブに行うことでサンプル EC を生成できます。

$ npm create @shopify/hydrogen@latest
Need to install the following packages:
  @shopify/create-hydrogen@latest
Ok to proceed? (y)
?  Choose a template:
✔  Demo Store

?  Choose a language:
✔  TypeScript

?  Where would you like to create your app?
✔  hydrogen-storefront

?  Install dependencies with npm?
✔  Yes, confirm

生成されたら起動します。

$ cd hydrogen-storefront
$ npm run dev

> demo-store@0.2.1 dev
> shopify hydrogen dev


🏁 Initial build: 7.177s
🚥 MiniOxygen server started at http://localhost:3000

Webブラウザから http://localhost:3000 にアクセスすると以下のようなページにアクセスできます。

fujimotoshinjifujimotoshinji

サンプル EC の機能をざっくり見てみる

ホーム

  • ヒーローエリア UI のコレクション
  • カルーセル UI のピックアップ商品
    • 商品画像、商品名、価格（ディスカウントの場合は割引前も表示）
  • カルーセル UI のピックアップコレクション
    • コレクション画像、コレクション名

コレクション一覧

  • コレクション画像、コレクション名

商品一覧

  • 商品画像、商品名、価格（ディスカウントの場合は割引前も表示）

記事一覧

  • アイキャッチ画像、記事タイトル、公開日

コレクション

  • コレクションタイトル、説明
  • 商品画像、商品名、価格
  • ソートルールは購入数、価格、新しい、Featured？

商品詳細

  • 商品画像、サイズ、種類、説明、配送方法、返品ルール

カート

  • 商品画像、商品名、価格、サイズ、色
  • 数量
  • 合計価格

チェックアウト

チェックアウト画面は Hydrogen で生成したページではなく Shopify ページでした。

ログイン画面

キーワード検索

fujimotoshinjifujimotoshinji

自身の Shopify ストアに接続する

プロジェクトルートにある .env ファイルで向き先の Shopify ストアを指定できます。

ストアフロント API トークンを発行する

Shopify アプリストアからヘッドレスチャンネルをインストールします。

https://apps.shopify.com/headless

日本語だとなぜか「Shopify での」という名前になっています。

ヘッドレスを開いて、ストアフロントを追加します。

パブリックアクセストークンと管理画面の URL に含むストア ID をコピーします。

.env ファイルの編集

SESSION_SECRET="foobar"
PUBLIC_STOREFRONT_API_TOKEN="<パブリックアクセストークン>"
PUBLIC_STOREFRONT_API_VERSION="2023-04"
PUBLIC_STORE_DOMAIN="<ストアID>.myshopify.com"

アプリの起動

再度起動します。

$ npm run dev

ストアに作成した商品が表示されます。

このスクラップは2023/05/01にクローズされました