ピン留めされたアイテム

【検索から来た人用】不完全な内容なので何も参考にできる内容はありません。ブラウザバック推奨です。検索汚しすみません...。

masa5714

やってみる。

Hydrogenを使うために必要な知識

ドキュメントを読みながら出てきた技術を下記に記載していきます。

Shopify
npm
React
Remix
GraphQL
Tailwind CSS（使うのであれば）
Oxygen（デプロイ先。Vercelみたいなもの。）

Online Store 2.0であれば、HTML + CSS + Liquidだけで良かったので、
そう考えると若干ハードルが上がる感覚はある。Next.jsを触ったことがあるなら恐れる必要は無さそうだ。

masa5714

Shopify Hydrogenとは？

Shopifyが提供するストアフロント（閲覧者のためのWebページのこと。いわゆるECサイト）を構築するための開発キットみたいなもの。

これまでは爆裂に高いShopify Plusしか使えなかったが、Basicプランでも開放されており、誰でも触れるレベルになっているんだとか。

Shopify Hydrogen公式サイト / リリース情報 / Github
公式ドキュメント

Shopify公式によるHydrogenのパフォーマンスに関する記事

公式ドキュメントから情報を探すときのコツ

Hydrogen のほかに Custom Storefront という表現も使われている。
特にサイト内検索でドキュメントを探すときは Custom Storefront タブを活用すると良い。

masa5714

Next.jsは使えないの？

Shopify Hydrogenと Next.js には親和性は一切ない。
もしもNext.jsを使って実装したいのであれば、Storefront APIを用いて実装することになりそうだ。
しかし、ISRで実装すべきページがあったり、何かイベントが発生したときにWebhookで各ページを再生成する設定をちゃんと行わないとイケないはずなので、結構面倒くさそうな気がしている。（加えて、ISRを使うとなるとVercelにデプロイする必要が出てくる。）

HydrogenはNext.jsのようにReactベースで開発するために必要なものをパッケージ化してくれているもの。なので、Hydrogenだけで自動的にルーティングしてくれたり、色々とやってくれるらしい。（公式によるルーティングに関する言及）

ストア構築をするならHydrogenを採用したいところ。
Hydrogen + Oxygenを採用すれば、恐らくNext.js特有の面倒な再生成まわりの設定も不要になるのではないでしょうか？（希望）知らんけど。この辺りは実際に触ってみないと何とも言えないね。

なお、Next.jsを使う場合は hydrogen-react というパッケージを使うといいらしい。

masa5714

Oxygen というものについて

OxygenはShopifyが提供するホスティングサービスのこと。Next.jsで例えるならば、Vercelと同じようなもの。ちょっと前の記事ではShopify Plusしか使えないという情報があるが、現在はベーシックプラン以上であれば使える。つまり、誰でも使える状態にあると言えるだろう。

Oxygenの裏側としてCloudflareが使われている模様。（多分）

なお、Vercelのような専用のWebサイトはまだ作られていない模様。
サイトが無いだけで実態が無いサーバーのように感じちゃうね。

masa5714

開発フォルダを作成する

npm create @shopify/hydrogen@latest

このコマンドを実行すると、いくつか質問される。

Choose a template:
(1) Hello World でいい。

Choose a language:
どちらでも良いが、(2) TypeScript の方がいい。
TypeScriptが分からなければJavaScriptを選べばいいと思います。

Where would you like to create your app?
プロジェクトの名前を自由に入力してください。

Install dependencies with npm?
依存関係のnpmパッケージをインストールしてもいいか？ということなので、 Yes, confirm で大丈夫。

masa5714

.env ファイルの設定をする

# These variables are only available locally in MiniOxygen

SESSION_SECRET
PUBLIC_STOREFRONT_API_TOKEN
PUBLIC_STOREFRONT_API_VERSION
PUBLIC_STORE_DOMAIN

これらの環境変数が用意されています。

SESSION_SECRET
セッションを暗号化するためのキーです。
自由に適当に決めてもOKですが、ランダムな文字列が推奨されています。

