【初心者】XAMPPでEC-CUBE4を利用する【必見】

EC-CUBE
この記事は約13分で読めます。
スポンサーリンク

XAMPPでEC-CUBE4を利用する方法

EC-CUBE4のダウンロード

ダウンロードする

まず、EC-CUBE4をダウンロードします。とりあえずダウンロードするだけで、後に説明をするXAMPPをインストールするまで解凍は行わなくて大丈夫です。

EC-CUBEダウンロード /
EC-CUBEダウンロード、ECサイト構築・リニューアルなら「EC-CUBE」。ASPではできなかった独自性の高いECサイトが、無料で手に入ります。

ダウンロードの際、無料での新規ユーザー登録が必要です。こちらのGitHubのサイトから落とすという手もあります。

GitHub - EC-CUBE/ec-cube: EC-CUBE is the most popular e-commerce solution in Japan
EC-CUBE is the most popular e-commerce solution in Japan - GitHub - EC-CUBE/ec-cube: EC-CUBE is the most popular e-comme...

XAMPPのダウンロード

ダウンロードする

EC-CUBE4のシステム要件を見ると、PHPのバージョンが7.1~8.1となっているので、それに合ったバージョンのXAMPPをダウンロードします。

Download XAMPP
Download XAMPP for Windows, Linux, and OS X. Older versions of Solaris are also available.
インストールする

ダウンロードしたファイルを起動し、デフォルトの「C:\xampp」にインストールを行います。

Next >」を押していき、最後に「Finish」を押したらインストール完了です。

Important! Because an activated User Account Control (UAC) on your system some functions of XAMPP are possibly restricted.
With UAC please avoid install XAMPP to C:\Program Files (missing write permissions). Or deactivate UAC with msconfig after this setup.

とのメッセージが出ますが、これは、

重要!システム上でユーザー アカウント制御 (UAC) が有効になっているため、XAMPP の一部の機能が制限されている可能性があります。
UAC を使用する場合は、XAMPP を C:\Program Files にインストールすることは避けてください (書き込み権限がありません)。または、この設定後に msconfig を使用して UAC を無効にします。

という意味で、要するに「C:\Program Files」フォルダにはインストールしないでくださいということです。今回は、デフォルトの「C:\xampp」にインストールをします。

フォルダー設定は、デフォルトの「C:\xampp」のままで構いません。ディスク容量が気になるというかたは他のドライブにインストールするなど対策を取ってください。

言語は「English(英語)」または「Deutsch(ドイツ語)」しか選べないので、ここでは英語を選んでおきます。

インストールが開始されるのでしばらくお待ち下さい。

↑のような画面が途中で出ますので、「許可」を押します。

Finish」を押してXAMPPのインストールは完了となります。

EC-CUBE4のインストール

インストールする

ダウンロードしたZipファイルを解凍します。解凍したフォルダを、「C:\xampp\htdocs」の下に入れます。「C:\xampp\htdocs\ec-cube」のような形となります。ショップのURL名は、「http://localhost/ec-cube」となります。
※解凍先は「C:\xampp\htdocs」です。「C:\xampp」に解凍しないように注意しましょう。私はよくミスりました。

XAMPPの起動

ApacheとMySQLを立ち上げる

XAMPP Control Panelを起動し、ApacheMySQLを立ち上げます。

か、または、XAMPPのMySQLAdminを押して、PHPMyAdminに入れる状態にしておきます。

初回に限り、↑のようなメッセージが出ますので「許可」を押して下さい。

ECサイト用のデータベースを作成する

お使いのブラウザのアドレスバーに、http://localhost/phpmyadmin/を入力します。

データベースをクリックし、今回は、データベース名「eccube_local」、照合順序「utf8mb4_unicode_ci」として作成を行います。

さて、これでEC-CUBE4を正式にインストールする準備が整いました。

EC-CUBE4のインストールその弐

php.iniを変更する

C:\xampp\php\php.ini」をテキストツールで開き、「;extension=intl」で検索(Ctrl+F)を行います。次に、この一文から「;(セミコロン)」を削除し、上書き保存を行います。

EC-CUBE4にアクセスしてみる

