- 更新日 2024.02.27
- カテゴリー ECサイト開発
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サイト構築ソフトウェアです。EC-CUBEには、商品紹介ページや商品注文ページなど、ECサイト運営に必要な機能が含まれています。
また、売上集計・商品レビュー管理・メルマガ管理など、ECサイト運営に必要な拡張プラグインを追加すると手軽に機能を実装できます。
EC-CUBEの基本機能は下記の通りです。
機能 |
内容 |
---|---|
構築・デザイン |
(スマホ専用サイト機能・レスポンシブ対応)
|
カート・会員機能 |
|
商品管理 |
|
店舗管理 |
|
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サイトを立ち上げる全体の流れを大まかに解説します。
ローカル環境で開発環境を構築する
EC-CUBEを開発するためには、最初にローカル環境で開発環境を構築する必要があります。
開発環境とは、システム開発に必要な環境のことです。開発環境で開発したシステムは、テスト環境でテストを行い、問題がなければ本番環境で運用します。
ローカル環境とは、自身のコンピュータ内に構築された環境のことです。ローカル環境を開発に適した環境に整えるには、Linuxと同様の環境を作る必要があります。ローカル環境構築で必要なツールは下記の通りです。
ツール |
特徴 |
---|---|
VirtualBox(仮想化ソフトウエア) |
|
Tera Term(ターミナル) |
|
Vagrant(仮想環境自動化ツール) |
|
Cyberduck(FTPソフト) |
|
関連記事:開発環境の構築方法については、詳しくは後述する「EC-CUBEの開発環境を構築する手順」をご覧ください。
構築した開発環境でEC-CUBEの開発を行う
画像引用:EC-CUBE
EC-CUBEの開発環境が構築できたら、管理画面からログインしてサイトのカスタマイズや機能の追加を行っていきます。ログインすると会員の顧客情報・売上データ・商品情報などを閲覧できます。ログインIDとパスワードは、他人に盗まれると個人情報の漏洩につながるため、注意して取り扱いましょう。
テスト環境でサイトの動作確認をする
開発したサイトをローカルのテスト環境で動作確認をします。仮想化ソフトウエアVirtualBoxを使って仮想マシンを作成し、OSをインストールしてサーバーを構築することで、テスト環境を構築します。
テスト環境を構築すると「構築したサーバーが正常に動作するのか」「システム変更しても思い通りに動作するのか」などを検証可能です。
また、下記のようなメリットがあります。
- 本番でサーバーを構築するのを回避
- 様々な問題に対処する環境を用意
- OSの大幅なアップデート後のシステムの動作チェック
- 復元機能や複製機能を使い、新しい機能や追加したい機能のテストが可能
- 複数のサーバ間での連携のテストが可能
本番環境でサイトを公開する
テスト環境において様々な項目をチェックした後、本番環境でサイトを公開します。
本番環境への移行手順は下記の通りです。
1.テスト環境から本番環境にSQLデータを移行
2.プロジェクトソースを開き.htaccessで外部ユーザーのアクセス制限
3.本番環境にアップロード
4.htaccessのアクセス制限を解除し公開
【準備】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 |
|
EC-CUBE4.0/4.1 |
|
PHPライブラリ |
|
動作確認ブラウザ |
|
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の開発環境を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 |
|
管理画面パスワード |
|
管理画面のディレクトリ名 |
|
SSL経由に強制 |
|
管理画面の |
|
メール設定 |
|
データベースの設定と初期化を行う
1. データベースの設定を行う
画像引用:EC-CUBE
データベース情報は、XAMPPに標準搭載されているアカウントを使用する。入力したら「次へ進む」をクリック。
データベース情報 |
内容 |
---|---|
データベースの種類 |
|
データベースのホスト名 |
|
データベースのポート番号 |
|
データベース名 |
|
ユーザー名 |
|
パスワード |
|
メール設定 |
|
2. データベースのデータベースに初期データを登録し「次へ進む」をクリック
画像引用:EC-CUBE
3. 下記の画面が表示されたらインストール完了
画像引用:EC-CUBE
EC-CUBEの開発環境構築が難しければクラウド版を使うのもあり
画像引用:EC-CUBE
EC-CUBE(ダウンロード版)よりも簡単にECサイトが始められるため、開発環境構築に自信がない方はクラウド版を選ぶ方法もあります。サーバー監視やメンテナンスが不要だったり、運用コストを大幅に削減できたりしますが、49,800円の月額料金がかかります。
EC-CUBEの開発環境構築手順について解説しました
EC-CUBEでECサイト構築を検討していて、具体的な方法が知りたいという企業の方に向け、EC-CUBEの概要・開発する流れから、開発環境構築に必要なOS・ソフトや開発環境を構築する手順を解説しました。
EC-CUBEを開発するには、ソフトウェアやデータベース、開発環境の構築など様々な知識が必要です。自社に知見のあるエンジニアがいない場合、内製は難しいでしょう。
※EC-CUBEの内製が難しい、優秀な開発会社にEC-CUBEの開発を依頼したいという方は、システム幹事にご相談ください。専任のアドバイザーが最適な開発会社をご紹介します。相談料などは一切かかりませんので、お気軽にお問い合わせください。
コンサルタントのご紹介
岩田
専任のコンサルタントが、
お客様の予算と目的を丁寧にヒアリング。
最適な会社をピックアップ・ご紹介させていただきます!
初心者の方でも安心してご相談いただけます。
Q. EC-CUBEを開発する流れは?
EC-CUBEを開発する流れは「?ローカル環境で開発環境を構築する」「?構築した開発環境でEC-CUBEの開発を行う」「?テスト環境でサイトの動作確認をする」「?本番環境でサイトを公開する」の4ステップです。
この記事を書いた人
今崎 人実
専門分野: IT、仮想通貨、建築
大手インターネットプロバイダー、Webデザイン事務所、建築デザイン事務所を経てライターに転身。長年Webデザイナーをやっていた経験を活かし、IT、仮想通貨、建築関連の記事を中心に執筆。取材記事やコンテンツライティング、SEO記事などさまざまなジャンルの執筆を行っています。
このライターの記事一覧