PUBLIC_STOREFRONT_API_TOKEN
APIキーを入力します。
APIキーの発行はこの後でやるので一旦空白で大丈夫です。

PUBLIC_STOREFRONT_API_VERSION
Shopifyが提供するAPIのバージョンを指定します。
バージョンについてはこちらのページを参照するとよいでしょう。

PUBLIC_STORE_DOMAIN
連携したいストアのドメインを指定します。
例えば、 https://hogehoge.myshopify.com がストアURLであれば、 "hogehoge.myshopify.com" と入力しておけばOKです。

masa5714

Storefront APIのキーを発行する

ストア管理画面より：
設定 → アプリと販売チャネル → アプリを開発 → アプリを作成
の順でページを進んでいきます。

アプリ名には任意の名前を入れて、「アプリを作成」ボタンをクリックします。

ストアフロントAPIスコープを設定する ボタンをクリックします。
ストアフロントAPIアクセススコープ 欄のチェックを全部付けます。
※このチェック項目は自分で調べながら必要・不要を判断してください。
最後に「保存」をクリックします。

「アプリをインストール」ボタンを押して有効化します。

ストアフロントAPIのアクセストークン という欄にアクセストークンが発行されますので、前項の .env の PUBLIC_STOREFRONT_API_TOKEN に入れましょう。

APIのリミットレート制限について

Storefront APIについては全く制限が無いのできにする必要なし。
※2023年4月1日に解除された模様。以前はレート制限があった。

ただし、１IPアドレスあたり1秒間隔でリクエストが叩けるっぽい？（リークという概念らしい。Shopifyにおけるリークの説明はこちら）
人数による制限はないが、個人レベルで気づかない程度の制限があるらしい。不正なアクセスじゃなければまず大丈夫かと。

masa5714

Hydrogenを起動する

npm run dev で開発環境を起動します。
起動が完了すると、 localhost:3000 にアクセスできるようになります。

◆ .env ファイルが正しく設定できている場合

◆ .env ファイルが正しく設定できていない場合
※APIのチェック項目に不備がある場合にもこちらの見た目になります。

前者のようになっていれば成功です！
開発スタートできる状態となりました。

masa5714

トップページの見た目を編集してみる

/apps ディレクトリに routes フォルダを作成し、 _index.tsx というファイルを作成します。

_index.tsx

export function meta() {
  return [
    {title: 'Hydrogen'},
    {description: 'A custom storefront powered by Hydrogen'},
  ];
}
export default function Index() {
  return (
    <div>
      <h3>Hello from the home page!</h3>
    </div>
  );
}

このような記述をします。
一旦、Ctrl + C などで開発環境をストップします。 npm run dev で再度起動します。
※公式ドキュメントでは自動で切り替わるような記述がありますが、新規でルーティングを作成した場合には再起動しないと反映されないようでした。

その後、 localhost:3000 にアクセスしてみましょう。

見た目が切り替わり、 _index.tsx の記述が表示されていることでしょう。

masa5714

新規でページを追加する

routes フォルダの中で下記のファイルを作成してみます。

about.tsx このファイル名の場合は /about のページが作成できます。

company._index.tsx としても /company のページが作成できます。
company.info.tsx とすれば /company/info のページが作れます。

/works/015519e9-8d51-4fb8-ab38-17e81603fcd8 や /works/9b9d9334-9381-42de-8898-481fd780fe8d などのURLを作りたいのであれば、 works.$id.tsx のようにすればOKです。

詳しくは下記の公式ドキュメントを確認してください。（Remix）

※現在（2023/06/08）HydrogenにはRemix v1.15.0が使われていますが、v2_routeConvention: true となっているのでv2のルートを使っていく方針が良いかと思います。

masa5714

GraphQLの実行シミュレーター（プレイグラウンド）が用意されている

npm run dev で開発環境を起動すると、
localhost:3000/graphql でシミュレーターを開くことができる。

【公式ドキュメント】GraphQLのエンドポイント

サイドバーの中段あたりからクエリ掲載ページのリンクが記載されている。
https://shopify.dev/docs/api/storefront

このスクラップは6ヶ月前にクローズされました