EC-CUBEの開発環境構築はXAMPPで簡単に設定可能【2024年最新版】

EC-CUBEとは、ECサイト向けのオープンソースのCMSであり、ECサイト運営のための様々な機能がそろっています。しかし、どのようにEC-サイトを構築すればいいのかわからないと、導入をためらってしまう企業担当者は多いのではないでしょうか？
そこで本記事では、

・EC-CUBEの開発環境はどうやって作るの？
・XAMPPとはどういうもの？
・XAMPPを使ってEC-CUBEを開発するには？

とお悩みの方に向けて、EC-CUBEの概要・EC-CUBEを開発する流れから、EC-CUBEの開発環境構築に必要なOS・ソフトやEC-CUBEの開発環境を構築する手順を解説します。

※EC-CUBEの内製が難しい、優秀な開発会社にEC-CUBE開発を依頼したいという方は、システム幹事にご相談ください。専任のアドバイザーが最適な開発会社を無料でご紹介します。ぜひお気軽にお問い合わせください。

【無料】おすすめのEC-CUBE開発会社を紹介してもらう

EC-CUBEとは

EC-CUBE（イーシーキューブ）とは、オープンソースのECサイト構築ソフトウェアです。EC-CUBEには、商品紹介ページや商品注文ページなど、ECサイト運営に必要な機能が含まれています。
また、売上集計・商品レビュー管理・メルマガ管理など、ECサイト運営に必要な拡張プラグインを追加すると手軽に機能を実装できます。
EC-CUBEの基本機能は下記の通りです。

機能	内容
構築・デザイン	デザイン スマートフォン （スマホ専用サイト機能・レスポンシブ対応） 開発
カート・会員機能	カート 会員 会員登録 ログイン 注文履歴・詳細 お届け先編集 お気に入り一覧 開発
商品管理	商品管理 一括登録・編集
店舗管理	受注管理 顧客管理 メール管理 CSV・PDF 納品書PDF出力 受注/配送/顧客情報CSV出力 出荷CSV登録 店舗管理

EC-CUBEを使って構築されたECサイトは、ファッション・食品・美容・家電・インテリアなど多岐にわたります。
実際に作られた有名なECサイトは下記の通りです。

• ドン・キホーテ
• ジュンク堂書店
• わかさ生活

EC-CUBEでECサイトを構築するには、クラウド版とダウンロード版の2つがあります。クラウド版は、メンテナンスが不要で、すぐにショップを始められるタイプです。ただし、月額49,800円の費用がかかります。一方ダウンロード版は、オープンソースのため費用がかからず、自由にカスタマイズすることが可能です。
この記事ではダウンロード版の環境構築手順を説明します。ダウンロード版の特徴は、EC-CUBEのバージョンアップ・メンテナンス・セキュリティ対策も自社で行う必要があることです。

EC-CUBEでECサイトを始めるには、自社で構築する方法と制作会社に依頼する方法があります。制作会社にはEC-CUBE公式制作パートナーである「インテグレートパートナー」に依頼することも可能です。
関連記事：EC-CUBEの開発会社については、「EC-CUBEでの開発におすすめ会社10選！【2022年最新版】」を合わせてご覧ください。

【無料】おすすめのEC-CUBE開発会社を紹介してもらう

EC-CUBEを開発する流れ

開発環境構築手順を詳しく説明する前に、EC-CUBEでECサイトを立ち上げる全体の流れを大まかに解説します。

ローカル環境で開発環境を構築する

EC-CUBEを開発するためには、最初にローカル環境で開発環境を構築する必要があります。

開発環境とは、システム開発に必要な環境のことです。開発環境で開発したシステムは、テスト環境でテストを行い、問題がなければ本番環境で運用します。
ローカル環境とは、自身のコンピュータ内に構築された環境のことです。ローカル環境を開発に適した環境に整えるには、Linuxと同様の環境を作る必要があります。ローカル環境構築で必要なツールは下記の通りです。