http://localhost/ec-cube/」と入力して、EC-CUBE4にアクセスしてみましょう。
しかし、このままですと、次のようなエラーが出るはずです。

Warning: openssl_pkey_export(): Cannot get key from 
parameter 1 in C:\xampp\htdocs\ec-cube\app\Plugin\Api42
\DependencyInjection\Compiler\ApiCompilerPass.php 
on line 111

Fatal error: Uncaught TypeError: 
openssl_pkey_get_details(): 
Argument #1 ($key) must be of type OpenSSLAsymmetricKey, 
bool given in 
C:\xampp\htdocs\ec-cube\app\Plugin\Api42\DependencyInjection\
Compiler\ApiCompilerPass.php:113 
Stack trace: #0 
C:\xampp\htdocs\ec-cube\app\Plugin\Api42\DependencyInjection\
Compiler\ApiCompilerPass.php(113)
: openssl_pkey_get_details(false) #1 
C:\xampp\htdocs\ec-cube\app\Plugin\Api42\DependencyInjection\
Compiler\ApiCompilerPass.php(90)
: Plugin\Api42\DependencyInjection\Compiler\
ApiCompilerPass->generateKeys('C:\\xampp\\htdocs...', 
'C:\\xampp\\htdocs...') #2 
C:\xampp\htdocs\ec-cube\app\Plugin\Api42\DependencyInjection\
Compiler\ApiCompilerPass.php(33)
: Plugin\Api42\DependencyInjection\Compiler\
ApiCompilerPass->configureKeyPair(Object(Symfony\Component\
DependencyInjection\ContainerBuilder)) #3 
C:\xampp\htdocs\ec-cube\vendor\symfony\dependency-injection\
Compiler\Compiler.php(82)
: Plugin\Api42\DependencyInjection\Compiler\
ApiCompilerPass->process(Object(Symfony\Component\
DependencyInjection\ContainerBuilder)) #4 
C:\xampp\htdocs\ec-cube\vendor\symfony\dependency-injection\
ContainerBuilder.php(757)
: Symfony\Component\DependencyInjection\Compiler\
Compiler->compile(Object(Symfony\Component\DependencyInjection\
ContainerBuilder)) #5 
C:\xampp\htdocs\ec-cube\vendor\symfony\http-kernel\Kernel.php(546)
: Symfony\Component\DependencyInjection\ContainerBuilder->compile() #6 
C:\xampp\htdocs\ec-cube\vendor\symfony\http-kernel\Kernel.php(787)
: Symfony\Component\HttpKernel\Kernel->initializeContainer() #7 
C:\xampp\htdocs\ec-cube\vendor\symfony\http-kernel\Kernel.php(190)
: Symfony\Component\HttpKernel\Kernel->preBoot() #8 
C:\xampp\htdocs\ec-cube\index.php(83)
: Symfony\Component\HttpKernel\Kernel->handle(Object(Symfony\
Component\HttpFoundation\Request)) #9 
{main} thrown in 
C:\xampp\htdocs\ec-cube\app\Plugin\Api42\DependencyInjection\
Compiler\ApiCompilerPass.php on line 113

これは調べたところ、apacheのopenssl.cnfが配置されていないか、或いは、openssl.cnfへのパスの設定が間違っていることが原因だそうですので、これを解決していきます。

info.phpの作成

まずパスを確認するために「C:\xampp\htdocs」の下に「info.php」という名前で次のような記述をしたファイルを作成します。

<?php
phpinfo();
OPENSSL_CONFの確認と修正

そしてお使いのブラウザーで新しいタブを開き、URL欄に「http://localhost/info.php」と入力してエンターを押して下さい。
phpinfoの画面が出たと思います。phpinfoの画面になりましたら、検索(Ctrl+F)で「OPENSSL_CONF」と入力して、openssl.cnfへのパスの設定を確認します。

デフォルトでは、

C:\xampp\apache\bin\openssl.conf

となっていますが、正しくは、

C:\xampp\apache\conf\openssl.conf

なのだそうです。

EC-CUBE 開発コミュニティ - フォーラム
独自性の高いECサイトが無料で手に入る、日本発ECオープンプラットフォーム「EC-CUBE」の開発コミュニティサイト

