【Shopify】online store 2.0の新テーマ”Dawn”をGithubと同期させて開発する!

2021/6/29に開かれたShopify Unite 2021で発表されたShopifyの新バージョン。

新バージョンといっても、これまでに制作されたテーマやアプリは変わらず使用できる。

今回追加された内容は以下のようにいくつかあるが、

  1. Sections Everywhere
  2. メタフィールド
  3. アプリがテーマから分離(干渉しない、導入容易)
  4. チェックアウトページがカスタマイズ可
  5. テーマとGitHub統合
  6. ページレンダリング5倍速く
  7. チェックアウト2倍速く

そのうち、ここでは、フロントエンドエンジニア要件となる、
1″Sections Everywhere”、5″テーマとGitHub統合”について特集しようと思う。

2″メタフィールド”についてはまた今度。

Shopify複数人体制での参考例

かねてよりチーム開発でGithubを使ったバージョン管理の制作方法は、今後、個人単位でも、より一般化していく必要がありそうです。

Github使用した制作では、管理画面のテーマを3つに分岐して開発するなどがベストプラクティスとして挙げられます。

リリースの順番の例

デベロップ→ステージング→本番

※以下テーマ名は例です

・本番(プロダクション)
Dawn-production

・ステージング(確認用)
Dawn-staging

・デベロップ(開発用)
Dawn-development

望ましい運用は本番(プロダクション)を管理画面から直接、修正しない事。

管理画面から編集する場合は編集する人を限定すること。

デベロップ(開発用)テーマで修正を行い、ステージング(確認用)テーマで確認をします。

Gitブランチの例

develop

master

original

feature/0001-xxx

feature/0002-xxx

feature/0003-xxx



※masterブランチとdevelopブランチは開発前の段階では、同じ内容と考えてください。

※originalと名前がつくものは触らない事にします、有事の際にデフォルトへ戻すためです。

config.yml

各テーマで同じconfigを使用します。

Dawn-production
Dawn-staging
Dawn-development

config.yml

# 本番環境

production:
  password: パスワード
  theme_id: 1111111111 ←例
  store: abcd.myshopify.com ←例

# ステージング環境

staging:
  password: パスワード
  theme_id: 1234567890
  store: abcd.myshopify.com

# 開発環境

development:
  password: パスワード
  theme_id: 9999999999
  store: abcd.myshopify.com

Shopify CLIのインストール

以下資料を読んでコマンドにて操作を行い、shopify2.0.2のCLIがローカルのマシーンにインストールできます。

https://shopify.dev/themes/tools/cli/installation

Windowsの方は、ひと手間かかります。

RubyInstaller forWindows

を使用してRubyというプログラム言語がWindowsにインストールされている必要があるためです。以下を参考にインストールしましょう。

Downloads
The easy way to install Ruby on Windows This is a self-contained Windows-based installer that includes the Ruby language, an execution environment, important...

Powershellでもインストールができたところの画面です。まだ道のりは始まってもいないんだけど、2.0への道に近づいていると思い、ほくそえみましょう。

WindowsのPowerShellででGitコマンドを使用する方法

(macユーザは「①SSH Key発行」まで読み飛ばしてOK)

参考資料

PowerShell で Git をもっと便利に使う

404 Not Found - Qiita - Qiita
posh-git/README.md at master · dahlbyk/posh-git
A PowerShell environment for Git. Contribute to dahlbyk/posh-git development by creating an account on GitHub.

の記事を参考に、

chocolateyがインストールされているうえで、

Powershellアイコン右クリック→「管理者権限で実行」しているPowerShelにて、

choco install poshgit

を実行。

これで、ローカルに.gitというファイルがあるディレクトリを、gitに連携させるための、gitコマンドを唱えることができるようになりました。

①SSH Key発行

次に、

PowerShellによるローカルマシン<–>Gitの初期設定(連携登録)

sshKeyを作成する。 (hoge以降はgithubに登録しているメアド)

ssh-keygen -t rsa -C  mail@example.com

 作成するディレクトリとファイル名を聞かれる。~/.ssh/id_rsaとなっていれば、なにも入力しないでenterでOK。

