catch-img

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

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


shopifyに関するお問い合わせをするボタン

shopify資料のダウンロードをするボタン


目次[非表示]

  1. 1.Shopify GitHub integrationの概要
  2. 2.Shopify GitHub integrationの導入手順
  3. 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ステップです。

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

  1. Shopify管理画面で [オンラインストア] > [テーマ] を開く
  2. ライブテーマのアクションから[テーマファイルをダウンロード]を選択
  3. 登録したアドレスにダウンロードリンクが送信されるので、ワークディレクトリに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のアカウントにリポジトリを作成します。

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


  1. ①で追加したテーマファイルを以下のコマンドを順にたたいて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アカウントにログインが必要です。

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


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


  1. 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に関するお問い合わせをするボタン

shopify資料のダウンロードをするボタン

shopify構築サービスバナー




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

Shopify導入についてのサービス問い合わせ

Shopifyアプリ解説・紹介記事


【無料】セミナー動画視聴


EC関連サービス


トランスコスモスのEC全領域を網羅するサービス


従業員(メンバー)インタビュー


トランスコスモスの定量的な強み

お気軽に
お問い合わせください

Shopify(ショッピファイ)
ECストア構築・運用代行

トランスコスモスは日本最上位の「Shopifyプラスパートナー」企業です

 記事カテゴリー

ロジスティクスサービス

【週間ランキング】Shopify人気記事

ロジスティクス関連 新着記事

【初心者必見!】Shopifyマニュアル

 Tag(タグ)一覧

正社員募集(求人)

 【無料】資料ダウンロード

Shopify認定パートナー企業

shopify plus partner
トランスコスモスは最上位の「Shopify Plus partner(ショッピファイプラスパートナー)」です。
Shopifyでのサイト制作ならお任せください!
ECソリューションをお届けするサービスサイト

トランスコスモス株式会社
CX事業統括
ECX本部

〒150-0011
東京都渋谷区東1-2-20
渋谷ファーストタワー
050-1751-7700(代表)

経済産業省が定める「DX認定事業者」
トランスコスモスは経済産業省が定める「DX認定事業者」
トランスプラス
トランスコスモスの全社的な情報を発信するオウンドメディア
cotra
コンタクト/コールセンターに携わる方への情報サイト
shopify構築・制作・運用