これを解決するために、C:\xampp\apache\conf\extraの下にある「httpd-xampp.conf」の中の一文を修正します。

誤)SetEnv OPENSSL_CONF "C:\xampp\apache\bin\openssl.conf
正)SetEnv OPENSSL_CONF "C:\xampp\apache\conf\openssl.conf

フォルダを見ていただくとわかるのですが、binフォルダにはopenssl.exeしかなく、confフォルダにopenssl.confがあります。これはXAMPP側のミスなのでしょうね。今のところ直っていないようなので、手動で変更する必要があります

php.iniの修正

次に、C:\xampp\phpフォルダの中の「php.ini」を修正します。

キーワード「;extension=openssl」で検索(Ctrl+F)を行い、行の先頭に付いている「;」を削除して保存します。

修正前);extension=openssl
修正後)extension=openssl

phpinfoのopenssl default configのパスの確認

URL欄に「http://localhost/info.php」と入力して「openssl default config」のパスを確認します。恐らくデフォルトでは「C:\Program Files\Common Files\SSL/openssl.cnf」となっていると思いますが、これは正しいパスではないので正しいパスを設定します。

openssl default configのパスの変更

↑のようになっていると思います。これを変更します。
Windowsの「設定」を開き、「システム」の「バージョン情報」を開きます。

システムの詳細設定」を開きます。

環境変数(N)...」を押します。

変数名(N): OPENSSL_CONF
変数値(V): C:/xampp/apache/conf/openssl.cnf

と設定します。ここで注意が必要なのが区切りの記号が「\(円マーク)」ではなく「/(スラッシュ)」というところです。

このままではまだ設定が反映されていませんので、PCの再起動を行ってから、XAMPPApacheを一旦Stopさせて、再度Startしてください。
info.phpを開くと変更されたことが確認できるはずです。

表示が改善されていることが確認できたら、再度「http://localhost/ec-cube/」と入力して、EC-CUBE4にアクセスしてみましょう。

するとこんな一文が現れませんか?

「 [必須] sodium拡張モジュールが有効になっていません。
 [推奨] wincache拡張モジュールが有効になっていません。

これについて調べたところ、この文言が出てもスルーしても構わないというような回答がありましたので、今回はスルーすることにします。

EC-CUBE4のインストール
①ようこそ

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

②権限チェック

「次へ進む」をクリックします。

③サイトの設定
あなたの店名店の名前を設定します。
メールアドレスここで指定したアドレス宛に注文通知
メールなどが届くようになります。
管理画面
ログインID
4~50文字の間で、他人に推測されないような
IDを設定します。しかし、今回はローカルでの
作業になるので「admin」とします。
管理画面
パスワード
12~32文字の間で、他人やロボットに
推測されないような、大文字小文字数字などを
織り交ぜたパスワードを設定します。
しかし、今回は同じくローカルでの作業に
なるので「password1234」とします。
サイトへのアクセス
を、SSL(https)
経由に制限します
チェック項目は、ローカル環境では
チェックしないでください。
管理画面への
アクセスを、
以下のIPに
制限します
ローカル環境では特に
指定しなくても構いません。
メールの設定ローカル環境では
設定しなくて問題ありません。
④データベースの設定
データベース
の種類
今回はMySQL
を指定します。
データベース
のホスト名
localhost
とします。
データベース
のポート番号
設定しなくても
大丈夫です。
データベース名今回は上で作成したデータベース名
eccube_local」を設定します。
ユーザー名なんでも良いのですが、
rootとします。
パスワードローカル環境なので、
空欄とします。
⑤データベースの初期化

データベースに初期データを設定するので、「次へ進む」を押します。

⑥インストール

プラグインのインストールをするかどうかを聞かれますが、あとから管理画面→オーナーズストア→プラグイン一覧より有効化も可能なので、今回は割愛させていただきます。

⑦インストール完了

ECサイトの設定がすべて完了しました。

管理画面の使い方はこちらです。とりあえず、管理画面に入れるかを試してみてください。万が一、IDやパスワードが間違っていた場合は、インストールしたディレクトリの「.env」を削除し、データベースを初期化してやり直しを試みてください。

白川秋
白川秋

長々、最後までお読みいただきありがとうございました。

参考までに。

コメント