#——————-

Enter file in which to save the key (~/.ssh/id_rsa):

#——————-

パスフレーズ(パスワードより長いキーワード)を登録するかと聞かれるので、特に必要なければ何も入力しないでenterでOK。

#——————-

Enter passphrase (empty for no passphrase):

#——————-

もう一度同じパスフレーズを入力してくださいと聞かれるので、また何も入力しないでenter。

#——————-

Enter passphrase (empty for no passphrase):

#——————-

~/.ssh以下のファイルを確認する

 ls ~/.ssh

id_rsaとid_rsa.pubがあることを確認する

id_rsa id_rsa.pub

(詳しくは触れませんが、Source Treeという、よりグラフィカルなgit操作ツールのSSH設定はこちらです。は https://qiita.com/evitch/items/5d87b8aab5cd72695d2b )

②公開鍵が保存されているファイルの中身を表示する。

less ~/.ssh/id_rsa.pub

(Powershellの場合、lessがないので、同様のコマンドであるmoreコマンドを使用 more ~/.ssh/id_rsa.pub )

公開鍵が表示されるので、範囲選択してコピーする。(最後のメールアドレスはコピーしない)

ssh-rsa hogehogehogehoge...~~略~~...hogehoge  mail@example.com

③使用する秘密鍵をローカルのconfigファイルに設定する。

最後にターミナルに戻り、configファイルに使用する秘密鍵を設定してあげます。

vimを使います。

vimはコマンド上で起動するテキストエディタです。

Powershellはデフォルトではvimコマンドを使えませんので、インストールするにはこちらを参考に。

Powershellでvimを使う - Qiita
vimのインストール 以下リンクから日本語版or英語版どちらかを選んでインストール。 kaoriyaさん(日本語版) 本家(英語版) -> PC: Windows版は「MS-DOS and MS-Windows」からgvimXX.exeをインストール インストールす...

また、vimコマンドが使える前提で進めてしまいますが、使えない場合は適宜対応してください。

※ざっくりVimの使用方法

  • I(アイのキー)でインサートモードになる
  • ctrl + C で、インサートモードを脱し、コマンドモードになる(なぜかEscで行うと書いている記事が多かったのですが、僕はEscキーでは反応しませんでした。謎。)
  • コマンドモード時に、:qaで保存せず終了(先頭の:(コロンをお忘れなきよう!))
  • コマンドモード時に、保存してから終了:wq(先頭の:(コロンをお忘れなきよう!))

コマンドで以下のようにvimを立ち上げて~/.ssh/configを編集する。

vi ~/.ssh/config

-> 何も表示されていない場合は、下記内容をコピペする。

-> configファイルが既に存在する場合は下記内容を追記する。

Host github
  HostName github.com
  IdentityFile ~/.ssh/id_rsa
  User git

ctrl + C で、インサートモードを脱し、コマンドモードにし、:qaで保存せず終了(先頭の:(コロンをお忘れなきよう!))

Github上のテーマデータをダウンロード

コマンド:shopify init

テーマを構築するための開始点として使用するために、Gitリポジトリをローカルマシンに複製します。

ただし、すでにローカルにGitと連携しているテーマがある場合は、このコマンド操作は不要です。

次の”shopifyストア側で設定”に進んで大丈夫です。

shopify theme init [テーマ名] -u [クローンを作成するGitリポジトリのURL]

例)

shopify theme init Dawn-main -u https://github.com/nanaironanaoto/hogeproject

※ブランチは選択できない。mainのブランチがダウンロードされる。

Shopify – GitHubの統合

①Shopifyストア側での設定

ここで以下のようにエラーが出て接続ができなかったのですが、

ブラウザを変えてやってみたらうまくいきました!

からくりは不明ですが、shopify側に保存されたなんらかの過去のセッションが邪魔をしているのかなぁ?とか推測してます。(過去のセッション情報はブラウザに保存されているので)

接続できたら、以下の通りGitHub側でShopifyアプをインストールする必要がある。

https://shopify.dev/themes/tools/github

GithubにGithubアプリをインストールするhttps://github.com/apps/shopify-online-store

