EC-CUBE4（以降、EC-CUBE）はオープンソースのEC構築プラットフォームとして、非常に高いカスタマイズ性を備えています。本記事では「EC-CUBEをもっと自由に使いたい」「既存機能では足りない」と考えている方に向けて、EC-CUBEカスタマイズの基本的な考え方や主な方法、実際のカスタマイズ例、注意点まで詳しく解説します。

カスタマイズが難しくプロに任せたい方は **「 [ECサイト構築サービス with EC-CUBE](/ec/ec-cube/) 」** をご利用ください。

## EC-CUBEのカスタマイズを初心者ができるのか？結論、難しい。

EC-CUBEのカスタマイズは、単にテンプレートの見た目を変えるだけであれば初心者でも可能ですが、機能を追加・カスタマイズとなるとSymfonyベースの高度なプログラミング知識が求められるため、WordPressのようなCMSを少し触った経験がある程度の方にはかなり難しい内容です。本格的な機能拡張や処理の追加を行うには、PHP、Twig、Doctrine ORM、サービスコンテナなどの理解が必要になります。カスタマイズされる方は、まずは当ページおよび[開発者向けドキュメント](https://doc4.ec-cube.net/)を参考にカスタマイズを進めてみてください。

### PHP・Symfonyの基礎知識が必要

EC-CUBEはSymfonyフレームワークをベースとしているため、基本的なPHPの構文だけでなく、DIコンテナやルーティング、イベント駆動などのフレームワーク特有の知識が必要です。

### ファイル構成が複雑

テンプレート、Entity、Form、Controller、Serviceなど、機能ごとにファイルが分かれており、初学者には全体のつながりを理解するのが難しい傾向があります。

### アップデートやセキュリティ対応も必要

カスタマイズだけでなく、アップデートとの整合性、セキュリティリスクの回避も考慮しなければなりません。

> 参考：[EC-CUBE 4 開発者向けドキュメント](https://doc4.ec-cube.net/)

##  EC-CUBE カスタマイズの基本的な考え方

EC-CUBEはPHPとSymfonyをベースに構築されており、機能追加やデザイン変更、外部連携など幅広いカスタマイズが可能です。プラグイン機構やテンプレート編集により、柔軟に要件を実現できます。

EC-CUBEはソースコードが公開されているオープンソースであるため、本体のソースコードを直接編集することも可能ですが、当社では以下の理由から**本体ソースコードの直接編集は推奨していません。**

- セキュリティホールが発見された際、迅速なアップデート対応が困難になる
- 不具合や問題発生時に、本体とカスタマイズ部分の切り分けが難しくなる
- EC-CUBEアップグレードが困難になる

### カスタマイズの元となるコードの取得について

ソースコードの取得はGithubから取得する方法とEC-CUBE公式サイトからダウンロードするパッケージ版のどちらかで取得できます。
内容は同じではなく、パッケージ版は言語ファイルのキー値が日本語に変換されており、git版と同じ状態ではありません。テンプレートだけ編集される場合は、パッケージ版を基にカスタマイズしても良いですが、gitが使える方は最新のソースコードと現在の状態の差分を見ることができるgit版の利用をお勧めします。

> 参考：[Github](https://github.com/EC-CUBE/ec-cube)

> 参考：[EC-CUBE公式サイト / ダウンロード](https://www.ec-cube.net/download/)

## EC-CUBE カスタマイズの方法

### (1) プラグイン開発

EC-CUBEにはプラグイン機構があり、標準機能を改変せずに新機能を追加できます。独自プラグインの開発により、要件に合った機能拡張が可能です。

EC-CUBE4はバージョンによってプラグインの記述方法が異なります。
- 4.0〜4.1は互換性あり
- 4.2〜4.3は互換性あり

プラグインでは、以下のような拡張が可能で、EC-CUBE本体で実装している内容と同様の機能を実装することができます。(1点注意事項としてプラグインでは言語ファイルの上書きができません。)

- ショッピング側・管理画面側のテンプレートに独自のデザインを差し込む、または置き換える
- Symfonyのサービスコンテナ（アプリケーション全体で使用するオブジェクトを一元管理し、自動的に依存関係を解決・注入する仕組み）を利用して既存機能に介入
- データ取得の条件追加やソート順の変更
- 既存のテーブルにカラムを追加

> 参考：[EC-CUBE4 プラグイン開発ドキュメント](https://doc4.ec-cube.net/plugin_development)

### (2) カスタマイズフォルダでの機能実装

EC-CUBEの/app/Customizeフォルダに各種ファイルを設置することで、プラグインと同様の拡張が可能です。
(プラグインとの違いは1点あり、言語ファイルの上書きが可能です。)

### (3) テンプレート・テーマ編集（Twig）

フロント画面の見た目を変更する場合は、app/template/ 配下にあるTwigテンプレートファイルを編集します。

## 具体的なカスタマイズ例

### トップページ関連のカスタマイズ

- [特定カテゴリの商品表示](/column/top-new-stock-for-ec-cube4/)
- [新着商品の自動表示](/column/top-new-products-for-ec-cube4/)

### 商品一覧・詳細ページのカスタマイズ

- [商品一覧の表示順変更](/column/product-list-sort-order-change-for-ec-cube4/)

### フォーム・UIのカスタマイズ

- [フォーム要素の変更](/column/customize-form-with-twig-for-ec-cube-4/)

### パフォーマンス・最適化

- [HTMLの最適化](/column/html-minify-for-ec-cube-4/)

## カスタマイズに役立つTIPSと注意点

### セキュリティに考慮したコーディング必要

EC-CUBE カスタマイズを行う際は「セキュリティガイドライン」を内容を理解した上で、行うようにしてください。

> 参考：[EC-CUBE 4 開発者向けドキュメントサイト / EC-CUBE 4 セキュリティガイドライン](https://doc4.ec-cube.net/security-guideline/coding)

### キャッシュの扱いに注意

Symfonyは各種ファイルをキャッシュすることによって、実行速度を速める機構があり、ファイルを修正してもキャッシュが利用され変更が反映されない場合があります。
管理画面または以下のコマンドを実行してキャッシュクリアするようにしてください。

```sh
EC-CUBEインストールディレクトリ/app/bin/console cache:clear --no-warmup
```

### デバッグモードについて

環境設定ファイル「EC-CUBEインストールディレクトリ/.env」に以下の記述をするとデバッグモードになります。デバッグモードではキャッシュがされないため、開発時に便利です。
また、SymfonyのProfilerツールも利用でき、画面右下のSymfonyのアイコンをクリックすると、デバッグ内容を確認できます。なお画面が表示されないプログラムのデバッグはhttps://ホスト名/_profilerでProfilerの画面が確認できます。

```
APP_ENV=dev
APP_DEBUG=1
```

### composer updateコマンドは使用してはいけない

composer updateして、利用しているパッケージを更新したいところですが、各バンドルのバージョン指定が厳密でなく、マイナーバージョンの自動アップデートによって不具合が発生し、動作しなくなることがあります。パッケージを導入する場合は基本的に composer install を利用するようにしてください。

## EC-CUBE カスタマイズのご相談はスプレッドワークスへ

「こういうことができる？」「既存のサイトに機能追加したい」「他社で作ったけど不満がある」

――そんなお悩みをお持ちの方は、EC-CUBEのインテグレートパートナーであるスプレッドワークスにぜひご相談ください。

- 4系を中心に多数のEC-CUBEカスタマイズ実績あり
- オリジナルプラグインや外部連携、業務システムとの統合も対応可能
- 中小企業・メーカー向けに特化したご提案が可能

ご相談・お見積もりは無料です。お気軽にお問い合わせください。

EC-CUBE カスタマイズ方法｜初心者が知っておくべき知識と注意点

IT業界歴27年、デザイナーとしてキャリアを始め、デザイン・プログラミング・コンサルを統合したアプローチを提供。幼少期からのプログラミング経験で複数言語・独自フレームワークに精通。年商億超えECサイト運営会社2社の経営を通じ、戦略立案や運営ノウハウを培いました。EC-CUBE公式インテグレートパートナーとして、EC構築・カスタマイズ・運営を一貫サポートし、ビジネス成長に貢献します。

EC-CUBEのカスタマイズ方法を解説、 初心者が知っておくべき知識と注意点

## はじめに

ECサイトを公開した後、「なかなか検索からアクセスが来ない」と悩む方は少なくありません。実は、**サイトを作っただけでは検索エンジンに評価されず、集客にはつながらない**のです。

この記事では、**構築直後から実施すべき基本的なSEO対策を10個厳選**して紹介します。自社で対応できるものも多いため、ぜひチェックリストとしてご活用ください。

---

## SEO対策1：タイトルタグ・ディスクリプションを最適化

すべてのページに**ユニークなtitleタグとmeta description**を設定しましょう。

- 商品名、カテゴリ名、ブランド名を含める
- 検索されるキーワードを自然に組み込む
- 文字数の目安：titleは30文字前後、descriptionは80〜120文字

---

## SEO対策2：URL設計をわかりやすく

検索エンジンはURL構造も評価対象としています。

- `/product/123` より `/product/red-sneakers` のように意味のある文字列にする
- 日本語URLは避ける（文字化け・SNSでの共有に弱い）
- カテゴリ・タグなどもパスに含めて構造化する

---

## SEO対策3：H1・H2など見出しタグを正しく使う

コンテンツごとに **論理的な見出し構造（h1〜h3）** を設定しましょう。

- 1ページにh1は1つだけ（商品名やページタイトル）
- h2以下で説明や特徴、使い方などを整理
- 適切にキーワードを含める

---

## SEO対策4：画像にalt属性を設定

画像には代替テキスト（alt属性）をつけることで、**視覚障害者の支援だけでなくSEOにも有効**です。

- 商品画像には商品名や型番を記載
- 装飾画像には空白のaltでOK（alt=""）

---

## SEO対策5：スマホ対応（モバイルフレンドリー）

Googleはモバイルファーストインデックスを採用しているため、**スマホで見やすく操作しやすい設計**が必須です。

- レスポンシブデザインを採用
- 小さすぎるボタン・リンクの修正
- モバイル用のフォントサイズを最適化

---

## SEO対策6：ページ表示速度の改善

表示速度が遅いと検索順位も下がり、離脱率が上がります。

- 画像はWebP形式や圧縮ツールで軽量化
- キャッシュ設定やCDN（Cloudflareなど）の活用
- 不要なスクリプトやCSSを削減

---

## SEO対策7：構造化データ（リッチリザルト）を設定

検索結果で「レビュー」「価格」「在庫状況」などを表示するためには、**構造化データ（JSON-LDなど）**の設定が必要です。

- 商品ページに「Product」構造化データを追加
- レビューがある場合は「Review」も設定

---

## SEO対策8：サーチコンソールの登録とサイトマップ送信

Google Search Consoleを活用して、**クロール・インデックス状況を可視化**しましょう。

- サイトマップ（XML）を作成して送信
- エラー・重複ページの確認と対応
- 検索クエリやクリック数の分析

---

## SEO対策9：内部リンクの最適化

関連商品やカテゴリを相互にリンクさせ、**クローラーがサイト内を巡回しやすくする構造**を作ります。

- 関連商品ブロックの設置
- パンくずリストの導入
- サイト内検索の強化

---

## SEO対策10：定期的なブログ・コラムの投稿

ECサイトにコンテンツを増やすことで、**検索対象となるキーワードが増え、自然流入を獲得**できます。

- 商品の選び方、使い方、比較記事などをテーマにする
- 定期的に更新する（週1〜月1でもOK）
- 商品ページへの導線を盛り込む

---

## まとめ

ECサイトのSEOは、**構築後すぐに始めることが重要**です。商品ページやカテゴリだけでなく、サイト全体の構造や更新頻度も検索順位に影響します。

まずは今回紹介した10項目をチェックし、自社サイトに取り入れてみましょう。

「何から手をつければよいかわからない」「SEOの内部施策を任せたい」といったご相談も承っています。お気軽にお問い合わせください。

ECサイトを構築しただけでは集客できません。検索流入を増やすために、公開直後から実施すべきSEO対策を10個に絞って具体的に解説。初心者でもできる内容を中心に紹介します。

ECサイト構築後にやるべきSEO対策10選｜検索からの集客を強化する基本施策

ECサイト構築後にやるべきSEO対策10選

## はじめに

ECサイトの構築において、既存サービスだけでは足りず「カスタマイズ」が必要になるケースは多くあります。しかし、気になるのはやはり「費用」。気軽に依頼すると、予想以上の見積もりが出てくることも。

この記事では、**カスタマイズ費用を抑えるための具体的な工夫**と、**開発会社に伝えるべき情報の整理方法**について解説します。

---

## カスタマイズ費用が高くなる原因とは？

まず、費用が高くなる主な要因を理解しましょう。

- 要件が曖昧で、何を作ればいいか不明確
- 想定よりも作業範囲が広い
- 既存システムとの整合性に手間がかかる
- テストや検証が複雑になる
- 設計変更が何度も発生する

これらを避けることで、開発効率が上がり、コストも抑えられます。

---

## カスタマイズ費用を抑えるための5つのポイント

### 1. 要望を明確に文章で整理する

「こんな感じで便利にしたい」ではなく、**具体的な操作イメージ**を言語化しましょう。

**例：悪い伝え方**  
- 「商品登録をもっと楽にしたい」

**例：良い伝え方**  
- 「商品名・価格・画像のCSV一括登録ができるようにしたい」

ワイヤーフレームやExcelなどで画面のイメージを作っておくと、開発会社の理解が早まります。

---

### 2. 「必要なこと」と「できれば欲しいこと」を分ける

必須機能と優先度の低い機能を分けて伝えることで、**段階的な開発提案や費用調整が可能**になります。

| 優先度 | 内容                     |
|--------|--------------------------|
| 高     | 商品の一括登録機能        |
| 中     | カート内で数量変更できる機能 |
| 低     | ユーザーアイコンのカスタマイズ |

---

### 3. 既存の機能・サービスで代用できないか検討する

カスタマイズではなく、**既存のアプリ・プラグイン・外部サービスで代用可能なケース**もあります。

例：
- メルマガ配信 → メール配信ツールを連携
- 商品レビュー → ECパッケージの標準機能を活用

---

### 4. テストや管理機能の簡素化も検討する

開発費用の中には、**運用・管理画面の実装やテスト工数**が大きな割合を占めることがあります。  
可能であれば以下を検討しましょう。

- 管理画面のUIは簡素でもよい（CSV操作など）
- 管理者しか使わない機能は最低限の動作でOK
- テストは自社側で一部実施する

---

### 5. 修正は「まとめて」依頼する

小さな変更でも都度依頼すると、**作業の都度コスト（再構築、テスト、連絡工数など）が発生**します。できる限りまとめて相談しましょう。

---

## 開発会社に伝えるべき主な項目

正確な見積もりと円滑な開発のために、以下の情報は最低限伝えましょう。

1. **現在使っているECシステムやサービス名（例：Shopify、EC-CUBEなど）**
2. **実現したいこと（目的と背景）**
3. **機能の仕様（操作フローや画面イメージ）**
4. **予算感とスケジュール**
5. **誰がどのように使う機能か（一般ユーザーか管理者か）**
6. **他社の類似機能例（あれば）**

---

## まとめ

カスタマイズの費用は、**要件の整理と伝え方次第で大きく変わります**。  
開発会社にとって「何を、なぜ、どのように実現したいのか」が明確であれば、無駄な作業や仕様の行き違いを防げます。

無理に機能を削らずとも、**段階的な実装や代替手段の提案を受けることで、費用を抑えることは十分可能**です。

「費用を抑えて必要な機能だけを実装したい」「まずは相談

ECサイトのカスタマイズ費用をできるだけ抑えるには？見積もりを安くするための準備や、開発会社に正しく伝えるべき要望のまとめ方、コスト削減の工夫をわかりやすく解説します。

ECサイトのカスタマイズ費用を抑える方法と開発会社に伝えるべきポイント

## はじめに

「ECサイトを作るには、いくらかかるの？」これは誰もが最初に抱える疑問です。安く始められるサービスもあれば、数百万円かかるケースもあります。

この記事では、構築方法ごとの費用相場をはじめ、初期費用と月額のランニングコスト、さらに見積もり時のチェックポイントについても詳しく解説します。

## ECサイトの主な費用内訳

ECサイトの費用は、大きく以下の2つに分けられます。

- **初期費用**：構築・導入にかかる一時的なコスト
- **ランニングコスト（月額費用）**：運用を継続するために必要な毎月の支出


## 構築方法別の費用相場

### 1. モール型（楽天、Amazonなど）

| 項目             | 費用の目安              |
|------------------|-------------------------|
| 初期費用         | 0〜6万円程度（出店料）   |
| 月額費用         | 5,000円〜50,000円前後    |
| 手数料           | 売上の5〜15％程度         |

#### 特徴
- 集客力が高くすぐに販売を始められる
- カスタマイズはほとんどできない
- 売上に対して手数料がかかる

### 2. ASP型（Shopify、BASE、STORESなど）

自身でショッピングサイトを作成・開設するなら初期費用はかかりませんが、制作会社やシステム開発会社に依頼すると50万円から150万円程度の費用になるのが一般的です。

| 項目             | 費用の目安              |
|------------------|-------------------------|
| 初期費用         | 0〜200万円程度              |
| 月額費用         | 0〜3万円前後（プランによる） |
| 決済手数料       | 3〜5%程度                |

#### 特徴
- 低コストで手軽に始められる
- デザインテンプレートやアプリで拡張可能
- カスタマイズには一定の制限がある

### 3. オープンソース型（EC-CUBE、Magentoなど）

制作会社やシステム開発会社に依頼すると100万円から300万円程度の費用になるのが一般的です。
自身でサーバーを用意して構築することも可能ですが、セキュリティや運用の安定性といった観点からは、オープンソース型のショッピングサイトは専門のプロに依頼することをおすすめします。

| 項目             | 費用の目安              |
|------------------|-------------------------|
| 初期費用         | 0万〜1000万円程度         |
| 月額費用         | 1万円〜10万円前後（サーバー費用） |

#### 特徴
- 高い自由度と拡張性が魅力
- 専門知識が必要で構築コストが高くなりがち
- 長期運用に向いている

### 4. スクラッチ開発（完全オリジナル開発）

| 項目             | 費用の目安              |
|------------------|-------------------------|
| 初期費用         | 300万〜1,000万円以上       |
| 月額費用         | サーバー費＋保守費用など（数万円〜） |

#### 特徴
- 業務に合わせた完全なオリジナルECサイトが実現可能
- 大規模・特殊要件のプロジェクト向け
- 長期間の運用を前提とする

## 初期費用に含まれるもの

- サイト設計・デザイン制作
- サーバー・ドメイン設定
- システム構築（カート、決済、会員機能など）
- 商品登録作業（初期分）
- テスト・公開準備
- 利用規約・特商法ページの作成

## ランニングコスト（月額）に含まれるもの

- サーバー・ドメイン費用（1,000円〜数万円）
- 決済代行手数料（売上の3〜5％）
- 保守・サポート費用（1万円〜）
- メルマガ配信やアプリなどのサブスクリプション費用

## コストを抑えるためのポイント

1. **最小構成でスタートする**
   - MVP（最低限の機能）で開始し、後から拡張する

2. **テンプレート・既存アプリを活用**
   - ASP型では豊富なテンプレート・プラグインを活用する

3. **外注範囲を明確に**
   - デザイン、商品登録、撮影など、社内対応できる部分を見極める

4. **ランニングコストも比較する**
   - 初期費用が安くても、手数料や月額料金が高いこともあるため注意

## 見積もり時に確認すべきポイント

- 費用内訳が詳細に提示されているか
- 保守・サポート体制とその費用
- 今後の機能追加の際のコスト
- ドメイン・サーバー費用は含まれているか
- テストや公開後のフォロー体制の有無

## まとめ

ECサイト構築の費用は、選ぶ方法や規模によって大きく異なります。安く始める方法もあれば、将来的な運用を見据えてしっかり作り込む選択肢もあります。

重要なのは、「自社に合った構築方法とコスト感」を見極めることです。

構築費用についてもっと詳しく知りたい方、具体的な見積もりを取りたい方は、お気軽にご相談ください。

ECサイトを構築するにはいくらかかるのか？初期費用と月額費用の相場、構築方法別のコスト、見積もり時に確認すべきポイントまで初心者にもわかりやすく解説します。

ECサイト構築の費用相場は？初期費用とランニングコストを詳しく解説

## はじめに

ECサイトを構築する際、「どんな機能が必要か？」というのは非常に重要なポイントです。機能を適切に選定することで、ユーザー満足度を高め、運用効率を上げることができます。

この記事では、ECサイトに必要な基本機能と、ビジネスに応じた拡張機能、さらに機能選定のポイントについて詳しく解説します。

---

## ECサイトの基本機能一覧

以下は、どのような規模や業種のECサイトでも最低限必要となる機能です。

### 商品管理機能

- 商品登録（商品名、価格、説明、画像など）
- 商品の在庫管理
- カテゴリ分類・タグ管理
- バリエーション（色・サイズなど）対応

### カート機能

- カートに追加・削除
- 複数商品同時購入対応
- クーポン・割引コード対応（任意）

### 決済機能

- クレジットカード決済
- コンビニ・銀行振込
- キャッシュレス決済（PayPay、Apple Pay など）
- 外部決済サービス連携（Stripe、PayPal など）

### 会員登録・管理機能

- 会員登録・ログイン・退会
- 会員情報編集（住所・電話番号など）
- 購入履歴の確認
- パスワード再設定機能

### 注文管理機能

- 注文内容確認・ステータス管理
- 自動メール通知（注文確認、発送完了など）
- 納品書・領収書出力

### 配送設定

- 配送料金の地域別設定
- 配送業者との連携（ヤマト、佐川など）
- 配送希望日時の指定

### セキュリティ・法令対応

- SSL対応（HTTPS）
- 特定商取引法に基づく表記ページ
- プライバシーポリシー表示
- 利用規約ページ

---

## あると便利な拡張機能・オプション機能

ビジネスの成長に合わせて追加を検討したい機能です。

### マーケティング・販促関連

- レコメンド機能（関連商品表示）
- メルマガ配信
- ポイント・会員ランク機能
- SNS連携・シェアボタン
- アフィリエイト対応

### SEO・アクセス解析

- SEOタグ管理（title, meta description）
- Google Analytics連携
- サイトマップ自動生成

### 管理機能・業務効率化

- 管理者権限の階層設定
- CSV一括アップロード・ダウンロード
- 外部在庫・販売管理システムとの連携
- 問い合わせ管理（フォーム、チケット制など）

---

## 機能選定のポイント

### 1. 必要最低限を見極める

すべての機能を盛り込もうとすると、コストや開発工数が膨らみます。**「まず必要なもの」**と**「後から追加してよいもの」**を切り分けることが大切です。

### 2. ビジネスモデルに合うか

たとえば定期購入やサブスクリプション販売を考えている場合は、通常のカート機能だけでは対応できません。**販売形態に応じた機能**が必要になります。

### 3. 運用負荷を考慮する

高機能すぎる管理画面は、運用担当者にとって逆に負担になることもあります。**実際の運用者が使いやすいか**を事前に確認しましょう。

### 4. 拡張性・カスタマイズ性

今後の成長を見越して、**あとから機能追加や改修がしやすい構成**になっているかも重要な判断材料です。

---

## まとめ

ECサイトの構築には、商品の販売を可能にする基本機能だけでなく、売上向上や業務効率化をサポートする拡張機能の検討も不可欠です。

しかし、すべてを一度に揃える必要はありません。まずは必要な機能に絞り、実際の運用を通じて段階的に拡張していくのが賢明です。

「どの機能が必要か判断がつかない」「機能要件を整理してほしい」という方は、お気軽にご相談ください。事業フェーズに合った最適な構成をご提案いたします。

初めてのECサイト構築でも安心。最低限必要な機能から、運用に役立つ拡張機能まで一覧で紹介。どの機能を重視すべきか、選定のポイントも解説します。

ECサイト構築に必要な機能一覧と選定のポイントを徹底解説

## はじめに

ECサイトを立ち上げたいと思ったとき、最初にぶつかる壁は「何から始めればいいのかわからない」ということではないでしょうか。

この記事では、初めての方でもわかるように、ECサイト構築の流れと事前に準備しておくべきことを順を追って解説します。

---

## ECサイト構築の基本的な流れ

以下のステップで進めることで、スムーズに構築と公開を行うことができます。

### 1. 目的とターゲットを明確にする

まずは、ECサイトを作る目的を明確にしましょう。

- 何を売るのか（商品・サービス）
- 誰に売るのか（ターゲット層）
- どのように届けたいのか（ブランド戦略）

このフェーズでの整理が、今後の構築方針や設計に大きな影響を与えます。

### 2. 構築方法・ツールの選定

自社に最適な構築方法を選びます。

| 構築方法      | 特徴                              |
|---------------|-----------------------------------|
| モール出店型   | Amazon、楽天など、集客力が高い      |
| ASP型         | Shopify、BASE、STORESなど、導入が簡単 |
| オープンソース型 | EC-CUBE、Magentoなど、自由度が高い  |
| スクラッチ開発 | 独自システム開発、機能要件に合わせやすい |

### 3. サイト設計と仕様決め

次に、サイトの構成や機能を設計します。

- 商品カテゴリーや一覧ページの構成
- カート・決済・会員登録などの機能
- スマホ対応（レスポンシブ対応）
- 管理画面の使いやすさ

ワイヤーフレームを作成して、構造を可視化するのもおすすめです。

### 4. コンテンツ準備

実際に掲載するためのデータを揃えます。

- 商品写真（複数枚がおすすめ）
- 商品説明文（SEOを意識したテキスト）
- 会社概要、特商法表記、プライバシーポリシー
- バナー、ロゴ、ブランド紹介文など

この段階で十分なコンテンツを準備しておくと、構築後の運用がスムーズになります。

### 5. サイト構築・設定

選定したツールに合わせてサイトを構築します。開発会社に依頼する場合は、要件定義を明確に伝えることが重要です。

- ドメイン・サーバー設定
- 決済・配送設定
- 商品登録
- 各種ページ作成（TOP、商品一覧、詳細、カート、マイページなど）

### 6. テストと公開準備

本番公開前に必ずテストを行います。

- 商品購入の動作確認
- メール送信内容の確認
- スマホ・PCでの見え方チェック
- セキュリティやSSLの設定確認

このフェーズで問題がないことを確認したうえで公開します。

### 7. 公開・運用開始

公開後は以下の運用業務が発生します。

- 商品の追加・更新
- 注文対応・発送管理
- 問い合わせ対応
- 広告・SEOによる集客
- アクセス解析と改善

---

## ECサイト構築に必要な準備リスト

事前に準備しておくとスムーズなものをまとめておきます。

- 商品画像・説明文
- サイトロゴ、ブランドカラー
- 利用する決済サービス（PayPal、Stripeなど）
- 送料や配送業者の選定
- 特定商取引法に基づく表記
- プライバシーポリシー
- 会社情報・お問い合わせ窓口
- ドメイン・サーバーの契約情報

---

## まとめ

ECサイト構築は、事前準備と流れをしっかり理解しておくことで、スムーズに進行できます。ツール選定や構成の決定はもちろん、運用を見越した準備も重要です。

構築方法に悩んだり、サイト設計で迷ったりすることがあれば、ぜひ専門の制作会社に相談してみるのも一つの手です。

「構築から運用までをトータルでサポートしてほしい」とお考えの方は、お気軽にご相談ください。

初めてのECサイト構築でも安心。事前準備から公開・運用開始まで、具体的なステップと必要なポイントをわかりやすく解説します。小規模事業者や個人でも活用できる構築手順を紹介。

ECサイト構築の流れと必要な準備をわかりやすく解説

## はじめに

「ネットショップ」と「ECサイト」という言葉、なんとなく同じ意味で使っていませんか？実はこの2つの言葉、似ているようで少しだけニュアンスが違います。

本記事では、それぞれの定義や違いを明確にし、さらにECサイトの種類や特徴についてもわかりやすく解説します。

---

## ネットショップとECサイトの違いとは？

まずは、それぞれの用語の意味を確認してみましょう。

### ECサイトとは？

ECサイトとは「Electronic Commerce（電子商取引）」の略で、**インターネットを介して商品やサービスを販売・購入できるウェブサイト全般**を指します。

つまり、広義にはAmazonや楽天のようなモール型サイトから、自社運営のオンラインショップまで含まれます。

### ネットショップとは？

ネットショップは、**商品をインターネット上で販売するお店のこと**を指します。特に、自社で運営しているオンラインショップを「ネットショップ」と呼ぶことが多いです。

### 違いのまとめ

| 用語        | 意味                                 | 使用される場面                     |
|-------------|--------------------------------------|------------------------------------|
| ECサイト    | 電子商取引が行われるサイト全般       | ビジネス・マーケティングの用語     |
| ネットショップ | オンライン上のお店のこと             | 日常会話や小規模事業者向けの表現 |

つまり、「ネットショップ」は「ECサイト」という大きなくくりの中に含まれる存在、と捉えるとよいでしょう。

---

## ECサイトの種類ごとの特徴

ECサイトには主に以下の3つの種類が存在します。

### 1. モール型ECサイト

Amazonや楽天市場、Yahoo!ショッピングのように、**複数の出店者が集まる大型ショッピングモールのような仕組み**です。

#### 特徴
- 集客力が強く、アクセスを得やすい
- サイト構築の手間が不要
- 販売手数料や月額費用が発生する

#### 向いている人・企業
- すぐに販売を始めたい人
- 集客に自信がない小規模事業者

### 2. ASP型自社ECサイト

Shopify、BASE、STORESなどが該当します。**自分のブランド専用のネットショップをクラウド上で構築できるサービス**です。

#### 特徴
- 初期費用が安く、短期間で開設可能
- デザインテンプレートも豊富
- カスタマイズには制限あり

#### 向いている人・企業
- 自社ブランドを強く打ち出したい
- デザインや独自ドメインにこだわりたい

### 3. オープンソース型・スクラッチ型

EC-CUBEやMagentoを使った構築、あるいはゼロからシステム開発する「スクラッチ型」です。

#### 特徴
- 完全な自由設計が可能
- 拡張性・独自性が高い
- 専門知識や開発コストが必要

ネットショップとECサイトの違いとは？種類ごとの特徴をわかりやすく解説

## はじめに

インターネットを活用して商品を販売する「ECサイト（ネットショップ）」は、今や個人から企業まで多くの人が導入を検討しています。しかし、初めての方にとっては「何が必要？」「どう作るの？」といった疑問も多いはずです。

この記事では、ECサイトの基本的な仕組みや導入方法について、初心者の方にもわかりやすく解説します。

## ECサイトとは？

ECサイト（Electronic Commerce Site）とは、インターネット上で商品やサービスを販売するWebサイトのことです。一般的に「ネットショップ」とも呼ばれ、商品を閲覧・選択し、カートに入れて決済するという一連の購買体験をWeb上で完結できます。

### ECサイトの種類

ECサイトには大きく分けて2つの種類があります。
自社で独自に開発・運用する「自社ECサイト」と、Amazonや楽天などのように複数の出店者が集まる「モール型ECサイト」に分けられます。

- **モール型**（例：Amazon、楽天、Yahoo!ショッピング）
- **自社EC型**（自社独自のサイト：ShopifyやEC-CUBEで構築）

モール型は集客力が高く、出店が簡単ですが、販売手数料や制限も多いです。一方、自社ECは自由度が高くブランド構築に有利ですが、集客や構築には工夫が必要です。

## ECサイトの基本的な仕組み

ECサイトは、以下のような機能によって成り立っています。

- **商品管理**：商品名、価格、在庫、説明文などを登録・編集
- **カート機能**：購入する商品を一時的に保存
- **決済機能**：クレジットカードや銀行振込、各種決済サービスに対応
- **会員管理**：ユーザーの登録・購入履歴・ポイントなどを管理
- **注文管理**：注文状況の確認や発送処理など
- **セキュリティ**：SSL、個人情報保護、認証機能など

これらの機能を適切に整えることで、ユーザーにとって使いやすく、安全なショップ運営が可能になります。
この他にも以下のような機能を利用することによって、より効率的な運用が可能となり、売上アップも期待できます。

- **マーケティング機能**：メルマガ配信、SNS連携、リターゲティング広告などによる集客や販促
- **キャンペーン機能**：クーポン発行、セール設定、ポイント倍付けなど期間限定の施策
- **デザイン編集機能**：テンプレート選択やレイアウト変更により、自社ブランドに合わせた見た目の調整
- **レビュー・口コミ機能**：ユーザーが商品に対して評価・コメントを投稿できる仕組み
- **多言語・多通貨対応**：海外ユーザー向けに言語・通貨を切り替える機能
- **在庫連携・物流機能**：倉庫管理システム（WMS）や配送業者との連携
- **アナリティクス機能**：アクセス解析、購買データ分析、離脱率の可視化などによる改善支援
- **BtoB対応機能**：見積・掛け払い・契約単価など法人向け販売への対応

これらの機能は、**ECサイト作成サービス** にあらかじめ備わっていることもあれば、外部のツール（メルマガ配信サービスやアクセス解析ツールなど）と連携して実現することもあります。

## ECサイトの種類(ビジネスモデル)

### BtoC（Business to Consumer）

一般消費者向けのオンラインストア。例：アパレル、食品、雑貨など。

### BtoB（Business to Business）

企業間での受発注に使われるECサイト。見積もり機能や掛け売りなどが必要な場合もあります。

### CtoC（Consumer to Consumer）

個人間取引を行うEC。例：メルカリなど。

### D2C（Direct to Consumer）

メーカーが中間業者を通さず、消費者へ直接販売するスタイル。

## ECサイトを導入するメリットとデメリット

### メリット

- 全国のユーザーにアプローチできる
- 実店舗よりも低コストでスタートできる
- 顧客データを活用したマーケティングが可能
- 24時間365日営業が可能

### デメリット

- 集客は自力で行う必要がある（SEO、広告など）
- サイト構築・運用に一定の知識やコストが必要
- セキュリティや個人情報管理への対応が必須

## ECサイト導入の手順

ECサイトを構築・運営するには、以下のステップがあります。

### 1. 目的の明確化

- 何を売るのか
- 誰に売るのか
- ブランドをどう見せたいのか

を整理しておきましょう。

### 2. サービスや構築方法の選定

- モール型に出店するのか
- 自社ECサイトを構築するのか
- ASP型（Shopify、BASE、STORES）か、オープンソース型（EC-CUBE、Magento）か

### 3. サイト設計・デザイン

- トップページ、商品一覧、詳細ページなどの構成
- スマホ対応（レスポンシブデザイン）

### 4. システム構築・設定

- 商品登録
- 決済・配送方法の設定
- 特商法・プライバシーポリシーの記載

### 5. テスト・公開

- 実際に商品を購入してみて動作確認
- 公開後は集客と運用フェーズへ

## まとめ

ECサイトは、ビジネスをオンラインに広げる有効な手段です。この記事では、ECサイトの基本的な仕組みから、構築の手順までを紹介しました。

まずは「誰に」「何を」「どうやって」売るのかを明確にし、適切な構築方法を選ぶことが成功の第一歩です。

「自社に合った構築方法がわからない」「見積もりだけでも取りたい」という方は、ぜひお気軽にご相談ください。

ECサイトとは何か、どのような仕組みで運営されているのかを初心者にもわかりやすく解説します。ECサイトの種類、必要な機能、構築の手順まで詳しく紹介。

ECサイトとは？初心者でもわかる仕組みと導入方法

## はじめに
プロジェクトごとに脆弱性のチェックを手動で行うのは大変です。そこで、依存するNodeモジュールの脆弱性を漏れなく確実に把握し、迅速に対応できるよう監視を自動化する仕組みをGithub Actionsで構築しました。
当社ではNodeモジュールの管理にpnpmを利用していますが、npmのaudit機能でも同様の監視自動化は実現可能です。

## 仕様

今回の仕組みは以下の仕様にしました。

- **脆弱性情報の取得**
pnpmのaudit機能を利用し、プロジェクトの依存関係に対する脆弱性情報を取得する。
- **定期実行**
定期的にGitHub Actionsでauditを実行し、脆弱性情報を取得する。
- **Issueによる管理**
auditの結果から各脆弱性をIssueとして管理し、新たな脆弱性が発生した場合はIssueを作成。
- **メンションによる通知**
issueの本文にメンションをつけて通知してメールなどで把握するようにする。
- **Issueの自動クローズ**
修正された脆弱性に対応するIssueは自動でクローズする。

## Github Actionsのworkflowファイル

```yaml
name: pnpm Audit Security Check

on:
  schedule:
    - cron: '0 0 * * *'
  workflow_dispatch:

defaults:
  run:
    working-directory: "プロジェクトの設置パス"

jobs:
  audit:
    if: github.ref == 'refs/heads/main' // 対象とするブランチ名
    runs-on: ubuntu-latest
    steps:
      - name: リポジトリをチェックアウト
        uses: actions/checkout@v3

      - name: Node.js 環境をセットアップ
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: pnpm をグローバルインストール
        run: npm install -g pnpm

      - name: 依存関係をインストール
        run: pnpm install

      - name: pnpm audit を実行して JSON 出力を保存
        id: audit
        continue-on-error: true
        run: |
          pnpm audit --json > audit.json || touch audit.json

      - name: audit.json の存在確認
        run: |
          ls -la
          cat audit.json

      - name: audit 結果を解析して Issue を作成/更新および不要な Issue をクローズ
        if: always()
        uses: actions/github-script@v6
        with:
          script: |
            const fs = require('fs');
            let auditData;
            try {
              // ファイルパスをリポジトリルートからの相対パスで指定する
              auditData = JSON.parse(fs.readFileSync('audit.json', 'utf8'));
            } catch (error) {
              core.setFailed("audit.json の読み込みに失敗しました: " + error.message);
              return;
            }
            
            // 脆弱性情報の抽出（advisories または vulnerabilities プロパティ）
            let vulnerabilities = [];
            if (auditData.advisories) {
              vulnerabilities = Object.values(auditData.advisories);
            } else if (auditData.vulnerabilities) {
              vulnerabilities = Object.values(auditData.vulnerabilities);
            }
            
            // 現在の audit 結果に含まれる脆弱性タイトルの Set を作成
            const newVulnTitles = new Set();
            for (const vulnerability of vulnerabilities) {
              // 脆弱性識別子：cves があれば先頭の値、なければ github_advisory_id を利用
              const identifier = (vulnerability.cves && vulnerability.cves.length > 0) ? vulnerability.cves[0] : vulnerability.github_advisory_id;
              const titlePart = vulnerability.title ? vulnerability.title : "No title provided";
              const issueTitle = `${identifier} ${titlePart}`;
              newVulnTitles.add(issueTitle);
            }
            
            // 既存の「vulnerability-alert」ラベル付きのオープンな Issue を取得
            const { data: existingIssues } = await github.rest.issues.listForRepo({
              owner: context.repo.owner,
              repo: context.repo.repo,
              labels: 'vulnerability-alert',
              state: 'open',
              per_page: 100
            });
            const existingTitles = new Set(existingIssues.map(issue => issue.title));
            
            // 新たに報告されている脆弱性について Issue を作成
            for (const vulnerability of vulnerabilities) {
              const identifier = (vulnerability.cves && vulnerability.cves.length > 0) ? vulnerability.cves[0] : vulnerability.github_advisory_id;
              const titlePart = vulnerability.title ? vulnerability.title : "No title provided";
              const issueTitle = `${identifier} ${titlePart}`;
              
              if (!existingTitles.has(issueTitle)) {
                let body = `@チーム名\n\n`; // メンション
                body += `**Package:** ${vulnerability.module_name}\n`;
                body += `**Severity:** ${vulnerability.severity}\n`;
                body += `**Vulnerable Versions:** ${vulnerability.vulnerable_versions}\n`;
                body += `**Patched Versions:** ${vulnerability.patched_versions}\n`;
                body += `**Recommendation:** ${vulnerability.recommendation}\n`;
                if (vulnerability.references) {
                  body += `**More info:** ${vulnerability.references}\n`;
                }
                if (vulnerability.cvss && vulnerability.cvss.score) {
                  body += `**CVSS Score:** ${vulnerability.cvss.score} (${vulnerability.cvss.vectorString})\n`;
                }
                
                await github.rest.issues.create({
                  owner: context.repo.owner,
                  repo: context.repo.repo,
                  title: issueTitle,
                  body: body,
                  labels: ['vulnerability-alert']
                });
              }
            }

            // 既存の Issue のうち、現状の audit 結果に含まれなくなった Issue をクローズする
            for (const issue of existingIssues) {
              if (!newVulnTitles.has(issue.title)) {
                await github.rest.issues.update({
                  owner: context.repo.owner,
                  repo: context.repo.repo,
                  issue_number: issue.number,
                  state: 'closed'
                });
              }
            }
```

## Issueの例

workflowが実行され、脆弱性がある場合は以下のようなIssueが発行されます。

![Issueの例](/upload/save_image/column/nodejs/pnpm-audit.png)


## まとめ

Nodeモジュールの脆弱性監視を自動化するために、pnpm audit と GitHub Actions を活用する方法を紹介しました。
この仕組みにより、脆弱性が検出された際は自動でIssueが作成され、修正が行われたものは不要なIssueがクローズされるため、セキュリティリスクを迅速に把握し、対応することが可能となり、開発現場での負担を軽減し、システムの安全性を向上させることができます。
こういった手法を活用して、プロジェクトのセキュリティ管理を強化してもらえればと思います。

IT業界歴27年。幼少期からプログラミングに触れ、ReactやNext.jsなどのモダンなフロントエンドフレームワークや、JavaやPHPなどのバックエンド言語に精通。独自フレームワークの開発経験を活かし、サーバーサイドからフロントエンドまで幅広く対応しています。技術を深く理解し、効率的かつ拡張性の高いシステム構築を目指すエンジニアです。

GitHub Actionsとpnpm auditで実装するNodeモジュールの脆弱性監視の自動化

環境変数を使用する際、毎回定義があるかの確認や数値への変換、IDEのコード補完が使えないなどの面倒な点が多数あります。
そこで、事前に環境変数の型を定義することで、コードの品質向上とコーディング時の利便性を改善する方法を、当社では採用しています。

環境変数ファイル
**.env.production**
に環境変数を設定します。

```
NEXT_VAR="テスト"
EXSAMPLE_VAR_STRING="文字列"
EXSAMPLE_VAR_NUMBER=1234
```

次に
**env.d.ts**
ファイルを作成し、環境変数の型を定義します。

```typescript
export type CustomProcessEnv = {
 NEXT_VAR: string
 EXSAMPLE_VAR_STRING: string
 EXSAMPLE_VAR_NUMBER: number
}

declare namespace NodeJS {
 interface ProcessEnv extends CustomProcessEnv {}
}
```

ビルド時に
**env.d.ts**
ファイルを読み込み、環境変数と型をマッピングしたファイルを生成するためのスクリプト
**generate_env_map.js**
ファイルを作成します。
ファイルの生成はts-morphというTypescriptのコードを解析、リファクタリング、生成などの処理を行うライブラリを利用します。
また、環境変数ファイルなどを読み込みためのdotenvも利用しますので、インストールされていなければ追加してください。

```javascript
const { Project } = require('ts-morph')
const fs = require('fs')
const path = require('path')

// .envを読み込む
require('dotenv').config()

/**
 * 環境変数の型マッピングを生成します。
 */
function generateEnvMap() {
 const envDtsPath = path.resolve(__dirname, 'env.d.ts')
 const envMapPath = path.resolve(__dirname, 'env_map.ts')

 // プロジェクトの設定
 const project = new Project({
 tsConfigFilePath: path.resolve(__dirname, 'tsconfig.json'),
 })

 // 型定義ファイルを追加
 const sourceFile = project.addSourceFileAtPath(envDtsPath)

 // 型エイリアスを取得
 const typeAlias = sourceFile.getTypeAliasOrThrow('CustomProcessEnv')

 // プロパティを取得
 const properties = typeAlias.getType().getProperties()

 // 環境変数のマッピングを収集
 const envVars = properties.map((prop) => {
 const name = prop.getName()
 const declarations = prop.getDeclarations()
 if (declarations.length === 0) {
 throw new Error(`No declarations found for environment variable ${name}`)
 }
 const type = declarations[0].getType().getText()

 if (type !== 'string' && type !== 'number' && type !== 'boolean') {
 throw new Error(`Unsupported type for environment variable ${name}: ${type}`)
 }

 return { name, type }
 })

 // サーバーサイドとクライアントサイドのマッピングを分離
 const serverEnvVars = envVars
 const clientEnvVars = envVars.filter((env) => env.name.startsWith('NEXT_PUBLIC_'))

 // クライアントサイド用の値を取得
 const clientEnvValues = clientEnvVars.map((env) => {
 const value = process.env[env.name]
 if (value === undefined) {
 throw new Error(`Environment variable ${env.name} is not defined.`)
 }

 // 型に基づいて値を適切に変換
 let formattedValue
 switch (env.type) {
 case 'boolean':
 formattedValue = value === 'true'
 break
 case 'number':
 const num = Number(value)
 if (isNaN(num)) {
 throw new Error(`Environment variable ${env.name} should be a valid number.`)
 }
 formattedValue = num
 break
 case 'string':
 default:
 formattedValue = value
 }

 return { name: env.name, type: env.type, value: formattedValue }
 })

 // マッピングファイルのテンプレート
 const fileContent = `
 export const serverEnvMap: Record<string, 'string' | 'number' | 'boolean'> = {
 ${serverEnvVars.map((env) => `'${env.name}': '${env.type}',`).join('\n ')}
 };

 export const clientEnvMap: Record<string, { type: 'string' | 'number' | 'boolean'; value: string | number | boolean }> = {
 ${clientEnvValues.map((env) => `'${env.name}': { type: '${env.type}', value: ${JSON.stringify(env.value)} },`).join('\n ')}
 };
 `

 // ファイルを書き出す
 fs.writeFileSync(envMapPath, fileContent, { encoding: 'utf8' })

 console.log('env_map.ts has been generated successfully.')
}

module.exports = { generateEnvMap }

// スクリプトが直接実行された場合に関数を呼び出す
if (require.main === module) {
 generateEnvMap()
}
```

buildやstart時に
**env_map.ts**
ファイルが生成されるように、以下のように
**package.json**
を修正します。

```json
{
 "name": "Youre App",
 "version": "0.0.1",
 "license": "",
 "scripts": {
 "generate_env_map": "dotenvx run -f .env.production -- node generate_env_map.js",
 "dev": "pnpm generate_env_map && NODE_TLS_REJECT_UNAUTHORIZED=0 next dev --turbo",
 "build": "pnpm generate_env_map && next build",
 "start": "pnpm generate_env_map && next start",
 },
 ...
```

生成されたファイル
***env_map.ts***
は以下のように出力されます。

```typescript
 export const serverEnvMap: Record<string, 'string' | 'number' | 'boolean'> = {
 'NEXT_VAR': string
 'EXSAMPLE_VAR_STRING': 'string'
 'EXSAMPLE_VAR_NUMBER': 'number'
 };
 export const clientEnvMap: Record<string, { type: 'string' | 'number' | 'boolean'; value: string | number | boolean }> = {
 'NEXT_VAR': { type: 'string', value: "テスト" },
 };
```

環境変数を利用するためのユーティリティ
**EnvUtil.ts**
を作成します。

```typescript
import { CustomProcessEnv } from 'env'
import { serverEnvMap, clientEnvMap } from 'env_map'

/**
 * 環境変数を取得します。
 *
 * @param key - 環境変数のキー
 * @param options - { type?: 'string' | 'number' | 'boolean', default?: CustomProcessEnv[K] }
 * @returns 環境変数の値（存在しない場合は default）
 */
export function getEnv<K extends keyof CustomProcessEnv>(key: K, defaultValue?: CustomProcessEnv[K]): CustomProcessEnv[K] {
 if (defaultValue !== undefined) {
 return defaultValue
 }

 let type: 'string' | 'number' | 'boolean' = 'string'
 let value: string | number | boolean = ''

 // サーバーサイド
 if (typeof window === 'undefined') {
 type = serverEnvMap[key]
 if (!type) {
 throw new Error(`${key} 環境変数は定義されていません。`)
 }

 value = process.env[key] as string
 if (value === undefined) {
 throw new Error(`${key} 環境変数を定義してください。`)
 }
 } else {
 // クライアントサイド
 const env = clientEnvMap[key]
 if (!env) {
 throw new Error(`${key} 環境変数を定義してください。`)
 }
 type = env.type
 value = env.value
 }

 switch (type) {
 case 'boolean':
 return ((typeof value === 'boolean' && value) || value === 'true') as CustomProcessEnv[K]
 case 'number':
 const parsedNumber = Number(value)
 if (isNaN(parsedNumber)) {
 throw new Error(`${key} 環境変数は数値で設定してください。[VALUE] ${value}`)
 }
 return parsedNumber as CustomProcessEnv[K]
 case 'string':
 default:
 return value as CustomProcessEnv[K]
 }
}
```

以下のようにgetEnv関数を使い環境変数を使うことができます。コード補完も出来るようになりますので試してみてください。

```typescript
import { getEnv } from 'EnvUtil'

getEnv('NEXT_VAR')
```

Next.jsの環境変数にTypescriptの型を定義する方法

## EC-CUBE 4

### 管理画面で確認する

**設定 -> システム設定 -> システム情報** で確認することができます。

![EC-CUEB4のシステム情報画面](/upload/save_image/column/ec-cube/ec-cube_version_4.png)

### ファイルで確認する

**[EC-CUBEインストールディレクトリ]/src/Eccube/Common/Constant.php**
```php
namespace Eccube\Common;

class Constant
{
    /**
     * EC-CUBE VERSION.
     */
    public const VERSION = '4.3.0';
```

***

## EC-CUBE 3

### 管理画面で確認する

**設定 -> システム情報設定 -> システム情報** で確認することができます。

![EC-CUEB3システム情報画面](/upload/save_image/column/ec-cube/ec-cube_version_3.png)

### ファイルで確認する

**[EC-CUBEインストールディレクトリ]/src/Eccube/Common/Constant.php**
```php
namespace Eccube\Common;

class Constant {

    /**
     * EC-CUBE VERSION.
     */
    const VERSION = '3.0.18-p6';
```

***

## EC-CUBE 2

### ファイルで確認する

**[EC-CUBEインストールディレクトリ]/data/class/SC_Initial.php**
```php
/**
 * アプリケーションの初期設定クラス.
 *
 * @author EC-CUBE CO.,LTD.
 *
 * @version $Id$
 */
class SC_Initial
{
    /**
     * コンストラクタ.
     */
    public function __construct()
    {
        /* EC-CUBEのバージョン */
        defined('ECCUBE_VERSION') || define('ECCUBE_VERSION', '2.25.0');
    }
```

EC-CUBEバージョン確認

最新のEC構築プラットフォームやデザイン、マーケティング戦略を活用し、クライアントの売上拡大を強力にサポート。サイト構築から運営コンサルティング、システム連携まで一貫して対応します。

EC-CUBEのバージョン確認方法

[「EC-CUBE Advent Calendar 2021」](https://qiita.com/advent-calendar/2021/ec-cube)24日目の投稿です。
先日、「[画像変換・配信エンジン ImageFlux](https://www.sakura.ad.jp/information/pressreleases/2021/12/15/1968208756/)」が、小規模から利用しやすい4つの料金プランにリニューアルしました。
550円/月～と導入しやすい価格設定になったので、早速、EC-CUBE4で試してみました。

---

### ImageFluxとは

ImageFluxは、さくらインターネットとピクシブで共同で開発・提供している画像変換・配信エンジンです。 
1枚の画像をもとにデバイスに最適化された画像を簡単に生成し、高速かつ高品質で配信できます。 
リリースから5周年を迎えるサービスで、料金プランの変更により、さらに使いやすくなりました。

**参考**: [ImageFlux](https://www.sakura.ad.jp/services/imageflux/)

ImageFluxを導入すると、次のような課題が解決できます:

- よりきれいな商品画像を使用したい場合
- 商品一覧で快適に多くの商品を表示させたい場合

ImageFluxは自動で画像変換を行うため、以下のリソース削減が期待できます:

- サーバリソース（CPU、ストレージ）
- ネットワークリソース
- 開発リソース

---

### ImageFluxの申し込みと設定

ImageFluxの申し込みには、さくらインターネットのアカウントが必要です。

![申し込み画面](/upload/save_image/column/ec-cube/imageflux_001.jpg)

[申し込み画面](https://www.sakura.ad.jp/services/imageflux/)からプランを選択します。
申込内容を確認し、アクティベートを完了させます。

![申込内容確認画面](/upload/save_image/column/ec-cube/imageflux_002.jpg)

アクティベート画面が出ましたら、アクテベートしてください。
申し込みは、以上です。

引き続き、設定を行います。

### オリジンサーバの設定

![](/upload/save_image/column/ec-cube/imageflux_003.jpg)

オリジン設定では、オリジンとなるサーバの情報を入力してください。

- Type: HTTP
- Scheme: https
- Host: **EC-CUBEのドメイン名**

#### Signed URL設定

- 署名付きURLを使用する: チェック
- Signing Secret: 自動生成をクリックして生成

今回は、パスプレフィックス毎のパラメータ設定は行いませんので以上となります。
設定をクリックします。
状態が運用中に代わりましたら、設定完了となります。

![オリジン設定画面](/upload/save_image/column/ec-cube/imageflux_004.jpg)

2点情報が必要なので、控えておいてください。

- Name：*******.imageflux.jp
- Signing Secret：********

---

### EC-CUBEの設定

ImageFluxの設定が完了したら、以下を設定します:

1. `app/Customize/Twig/Extension/ImageFluxExtension.php`を追加
2. `Signing Secret`と`ImageFluxのURL`を設定

**app/Customize/Twig/Extension/ImageFluxExtension.php**

```php
protected $signing_secret = "********";
protected $image_flux_url = "https://*********.imageflux.jp";

protected $packages;
```

**app/Customize/Twig/Extension/ImageFluxExtension.php#L12**

```php
protected $signing_secret = "********";
```

**app/Customize/Twig/Extension/ImageFluxExtension.php#L13**

```php
protected $image_flux_url= "https://*********.imageflux.jp";
```
控えていたHostに変更してください。

以上で基本的な設定は完了です。

ショップ画面で表示されている画像がImageFluxのURLになっていれば、成功です。
![](/upload/save_image/column/ec-cube/imageflux_005.jpg)

### 画像を最適化について

ImageFluxの機能でリサイズを行っていきます。
「商品一覧画面 – /products/list 」の画像を要素に近い250pxで指定していきます。

**src/Eccube/Resource/template/default/Product/list.twig#152-**

```twig
 
 <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}">
 
```
この部分を以下のように修正します。
```twig
 
 {% set imageflux_options = {'width': 250} %}
 <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image' ,imageflux_options) }}">
 
```

![](/upload/save_image/column/ec-cube/imageflux_006.jpg)

DevToolsで250pxの画像が配信されていることが確認できます。
あくまでリサイズの一例です。Retinaディスプレイ対応やサイト構成を考慮して試してみてください。

### まとめ
今回は、ImageFluxについて紹介しましたが、ImageFluxには画像変換の機能が豊富にあります。
例えばオーバーレイ機能ですが、デジタルコンテンツを配信する場合や、画像にキャプションを入れる場合に画像を直接編集する必要がなくなりますので業務の効率化が可能だと思います。
Webp変換にも対応もしており、サイトパフォーマンスも向上することができると思います。

S3や独自ドメインも利用可能で、EC-CUBEに導入しやすいサービスだと感じました。ぜひトライアル期間もあるので試してみてください。

### サンプルコード

* サンプルプログラムは、あくまで検証用途なので、動作を保証するものではありません。
* 公式が提供しているWordPress用のプラグインを、参考にさせていただいています。
* Assetで呼ばれている画像のリソースに対してImageFluxのURLを返します。

**src/Eccube/Resource/template/default/Block/new_item.twig**

```php
<?php
namespace Customize\Twig\Extension;

use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;
use Symfony\Component\Asset\Packages;


class ImageFluxExtension extends AbstractExtension
{
 protected $use_signate = true;
 protected $signing_secret = "********";
 protected $image_flux_url = "https://*********.imageflux.jp";

 protected $packages;

 public function __construct(Packages $packages)
 {
 $this->packages = $packages;
 }

 public function getFunctions()
 {
 return [
 new TwigFunction('asset', [$this, 'getAsset']),
 ];
 }

 /**
 *
 * @path type: string
 * @packageName (optional) type: string | null default: null
 * @params type: array
 * @return type: string|NULL
 * 
 */
 public function getAsset($path, $packageName = null, $params = []) {
 $filepath = pathinfo($path);
 if (in_array($filepath['extension'],['jpeg','jpg','JPEG','JPG','png','PNG','gif','GIF'])) {
 return $this->image_flux_url . $this->addSignature("/c", self::genarateParams($params), $this->packages->getPackage($packageName)->getBasePath().$path);
 }
 return $this->packages->getUrl($path, $packageName);
 }

 protected function addSignature($prefix, $params, $file_path) {
 $path = $prefix . $params . $file_path;

 if ($this->use_signate) {
 $hash = hash_hmac("sha256", $path, $this->signing_secret, true);
 $params = substr_replace($params, ",", 0,1);
 return $prefix . "/sig=1." . rtrim(strtr(base64_encode($hash), "+/", "-_"), "="). $params . $file_path;
 }
 return $path;
 }
 /**
 * オプションの変換パラメータ生成
 *
 * @return string
 */
 public static function genarateParams($params)
 {
 $params_str = "/";

 // フォーマット
 $format = isset($params['format'])? $params['format']: "webp:auto";
 $params_str .= "f=" . $format . ",";

 // クオリティ
 $quality = isset($params['quality'])? $params['quality']: 70;
 $params_str .= "q=" . $quality . ",";

 // リサイズ
 isset($params['width']) && $params_str .= "w=" . $params['width'] . ",";
 isset($params['height']) && $params_str .= "h=" . $params['height'] . ",";
 
 // アスペクト
 // 0: 入力のアスペクト比に合わせ、出力の幅、高さにおさめる(scale)
 // 1: 入力のアスペクト比を無視し、出力の幅、高さに合わせる(force-scale)
 // 2: 出力を満たすように入力を拡大・縮小し、はみだした領域を切り取る(crop)
 // 3: 入力のアスペクト比に合わせ、埋まらない部分を背景色で埋める(pad)
 isset($params['aspect']) && $params_str .= "a=" . $params['aspect'] . ",";

 // Exif
 // 1: Exif情報を削除する（デフォルト）
 // 2: Exif情報のうち、Orientation以外を削除する
 $exif = isset($params['exif'])? $params['exif']: 1;
 $params_str .= "s=" . $exif . ",";

 // 画像フォーマットによる除外
 // 指定されたフォーマットは、変換しません。
 $extension_param = "";
 $through_jpeg = isset($params['through_jpeg']) && $params['through_jpeg']==1 ? true: false;
 $through_png = isset($params['through_png']) && $params['through_png']==1 ? true: false;
 $through_gif = isset($params['through_gif']) && $params['through_gif']==1 ? true: false;

 if ($through_jpeg) {
 $extension_param .= "jpeg";
 }
 if ($through_png) {
 $extension_param !== "" && $extension_param .=":";
 $extension_param .= "png";
 }
 if ($through_gif) {
 $extension_param !== "" && $extension_param .=":";
 $extension_param .= "gif";
 }

 $extension_param !== "" && $params_str .= "through=" . $extension_param;

 // 最後の文字列のカンマの削除
 mb_substr($params_str, -1) === ',' && $params_str = mb_substr($params_str, 0, -1);
 return $params_str;
 }
}
```

EC-CUBE4でImageFluxを設定する方法

[「EC-CUBE Advent Calendar 2021」](https://qiita.com/advent-calendar/2021/ec-cube) 23日目の投稿です。
タイトル通りにはなりますが、弊社でも採用しているEC-CUBEのローカル環境構築について今回は記事を書いてみようと思います。
なお、今回はEC-CUBE.coを利用せずに自社でホスティング環境を用意し、運用していく場合の環境構築を想定しています。

今回構築する際の流れは以下のとおりです。

1. ローカルにてVirtualBox＋Vagrantを使用して仮想マシンを構築し、仮想マシンの中でEC-CUBEをGithubからクローン
2. VSCodeのRemote Developmentを使用してホストマシンから仮想マシンにssh接続
3. 仮想マシンの中で直接ファイル操作を行う

今回のポイントはVagrantのディレクトリマウントを使用せずにサーバー(仮想マシン)の中で直接ファイル操作を行うところで、この構成で構築した時のメリットは以下があげられます。

* 仮想マシン側のVSCodeに拡張プラグインを導入するだけで言語(FW)などの補完がきく
* Vagrant+VirtualBoxの構成なのでホストマシン(Mac,Windows)の環境差分を吸収できる
* boxファイルをパッケージして共有することで、メンバー間で発生しがちな環境差分を吸収できる
* 仮想マシンの構築手順をAnsible等のプロビジョニングツールで自動化することで本番環境にも適用できる

### 検証環境
* MacOS Catalina, Windows10
* VirtualBox 6.1.30
* Vagrant 2.2.19
* VSCode

## 手順解説
____
### 1. ローカルにてVirtualBox＋Vagrantを使用して仮想マシンを構築

この章では開発に使用する仮想マシン(サーバー)を構築していきます。
なお今回は下記の構成で仮想マシンを構築していきます。

* Ubuntu 20.04
* Apache 2.4
* MySQL 8.0
* PHP 7.4
* EC-CUBE 4.1
弊社は本番環境でAmazonLinuxを使用する場合はUbuntuではなくCentOSで構築していますが、今回はEC-CUBE公式の情報に合わせてUbuntuで構築していきます。


まずここから先の手順を進める前にVirutualBoxとVagrant(プラグイン含め)のインストールをしてください。
下記ハンズオン形式の記事が非常に参考になりますので一読されることをオススメします。
また、本記事では今回使用するツールやそれに関するコマンドなどの解説は割愛させていただきます。

[【ペチオブ】仮想環境ハンズオン 第3回 Vagrant編](https://qiita.com/ucan-lab/items/e14a26081229c8bef98a)

```cmd
// Vagrant(プラグイン含め)とVirtualBoxのインストールを確認
$ vagrant -v Vagrant 2.2.19
$ vagrant plugin list vagrant-share (2.0.0, global) vagrant-vbguest (0.30.0, global)
$ VBoxManage -v 6.1.30r148432
```

```cmd
// 今回使用するUbuntuのboxイメージを追加
$ vagrant box add ubuntu/focal64
$ vagrant box list ubuntu/focal64 (virtualbox, 20200326.0.0)
```

```cmd
// 任意のディレクトリに作業ディレクトリを作成
$ mkdir ec-cube

// 移動
$ cd ec-cube

// 先ほど取得したUbuntuのBoxファイルを使用してVagrantファイルの雛形を作成
$ vagrant init -m ubuntu/focal64
```

今回はUbuntuのパッケージやミドルウェア等のインストールをshellで実行します。
これを作成しておくだけでも環境構築の手順書代わりになるのでオススメです。
なお、必要なパッケージ等はEC-CUBE開発者情報と公式GithubのDockerファイル等を参考に選定しています。

* EC-CUBE4 開発者ドキュメントサイト
* EC-CUBE – Github

```cmd
// 仮想マシンを初回起動時に各種モジュール等をインストールするshellを作成
$ vim init.shell
```

**init.shell**

```bash
#!/bin/bash

# shell実行時オプション
# https://qiita.com/keitean/items/83c7d0d6221ec1b9c63c
set -eux

# パッケージの削除
rm -rf /var/lib/apt/lists/*
echo "en_US.UTF-8 UTF-8" >/etc/locale.gen
locale-gen

# PHP7.4とApache2のインストール
add-apt-repository ppa:ondrej/php
apt -y install php7.4

# MySQL用モジュール
apt -y install php7.4-mysql

# その他必要なPHPモジュールのインストール
# 参考：https://doc4.ec-cube.net/quickstart/requirement
apt -y install php7.4-curl php7.4-cli php7.4-zip php7.4-intl php7.4-xml php7.4-mbstring

# MySQLのインストール
apt -y install mysql-server mysql-client

# MySQLの文字コードと照合順序を設定ファイルとして書き出し
cat << EOS | sudo tee /etc/my.cnf
[mysqld]
character_set_server = utf8mb4
collation_server = utf8mb4_ja_0900_as_cs
EOS

# MySQLを再起動
systemctl restart mysql

# MySQLのデータディレクトリを初期化
# mysqld --initialize-insecure --user=mysql

# EC-CUBE用のdatabaseを作成
mysql -u root << EOT
CREATE DATABASE eccube_db;
CREATE USER eccube@'%' IDENTIFIED WITH mysql_native_password BY 'secret';
GRANT ALL PRIVILEGES on eccube_db.* to eccube@'%';
EOT

# /var/www/ にec-cube 4.1を設置(ドキュメントルート)
git clone -b 4.1 https://github.com/EC-CUBE/ec-cube /var/www/ec-cube

# Composerのインストール
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '906a84df04cea2aa72f40b5f787e49f22d4c2f19492ac310e8cba5b96ac8b64115ac402c8cd292b8a03482574915d1a8') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

mv ./composer.phar $(dirname $(which php))/composer && chmod +x "$_"
composer --version

# EC-CUBEに必要なパッケージを取得
composer update -d /var/www/ec-cube

echo "インストール完了！"
```

```cmd
// 作成したshellを初回起動時に実行するようにVagrantfileを編集
$ vim Vagrantfile

# -*- mode: ruby -*-
# vi: set ft=ruby :

Vagrant.configure("2") do |config|
 config.vm.box = "ubuntu/focal64"
 config.vm.network "forwarded_port", guest: 80, host: 8000
 config.vm.provision :init, type: "shell", path: "init.sh"

 # 仮想マシンのCPUとメモリも設定しておく
 config.vm.provider "virtualbox" do |vb|
 # vb.gui = true
 vb.memory = "4096"
 vb.cpus = "2"
 end
end
```

```cmd
// 仮想マシンを起動
$ vagrant up
```

仮想マシンを起動するとshellの内容を初回のみ実行して各種パッケージをインストールします。 無事起動が完了したら仮想マシンにsshで入ります。

```cmd
// 仮想マシンにsshで入る
$ vagrant ssh
```

### 2. VSCodeのRemote Developmentを使用してホストマシンから仮想マシンにssh接続

この章では前の章で作成した仮想マシンにVSCodeの拡張プラグインを導入したホストマシンからssh接続を行います。

```cmd
// 1度仮想マシンから出る
$ exit
```

* VSCodeを起動する
* 画面左側の拡張機能タブを選択し、検索窓に「remote develop」と入力
* 検索結果からRemote Developmentを選択し、プラグインをインストール
* 左下の緑アイコンからリモートウィンドウを開く
* メニューからOpen SSH Configuration File...を選択
* /Users/ユーザー名/.ssh/config を選択し、ファイルを開く
* 仮想マシンを起動しているコンソールに切り替えて下記コマンドを実行

```cmd
// 仮想マシンが起動している状態で
$ vagrant ssh-config

// 下記情報をコピー
Host default
 HostName 127.0.0.1
 User vagrant
 Port 2222
 UserKnownHostsFile /dev/null
 StrictHostKeyChecking no
 PasswordAuthentication no
 IdentityFile /Users/ユーザー名/vagrant/ec-cube/.vagrant/machines/default/virtualbox/private_key
 IdentitiesOnly yes
 LogLevel FATAL
```

* コピーした内容を/Users/ユーザー名/.ssh/config に貼り付け and 上書き保存
 * 捕捉: Host defaultのdefault部分は自分がわかりやすい名前に変更すると良い
 * 今回はeccube-defaultに設定
* 再度左下の緑アイコンからリモートウィンドウを開く
* メニューからConnect To Host...を選択
* eccube-defaultを選択し、仮想マシンにssh接続(別ウィンドウでVSCodeが開きます)

ここまでの手順で無事仮想環境にssh接続したVSCodeが開ければ一旦OKです。
次にEC-CUBEを初期状態で動かせるようにしていきます。

**コンソールから起動中の仮想マシンにsshで入る**
```cmd
$ vagrant ssh
```

**Apacheのドキュメントルートをec-cubeに変更する**
```text
// 設定ファイルを開く
$ sudo vim /etc/apache2/sites-available/000-default.conf

// INSERTモードに切り替えてから下記の修正をして上書き保存
# DocumentRoot /var/www/html
DocumentRoot /var/www/ec-cube
RewriteEngine On

# 鍵かっこは表示上の都合で全角にしていますが、本来半角なので注意してください!!
＜Directory "/var/www/ec-cube"＞
	AllowOverride All
＜/Directory＞
```

**Apache2のmod_rewriteを有効にする**
```cmd
$ sudo a2enmod rewrite
```

**Apacheを再起動する**
```cmd
$ sudo systemctl restart apache2
```

**ec-cubeインストールコマンドを実行**
```cmd

$ cd /var/www/ec-cube

$ sudo bin/console e:i
// プロビジョニング用のshellで登録した内容を入力(コピペでOKです)
Database Url
> mysql://eccube:secret@127.0.0.1/eccube_db

// Mailer Urlは今回設定しないのでエンター
// Auth Magicはそのままでエンター
```

ここまでの手順が終わったらブラウザで http://localhost:8000 へアクセスしてみましょう。
EC-CUBEデフォルトTOPページが表示されればOKです
管理画面はデフォルトだと http://localhost:8000/admin です。
id: admin
pass: password

ここからがやや面倒なのですが、VSCodeのRemote Developmentは接続する仮想マシンごとにVSCodeのプラグインをインストールしなければいけません。
そのため、今回紹介するのは必要最低限ではありますが、下記プラグインをeccube-defaultに接続しているVSCodeでもインストールしておきましょう。
※プラグインによってはローカルでインストールしているものが既に仮想マシンでも有効化されている場合もあります。

* Japanese Language Pack for Visual Studio Code
* zenkaku
* indent-railbow
* Bracket Pair Colorizer
* Symfony extensions pack

※その他必要に応じてPHP DebugやPHP DocBlocker、php cs fixerなど...

### 仮想マシンの中で直接ファイル操作を行う
この章では仮想マシンの中でファイル編集などの操作ができるようにしていきます。
ポイントはRemote Developmentでssh接続して仮想マシンをVSCodeで操作しているユーザーがvagrantユーザーという点です。
なのでまずはVSCode側で直接ファイルを編集できるようにファイル/ディレクトリの権限を変更する必要があります。

```cmd
$ sudo chown -R vagrant:www-data /var/www/
```
これでVSCode側でファイル内容を変更やファイルの追加・削除ができるようになります。

まずはssh接続先にあるec-cubeディレクトリを開きます。

![](/upload/save_image/column/ec-cube/eccube-local-development_1.png)
![](/upload/save_image/column/ec-cube/eccube-local-development_2.png)

さっそくVSCode側.envファイルを修正してみましょう。
とりあえず、モードを開発用に切り替えてみます。

![](/upload/save_image/column/ec-cube/eccube-local-development_3.png)

Ctrl+sでファイルの上書き保存をしてから、TOPページを更新してみると...。

![](/upload/save_image/column/ec-cube/eccube-local-development_4.png)

はい、画面下部にSymfonyのデバッグバーが表示されるようになりました。

次は独自プラグインのひな型生成コマンドを実行してみます。

```cmd
$ cd /var/www/ec-cube

$ sudo bin/console eccube:plugin:generate
// 全てそのままエンターで進む
```

コンソールにOK表示を確認したらVSCode側で app/Plugin の中を見てみましょう。

![](/upload/save_image/column/ec-cube/eccube-local-development_5.png)

先ほど生成したSampleという名前のプラグインが確認できます。
ここからがこの構築方法の本領発揮です。

試しに app/Plugin/Sample/Controller/Admin/ConfigController.php を開いて、indexアクションにカーソルをのせてみます。
すると、きちんとPHPDocに書かれている内容が表示されます。

![](/upload/save_image/column/ec-cube/eccube-local-development_6.png)

また、EC-CUBE本体側にあるクラスを選択して
「定義へ移動」を押すと...

![](/upload/save_image/column/ec-cube/eccube-local-development_7.png)

本体側のソースもこのように開くことができます。

![](/upload/save_image/column/ec-cube/eccube-local-development_8.png)

ちろんメソッドや変数もこのように候補が表示されます。

![](/upload/save_image/column/ec-cube/eccube-local-development_9.png)


### まとめ
全体的に簡単な説明にはなってしまいましたが、弊社でも採用している開発環境の構築を紹介させていただきました。
あとはお好みでVSCodeの拡張プラグインを追加してみたり、使いやすいようにカスタマイズしてみてください。

### 参考
- [【ペチオブ】仮想環境ハンズオン 第3回 Vagrant編](https://qiita.com/ucan-lab/items/e14a26081229c8bef98a)
- [Ubuntu 最低限抑えておきたい初期設定](https://qiita.com/kotarella1110/items/f638822d64a43824dfa4)
- [VagrantでVScodeのRemote Developmentを使おう！](https://qiita.com/hppRC/items/9a46fdb4af792a454921)
- [EC-CUBE4 開発者ドキュメントサイト](https://doc4.ec-cube.net)
- [コマンドラインからインストールする](https://doc4.ec-cube.net/quickstart/command_install)
- [EC-CUBE - Github](https://github.com/EC-CUBE/ec-cube)
- [Ubuntu 20.04にApache Webサーバーをインストールする方法](https://www.digitalocean.com/community/tutorials/how-to-install-the-apache-web-server-on-ubuntu-20-04-ja)
- [Ubuntu+Apache2の設定ファイルの場所とか構成とかメモ](https://penpen-dev.com/blog/ubuntuapache2/)
- [Ubuntu版Apache2でmod_rewriteを有効にする](https://qiita.com/u-akihiro/items/c7a5bb38c34858d00c2a)

VagrantとVirtualBoxで構築するEC-CUBE4のローカル開発環境

今回は弊社のデザイナーが使用している無料テキストエディタ「ATOM」と社内でファイルを管理しているツール「Git」との連携方法を説明していこうと思います。 「ATOM」のダウンロードまずはATOMの公式webサイトからダウンロードしてください。<a href="https://atom.io/" target="_blank">https://atom.io/</a> <img src="/upload/save_image/column/atom/download.png"> ダウンロードしたAtomSetup-x〇〇.exeというファイルをクリックするとATOMのインストーラーが立ち上がりインストールを開始します。 しばらくするとATOMが立ち上がります。<img src="/upload/save_image/column/atom/01.jpg"> ATOMの日本語化このままだと英語表記でわかりずらいと思うので日本語化パッケージをいれていきます。 メニューバー「Help」から「WelCome Guide」を選択「Install a Package」の項目で「Open Installer」をクリックsearch packagesと書かれているフォームに「japanese-menu」と入力し「Packages」をクリック一番上に出てきた「japanese-menu」をインストール <img src="/upload/save_image/column/atom/02.jpg"> ATOMの日本語化が完了しました。 <img src="/upload/save_image/column/atom/03.jpg"> GitHub でリポジトリを作成するGithubの公式webサイトにログインし,Your Repositoriesのページで緑色のNEWボタンをクリックgithub Your Repositoriesのページ <img src="/upload/save_image/column/atom/04.jpg"> 「Create a new Repository」のページが開くので「Repository name」の欄に新しいRepositoryにつける任意の名前を（ここではatom_git_testにしました）入力し、下部の「create Repository」をクリックすればRepository作成完了です。 <img src="/upload/save_image/column/atom/05.jpg"> 出来たレポジトリ画面の緑のcodeボタンにカーソルを合わせるとプルダウンが開きます。その中のアドレスを後程使うので、控えておきます。 <img src="/upload/save_image/column/atom/06.jpg"> ATOMでリポジトリを取得する作ったレポジトリのクローンを入れる空のフォルダをPCの任意の場所に新規で作成します。ATOM上部のパッケージの欄からコマンドパレットを開き「github:clone」と入力。clone fromに先ほど控えてたアドレスをペースト。To directoryには作った空のフォルダのディレクトリパスを入力 <img src="/upload/save_image/column/atom/07.jpg"> リポジトリの取得完了 <img src="/upload/save_image/column/atom/08.jpg"> AtomからGitHubのリポジトリにPushする（アップロード）データの変更があるとGitタブのUnstaged Chagesに変更があったファイル名が表示されます(ここではtest.htmlというファイルを新規作成しました。) <img src="/upload/save_image/column/atom/09.jpg"> stage Allをクリック<img src="/upload/save_image/column/atom/10.jpg" style="color: var(--bs-body-color); font-family: var(--bs-body-font-family); font-weight: var(--bs-body-font-weight); text-align: var(--bs-body-text-align);"> すると変更のあったファイルがStaged Changesの欄に降りてくるので、Commit　messageに作業内容等を入力して青いバーをクリック 最下部の「push」の欄の横に数字が表示されているのを確認出来たらクリック <img src="/upload/save_image/column/atom/11.jpg"> Githubのページでpushしたファイル名が確認できたら完了 <img src="/upload/save_image/column/atom/12.jpg"> <img src="https://manage.spreadworks.co.jp/upload/save_image/column/atom/13.jpg"> AtomでGitHubのリポジトリからpullする（ダウンロード）Gitで共有しているファイルを他の人が編集した場合のATOMを使ったPull（自分のファイルと同期させる）の方法を説明します。 ATOMのGitタブの最下部にある「Fetch」をクリックして、ファイルの更新があったかを確認します。 <img src="/upload/save_image/column/atom/14.jpg"> 更新があった場合、「Fetch」の部分が「Pull」と数字の表記に代わると、更新データがあるということなので「Pull」をクリックします。 <img src="/upload/save_image/column/atom/15.jpg"> Githubのページでpullしたファイル名が確認できたら完了（今回はREADME.mdという新しいファイルが確認できました） <img src="/upload/save_image/column/atom/16.jpg">

デザイン設計からフロントエンド・バックエンド開発まで、あらゆるWebサイトの制作に対応。UI/UXの最適化やSEO対策にも注力し、使いやすく成果に結びつくサイトを実現します。お客様のビジネス課題を丁寧にヒアリングし、戦略的なWebソリューションを提供いたします。

テキストエディタ「ATOM」でGithubと連携させる方法

トップページに特定のカテゴリ一に属する商品を表示するカスタマイズの方法を説明します。

![](/upload/save_image/column/ec-cube/top-new-stock-for-ec-cube4_1.png)

トップページに「新入荷のカテゴリ」に属する商品を表示

## 手順

1. カテゴリIDを確認する
2. Blockファイルを編集し、moreボタンのリンクに変更とテキストの修正
3. TwigExtentionを修正し、「新入荷」商品情報を取得

### 1. カテゴリIDを確認する

管理画面にログインし、商品管理->カテゴリ管理を選択してください。
新入荷のカテゴリIDは「2」であることを確認します。
※今回は、新入荷のカテゴリIDの「2」を利用しますが、「2」以外が設定されている場合や他のカテゴリの商品を表示させる場合は、該当のカテゴリIDをご利用ください。

![](/upload/save_image/column/ec-cube/top-new-stock-for-ec-cube4_2.png)

### 2.moreボタンのリンクに変更とテキストの修正

**app/template/default/Block/new_item.twig**ファイルを修正。

```twig
<div class="ec-newItemRole__listItemHeading ec-secHeading--tandem">
{{ 'front.block.new_item.title__en'|trans }}

{{ 'front.block.new_item.title__ja'|trans }}
<a class="ec-inlineBtn--top" href="{{ url('product_list') }}">{{ 'front.block.new_item.more'|trans }}</a>
</div>
```

この部分を以下のように修正。

```twig
<div class="ec-newItemRole__listItemHeading ec-secHeading--tandem">
NEW STOCK

新入荷商品
<a class="ec-inlineBtn--top" href="{{ url('product_list') }}?category_id=2">{{ 'front.block.new_item.more'|trans }}</a>
</div>
```

### 3.TwigExtentionを修正し、「新入荷」商品情報を取得

**app/Customize/Twig/Extension/TwigExtension.php**ファイルに以下のメソッドを定義します。

```php
 public function getFunctions()
 {
 return array(
 new \Twig_SimpleFunction('CustomizeNewProduct', array($this, 'getCustomizeNewProduct')),
 );
 }

 // 省略...

 /**
 * 新着商品3件返す
 * @return Products|null
 */
 public function getCustomizeNewProduct()
 {
 try {
 // 検索条件の新着順を定義
 $searchData = array();
 $qb = $this->entityManager->createQueryBuilder();
 $query = $qb->select("plob")
 ->from("Eccube\\Entity\\Master\\ProductListOrderBy", "plob")
 ->where('plob.id = :id')
 ->setParameter('id', $this->eccubeConfig['eccube_product_order_newer'])
 ->getQuery();
 $searchData['orderby'] = $query->getOneOrNullResult();

 // 新入荷商品を表示
 $new_stock_id = 2;
 $qb = $this->entityManager->createQueryBuilder();
 $query = $qb->select("ctg")
 ->from("Eccube\\Entity\\Category", "ctg")
 ->where('ctg.id = :id')
 ->setParameter('id', $new_stock_id)
 ->getQuery();
 $searchData['category_id'] = $query->getOneOrNullResult();

 // 商品情報3件取得
 $qb = $this->productRepository->getQueryBuilderBySearchData($searchData);
 $query = $qb->setMaxResults(3)->getQuery();
 $products = $query->getResult();
 return $products;
 } catch (\Exception $e) {
 return null;
 }
 return null;
 }
```

トップページ以外にも、商品一覧、商品詳細、購入完了画面などの画面で表示することで、商品の訴求ができるようになります。
ぜひ、お試しください。

## EC-CUBEカスタマイズの基本を知りたい方へ

EC-CUBEの基本的なカスタマイズ方法については、[EC-CUBEのカスタマイズ方法を解説](/column/ec-cube-customize/)ページでご紹介しています。
他の具体的なカスタマイズ事例もカテゴリ別にまとめていますので、あわせてご覧ください。

EC-CUBE4のトップページに特定のカテゴリ一に属する商品を表示する方法

# EC-CUBEの勉強会レポート

**日時：** 2019年2月7日 19:00から **場所：** Connecting The Dots YOYOGI / B1

初めて、EC-CUBEの勉強会に参加しました。勉強会の内容と所感を交えて、レポートを残します。今回のテーマは注文明細に値引きを追加や、送料計算のカスタマイズなどをすることができるPurchaseFlowの仕組みを理解する勉強で、設計されたEC-CUBEエバンジェリストの足立さんから、ご説明いただきました。内容はサンプルコードの提示と処理内容が表などにまとめられいて、とても理解しやすかったです。

## スライド

[https://www.slideshare.net/chihiroadachi3/201927-eccubeugpurchaseflow-130874190?fbclid=IwAR1VAYGVyPoFh8tTsTKbLt-p7zIIRrh2YeoB0TtyztygFf13cVPmzpMgG4s](https://www.slideshare.net/chihiroadachi3/201927-eccubeugpurchaseflow-130874190?fbclid=IwAR1VAYGVyPoFh8tTsTKbLt-p7zIIRrh2YeoB0TtyztygFf13cVPmzpMgG4s)

## 参考資料

### サンプルコード

[https://github.com/chihiro-adachi/ec-cube/compare/ad03d2d0078f8347c0a8fae9acc1ced74bf6e967...demo-tokyo?fbclid=IwAR3CTDTc6U-Rvobd4hsXn_fK-3etcBtWf6_U6tGgNZSBWqHEt66ADr19XlI](https://github.com/chihiro-adachi/ec-cube/compare/ad03d2d0078f8347c0a8fae9acc1ced74bf6e967...demo-tokyo?fbclid=IwAR3CTDTc6U-Rvobd4hsXn_fK-3etcBtWf6_U6tGgNZSBWqHEt66ADr19XlI)

### PurchaseFlowの仕様ドキュメント

[http://doc4.ec-cube.net/customize_service](http://doc4.ec-cube.net/customize_service)

**ドキュメントに誤りがあり(2019年2月8日現在)**

> 独自に作成した Processor を有効にするには、 app/config/eccube/packages/purchaseflow.yaml の定義を修正します。

とありますが、Processorクラスにアノテーションを指定し、所定のディレクトリに設置すると、自動でロードされ実行されてる仕組みになっています。

```text
use Eccube\Annotation\ShoppingFlow;
use Eccube\Service\PurchaseFlow\DiscountProcessor;

/**
 * @ShoppingFlow
 */
class NebikiProcessor implements DiscountProcessor {
```

アノテーションには、他に「@CartFlow」「@OrderFlow」が指定できます。
インターフェイスには、他に「ItemValidator」「ItemHolderValidator」などが指定できます。
詳細はスライドやドキュメントを確認してください。

### Github Issue

[https://github.com/EC-CUBE/ec-cube/pull/2424](https://github.com/EC-CUBE/ec-cube/pull/2424)

## 質疑応答

(勉強会のあとTwitterなどで収集した情報を編集して記載しています。)

**Q. カスタマイズしたファイルはどこにおけばよいの？**

A. app/CustomizeかApp/Plugin配下に設置すればどこでも読まれるようになっている。

ロードされるパスなどの設定は以下のファイルで行っている：
- app/config/eccube/services.yaml
- src/Eccube/DepenjencyInjection/*
- src/Eccube/Kernel::build()

**Q. 既存のProcessorを消したり、処理の順番は入れ替えられるの？**

A. 可能。ただし、本体の設定ファイルを編集する必要がある。

```yaml
app/config/eccube/packages/purchaseflow.yaml

     45     # Purchase Flow for Shopping
     46     eccube.purchase.flow.shopping:
     47         class: Eccube\Service\PurchaseFlow\PurchaseFlow
     48         calls:
     49             - [setFlowType, ['shopping']]
     50             - [setItemValidators, ['@eccube.purchase.flow.shopping.item_validators']]
     51             - [setItemHolderValidators, ['@eccube.purchase.flow.shopping.holder_validators']]
     52             - [setItemHolderPreprocessors, ['@eccube.purchase.flow.shopping.holder_preprocessors']]
     53             - [setDiscountProcessors, ['@eccube.purchase.flow.shopping.discount_processors']]
     54             - [setItemHolderPostValidators, ['@eccube.purchase.flow.shopping.holder_post_validators']]
     55             - [setPurchaseProcessors, ['@eccube.purchase.flow.shopping.purchase']]
```

**Q. Processorの実行途中で、次のProcessorに行かないような処理はできるの？**

A. 止められない。

**Q. Processorの実行状況、結果をロギングする仕組みはあるのか？**

A. 実装していない。

**Q. Processorの中で例外エラーが発生した時はどう取り扱う？**

A. Processor処理内容、エラー内容で適宜判断。

**Q. Symfonyのworkflowは使っているのか？**

A. 使用していない、独自実装。workflowバンドルば別のところで使用している。

Workflow の参考リンク:
- [Symfony Workflow](https://symfony.com/doc/3.4/components/workflow.html)
- [EC-CUBE4のキャンセルステータス](https://a-zumi.net/eccube4-cancel-status/)
- [Github Pull Request](https://github.com/EC-CUBE/ec-cube/pull/3325)

**Q. PurchaseFlowで実装できなかったカスタマイズはあるか？**

A. 通常便、クール便を含んだ注文の場合、配送種別毎にシステム側で配送先データを生成する必要があった。PurchaseFlowの仕組みでは、要求が実現できず、本体のソースコードを編集して実現した。

## 最後に

皆さん何かしらの目的をもって参加されていて、大半の方がエンジニア、フリーランスのクリエイター、店舗オーナー、決済会社の方達で、知り合いだけで固まっているような感じはなく、はじめての方でも、気負うことなく参加できる勉強会だと思いました。登壇者の方以外にも、参加者の皆さんから色々なお話を聞けて、とめもためになりました。
勉強会の題材のドキュメントやソースコードは事前にもっと確認しておけば、より身についたなーと。次回に活かそうと思います。

EC-CUBE 東京UG 勉強会 / 2019-02-07 レポート

EC-CUBE4になってTOPページのデザインも、より魅力的なものになりました。
しかし、トップページにある新着商品は、自動で更新されるものになっていません。
そこで今回は、商品を追加したときに自動で更新するようにカスタマイズしていきます。

また、カスタマイズ方法ですが、EC-CUBE3ではできなかった本体のソースコードを変更しない方法で実装していきます。

![](/upload/save_image/column/ec-cube/top-new-products-for-ec-cube4_1.jpg)

※ 商品を追加したときに、自動で更新するようにしていきます。

### 手順

1. 修正ファイルを設置
2. Blockファイルのmoreボタンを適切なリンクに変更
3. TwigExtentionを利用し、新着商品を取得
4. 新着商品をTwigテンプレート反映

### 1.修正ファイルを設置

今回必要なファイルは、2ファイルになります。

```text
/app
 Ltemplate
　Ldefault
　 LBlock
 Lnew_item.twig
 LCustomize
　LTwig
　 LExtension
 LTwigExtension.php
```

まず、新着商品のTwigファイルをコピーします。

**コピー元**
```text
src/Eccube/Resource/template/default/Block/new_item.twig
```
**コピー先**
```text
app/template/default/Block/new_item.twig
```

次にTwigExtention用のファイルを作成します。

```text
app/Customize/Twig/Extension/TwigExtension.php
```

### 2. Blockファイルのmoreボタンを適切なリンクに変更

moreボタンを見るとリンク先が商品一覧になっています。
リンク先の商品一覧のソート順を新着順となるように「app/template/default/Block/new_item.twig」のリンクを修正します。
```twig
href="{{ url('product_list') }}"
```
この記述を以下のように修正。
```twig
href="{{ url('product_list') }}?orderby={{eccube_config.eccube_product_order_newer}}"
```

### 3.TwigExtentionを利用し、新着商品を取得

Twig側で「CustomizeNewProduct()」を実行したときに、新着商品3件返す仕様にします。

**app/Customize/Twig/Extension/TwigExtension.php**ファイルにメソッドを定義します。

```php
public function getFunctions()
 {
 return array(
 new \Twig_SimpleFunction('CustomizeNewProduct', array($this, 'getCustomizeNewProduct')),
 );
 }

 // 省略...

 /**
 * 新着商品3件返す
 * @return Products|null
 */
 public function getCustomizeNewProduct()
 {
 try {
 // productRepository->getQueryBuilderBySearchData()の引数に商品の出力順番を指定できるので新着順を定義
 $searchData = array();
 $qb = $this->entityManager->createQueryBuilder();
 $query = $qb->select("plob")
 ->from("Eccube\\Entity\\Master\\ProductListOrderBy", "plob")
 ->where('plob.id = :id')
 ->setParameter('id', $this->eccubeConfig['eccube_product_order_newer'])
 ->getQuery();
 $searchData['orderby'] = $query->getOneOrNullResult();

 // 商品情報の取得する
 $qb = $this->productRepository->getQueryBuilderBySearchData($searchData);

 // 新着順の商品情報3件取得
 $query = $qb->setMaxResults(3)->getQuery();
 $products = $query->getResult();
 return $products;

 } catch (\Exception $e) {
 return null;
 }
 return null;
 }
```


### 4.新着商品をTwigテンプレート反映

**app/template/default/Block/new_item.twig**ファイルを編集。

```php
{% set Products = CustomizeNewProduct() %}
{% if Products|length > 0 %}
<div class="ec-role">
 <div class="ec-newItemRole">
 <div class="ec-newItemRole__list">
 <div class="ec-newItemRole__listItem">
 <div class="ec-newItemRole__listItemHeading ec-secHeading--tandem">
 {{ 'front.block.new_item.title__en'|trans }}
 
 {{ 'front.block.new_item.title__ja'|trans }}
 <a class="ec-inlineBtn--top" href="{{ url('product_list') }}?orderby={{eccube_config.eccube_product_order_newer}}">{{ 'front.block.new_item.more'|trans }}</a>
 </div>
 </div>
 {% for Product in Products %}
 <div class="ec-newItemRole__listItem">
 <a href="{{ url('product_detail', {'id': Product.id}) }}">
 <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}">
 {{ Product.name }}
 
 {% if Product.hasProductClass %}
 {% if Product.getPrice02Min == Product.getPrice02Max %}
 {{ Product.getPrice02IncTaxMin|price }}
 {% else %}
 {{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}
 {% endif %}
 {% else %}
 {{ Product.getPrice02IncTaxMin|price }}
 {% endif %}
 
 </a>
 </div>
 {% endfor %}
 </div>
 </div>
</div>
{% endif %}
```

## EC-CUBEカスタマイズの基本を知りたい方へ

EC-CUBEの基本的なカスタマイズ方法については、[EC-CUBEのカスタマイズ方法を解説](/column/ec-cube-customize/)ページでご紹介しています。
他の具体的なカスタマイズ事例もカテゴリ別にまとめていますので、あわせてご覧ください。

EC-CUBE4のトップページに新着商品を自動で表示する方法

フォームの種類を変えたい場合は、src/Eccube/Form/Type/* のソースコードを直接編集するか、[FormExtension](http://doc4.ec-cube.net/customize_formtype)でカスタマイズする方法があります。これらの方法だとFormを使用する全ての画面の修正を一括で行えますが、特定の画面だけ変更したい場合は対応が難しくなります。Twigでフォームの表示方法を変更する方法があるので、ご紹介します。 

今回は会員登録画面の性別のラジオボタンをセレクトボックスに変更する方法を例に説明します。

### 1. フォームテーマを指定する。
```text
[EC-CUBEインストールディレクトリ]/src/Eccube/Resource/template/default/Entry/index.twig 
```
または 
```text
[EC-CUBEインストールディレクトリ]/app/template/default/Entry/index.twig 
```
に、あるファイルを編集します。

```twig
{% form_theme form 'Form/form_div_layout.twig' %}
```
この記述から以下の記述に変更します。
```twig
{% form_theme form 'Form/form_div_layout.twig' 'Entry/index.twig' %}
```

15行名あたりに記述されている form\_theme に、自身のファイル名 **Entry/index.twig** を追加します。 

{% form\_theme form ‘XXX’ %} このタグはフォームテーマを指定する記述です。フォームテーマファイルはSymfonyにいつくか用意されており、Bootstrap4用のテーマファイルもあります。 

> 参考：[How to Customize Form Rendering](https://symfony.com/doc/3.4/form/form_customization.html) 

このドキュメントでは、自身のファイルを示す特別な値 \_self を指定していますが、EC-CUBE側の設定の影響により、\_self は使用できません。

### 2. フォームの表示を上書きします。

```twig
{% block _entry_sex_widget %}
 {% spaceless %}
 <select name="entry[sex]">
 <option value="">選択してください</option>
 {% for choice in choices %}
 <option value="{{ choice.value }}" id="entry_sex_{{ loop.index }}"{% if choice is selectedchoice(value) %} selected="selected"{% endif %}>
 {{ choice.label }}
 </option≶
 {% endfor %}
 </select>
 {% endspaceless %}
{% endblock _entry_sex_widget %}
```

フォームを上書きするblockを記述します。block名にはルールがあり 
```text
\_ + フォーム名 + 項目名 + \_widget 
```
とする必要があります。

## EC-CUBEカスタマイズの基本を知りたい方へ

EC-CUBEの基本的なカスタマイズ方法については、[EC-CUBEのカスタマイズ方法を解説](/column/ec-cube-customize/)ページでご紹介しています。
他の具体的なカスタマイズ事例もカテゴリ別にまとめていますので、あわせてご覧ください。

EC-CUBE4のTwigでラジオボタンをセレクトボックスに変更する方法

EC-CUBE4がリリースされ1ヵ月が経ちました。
「[EC-CUBE 開発コミュニティ](https://xoops.ec-cube.net/)」でもEC-CUBE4の質問が多くなってきました。
今回はコミュニティで回答させていただいた商品一覧ページのソート順のカスタマイズについて詳しく説明しようと思います。

「更新順」のソートを実装していきます。手順は以下のようになります。

1. 画面に「更新順」を追加
2. 「更新順」の処理を追加

### 1. 画面に「更新順」を追加

商品一覧画面を見るとセレクトボックスで「価格が低い順」「価格が高い順」「新着順」の3つがあります。

![](/upload/save_image/column/ec-cube/product-list-sort-order-change-for-ec-cube4_1.jpg)

管理画面のマスター管理を利用し、「更新順」を追加していきます。
管理画面->設定->システム設定->マスターデータ管理を選択。
マスターデータ管理画面にある「mtb\_product\_list\_order\_by」を選択します、

マスターデータの入力欄に「価格が低い順」「価格が高い順」「新着順」が確認できます。
最終行に、IDを4、NAMEを更新順と入力し保存してください。※1

![](/upload/save_image/column/ec-cube/product-list-sort-order-change-for-ec-cube4_2.jpg)

ショップ画面で確認し、更新順が追加されていることを確認してください。

![](/upload/save_image/column/ec-cube/product-list-sort-order-change-for-ec-cube4_3.jpg)

### 2. 追加したソート順の処理を追加

更新順にソートするif文を追加していきます。

 [GitHub 該当コード](https://github.com/EC-CUBE/ec-cube/blob/1e33a4e41192d64cdac4c8c91ed9a55fcc91f8ff/src/Eccube/Repository/ProductRepository.php#L167-L204)

新着順のコードを参考に更新順のifを追加し2点を修正してください。

1. ifの条件を更新順IDの4にする
2. orderByを「update\_date」に変更する

```text
/src/Eccube/Repository/ProductRepository.php#L167-L204
```

```php
        // 新着順
        } elseif (

        ～省略～

        // 更新順
        } elseif (!empty($searchData['orderby']) && $searchData['orderby']->getId() == 4) {
            // 在庫切れ商品非表示の設定が有効時対応
            // @see https://github.com/EC-CUBE/ec-cube/issues/1998
            if ($this->getEntityManager()->getFilters()->isEnabled('option_nostock_hidden') == true) {
                $qb->innerJoin('p.ProductClasses', 'pc');
                $qb->andWhere('pc.visible = true');
            }
            $qb->orderBy('p.update_date', 'DESC');
            $qb->addOrderBy('p.id', 'DESC');
        } else {

```

以上となります。

今回は、EC-CUBE4の本体カスタマイズになりましたが、バージョン3と同様にカスタマイズも簡単にできるようになっています。
次回は、EC-CUBE4で追加されたカスタマイズフォルダを利用し、本体をカスタマイズせずに 商品一覧ページのソート順の追加をしていきます。

※1 EC-CUBE4 ver4.0.0では、IDの入力欄が2つある状態になっています。左側がIDになるので4を入力。
右側がNAMEになるので更新順と入力してください。

## EC-CUBEカスタマイズの基本を知りたい方へ

EC-CUBEの基本的なカスタマイズ方法については、[EC-CUBEのカスタマイズ方法を解説](/column/ec-cube-customize/)ページでご紹介しています。
他の具体的なカスタマイズ事例もカテゴリ別にまとめていますので、あわせてご覧ください。

EC-CUBE4で商品一覧を「更新順」にカスタマイズする方法：画面設定から処理追加まで

EC-CUBE4になってから、Symfonyで用意している機構へ簡単にアクセスできるようになりました。今回は Symfony の EventListener を使用した例をご紹介します。 
出力するHTMLをminify(圧縮)するには、いくつか方法がありますが、ここではTwigがレンダリングした後のHTMLを変換する方法を説明します。本体のソースコードを直接編集することなく、プラグインで実装することが可能です。 


## 1. プラグインを作成します。

[プラグインの仕様はこちらを参照してください。](http://doc4.ec-cube.net/plugin_spec)


プラグインコードは **HtmlMinify** とします。 


### 1-1. プラグインフォルダを作成します。

```text
[EC-CUBEインストールディレクトリ]/app/Plugin/HtmlMinify
```


### 1-2. プラグインの設定ファイルを設置します。

```text
[EC-CUBEインストールディレクトリ]/app/Plugin/HtmlMinify/composer.json
```

**ファイル内容**

```yaml
{
 "name" : "ec-cube/HtmlMinify",
 "version" : "1.0.0",
 "description" : "HTML Minify プラグイン",
 "type" : "eccube-plugin",
 "require" : {
 "ec-cube/plugin-installer" : "~0.0.3"
 },
 "extra" : {
 "code" : "HtmlMinify"
 }
}

```


### 1-3. プラグインをインストールします。

EC-CUBEインストールディレクトリに移動後、以下のコマンドを実行し、プラグインのインストールと有効化を行います。

```cmd
php bin/console eccube:plugin:install --code=HtmlMinify
php bin/console eccube:plugin:enable --code=HtmlMinify
```


2. EventListener を作成します。
------------------------

### 2-1. EventListener を登録する設定ファイルを編集します。

```
[EC-CUBEインストールディレクトリ]/app/Plugin/HtmlMinify/Resource/config/services.yaml
```

**ファイル内容**

```yaml
services:
 htmlminify_listener: # 1
 class: Plugin\HtmlMinify\EventListener\HtmlMinifyListener # 2
 arguments: ['@service_container'] # 3
 tags: # 4
 - {
 name: kernel.event_listener,
 event: kernel.response,
 method: onKernelResponse,
 priority: -10000
 }

```


#### # 1

システム上で一意となる名前を設定します。

#### # 2

実行するEventListenerクラスを指定します。

#### # 3

実行するクラスのコンストラクタに渡す、オブジェクトを指定します。 
指定できるオブジェクトは以下のコマンドで確認することが出来ます。 

```text
php bin/console debug:container
```


#### # 4

実行時のオプションを指定します。 
name: kernel.event\_listener・・・実行する時のイベントリスナーの種類を指定します。 
event: kernel.response・・・イベントの種類を指定します。他にkernel.requestなどのイベントがあります。 
<https://symfony.com/doc/3.4/components/http_kernel.html> 
method: onKernelResponse・・・実行するメソッド名を指定します。 
priority: -10000・・・実行する順番を指定します。数字が低い方が後に実行されます。 


### 2-2. HTMLを変換するクラスを作成します。

```text
[EC-CUBEインストールディレクトリ]/app/Plugin/HtmlMinify/EventListener/HtmlMinifyListener.php
```

**ファイル内容**

```php
<?php
namespace Plugin\HtmlMinify\EventListener;

use Symfony\Component\DependencyInjection\ContainerInterface;
use Symfony\Component\HttpKernel\Event\FilterResponseEvent;

class HtmlMinifyListener
{
 /**
 * @var ContainerInterface
 */
 private $container;

 /**
 * コンストラクタ。
 *
 * @param ContainerInterface $container
 */
 public function __construct(ContainerInterface $container)
 {
 $this->container = $container;
 }

 /**
 * HTMLタグを圧縮します。
 *
 * @param FilterResponseEvent $event
 * @param string $eventName
 */
 public function onKernelResponse(FilterResponseEvent $event,$eventName)
 {
 if (
 ($response = $event->getResponse())
 && ($response instanceof \Symfony\Component\HttpFoundation\Response)
 && ($content = $response->getContent())
 ) {
 $content = preg_replace('#(?ix)(?>[^\S ]\s*|\s{2,})(?=(?:(?:[^<]++|<(?!/?(?:script|textarea|pre)))*+)(?:<(
?>script|textarea|pre)|\z))#','',$content);
 $response->setContent($content);
 }
 }
}

```

## EC-CUBEカスタマイズの基本を知りたい方へ

EC-CUBEの基本的なカスタマイズ方法については、[EC-CUBEのカスタマイズ方法を解説](/column/ec-cube-customize/)ページでご紹介しています。
他の具体的なカスタマイズ事例もカテゴリ別にまとめていますので、あわせてご覧ください。

ナレッジ/コラム

EC-CUBEのカスタマイズ方法を解説、初心者が知っておくべき知識と注意点

ECサイト構築後にやるべきSEO対策10選

ECサイトのカスタマイズ費用を抑える方法と開発会社に伝えるべきポイント

ECサイト構築の費用相場は？初期費用とランニングコストを詳しく解説

ECサイト構築に必要な機能一覧と選定のポイントを徹底解説

ECサイト構築の流れと必要な準備をわかりやすく解説

ネットショップとECサイトの違いとは？種類ごとの特徴をわかりやすく解説

ECサイトとは？初心者でもわかる仕組みと導入方法

GitHub Actionsとpnpm auditで実装するNodeモジュールの脆弱性監視の自動化

Next.jsの環境変数にTypescriptの型を定義する方法

EC-CUBEのバージョン確認方法

EC-CUBE4でImageFluxを設定する方法

VagrantとVirtualBoxで構築するEC-CUBE4のローカル開発環境

テキストエディタ「ATOM」でGithubと連携させる方法

EC-CUBE4のトップページに特定のカテゴリ一に属する商品を表示する方法

EC-CUBE 東京UG 勉強会 / 2019-02-07 レポート

EC-CUBE4のトップページに新着商品を自動で表示する方法

EC-CUBE4のTwigでラジオボタンをセレクトボックスに変更する方法

EC-CUBE4で商品一覧を「更新順」にカスタマイズする方法：画面設定から処理追加まで

EC-CUBE4のHTML最適化：プラグインで実現するSymfonyのEventListener活用

ナレッジ/コラム

EC-CUBEのカスタマイズ方法を解説、 初心者が知っておくべき知識と注意点

ECサイト構築後にやるべきSEO対策10選

ECサイトのカスタマイズ費用を抑える方法と開発会社に伝えるべきポイント

ECサイト構築の費用相場は？初期費用とランニングコストを詳しく解説

ECサイト構築に必要な機能一覧と選定のポイントを徹底解説

ECサイト構築の流れと必要な準備をわかりやすく解説

ネットショップとECサイトの違いとは？種類ごとの特徴をわかりやすく解説

ECサイトとは？初心者でもわかる仕組みと導入方法

GitHub Actionsとpnpm auditで実装するNodeモジュールの脆弱性監視の自動化

Next.jsの環境変数にTypescriptの型を定義する方法

EC-CUBEのバージョン確認方法

EC-CUBE4でImageFluxを設定する方法

VagrantとVirtualBoxで構築するEC-CUBE4のローカル開発環境

テキストエディタ「ATOM」でGithubと連携させる方法

EC-CUBE4のトップページに特定のカテゴリ一に属する商品を表示する方法

EC-CUBE 東京UG 勉強会 / 2019-02-07 レポート

EC-CUBE4のトップページに新着商品を自動で表示する方法

EC-CUBE4のTwigでラジオボタンをセレクトボックスに変更する方法

EC-CUBE4で商品一覧を「更新順」にカスタマイズする方法：画面設定から処理追加まで

EC-CUBE4のHTML最適化：プラグインで実現するSymfonyのEventListener活用

EC-CUBEのカスタマイズ方法を解説、初心者が知っておくべき知識と注意点