2021/6/29に開かれたShopify Unite 2021で発表されたShopifyの新バージョン。
新バージョンといっても、これまでに制作されたテーマやアプリは変わらず使用できる。
今回追加された内容は以下のようにいくつかあるが、
- Sections Everywhere
- メタフィールド
- アプリがテーマから分離（干渉しない、導入容易）
- チェックアウトページがカスタマイズ可
- テーマとGitHub統合
- ページレンダリング5倍速く
- チェックアウト2倍速く
そのうち、ここでは、フロントエンドエンジニア要件となる、
1″Sections Everywhere”、5″テーマとGitHub統合”について特集しようと思う。
2″メタフィールド”についてはまた今度。
Shopify複数人体制での参考例
かねてよりチーム開発でGithubを使ったバージョン管理の制作方法は、今後、個人単位でも、より一般化していく必要がありそうです。
Github使用した制作では、管理画面のテーマを３つに分岐して開発するなどがベストプラクティスとして挙げられます。
リリースの順番の例
デベロップ→ステージング→本番
※以下テーマ名は例です
・本番（プロダクション）
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がローカルのマシーンにインストールできます。
Windowsの方は、ひと手間かかります。
RubyInstaller forWindows
を使用してRubyというプログラム言語がWindowsにインストールされている必要があるためです。以下を参考にインストールしましょう。
Powershellでもインストールができたところの画面です。まだ道のりは始まってもいないんだけど、2.0への道に近づいていると思い、ほくそえみましょう。
WindowsのPowerShellででGitコマンドを使用する方法
（macユーザは「①SSH Key発行」まで読み飛ばしてOK）
参考資料
PowerShell で Git をもっと便利に使う
の記事を参考に、
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コマンドを使えませんので、インストールするにはこちらを参考に。
また、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 gitctrl + 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アプをインストールする必要がある。
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リポジトリに接続されているテーマを管理するときは、次の点を考慮してください。
- ブランチが切断された後は、ブランチをテーマに再接続することはできません。ブランチを再接続すると、新しいテーマとして追加されます。
- 未公開のテーマがブランチに接続されてから公開された場合、そのテーマはブランチへの接続を維持します。
ブランチとテーマの関係、およびブランチを効果的に使用するためにワークフローを最適化する方法を理解するには、バージョン管理のベストプラクティスを参照してください。
注意点としては、
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
このURLでサーブしたテーマを、Google Chromeでのみホットリロードプレビューで開発できます。
動画キャプチャを作成しました。
Shopify CLIのコマンド一蘭
（おまけ）コマンド : shopify populate
プレビュー用にテスト商品やテストアカウント、テスト注文を作成する。
注文時の動作テスト、マイページへどう記録されるか、などを、ラピッドに確認できる。
2.0のテンプレートファイルの種類
テーマテンプレートに使用できるファイルタイプは2つあります。
- JSONテンプレート
- liquidテンプレート
JSONテンプレート
テンプレートでセクションを使用する場合は、2.0で使えるようになったJSONテンプレートを使用する必要があります。
JSONテンプレートは、アプリセクションを含むセクションを追加、削除、再注文するための柔軟性をマーチャントに提供します。さらに、settings_data.jsonのデータ量を最小限に抑えます。代わりに、データはテンプレートに直接保存されるため、テーマエディターのパフォーマンスが向上します。
JSONテンプレートは、.jsonファイル拡張子が付いたデータファイルです。これらのテンプレートを使用すると、セクションのコンテンツをテンプレートに簡単に入力できます。セクションは、テーマエディタを介してマーチャントが追加、削除、または再配置できます。
詳細については、
これまで、liquidテンプレートでは、”ページ”機能で作成したセクション内の登録情報は、同じファイル名のページテンプレートを使用した時に、同じデータを継承してきてしまい、同期してしまうものでした。
今回のアップデートでJSONテンプレートが採用されたことで、この問題も改善されました。
また、JSONテンプレートは最大20のセクションをレンダリングでき、各セクションは最大12のブロックを持つことができます。
つまり、ホームのページ以外でも、柔軟なセクション追加ができるようになったということです。
この点は、EC-CUBE3や4のブロックの感覚に近いものとなりました。
liquidテンプレート
liquidテンプレートは、ファイル拡張子が付いたLiquidマークアップファイルです。
liquidテンプレートからJSONテンプレートへの引っ越し作業
これは2.0に対応するための必須の作業にもなります。
この作業がどれだけ骨が折れるかによって、地道に引っ越し作業をするか、 それともゼロから作った方が早いか、エンジニアは判断を迫られることに なります。
お引越しの作業は近日、私のほうで実施して成功したらこちらでアップします。
資料
Shopify.dev
新テーマ”Dawn”の仕様
Shopifyの新テーマDawnのテーマファイルのデータ（GitHub）
（一部カスタマイズも必要）
ShopifyをGitで管理運用するやり方
おまけ：管理画面もマイナーチェンジしている
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