ツール	特徴
VirtualBox（仮想化ソフトウエア）	ローカル環境に違う環境を作る 無料で利用できる 他のOS環境下での作業ができる
Tera Term（ターミナル）	Windows向けのターミナルソフト 別サーバーを遠隔操作できる
Vagrant（仮想環境自動化ツール）	仮想環境を構築するためのソフト 別サーバーを遠隔操作できる 初期構築作業を省略できる
Cyberduck（FTPソフト）	ファイル転送用ソフトウェア ファイルをダウンロードできる ファイルをアップロードできる

関連記事：開発環境の構築方法については、詳しくは後述する「EC-CUBEの開発環境を構築する手順」をご覧ください。

構築した開発環境でEC-CUBEの開発を行う

画像引用：EC-CUBE
EC-CUBEの開発環境が構築できたら、管理画面からログインしてサイトのカスタマイズや機能の追加を行っていきます。ログインすると会員の顧客情報・売上データ・商品情報などを閲覧できます。ログインIDとパスワードは、他人に盗まれると個人情報の漏洩につながるため、注意して取り扱いましょう。

テスト環境でサイトの動作確認をする

開発したサイトをローカルのテスト環境で動作確認をします。仮想化ソフトウエアVirtualBoxを使って仮想マシンを作成し、OSをインストールしてサーバーを構築することで、テスト環境を構築します。
テスト環境を構築すると「構築したサーバーが正常に動作するのか」「システム変更しても思い通りに動作するのか」などを検証可能です。
また、下記のようなメリットがあります。

• 本番でサーバーを構築するのを回避
• 様々な問題に対処する環境を用意
• OSの大幅なアップデート後のシステムの動作チェック
• 復元機能や複製機能を使い、新しい機能や追加したい機能のテストが可能
• 複数のサーバ間での連携のテストが可能

本番環境でサイトを公開する

テスト環境において様々な項目をチェックした後、本番環境でサイトを公開します。
本番環境への移行手順は下記の通りです。
1.テスト環境から本番環境にSQLデータを移行
2.プロジェクトソースを開き.htaccessで外部ユーザーのアクセス制限
3.本番環境にアップロード
4.htaccessのアクセス制限を解除し公開

【無料】おすすめのEC-CUBE開発会社を紹介してもらう

【準備】EC-CUBEの開発環境構築に必要なOS・ソフト

次に、開発環境構築前に準備すべきものについて解説します。

環境構築には自身のPCに下記の3点が必要です。

ここから詳しくみていきます。

Windows 10

今回はWindowsで環境構築をします。環境構築にはWindows 10かWindows 11で行いましょう。Windows 10より以前のWindows 8は、2023年1月にサポートが終了するため、注意が必要です。サポート終了後もWindows 8を使い続けると、パソコンがウィルス感染したり、個人情報が漏洩したりする可能性が高くなるでしょう。
そのため、サポート終了前に以下の対応が必要です。

• Windows 10かWindows 11への有償アップグレード
• パソコンの買い替え

EC-CUBE（ダウンロード版）

画像引用：EC-CUBE
EC-CUBEの公式サイトからダウンロード版をダウンロードします。
EC-CUBEダウンロードURL：https://www.ec-cube.net/download/

国内のECサイトでは、決済画面を改ざんされ、クレジットカード情報が抜き取られる手法（フォームジャッキング）による被害が増加しています。EC-CUBE利用店舗からも、多数被害が報告されている状態です。
ダウンロードする際は、必ず下記のセキュリティ対策ページも確認しておきましょう。

EC-CUBEセキュリティ対策ページURL：https://www.ec-cube.net/info/security/#securit_flow02

ダウンロードするためのシステム要件は下記の通りです。

