🏰

Shopifyテーマ⇆GitHub連携を始めてみよう

2022/09/27に公開

Git

はじめに

Shopifyデベロッパーにとって悩みの一つと言っても過言ではない「テーマファイルの管理方法」と「チームでの開発方法」。
しかし、2021年のShopifyの大幅なアップデートによってGitHubの連携が可能となり、上記の解消に大きく貢献してくれています。

私が所属するチームでもついに導入が決まりました。
控えめに言って大変便利！！やっていない方がいたらいますぐ導入してほしい！！！と思ったので、メリットや手順をご紹介します。

連携で可能なこと

pushした内容が自動でShopify側のテーマファイルと同期される
管理画面で編集した内容はShopifyが自動でコミットしてくれる
- 例）納品後、マーチャント側で変更が行われてもログが残るので安心
ブランチ毎の連携
- 同じテーマファイルでも、ブランチ毎に接続ができる

できないこと

管理画面で変更した際のコミットメッセージ編集
- 一律でUpdate from Shopify for theme REPO_NAME/BRANCH_NAMEになる
  
  こんな感じで自動コミットされていきます

環境

それでは早速導入していきましょう。
本記事は開発環境が下記である前提で進めます。

Mac OS
ruby バージョン2.7以上
gitインストール済み
GitHubアカウントを持っており、SSH接続設定済み
Shopify Partnerアカウントを持っており、開発ストア作成済み
Shopify CLIインストール済み

開発環境構築についての詳細は公式の記事をご確認ください。

導入手順

Step1.　GitHubにテーマファイル格納用のリポジトリを新規作成

リポジトリやコミットについてはこちらの記事が分かりやすいです。

Step2.　テーマファイルをローカルに落とす

Step2-a.　Shopify CLIでDLする場合

ターミナル

# 任意の場所でテーマを格納するディレクトリを作成し、移動
mkdir REPO_NAME && cd REPO_NAME

# Shopify CLIにログイン
shopify login

# DLしたいストアにログイン
shopify login -s STORE_DOMAIN

# テーマライブラリー内のテーマ一覧を表示
shopify theme pull

# ライブテーマ(末尾に[live]とあるもの)を選択する
> THEME_NANE[live]

Step2-b.　Shopify管理画面でDLする場合

Shopify管理画面トップ > 販売チャネル > オンラインストア > テーマ
現在のテーマ > アクション > テーマファイルをダウンロード

Actions > Download theme file
DL用のメールが届くので手順に沿ってDL
DLしたテーマファイルのディレクトリ名をGitHubで作成したリポジトリ名と合わせる

Step3.　テーマファイルをGitHubリモートリポジトリにpush

ターミナル

# テーマファイルのディレクトリをリポジトリとして初期化
git init

# 全ファイルをコミット対象にする
git add .

# コミット
git commit --allow-empty -m "First commit”

# リモートリポジトリにpush
git remote add origin git@github.com:ACCOUNT/REPO_NAME.git
git branch -M main
git push -u origin main

Step4. リポジトリをShopifyに接続

Shopify管理画面 > 販売チャネル > オンラインストアの順に進む
「テーマを追加」をクリックし、「GitHubから接続する」を選択

Connect from GitHub=GitHubから接続する
サイドバーが出現するので、下記を入力していく

接続するGitHubアカウント
接続したいリポジトリ
接続したいブランチ

Step5. GitHub経由で追加したテーマを公開する

アクション > メインテーマに設定する

Publish=メインテーマに設定する

右下の「公開」をクリック

公開完了！

導入してみて

導入前は、ローカルでコード編集してshopify theme pushでサーバーにアップしたり、小さな変更なら管理画面上で済ませていました。

スピーディかつ手軽にファイル編集や公開を行えるのは便利ですが、これではいつ・誰が・何の目的で・どのファイルをいじったのか把握できません。
いじった本人でも、時間が経てば何を行ったか忘れてしまうでしょう。
また、履歴が残らないことでメンテナンス性にも欠けてしまいます。

導入後は、main develop 作業ブランチと主に３つのブランチを用意し、
shopify theme serveで編集内容をホットリロードしながら作業→適切なタイミングでコミット・プルリク・マージするようにしています。（shopify theme pushは行わなず、接続したmainブランチをメインテーマに設定することで公開としています）

こうすることで、いつ・誰が・何の目的で・どのファイルをいじったのかが明確になり、改修やバグ対応が格段に行いやすくなります。

終わりに

このように、GitHub連携はテーマ開発者にとって今後必須と言っても過言ではない素晴らしい機能です。ただ、運用してみて課題も見えてきたので、知見が溜まってきたらこちらも記事にしたいと思います。
最後までお読みいただきありがとうございました。参考になりますと幸いです☆