“Install”を選択すると、Shopifyのロード中画面になり、接続が完了する。

②GitHubへの接続

テーマに接続されているリポジトリのみが、ストア内の他のユーザーに表示されます。ブランチがテーマに接続された後、テーマのアクセス許可を持つすべてのユーザーがそのブランチを切断できます。

Shopifyログインに接続できるGitHubアカウントは1つだけです。

GitHubへの接続を設定するには、所有者またはスタッフのアカウントを使用してストアに直接ログインする必要があります。パートナーダッシュボードからログインするのではなく、必ずストアのURL(たとえばmy-example-store.myshopify.com/admin)を使用してログインしてください。

Shopify管理者をアカウントまたはリポジトリに接続すると、スタッフアカウントのみが次のことを実行できます。

  • アクセスできるリポジトリとブランチを接続
  • GitHubアカウントをShopifyから切断

複数のスタッフメンバーがリポジトリへの接続を管理する必要がある場合、各スタッフメンバーは自分のスタッフアカウントでShopify – GitHub統合をセットアップする必要があります。

GitHubアカウントまたは組織をShopifyストアから完全に切断する場合は、GitHubを介してShopify – GitHubアプリをアンインストールする必要があります。

※ShopifyでGitHubリポジトリに接続されているテーマを管理するときは、次の点を考慮してください。

  • ブランチが切断された後は、ブランチをテーマに再接続することはできません。ブランチを再接続すると、新しいテーマとして追加されます。
  • 未公開のテーマがブランチに接続されてから公開された場合、そのテーマはブランチへの接続を維持します。

ブランチとテーマの関係、およびブランチを効果的に使用するためにワークフローを最適化する方法を理解するには、バージョン管理のベストプラクティスを参照してください。

https://shopify.dev/themes/best-practices/version-control

注意点としては、

templateディレクトリ

setting_theme.json

をgitignore(同期から除外指定)しないといけないこと!

新テーマでは、templateディレクトリ内のjsonファイルが、管理画面からのノーコード編集で書き変わってしまうためです。

③コマンド:shopify serve

ローカル上でホットリロード(ブラウザのリロードなし)で非同期で更新されます。

これで、Shopifyが限りなくローカル環境にちかい形で、かつスピーディーにシームレスに開発ができるようになりました。

①まず、ローカル上のどのテーマをプレビューするかを指定します。

cd [Githubと連携しているローカルのテーマデータのディレクトリパス]

shopify login --store 〇〇〇.myshopify.com(ストアのデフォルトURL)

②ここで、ブラウザが起動し、Shopifyストアへのログインを求められます

↓ 

③そして、ログインできたら、serveコマンド実行

shopify theme serve

ブラウザに

http://127.0.0.1:9292

のURLを入力して、テンポラリーな開発テーマをプレビュー!

この①~③の一連のコマンドで、ローカルマシンにあるテーマを開発テーマとして、接続しているストアを表示します。
日々の制作業務で上記コマンドをいつでも使えるように、引き出しにしまっておきましょう!

これまででいう、theme kitのコマンドに該当するものと思えば良いでしょう。

現在のテーマを開発テーマとして接続しているストアを表示する

shopify theme serve

以下のエラーが出たら、

Please add the following to your Gemfile to avoid polling for changes:
    gem 'wdm', '>= 0.1.0' if Gem.win_platform?

以下のコマンドを実行すると解決しますので、

gem install wdm

再度

shopify theme serve

を実行しましょう。

開発テーマのプレビュー用URL

http://127.0.0.1:9292

このURLでサーブしたテーマを、Google Chromeでのみホットリロードプレビューで開発できます。

動画キャプチャを作成しました。

Shopify CLIのコマンド一蘭

https://shopify.dev/themes/tools/cli/theme-commands

(おまけ)コマンド : shopify populate

プレビュー用にテスト商品やテストアカウント、テスト注文を作成する。

注文時の動作テスト、マイページへどう記録されるか、などを、ラピッドに確認できる。

2.0のテンプレートファイルの種類

テーマテンプレートに使用できるファイルタイプは2つあります。

  1. JSONテンプレート
  2. liquidテンプレート

JSONテンプレート