種類	特徴
EC-CUBE4.2	Webサーバ：Apache2.4.x PHP：PHP7.4 〜 8.1 データベース PostgreSQL10.x 〜 14.x MySQL5.7 or 8.0 SQLite3.x
EC-CUBE4.0/4.1	Webサーバ：Apache2.4.x PHP：PHP7.3 〜 7.4 データベース PostgreSQL9.6.x 〜 14.x MySQL5.7.x SQLite3.x
PHPライブラリ	必須ライブラリ pgsql / mysqli pdo_pgsql / pdo_mysql / pdo_sqlite pdo phar mbstring zlib ctype session JSON xmlなど 推奨ライブラリ hash APCu / WinCache Zend OPcache
動作確認ブラウザ	Windows：Edge・FireFox・ Google Chrome Mac：Safari iOS：Safari Android：標準ブラウザ

XAMPP（ザンプ）

画像引用：Apache Friends

XAMPP（ザンプ）とは、1つのソフトウェアをインストールし、実行環境ボタンをクリックするだけでアプリケーションの実行環境を構築できるフリーソフトです。2002年にApache Friendsによって開発されました。
XAMPPは下記の単語の組み合わせで名づけられています。

• X – クロスプラットフォーム
• A – Apache
• M – MariaDB
• P – PHP
• P – Perl
  
  

XAMPPの利点

一般的なオープンソースのECサイトは、様々なプログラミング言語の知識が必要です。別々にダウンロード・インストールするため、開発初心者には難しく、手間もかかります。

一方XAMPPは、必要なソフトウェアとツールがまとまっているので、開発初心者でも理解しやすく、活用も容易です。またXAMPPには、Webサーバーが含まれているため、ローカル環境においてサーバーをわざわざインストールする必要がありません。

さらにXAMPPは、Linuxにも対応しているので、安心して開発できます。

EC-CUBE4は、PHP7.4に対応しています。そのため、対応したPHPバージョンのXAMPPをダウンロードする必要があります。最新版はインストールできないので注意が必要です。

XAMPPダウンロードURL：https://www.apachefriends.org/jp/index.html

【無料】おすすめのEC-CUBE開発会社を紹介してもらう

EC-CUBEの開発環境をXAMPPで構築する手順

EC-CUBEの開発環境を構築していく手順は下記の通りです。

ここから詳しく解説します。

EC-CUBEのダウンロードファイルを配置する

XAMPPの「~\xampp\htdocs」ディレクトリに解凍したEC-CUBEを配置すると、トップページURLが決定されます。

画像引用：EC-CUBE
http://127.0.0.1/{htdocsの中に作成したディレクトリ名}/

XAMPPにてデータベースを作成する

XAMPPでのデータベース作成方法は下記の通りです。

1.XAMPPを起動しphpMyAdminを立ち上げる

2.図のようにStartとAdminをクリック。

画像引用：EC-CUBE
3. phpMyAdminが開く

画像引用：EC-CUBE
4.新規作成をクリック。データベース名を入力し、データベース作成。

画像引用：EC-CUBE

データベースアカウントについて

XAMPPのデータベースアカウントでEC-CUBEをインストール。また、本番環境としてデータベースを作成する場合はユーザーアカウントが必要です。ユーザーアカウントの作成は、メニューの「ユーザーアカウント」から行います。

XAMPPでiniファイルを編集する

iniファイルの編集方法は下記の通りです。
1. XAMPPを起動

2. ApacheとMySQLのStartをクリック

画像引用：EC-CUBE

3. 「http://127.0.0.1/{EC-CUBEをアップロードしたディレクトリ名}/」へアクセスするとインストール画面が表示

画像引用：EC-CUBE

4. php.iniを開きファイル内を「intl」で検索

5.「;extension=intl」の記述で「;」を削除し「extension=intl」にする
6. php.iniにあるタイムアウトの設定変更。
「max_execution_time=30」を「max_execution_time=120」へと変更する。PCのスペックが低い場合、「300」など「120」より大きな数字が望ましい。

7. XAMPPを再起動。XAMPPのApacheとMySQLのActions項目の「Stop」をクリック。10秒後、再度「Start」をクリック

8. ブラウザから「http://127.0.0.1/{EC-CUBEをアップロードしたディレクトリ名}/」のURLにアクセス

画像引用：EC-CUBE
9. エラー表示がなければphp.iniの設定変更は完了

EC-CUBEをインストールする

画像引用：EC-CUBE

インストール画面で「次へ進む」をクリックします。

サイト設定（店舗情報の設定）を行う

画像引用：EC-CUBE

下記のように店舗情報の設定を行います。管理画面のアクセス情報が漏洩すると個人情報の漏洩や詐欺に利用されるため、注意が必要です。

基本情報	内容
店名	店名を入力
管理画面ログインID	「admin」などの推測されやすいIDを避ける 意味を持たない文字列が望ましい
管理画面パスワード	パスワードは必ず控えるようにする 管理者のパスワード再発行機能はない 複雑なパスワードにする
管理画面のディレクトリ名	管理画面にアクセスする場合のURL http://127.0.0.1/{EC-CUBEをインストールしたディレクトリ}/{管理画面のディレクトリ名}/ 意味を持たない文字列を指定する
SSL経由に強制	ローカル環境では入力しない
管理画面の IPのアクセス制限	特定のIPアドレスに固定しアクセス制限 セキュリティは強くなる スマートフォンでアクセスできない 固定IPを持っていない場合、指定しない
メール設定	ローカル環境では指定しなくても問題ない

データベースの設定と初期化を行う

1. データベースの設定を行う

画像引用：EC-CUBE

データベース情報は、XAMPPに標準搭載されているアカウントを使用する。入力したら「次へ進む」をクリック。

データベース情報	内容
データベースの種類	本番環境ではMySQLかPostgreSQLを利用
データベースのホスト名	localhost
データベースのポート番号	指定する必要なし
データベース名	準備したデータベース名を指定
ユーザー名	rootになる 独自に作成
パスワード	空欄になる 独自に作成
メール設定	ローカル環境では指定しなくても問題ない

2. データベースのデータベースに初期データを登録し「次へ進む」をクリック

画像引用：EC-CUBE
3. 下記の画面が表示されたらインストール完了

画像引用：EC-CUBE

EC-CUBEの開発環境構築が難しければクラウド版を使うのもあり

画像引用：EC-CUBE

EC-CUBE（ダウンロード版）よりも簡単にECサイトが始められるため、開発環境構築に自信がない方はクラウド版を選ぶ方法もあります。サーバー監視やメンテナンスが不要だったり、運用コストを大幅に削減できたりしますが、49,800円の月額料金がかかります。

【無料】おすすめのEC-CUBE開発会社を紹介してもらう

EC-CUBEの開発環境構築手順について解説しました

EC-CUBEでECサイト構築を検討していて、具体的な方法が知りたいという企業の方に向け、EC-CUBEの概要・開発する流れから、開発環境構築に必要なOS・ソフトや開発環境を構築する手順を解説しました。
EC-CUBEを開発するには、ソフトウェアやデータベース、開発環境の構築など様々な知識が必要です。自社に知見のあるエンジニアがいない場合、内製は難しいでしょう。

※EC-CUBEの内製が難しい、優秀な開発会社にEC-CUBEの開発を依頼したいという方は、システム幹事にご相談ください。専任のアドバイザーが最適な開発会社をご紹介します。相談料などは一切かかりませんので、お気軽にお問い合わせください。

コンサルタントのご紹介 岩田 専任のコンサルタントが、
お客様の予算と目的を丁寧にヒアリング。
最適な会社をピックアップ・ご紹介させていただきます！
初心者の方でも安心してご相談いただけます。

【無料】おすすめのEC-CUBE開発会社を紹介してもらう