【Shopify.dev和訳】Themes/Dev tools/GitHub integration/Overview

2021/09/30に公開約5,700字

この記事について

この記事は、Themes/Developer tools/GitHub integration/Overviewの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Shopify と GitHub の統合| Shopify GitHub integration

Shopify GitHub インテグレーションでは、GitHub アカウントを Shopify ログインに関連付け、Shopify 管理画面で Git リポジトリをテーマに接続することができます。この接続により、テーマのコードを変更して追跡することができます。また、他の開発者との共同作業や、進捗状況をリアルタイムに共有することもできます。

特徴| Features

Shopify GitHub インテグレーションには、以下のような機能があります。

  • GitHub アカウントに関連付けられた任意の組織やリポジトリからテーマコードを自動的にプル&プッシュする
  • リポジトリから 1 つまたは複数のブランチに接続し、新しいテーマの機能やキャンペーンを簡単に開発、テストする
  • ブランチへのコミットでテーマを最新の状態に保ち、コードエディタテーマエディタを含む Shopify 管理画面で行われた編集を追跡する
  • ブランチを未公開または公開テーマに接続する

仕組み| How it works

Shopify GitHub インテグレーションは、接続されたブランチが更新されるたびに、Shopify 管理画面のテーマを更新します。また、Shopify 管理画面で行われた変更をブランチにコミットし、管理画面のブランチとテーマが常に一致するようにします。

Shopify によるコミット| Commits by Shopify

テーマが Shopify の管理画面で編集されると、その変更は Shopify によって自動的にあなたのリポジトリにコミットされます。オーナー、スタッフ、共同作業者が変更を加えると、コミットが作成されます。変更は、保存されたときに接続されたブランチにコミットとして追加されます。

テーマの編集は、Shopify 管理画面の以下のエリアで行うことができます。

GitHub への接続| Connection to GitHub

テーマに接続されているリポジトリのみが、ストア内の他のユーザーに表示されます。ブランチがテーマに接続された後は、「テーマ」の権限を持つユーザーであれば誰でも接続を解除できます。

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

Shopify ログインを GitHub アカウントに接続すると、Shopify ログインで以下のことができます。

  • 自分がアクセスできるリポジトリやブランチの接続
  • GitHub アカウントと Shopify の接続解除

複数のユーザーがリポジトリへの接続を管理する必要がある場合は、それぞれのユーザーが自分のアカウントで Shopify GitHub インテグレーションを設定する必要があります。

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

コンフリクトとエラー処理| Conflicts and error handling

ユーザーがファイルを開いてテーマエディターで編集しているときに、同じファイルを GitHub やコードエディターで編集すると、保存するときに新しい変更を上書きする旨の警告が表示されます。

現在、コードエディターにはコンフリクトの警告はありません。コードエディターでのファイルのバージョンは、GitHub でのバージョンを上書きします。

Shopify の外で行われたコミットやプッシュでコンフリクトが発生した場合、開発者は GitHub で解決するか、Shopify でファイルを上書きするために変更を強制的にプッシュするチャンスがあります。

限られたケースではありますが、テーマエディターやコードエディターでファイルを保存し、GitHub ブランチに変更を同時にプッシュした場合にコンフリクトが発生することがあります。この場合、Shopify からのコミットは古いものとみなされ、GitHub で拒否される可能性があります。

変更をプッシュまたはプルする際にエラーが発生したと思われる場合は、テーマカードの「Last saved」タイムスタンプの横にある 「View logs」 をクリックすると、直近のバージョンコントロールイベントのログを見ることができます。

テーマがブランチと合わなくなってしまったと考えられる場合は、テーマカードで 「Actions > Reset to last commit」 を選択することで、ブランチの最新版を手動でプルすることができます。

レート制限| Rate limits

Shopify GitHub 統合を使用して実行できるプッシュとプルの数は、標準の GitHub アプリのレート制限によって制御されます。

始め方| Getting started

アカウントまたは組織を GitHub に接続し、ブランチをテーマとして接続する方法については、Shopify GitHub 統合の開始を参照してください。

リポジトリ構造| Repository structure

デフォルトの Shopify テーマフォルダー構造に一致するブランチのみを接続できます。この構造は、ビルドレステーマ、または必要なファイル変換が既に行われたテーマを表します。

Shopify theme folder structure
└── project
    ├── assets
    ├── config
    ├── layout
    ├── locales
    ├── sections
    ├── snippets
    └── templates
        └── customers

リポジトリ内の .github フォルダは無視されます。そのため、この方法を使っても、Lighthouse CI などのタスク自動化ツールや継続的インテグレーションツールを使用することができます。

Shopify GitHub インテグレーションをビルドパイプラインを使用するテーマで使用したい場合は、ソースコードと生成されたコードを 2 つの別のリポジトリに分けるか、生成されたコードをサブツリーまたはサブモジュールとして保存し、それを Shopify のテーマに接続することができます。また、これらのアプローチを使って、Shopify がデフォルトのフォルダ構造に従ったソースコードに変更を加えないようにすることもできます。

これらのモデルを使うと、Shopify によって生成されたコードに加えられた変更を、あなたのソースコードにバックフィルする必要があります。バージョンコントロールのこれらのアプローチについての詳細は、バージョンコントロールのベストプラクティスを参照してください。

ブランチ管理の戦略| Branch management strategies

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

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

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

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます