D2CやECビジネス向けのオールインワンプラットフォームである『ecforce』。
ECサイトの構築から運営、マーケティング、顧客管理等、ECビジネスに必要な機能を一元的に提供しており、特に単品・リピート通販を行う事業者から注目を浴びています。
2024年現在、統合コマースプラットフォームとして機能も増え、総合通販や大型サイトの事例も増えてきております。大型案件の場合、複数人のエンジニアで開発が必要な場面があります。
本記事では、そんなecforceを複数人で共同開発を行う方法を紹介していきます。
目次
共同開発はできない？
前提として、ecforceは同様に国産カートシステムのEC-CUBEとは異なりオープンソースではありません。Shopifyやmakeshopと同じSaaS型のECシステムです。
オープンソースとは、インターネット上で無料で公開されているプログラムコードを利用してECサイトを構築する方法です。
技術力があれば、低コストで高品質なECサイトを作ることができますが、専門的な知識がないと難しい方法です。
また構築方法によっては、重大な脆弱性が見つかることもあるため、自社でセキュリティ対策を行う必要があります。
SaaS型のECシステムのため、開発の際にローカル環境を作成することができなく、複数人が同時並行で行う共同開発が難しくなっています。
同じLiquidテンプレートエンジンを採用しているShopifyでは、GitHubとShopifyテーマを連携同期ができますが、ecforceでは現状連携されておりません。またローカル環境の構築もできません。
この場合、複数人での共同開発は注意しないと、先祖返り・デグレートのリスクを持っています。しかし、チーム内で適切なルールを定める事で、スムーズな開発進行が可能です。
複数人で共同開発をするには？
工夫をすることでecforceでも複数人で共同開発を進めることが可能です。
今回は3つご紹介いたします。
担当を分けることで、同時に同じファイルを編集することを回避する
例えば、「TOPページを実装する人とそれ以外のページを実装する人」のような形で役割を分担することで、同じファイルを同時に編集することを回避します。
但し、その際にもcssファイル等触るファイルが被る可能性があるため、随時これから触るファイルを他の実装者に共有してから編集を始めることが大切です。
実装者の人数が増えるほど同時に同じファイルを触る危険性も高くなるため、なるべく少人数での開発がおすすめです。
管理画面上で完結する設定を見極める
ecforceでは、管理画面上で完結できる設定が多くあります。
例えば、フォントの種類・商品一覧の並び替え・ハンバーガーメニューの項目管理・フッターの項目管理 等です。
これはecforceに限った事ではないですが、プラットフォームの標準機能を理解した上で構築する事はとても大切な事です。
本番テーマリリース時は、バックアップを取る
本番テーマとは、ストアのお客様が見ている環境の事を指します。
万が一、本番テーマで不具合があった場合に、すぐに戻す為に、リリース直前のテーマを保管しておきます。Gitとの連動管理ができない状況の為、下記のような方法が良いと判断しました。
・本番テーマのバックアップを取る
・ファイルの編集内容をサーバー経由でまとめて反映することはできません。1つの方法として、エディタ上で編集した内容を全体コピーし、管理画面にてペーストしてファイルを1つずつ反映するといった方法で進めます。
・セクションを一から作る際は、主にHTMLブロックを使用し、エディタで作成したものをコピーして反映します。
ここで注意しなければいけないのは、HTMLブロックにおいてliquidのコードは使用不可であるという点です。例えば、商品名を呼び出す {{ product.name }} は変数として使用できません。
・本番にリリースした際は、修正反映よる大きな崩れを元に戻せるようにバックアップは必ず取る
よくある問題と解決方法
・他の実装者と同時に同じファイルを触ってしまい、昨日の変更が消えてしまった。
→その日の始まりか終わりなどにバックアップをとっておく
・cssの記述の反映がなかなかされないことがある
→同じcssファイルで何かしら変更を加えてもう一度反映する
・リロードを繰り返すたびにサイトが重くなってくる
→重くなってきたら一度プレビューを切る
・管理画面のカスタマイズ画面で、htmlブロックで作った内容のコードが1行でまとまってしまっているため、コードを整理する必要がある
→その1行のコードをChat GPTに整理してもらうよう指示し、コードを整理する手間を省く
・デフォルトのcssファイルに!importantが多くかかっており、idやクラスを多く指定して効かせなければならないため、コードの記載量が多い
→背景画像を指定する際等はほとんどフルパスで指定する
(example.css.liquidといったファイルを作っても、cssファイルとしてコンパイルされないため)
・セクションには変数が反映されない
まずセクションを一から作る際は、一から作る際は主にHTMLブロックを使用します。この場合もエディタで作成したものをコピーして反映する方が記述ミスが減ります。
ここで注意しなければいけないのは、HTMLブロックにおいてliquidのコードは使用不可であるという点です。例えば、商品名を呼び出す {{ product.name }} は変数として使用できません。
まとめ
今回はecforceを複数人で共同開発を行う方法をご紹介いたしました。
少し手間を加えることで、同時並行で実装可能なためご参考になれば幸いです。
株式会社Refineでは、ecforceの構築・実装・運用/保守まで承っています。
制作会社が見つからない、デザインを一新したい、売り上げが上がらない…等の課題がございましたら、お気軽にご相談ください。
