EC-CUBE 4について、著者自身が学習・実践してきたカスタマイズ方法をまとめています。（学習状況に合わせて随時更新中）
EC-CUBEとは？
ネットショップの製作や管理ができるオープンソース型ソフトウェア。
誰でも無料でインストールでき、サイトの外観からカート機能、売上管理といった基本的な機能が備わっている。
ドトールのオンラインショップ や たおる本舗 など、35,000を超える店舗で運用されている。
「ドン・キホーテ」や「ジュンク堂書店」なども含まれるようです。
2024年9月時点の情報です。詳細は EC-CUBE公式サイト をご確認ください。
EC-CUBEは誰でも無料で使え、かつカスタマイズ性が高いのが特徴です。
が、初心者にはそのカスタマイズがなかなか難しい。
サイト内の文章や配置を少し変更する程度ならあまり問題ありませんが、
- 商品の管理項目を増やし、それをデータベースに保存する
- データベースから特定の商品や顧客情報を抽出する
といった機能は、サーバーやデータベースの管理技術、プログラミング技術などが必要となります。
本サイトでは、著者自身が実際に行ったカスタマイズ方法を備忘録として纏め、できる限り分かりやすく公開しています。
ただし独学のため、中には非効率な方法だったりバージョンや動作環境によって機能しなかったりなどあるかもしれません。
その点はご容赦ください。
EC-CUBEをカスタマイズしようと思っている方の、一つの参考になれば嬉しいです！
Xserver限定ですが、以下記事でインストール方法とチェック事項を纏めています。
まだEC-CUBEをインストールしていない方は、参考にしてみてください。
Xserver限定ですが、別のドメインに本番環境と同じEC-CUBEサイトを複製し、テスト環境を作る方法をまとめました。
本番環境で運用中のサイトをカスタマイズするのは不安・・・という方は、参考にしてみてください。
管理画面の操作のみでできるカスタマイズ
コンテンツ管理から、既存ページの編集や新規ページの作成ができます。
ここで作成した新規ページには「user_data」というURLが自動で入ってしまい、データベースの情報を取得したり更新したりといったことが基本的にできません。したがって、そのページのみで完結する内容（例えばブログ）が中心となります。
より柔軟なページを作成したい場合は、ファイルサーバーにControllerファイルをアップするなど、少し高度なカスタマイズが必要です。詳細はこちら
またページのレイアウトや装飾などをがっつり修正したいなら、HTMLやCSS、JavaScriptの知識に加えて、Twigと呼ばれるPHP向けのテンプレートエンジンの知識が必要です。
Twigテンプレートを使いこなそう！
通常のHTMLとは異なった記法となるTwigテンプレートについて纏めています。
既存のTwigテンプレートを修正することで、以下のようなカスタマイズが行えます。
CSSとJavaScriptを使ってデザインやアクションを変更しよう！
- CSSについて
-
EC-CUBE管理ページから「CSS管理」を開いてCSSコードを書き込むと、その内容がサイト全体に反映されます。また、「CSS管理」ではなく各ページに直接コードを記載することで、そのページのみに適用させることもできます。
より詳しく知りたい方は以下の記事にて。 - JavaScriptについて
-
「JavaScript管理」を開いてJavaScriptコードを書き込むと、その内容がサイト全体に反映されます。また、「JavaScript管理」ではなく各ページに直接コードを記載することで、そのページのみに適用させることもできます。
より詳しく知りたい方は以下の記事にて。
HTML / CSS / JavaScript については、以下記事に色々な実装パターン（メッセージ表示、画像拡大、各種UIなど）を公開しています。
EC-CUBE関連記事と合わせて参考にしていただければと思います。
ファイルサーバーやデータベースの操作が必要なカスタマイズ
本格的にカスタマイズするなら、やはりファイルサーバーやデータベース操作はできるようにしておきたいところ。
難易度は高いですが、よりオリジナリティの高いECサイトが作れます。
操作を誤ると、取り返しのつかない事態に発展する可能性があります。（当方では責任を負いかねますので、自己責任でお願いします。）
バックアップを用意しておくか、慣れるまでは練習用の模擬サイトを用意して、試行錯誤してみるのをオススメします。
なお、EC-CUBEにはSymfonyと呼ばれるPHPフレームワークが採用されています。
Symfonyとは？
PHP（プログラミング言語）で使うフレームワーク。
これを利用することで、WebサイトやWebアプリを作るための時間と労力を大幅に節約できます。
Symfonyが提供する部品（コンポーネント）を組み合わせることで、プログラムが作れます。それぞれの部品は特定の機能を持っており、データベースから情報を取得したり、ユーザーの入力を処理したりできます。
また、Symfonyは”Model-View-Controller”（MVC）という設計方法に基づいています。
これは、プログラムのコードを以下の3つに分ける方法で、コードが整理されていて理解しやすくなります。
- データの管理（Model）
- 表示の管理（View）
- ユーザーからの命令の受け取り（Controller）
まずはデバッグモードを設定しよう
EC-CUBEの初期設定では、バグが発生しても専用のエラーページが表示されるようになっています。このページだけではエラー内容が全くわからないのですが、予めデバッグモードを設定しておくことで、エラーの詳細が表示されるようになります。
運用環境のときは、デバッグモードの解除を忘れないように！
エラー別対処法
筆者が実際に遭遇したエラーへの対処法をまとめました。同じエラーに引っかかった際のご参考に。
デバッグに必須機能・dump()関数
EC-CUBEでは、デフォルトの状態でも数多くの変数が使われています。
これらの変数の中身を表示するための関数がdump()です。
カスタマイズ時はもちろん、EC-CUBEのシステムを理解するのにも必須となる関数ですね。
dump()関数はデバッグモードを設定しているときにしか使えません。（通常の運用環境ではエラーが出ます。）
ページの基本設定（headタグの編集）に関するカスタマイズ
『default_frame.twig』というファイルを編集することで、サイトのタイトルやアイコン（ファビコン）などの編集ができます。該当ファイルを修正してアップするだけで手数が少なく、初心者でも比較的簡単にできるカスタマイズです。
新規ページ作成（Controllerの編集）に関するカスタマイズ
新規ページの作成はEC-CUBEの管理画面からでもできますが、先述の通り「user_data」というURLが自動で入ってしまったり、データベースから情報を取得したりといったことができません。
こちらの方法を用いることで、URLを自由に決めることはもちろん、データベースから特定の情報を選んで表示させるといったことができるようになります。
こういった新規ページの作成には、Controllerと呼ばれるファイルの作成が必須となります。
まずは比較的簡単なところからで、新規ページのURLから「user_data」を消すと同時に簡単なControllerファイルを作成できる、以下記事がオススメです。
新規ページを作成できたら、Controller経由で実際にデータを渡してWebページに表示させてみましょう。
さらに、データベースから情報を引っ張ってきて表示させてみましょう。
このあたりの記事で、データベースの情報取得＆Webページへの表示方法が何となくでも理解できるようになれば嬉しいです。
（応用）タグ別や新着順など、特定の商品をピックアップして一覧表示する
データベースをより複雑な条件で検索したい場合は、以下記事で紹介しています。
このあたりを使いこなせば、以下のようなページを作ることもできます。
ここまでできれば、かなり実用的なカスタマイズになるかと思います。
（応用）特定の商品を非表示にする
商品の公開ステータスを利用して、特定の商品を非表示にする仕組みを解説しています。
前項のようなオリジナル商品一覧ページを作成した場合に、合わせて実装しておくとベターです。
（応用）ID別に詳細ページを作成できる自動フェッチ
ID別に複数ページを用意する場合は『自動フェッチ』機能が便利です。
商品詳細ページ「(ドメイン名)/products/detail/1」のように、URLの末尾に指定した数字と同じIDをもつデータ（レコード）を抽出し、表示できます。
（応用）商品一覧ページを分割表示する（ページネーション）
商品の数が多い場合、複数ページにまたがって表示させるページネーションと呼ばれる機能も実装できます。
デフォルトで用意されている商品一覧（カテゴリー別商品一覧）ページにも実装されており、こちらに新しいソートオプションを追加する場合と、独自に作成した商品一覧ページに実装する場合の2パターンあります。
データベース拡張や変更に関するカスタマイズ
既存のテーブル（商品情報や会員情報）に新しい項目（属性）を追加したいときや、新規でオリジナルのテーブルを追加したい場合はこちら。
EC-CUBEのデータベース拡張は少し癖があり、サーバーにSSH接続してコマンド入力する必要があります。著者は初めてのトライでかなり苦戦しましたので、なるべく手順を詳細に書いたつもりです。
- 既存のテーブルを編集する場合
- 新規にテーブルを作成する場合
-
こちらは通常のテーブル（dtbから始まるテーブル）
こちらはマスターテーブル（mtbから始まるテーブル）
- 【発展】テーブル同士を連携させる
また、作成したテーブルを修正する方法についても解説しています。
データベースアクセスの基本操作（レコードの作成・取得・更新・削除）
データベースの活用に関わる基本的な処理は、以下の頭文字をとって『CRUD』と呼ばれます。
| Create | レコードの作成 |
| Read | レコードの取得 |
| Update | レコードの更新 |
| Delete | レコードの削除 |
このうちRead（レコードの取得）については、前項の新規ページ作成（Controllerの修正）で少し紹介しました。ただテーブルを独自に作成した場合、そのテーブルからレコードを取り出すためのRepositoryも自身で用意する必要があります。
以下記事で簡単なRepositoryを作成する方法と、それを使ってレコードを取り出す方法を解説しています。
レコードの抽出方法については前項でも紹介していますので、合わせてご覧ください。
残る3つの処理（Create・Update・Delete）については、RepositoryではなくManager（マネージャ）というクラスを利用します。基本的な使い方は、以下記事でそれぞれ解説しています。
- レコードの追加（Create）
- レコードの更新（Update）
- レコードの削除（Delete）
- レコードの追加については、以下で紹介する「FormType」を使う方法が一般的です。（後述）
- 管理画面に新しくメニューを追加し、レコードの追加・更新・削除を行う方法も紹介しています。（後述）
フォーム（お問い合わせ/会員登録/注文画面/商品登録など）に関するカスタマイズ
お問い合わせや会員登録、管理画面の商品登録など、ユーザーが特定のデータを入力して送信する「フォーム」をカスタマイズしたい場合はこちら。
FormType / FormExtension を使ってフォームを拡張する
フォーム生成はControllerでも行えますが、一般には「FormType」というファイルを使って行います。
一方、お問い合わせフォームや商品登録など、デフォルトで用意されたフォームを拡張する場合は「FormExtension」を使って拡張します。
- お問合せフォームに新規項目を追加する場合
- 注文画面に新規項目を追加する場合
- 管理画面の商品登録に新規項目を追加する場合
テキスト入力以外のフォームを実装する
テキスト以外にも、普段よく目にする様々な入力フォームを実装できます。
入力にルールを設定する
フォームには、入力を必須にしたり入力文字数を制限したりといったルールも設定できます。
メールに関するカスタマイズ
メールテンプレートを追加したり、自動送信メールを変更したりするカスタマイズ方法について纏めています。
管理画面のカスタマイズ
管理画面に新しいメニューを追加して、データを追加・更新・削除できるようにするカスタマイズです。
Controller、Repository、FormType、Entity、Twigなど、EC-CUBEの構造が一通り理解できていないと難しいかも。
【実践】よくある質問ページの作成
新規ページの作成からデータベースの拡張、管理画面のカスタマイズまでを応用した実践編です。
まとめ
以上、【EC-CUBE 4】カスタマイズについての記事をまとめました。
冒頭の通り、著者自身も勉強＆実践中です。
引き続き、自身の備忘録の意味合いも込めて、カスタマイズ方法を随時更新していこうと思います。
今後とも、よろしくお願いします！