Shopifyテーマ開発をチームで行う仕組みづくり｜スパイスファクトリー株式会社

この記事はShopify開発を盛り上げる Advent Calendar 2020 19日目の記事です。

スパイスファクトリーCTOの@ShoheiTaiです。先週はShopifyのアプリ選定と運用ノウハウについての記事を書かせて頂きました。今回こそは開発寄りの話ということで、Shopifyテーマのチーム開発についてお話しようと思います。
スパイスファクトリーではフルスクラッチで開発を行うチームもあり、チーム開発のナレッジがあります。しかし、Shopifyでのテーマ開発はSaaSという性質上、今までの型にはめられないという課題がありました。今年は多くのプロジェクトを通してやっと固まってきた開発体制と取り組みについてご紹介していきます。詳しくはをご覧ください。

Contents

1 Shopifyテーマとは
2 開発環境とツール
- 2.1 Shopify Theme Kit
- 2.2 IDE
3 Shopify環境と運用について
- 3.1 小〜中規模案件
- 3.2 エンタープライズ・大規模案件
4 コードの品質管理
- 4.1 git管理
- 4.2 プルリクエスト・レビュー体制
5 Gitlab-CIによるデプロイ自動化
- 5.1 CIの設定
- 5.2 Slackへの通知
6 今後への課題

Shopifyテーマとは

ShopifyテーマはLiquidと呼ばれるテンプレート言語を使用し開発を行います。テーマに含まれるファイルとしてはLiquid(HTML)やCSS,JS,Shopify設定を扱うjsonなどが含まれています。Shopifyテーマストアやthemeforestからテーマをダウンロードすることもできますが、1から開発をすることも可能です。

開発環境とツール

Shopify Theme Kit

テーマ開発ではShopify Theme kitを使用します。themekitを使用することでストアのテーマのdeploy,watchを行い、開発の効率を向上します。PrivateAppの有効化が必要になるので、クライアントと事前にコミュニケーションをとっておく必要があります。

IDE

IDEは特に制限はしていません。各メンバーが使いやすいIDEで開発を進めています。JetBrains IDEやVS Codeを使っているメンバーが多いです。有名なIDEを使用していればLiquidのプラグインが提供されている事が多いのでそれらを導入して開発をすすめると良いと思います。
私はPHPStormを使っているのでJetBrains Liquidプラグインを導入した上でテーマの開発を行っています。

Jetbrains IDEのliquidプラグイン

VS Codeの場合もVS CodeでのLiquidプラグインが提供されているようです。

Shopify環境と運用について

各メンバーでShopifyのテーマ開発を行う場合は誰がどの環境、テーマファイルを使用するか決める必要があります。スパイスファクトリーでは案件規模・フェーズによってShopify環境の扱いを変更しています。本番環境においては運用側の方針も取り決めを行っています。

小〜中規模案件

小規模から中規模の案件では、細かい修正が日常的に入ることが多いため、運用側の利便性やデリバリーのスピードを重視した環境管理を行います。

メンバーの環境: 開発環境で「テーマ名_メンバー名」でテーマファイルを用意します。各メンバーはテーマのプレビューを使用して開発を進めます。アプリを検証する場合はチームで連携した上で、自分のテーマをライブテーマに切り替え、アプリのインストールを行います。
開発環境: ShopifyPartnerに提供される開発ストアにてアプリの検証やテーマの開発を行っています。ライブテーマをDevelopmentのテーマとし、gitのdevelopブランチにアップされたものは常にこのテーマを更新するようにCIの設定を行っています。
ステージング環境: 本番ストアへテーマをデプロイし、本番のリリース前の最終確認としてテーマのプレビューにて確認を行います。
本番環境: CI/CDによりバージョンごとにテーマが作成されます。Shopifyのコアの設定やアプリのインストール以外は運用で自由に触ってもらう方針としています。これは、Shopify運用をスムーズにすることを最優先としており、Shopifyの良さを引き出すための体制です。

エンタープライズ・大規模案件

ここでのエンタープライズ、大規模案件の定義としては以下のパターンを想定しています。

ShopifyPlusを使用している
外部システムや会員基盤などと連携している
商品数が多い、運用チームの規模が大きい

大規模プロジェクトではバグの発生や想定していないアプリ挙動が発生すると、運用チームへの影響も発生する恐れがあるため特に慎重に対応を行います。運用側と開発チームの連携は必須です。ShopifyPlusを使用している場合は追加料金無しで課金ストアを追加できるため、Shopifyトライアル開始後にShopifyサポートへご連絡ください。

