トランスコスモス　Shopify　ショピファイ　ショッピファイ　バージョン管理　開発　Shopify GitHub integration

Shopifyテーマのバージョン管理と複数人での開発の進め方 - Shopify GitHub integration 導入編 -

2023-10-19 08:47（更新：2024-04-16 08:20）トランスコスモスShopifyエンジニアShopify

Shopifyテーマ開発で悩ましいのが、ファイルのバージョン管理です。Shopifyの利点のひとつに「誰でも簡単にテーマを編集できる」ことが挙げられます。いわゆるノーコードでストアの管理画面からも編集することができるため、デザイナーやディレクター、マーチャントでも気軽に触ることができます。これは便利な一方で、管理画面から行ったテーマの修正を管理することが難しく、複数人で開発を進める際に競合や意図せず先祖返りを引き起こしてしまう要因になります。開発が非効率になるだけでなく、いわゆるデグレが発生することで品質にも影響を与える恐れがあります。そこでぜひ導入してほしいのが、Shopify GitHub integration です。

目次[非表示]

1.Shopify GitHub integrationの概要
2.Shopify GitHub integrationの導入手順
3.まとめ

※ 以下の項目については環境が整っている前提で解説します。
・Shopifyストア
・GitHubアカウント
・ruby
・Git
・Shopify CLI（3.x系）

Shopify GitHub integrationの概要

簡単にいうとShopifyストアのテーマとGitHubのリポジトリを自動で連携できるようになります。
では、自動で連携できるとはどういうことなのかを見ていきましょう。

バージョン管理

エンジニアサイドのソースコードだけでなく、Shopifyストアの管理画面から行ったテーマファイルの修正履歴もGitHubに自動的に連携されるようになります。これにより、開発者はローカルで行った修正をテーマに反映する際に管理画面から行われた修正を検知して対応することが可能になります。

自動デプロイ

ShopifyストアのテーマとGitHubリポジトリのブランチを接続することで、ソースコードの変更を自動的にShopifyストアにデプロイできます。手動でファイルをアップロードする必要はありません。

品質担保

GitHubのプルリクエスト機能を使えばソースコードのレビューを実施することも簡単にできます。また、Shopifyストアのライブテーマにデプロイする前にテーマライブラリーでテストを実施することも可能です。その結果、品質を担保して安全にリリースを行うことができます。この導入編では詳しく解説はしませんが、ブランチ運用とShopifyストアのテーマライブラリーを適切に連携することで実現が可能です。（下図イメージ）

Shopify GitHub integrationの導入手順

それでは実際に導入手順を見ていきましょう。手順はとても簡単で大きく3ステップです。

① テーマファイルをエクスポート
ローカル環境のワークディレクトリに開発のベースとなるファイルをダウンロードします。

Shopify管理画面で [オンラインストア] > [テーマ] を開く
ライブテーマのアクションから[テーマファイルをダウンロード]を選択
登録したアドレスにダウンロードリンクが送信されるので、ワークディレクトリにZIPファイルを解凍

なお、Shopify CLI を使うともっと簡単にテーマファイルをダウンロードすることが可能です。

# ワークディレクトリを作成し移動

mkdir FILE_NAME

cd FILE_NAME

# Shopify CLI で開発環境を立ち上げる

shopify theme dev --store STORE_NAME

※ STORE_NAMEはドメインが「xxx.myshopify.com」だとしたら「xxx」です

# テーマをプルする

shopify theme pull

ライブテーマを選択する

> 1. THEME_NAME [live]

② GitHubリポジトリを作成
GiHubのアカウントにリポジトリを作成します。

[New] > [Create a new repository] の画面で最低限リポジトリ名とPublicまたはPrivate を選択し「Create repository」をクリック
※ 業務利用であれば基本的には「Private」がよいでしょう

①で追加したテーマファイルを以下のコマンドを順にたたいてGitHubリポジトリにプッシュ

# ワークディレクトリにいる前提

git init
git add .
git commit -m “first commit”
git branch –M main
git remote add origin https://github.com/xxx/xxx.git
git push –u origin main

③ Shopifyストアと接続
初回のみShopifyストア管理画面からGitHubアカウントにログインが必要です。

[オンラインストア] > [テーマ] を開く
テーマライブラリーの [テーマを追加] > [GitHubから接続する] > 「GitHubにログインする」ボタンをクリック

認証画面が表示されたら「Authorize Shopify」をクリック
Install Shopifyのページから[All repositories] または[Only select repositories]を選択して「Install」ボタンをクリック
※ Shopifyと関係ないリポジトリも管理している場合はOnly select repositoriesを選択し、Shopifyと連携したいものだけ選択するのがよいと思います

Shopifyストアにテーマを接続する

さきほどは[GitHubから接続する]を選択するとログイン画面になりましたが、今度は[テーマを接続する]という画面が表示されます。

　 5-1.アカウント、リポジトリを選択して接続したいブランチの「接続」をクリック
　 5-2.テーマライブラリーにテーマが表示されるので「メインテーマとして設定」をクリック

これでShopifyストアのテーマとGitHubの連携は完了です。

まとめ

この記事ではShopifyとGitHubの連携方法までを説明しました。
これにより、Shopifyテーマの開発プロセスをより安全に、よりスムーズに進めることができます。
ぜひ導入を検討してみてください。

[ 参照 ]
Shopify GitHub integration for themes
https://shopify.dev/docs/themes/tools/github
GitHub
https://docs.github.com/ja
Install Shopify CLI
https://shopify.dev/docs/themes/tools/cli/install

トランスコスモスShopifyエンジニア

トランスコスモスは日本で7社しかない最上位の「Shopifyプラスパートナー」です。最上位認定を堅持しShopifyでのECサイト制作・Shopifyアプリ開発を担うのが、トランスコスモスShopifyエンジニアチームです。Shopifyアプリの解説・紹介、Shopifyの基本的な使い方など制作や開発の過程で得られた知見をご紹介します。