テンプレートでセクションを使用する場合は、2.0で使えるようになったJSONテンプレートを使用する必要があります。

JSONテンプレートは、アプリセクションを含むセクションを追加、削除、再注文するための柔軟性をマーチャントに提供します。さらに、settings_data.jsonのデータ量を最小限に抑えます。代わりに、データはテンプレートに直接保存されるため、テーマエディターのパフォーマンスが向上します。

JSONテンプレートは、.jsonファイル拡張子が付いたデータファイルです。これらのテンプレートを使用すると、セクションのコンテンツをテンプレートに簡単に入力できます。セクションは、テーマエディタを介してマーチャントが追加、削除、または再配置できます。

詳細については、

JSON templates
Learn how to use JSON templates to build pages with sections that can be customized in the theme editor.

これまで、liquidテンプレートでは、”ページ”機能で作成したセクション内の登録情報は、同じファイル名のページテンプレートを使用した時に、同じデータを継承してきてしまい、同期してしまうものでした。

今回のアップデートでJSONテンプレートが採用されたことで、この問題も改善されました。

また、JSONテンプレートは最大20のセクションをレンダリングでき、各セクションは最大12のブロックを持つことができます。

つまり、ホームのページ以外でも、柔軟なセクション追加ができるようになったということです。

この点は、EC-CUBE3や4のブロックの感覚に近いものとなりました。

liquidテンプレート

liquidテンプレートは、ファイル拡張子が付いたLiquidマークアップファイルです。

liquidテンプレートからJSONテンプレートへの引っ越し作業

これは2.0に対応するための必須の作業にもなります。

この作業がどれだけ骨が折れるかによって、地道に引っ越し作業をするか、 それともゼロから作った方が早いか、エンジニアは判断を迫られることに なります。

JSON templates
Learn how to use JSON templates to build pages with sections that can be customized in the theme editor.
https://shopify.dev/themes/migration

お引越しの作業は近日、私のほうで実施して成功したらこちらでアップします。

資料

Shopify.dev

https://shopify.dev/themes/tools/dawn?shpxid=8ad70de3-16F7-4F39-5358-623939D2BBF9

新テーマ”Dawn”の仕様

https://shopify.dev/themes/tools/dawn?shpxid=8ad70de3-16F7-4F39-5358-623939D2BBF9h

Shopifyの新テーマDawnのテーマファイルのデータ(GitHub)

GitHub - Shopify/dawn: Shopify's first source available reference theme, with Online Store 2.0 features and performance built-in.
Shopify's first source available reference theme, with Online Store 2.0 features and performance built-in. - Shopify/dawn

(一部カスタマイズも必要)

ShopifyをGitで管理運用するやり方

ShopifyをGitで管理運用するやり方 - Qiita
1.はじめに これはなにか? Shopify開発における運用のルールとベースになるものを書きました。 ■課題 Shopifyは管理画面で「いつ」「だれが」更新したか不明なので、運用ルールとおりに開発しても先祖返りしてしまう。 つまり開発をGit管理していても、Shop...

おまけ:管理画面もマイナーチェンジしている

2021/6/29に開催されたShopify Unite 2021にて、いくつかの更新が発表された。クライアント向けの新規昨日は、
テーマの「カスタマイズ」で操作できる画面が画面遷移を極力なくし、シームレスにセクション内を編集できるようになっている。

Shopifyのテーマエディターが再構築され、Online Store2.0で導入された新機能が含まれるようになりました。テーマエディタは、より速く、より強力で、使いやすくなっています。更新されたテーマエディタは、すべてのOnline Store 2.0テーマに含まれており、今年後半にすべてのストアで利用できるようになります。

https://help.shopify.com/en/manual/online-store/themes/theme-editor-updates
ナナイロ

ECサイト制作に強いフロントエンドエンジニア。Web関連のお役立ち技術情報を発信しています。 2025年の最新のAI生成コーディングのコースをUdemyに公開いたしました。爆速でコードを書きたい方は必見です!! さらに、今年(2025年)からVoicyのパーソナリティに挑戦し始めました!ラジオでWebエンジニアの生の声をお届けしています。