メンバーの環境: 開発環境で「テーマ名_メンバー名」でテーマファイルを用意します。各メンバーはテーマのプレビューを使用して開発を進めます。
開発環境: 課金を行ったShopifyを用意します。アプリの検証や各メンバーの作業をマージした上で確認を行う環境です。gitのdevelopブランチにアップされたものはここにデプロイします。メンバーはこの環境を自由に操作できます。
ステージング環境: 本番移行前の最終確認を行う環境です。課金を行ったShopifyを用意します。アプリの最終検証や本番と同一の商品を登録しておきます。Shopifyを取り扱う関係者が多い場合、運用中に本番環境との差分が発生する恐れもあるので、定期的にデータのメンテナンスもスケジュールします。
本番環境: CI/CDによりバージョンごとにテーマが作成されます。原則本番環境の運用時はマニュアルを整備した上で、運用チームに顧客管理/商品管理/注文管理/ブログ/一部のアプリ設定のみ操作をしてもらうようにします。それ以外の操作を行う場合は原則開発チームへの連絡を行うような体制で進める方針としています。これは、開発チームが想定できない変更や、gitで管理しているソースとの乖離が起こらないようにすることが目的です。

コードの品質管理

git管理

基本はGitflowをベースにしたgit運用を行っています。master/staging/developブランチを運用し、developブランチからfeatureブランチを作成し・マージを行います。大規模案件ではreleaseブランチの運用も行っています。

プルリクエスト・レビュー体制

弊社ではGitLabを使用しており、必ずプルリクエスト(マージリクエスト)でレビューを行います。レビュー時は具体的に何をやったかを明記できるよう、テンプレートを活用しています。

ソースコードレビュー

各メンバー作業時はWIPの状態でプルリクエストを上げてもらい、常に作業内容が見える状態になるよう運用を進めています。

Gitlab-CIによるデプロイ自動化

スパイスファクトリーではGitlabを使用しているため、Gitlab-CIで自動デプロイを行います。

CIの設定

Gitlab-CIの設定はymlを使用して行います。ここではstaging/productionへのデプロイを記載しています。

deploy_staging: ステージングのテーマにthemeKitでtheme deployを行います。
deploy_production: theme kitでtheme newを行います。バージョンごとのテーマがテーマライブラリに作成されます。この設定ではmasterブランチへのマージで本番テーマ作成を行いますが、規模の大きい案件ではリリース計画とバージョンを定義した上でデプロイを行うため、バージョンのタグ付けを起点にしたデプロイの実行を行います。

Environmentには本来フロント側のURLを指定するのが一般的ですが、Shopifyのプロジェクトではテーマ管理画面のURLを指定し、テーマライブラリをすぐ参照できるようにしています。

GitLab-CIで環境を定義しているので、どこの環境に何がデプロイされたかは画面上から確認できます。

デプロイの管理

Slackへの通知

GitLabの機能を使用し、デプロイ時はSlackの通知を行っています。大規模案件では個別にチャンネルを作成しますが、小規模〜中規模の保守案件は、一つのDeploy通知チャンネルに集約し一元管理を行っています。これによりどの案件でどういったデプロイが行われたか、想定されないデプロイが走っていないかを管理できます。

ShopifyへのデプロイをSlack通知

今後への課題

体制について色々試してみましたが、まだまだ改善したい部分もあります。直近で進めたいのは本番テーマとgitソースの差分検知です。Shopifyの性質上、本番でカスタマイズの設定が行われたりShopifyアプリがインストールされたりするとテーマに変更が入る場合があります。
※アプリからのテーマ変更については以下を参照

Shopifyのアプリ選定と運用ノウハウ

この状態でgitにあるソースをデプロイしてしまうと不具合や設定の消失、デグレの危険性があります。現状は弊社がShopifyを管理していたり、運用ルールの取り決め、開発側での定期メンテナンスでカバーできていますが、将来的には本番で差分を自動検知してgitへプルリクエスト作成(gitlab pipeline schedulesによる定期チェック？ theme/update webhookによるテーマ更新検知？)、本番デプロイ時にエラーで落とすといったことを行いたいと考えています。(git diff --exit-codeなどを使えないかなと思ったり。)
また、ソースコードの品質チェックとしてtheme-lintの導入やHTML/CSS/JSの静的解析も何らかの形でCIに組み込んでいきたいなと思っています。

Shopifyチーム拡大に伴い、スパイスファクトリーでは積極採用を進めています。Shopifyでの効率的な開発や運用を本気で考えたい、Shopifyや開発のスキルを磨きたいなどご興味のある方は是非ください。