XAMPPでEC-CUBE4を利用する方法
EC-CUBE4のダウンロード
ダウンロードする
まず、EC-CUBE4をダウンロードします。とりあえずダウンロードするだけで、後に説明をするXAMPPをインストールするまで解凍は行わなくて大丈夫です。
![](https://www.ec-cube.net/user_data/packages/default/img/download/fb_logo.jpg)
ダウンロードの際、無料での新規ユーザー登録が必要です。こちらのGitHubのサイトから落とすという手もあります。
XAMPPのダウンロード
ダウンロードする
EC-CUBE4のシステム要件を見ると、PHPのバージョンが7.1~8.1となっているので、それに合ったバージョンのXAMPPをダウンロードします。
インストールする
ダウンロードしたファイルを起動し、デフォルトの「C:\xampp」にインストールを行います。
「Next >」を押していき、最後に「Finish」を押したらインストール完了です。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_10h06_44.jpg)
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_10h13_25.jpg)
とのメッセージが出ますが、これは、
という意味で、要するに「C:\Program Files」フォルダにはインストールしないでくださいということです。今回は、デフォルトの「C:\xampp」にインストールをします。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_10h22_32.jpg)
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_10h23_55.jpg)
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_10h31_12.jpg)
フォルダー設定は、デフォルトの「C:\xampp」のままで構いません。ディスク容量が気になるというかたは他のドライブにインストールするなど対策を取ってください。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_10h32_55.jpg)
言語は「English(英語)」または「Deutsch(ドイツ語)」しか選べないので、ここでは英語を選んでおきます。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_10h35_43.jpg)
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_10h36_59.jpg)
インストールが開始されるのでしばらくお待ち下さい。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/スクリーンショット-2024-01-07-103840.jpg)
↑のような画面が途中で出ますので、「許可」を押します。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_10h41_11.jpg)
「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を起動し、ApacheとMySQLを立ち上げます。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_10h57_35.jpg)
か、または、XAMPPのMySQLのAdminを押して、PHPMyAdminに入れる状態にしておきます。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/スクリーンショット-2024-01-07-110047.jpg)
初回に限り、↑のようなメッセージが出ますので「許可」を押して下さい。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_11h04_24.jpg)
ECサイト用のデータベースを作成する
お使いのブラウザのアドレスバーに、http://localhost/phpmyadmin/を入力します。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_11h10_53-1024x721.jpg)
データベースをクリックし、今回は、データベース名「eccube_local」、照合順序「utf8mb4_unicode_ci」として作成を行います。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_11h15_54-1024x721.jpg)
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_11h20_29-1024x721.jpg)
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_11h26_31-1024x721.jpg)
さて、これでEC-CUBE4を正式にインストールする準備が整いました。
EC-CUBE4のインストールその弐
php.iniを変更する
「C:\xampp\php\php.ini」をテキストツールで開き、「;extension=intl」で検索(Ctrl+F)を行います。次に、この一文から「;(セミコロン)」を削除し、上書き保存を行います。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_11h31_57.jpg)
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」という名前で次のような記述をしたファイルを作成します。
![](https://shirakawaroom.com/wp-content/uploads/2022/04/2024-01-28_10h44_27.jpg)
<?php
phpinfo();
OPENSSL_CONFの確認と修正
そしてお使いのブラウザーで新しいタブを開き、URL欄に「http://localhost/info.php」と入力してエンターを押して下さい。
phpinfoの画面が出たと思います。phpinfoの画面になりましたら、検索(Ctrl+F)で「OPENSSL_CONF」と入力して、openssl.cnfへのパスの設定を確認します。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_12h36_34-1-1024x721.jpg)
デフォルトでは、
C:\xampp\apache\bin\openssl.conf
となっていますが、正しくは、
C:\xampp\apache\conf\openssl.conf
なのだそうです。
これを解決するために、C:\xampp\apache\conf\extraの下にある「httpd-xampp.conf」の中の一文を修正します。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_12h48_48.jpg)
誤)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側のミスなのでしょうね。今のところ直っていないようなので、手動で変更する必要があります。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_12h58_23.jpg)
php.iniの修正
次に、C:\xampp\phpフォルダの中の「php.ini」を修正します。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_13h17_15.jpg)
キーワード「;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のパスの変更
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_14h21_22-1024x721.jpg)
↑のようになっていると思います。これを変更します。
Windowsの「設定」を開き、「システム」の「バージョン情報」を開きます。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_14h26_10.jpg)
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_14h27_53.jpg)
「システムの詳細設定」を開きます。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_14h29_54.jpg)
「環境変数(N)...」を押します。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_14h39_10.jpg)
変数名(N): OPENSSL_CONF
変数値(V): C:/xampp/apache/conf/openssl.cnf
と設定します。ここで注意が必要なのが区切りの記号が「\(円マーク)」ではなく「/(スラッシュ)」というところです。
このままではまだ設定が反映されていませんので、PCの再起動を行ってから、XAMPPのApacheを一旦Stopさせて、再度Startしてください。
info.phpを開くと変更されたことが確認できるはずです。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_13h01_51-1024x721.jpg)
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_14h59_36-1024x721.jpg)
表示が改善されていることが確認できたら、再度「http://localhost/ec-cube/」と入力して、EC-CUBE4にアクセスしてみましょう。
するとこんな一文が現れませんか?
「 [必須] sodium拡張モジュールが有効になっていません。」
「 [推奨] wincache拡張モジュールが有効になっていません。」
これについて調べたところ、この文言が出てもスルーしても構わないというような回答がありましたので、今回はスルーすることにします。
EC-CUBE4のインストール
①ようこそ
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_15h02_27-1024x721.jpg)
インストール画面で「次へ進む」をクリックします。
②権限チェック
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_15h13_24-1024x721.jpg)
「次へ進む」をクリックします。
③サイトの設定
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_15h18_18-1024x721.jpg)
あなたの店名 | 店の名前を設定します。 |
メールアドレス | ここで指定したアドレス宛に注文通知 メールなどが届くようになります。 |
管理画面 ログインID | 4~50文字の間で、他人に推測されないような IDを設定します。しかし、今回はローカルでの 作業になるので「admin」とします。 |
管理画面 パスワード | 12~32文字の間で、他人やロボットに 推測されないような、大文字小文字数字などを 織り交ぜたパスワードを設定します。 しかし、今回は同じくローカルでの作業に なるので「password1234」とします。 |
サイトへのアクセス を、SSL(https) 経由に制限します | チェック項目は、ローカル環境では チェックしないでください。 |
管理画面への アクセスを、 以下のIPに 制限します | ローカル環境では特に 指定しなくても構いません。 |
メールの設定 | ローカル環境では 設定しなくて問題ありません。 |
④データベースの設定
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_15h23_00-1024x721.jpg)
データベース の種類 | 今回はMySQL を指定します。 |
データベース のホスト名 | localhost とします。 |
データベース のポート番号 | 設定しなくても 大丈夫です。 |
データベース名 | 今回は上で作成したデータベース名 「eccube_local」を設定します。 |
ユーザー名 | なんでも良いのですが、 rootとします。 |
パスワード | ローカル環境なので、 空欄とします。 |
⑤データベースの初期化
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_15h25_48-1024x721.jpg)
データベースに初期データを設定するので、「次へ進む」を押します。
⑥インストール
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_15h28_57-1024x721.jpg)
プラグインのインストールをするかどうかを聞かれますが、あとから管理画面→オーナーズストア→プラグイン一覧より有効化も可能なので、今回は割愛させていただきます。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_15h33_39-1024x721.jpg)
⑦インストール完了
ECサイトの設定がすべて完了しました。
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_15h36_29-1024x721.jpg)
![](https://shirakawaroom.com/wp-content/uploads/2024/01/2024-01-07_15h36_48-1024x721.jpg)
管理画面の使い方はこちらです。とりあえず、管理画面に入れるかを試してみてください。万が一、IDやパスワードが間違っていた場合は、インストールしたディレクトリの「.env」を削除し、データベースを初期化してやり直しを試みてください。
![白川秋](https://shirakawaroom.com/wp-content/uploads/2023/12/man_nomal_s.jpg)
長々、最後までお読みいただきありがとうございました。
参考までに。
![](https://shirakawaroom.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
コメント