【PHP】ECサイト専用CMS『EC-CUBE』の始め方


【PHP】ECサイト専用CMS『EC-CUBE』の始め方

PHP学習中の方、PHPに興味がある方、ECサイト専用CMSの『EC-CUBE』をご存知でしょうか?

イーシーキューブ社が主体となって開発を進めるEC-CUBEは、誰でも無料で利用可能なオープンソース型のCMSです。(国産のネットショップ専用)

PHPのCMSと言えば『WordPress』が有名ですが、『EC-CUBE』もこれからどんどんシェアが拡大していくはず。 今のうちに学習しておきましょう!

CMS ・・・ プログラミング知識不要でも、Webサイトを作れるプログラム群。代表的なものにWordPressがある。

目次
  1. ECサイト専用CMS『EC-CUBE』の始め方
  2. EC-CUBEとは
  3. EC-CUBEを始める前に
  4. サクラ・レンタルサーバーにEC-CUBEをインストールする方法
  5. EC-CUBEの編集方法
  6. EC-CUBEのSEO
  7. まとめ

ECサイト専用CMS『EC-CUBE』の始め方

EC-CUBEとは

image

サンプルページ

2006年にオープンソースで公開されたネットショップ構築用CMSで、現在はレンタルサーバーのサクラやX-Serverなどで簡単インストール可能。

プログラミング言語はPHPを使い、ベースに Symfony というフレームワークを使用し、各種バージョン対応を行い運営中。利用者は、複雑なプログラムを構築しなくても、商品登録から在庫管理、税率設定などを管理画面で操作可能。 また追加の機能はプラグインで制御でき、テンプレートや決済プロバイダーも豊富。

このように一見すると凄そうな EC-CUBE、しかしあまり聞かない、という方も多い事でしょう。EC-CUBEがWordPressのように表立って登場しない理由はいくつか考えられます。

  • WordPressに比べて難しい
  • 競争相手が多い
  • 主に国内の開発者が多い

最初のWordPressに比べて難しい、これはWordPressを経験しているが為に感じる事で仕方ありません。またWordPressのような”ブログ型”に比べると、ECサイトは商品管理からカート機能、お知らせ機能、ユーザー機能と処理内容が圧倒的に多いです。その分プログラムが複雑になって、データベースの構造も複雑になるのは仕方ありませんね。

”競争相手が多い”、実はこれEC-CUBE 以外にオープンソース型のECプラットフォームが存在するため。

  • X-cart
  • WooCommerce(WordPress)
  • Magento Commerce
  • PrestaShop
  • OpenCart etc

「えっ、こんなに?」と思われるかもしれませんが、結構凄いものばかりです。特に MagentaShop はページデザインをドラッグ&ドロップで作成できますので、HTML や CSS を知らない、詳しくない、という方でもOKなプラットフォーム。

”EC-CUBEは主に国内の開発者が多い”、これはメリットにもデメリットにもなる話ですが、WordPress などに比べると圧倒的に情報量が少ない状況。エラー発生時は、管理者の技術レベルが問われてしまいます。

さあ、このようにEC-CUBEを取り巻く環境はいろいろですが、「国産」「豊富な決済手段」という点から一度は使ってみたいですよね。

EC-CUBEを始める前に

EC-CUBEを始める方法は主に下記の通り。

  • ローカル環境(自分のパソコン)
  • レンタルサーバー
  • AWS

実際に私は、ローカル環境、サクラサーバー 、バリューサーバー 、ロリポップ、AWS、 GitPod で EC-CUBE を使ってみようと試みてみました。その結果は下記の通り。

結果
ローカル環境 ❌、PHPの実行環境が難しい? Node.js も必要だ。
サクラサーバー 最初は❌、2回目はある設定を変えてOK。
バリューサーバー ❌、2020.05は使えた Composer が使えなくなった
ロリポップ △、EC-CUBEのバージョンが古い
AWS ❌、EC-CUBEの開発環境を構築できなかった
GitPod △、デモページはOKだが、データベース使えないため管理画面は❌。

うまくいったものといかなかったもの、約丸2日間奮闘しましたが、 AWS などでは EC-CUBE の開発環境を構築する事ができませんでした。 EC-CUBEのインストール方法は公開されているものの、うまくいかない、これは歯痒いですが、ある意味 EC-CUBE の複雑さを物語っているのではないでしょうか?

結果的にはサクラサーバーでEC-CUBEをインストールする方法が簡単で、安心。今回はサクラサーバーで EC-CUBE を使う様子をご紹介していきます。

過去に Docker や Grant など数々の難題をクリアしてきたつもりの大島ですが、EC-CUBEをローカルとAWSにインストールできませんでした。時間的な問題もありますが、エラーハンドリングをしていて思ったことは、「情報量が少ない」ということ。
再インストールやシステムをチェックできる時間があればいいのですが、今回は❌という結果に終わりました。

サクラ・レンタルサーバーにEC-CUBEをインストールする方法

「そんなのサクラのページにマニュアルあるじゃん」と突っ込まれる方もいらっしゃるでしょう。確かにマニュアル(LINK)は公開されていますが、私はそれでも一発でインストールできませんでした。

image

サクラのレンタルサーバーに EC-CUBE をインストールしようとして、失敗した画像

準備

image

  • サクラ・レンタルサーバーのスタンダードコース以上に登録
  • EC-CUBEの関連ファイルをダウンロードするフォルダの作成(実行するディレクトリの指定)
  • データベースの作成
Step 1: PHP のバージョン確認

image

EC-CUBEの公式ドキュメントには PHP 7.2.19 で動作確認済み、サクラのマニュアルには 7.4 では動かない、と書かれています。今回はサポート期限が短いですが、 7,2 系を選択。

GitPod は PHP 7.4系ですが、 EC-CUBE インストールでき、動きました。恐らく PHP や Node.js などのシステム的な問題と考えられます。

Step 2: php.ini の編集

image

date.timezone = Asia/Tokyo

サクラのマニュアルを確認すると、EC-CUBEをインストールする前に PHP のタイムゾーンを設定してくださいとのこと。マニュアル通りに上図のように php.ini を編集し、保存。

Step 3: EC-CUBEをクイックインストール

image

サクラサーバー管理画面・左サイドバーの「Webサイト/データ」を選択し、クイックインストールで EC-CUBE を選択。

image

今回は独自ドメインを使用せず、サクラのサブドメインを使って EC-CUBE を使用。インストールURLでサブディレクトリを選択し、事前に作成しておいたディレクトリ名を設定。

データベース名もあらかじめ用意していたものが自動で表示されますので、適当なモノを選択し、パスワードと同意ボタンを押して「作成する」を実行。

この後、1分程度画面が変わらず、「あれ?エラー?」と焦りますが、そのままお待ちください。無事 EC-CUBE がインストールできると下図のようにインストール済みパッケージとして表示されます。

image

そして画面に書かれている「設置先」のリンクをクリックすると以下のように。

Step 4: EC-CUBEの初期設定

ここからはデータベースに記録する内容を設定。

image

image

image

サイトの設定画面では、店名などを入力。こちらの情報はあとでも変更する事ができますが、ログインIDなどはサクラサーバーのログイン、データベースのログインとは違ってきますので、混同しないように注意しましょう。

また管理画面へのアクセスIPアドレスは、端末と通信環境が固定であれば自分のパソコンのIPアドレスを登録しておくと安心できますが、環境が変わる場合は「あれ、なんでログインできないの?」と焦りますので注意しましょう。 メール設定については事前にサクラの管理画面で設定しておくとスムーズ。

image

EC-CUBEで使用するデータベースの設定画面。事前に作成しておいたデータベースの情報を入力。この時ホスト名の蘭は必須マークが付いていませんが、入力しないと先に進めませんでした。 入力内容がわからない場合は、サクラの管理画面からデータベースの情報を確認しましょう。

image

データベースの初期化について尋ねられますので、これはこのままスルー。

image

上図のように表示されれば、サーバー側のセットは完了です。次は管理画面にログインして EC-CUBE を確認していきます。

EC-CUBE管理画面にログイン

image

先ほどブラウザ上で設定した EC-CUBE のユーザーID とパスワードを入力すると、管理画面にログインできます。

image

そして管理画面末尾のアドレスを消すと、EC-CUBE のトップ画面を開く事ができますね。これでEC-CUBE自体のインストールは完了。

image

EC-CUBEの編集方法

EC-CUBEはどこか WordPress と似ているようで違う。まず私が最初に「んっ?」と思った点は、トップ画面に表示されているカテゴリーリストの画像、実はこの画像を表示させようと思うと結構大変です。

image

プラグインを検索すると 3万円ぐらいで販売されていて、プログラムで画像を利用しようと思うと複雑な EC-CUBE のプログラムを理解する必要が。

また実際の決済方法については、決済プロバイダーの「SBペイメントサービス」や「ペイジェント決済プラグイン」などを利用及び申請する必要が。つまり EC-CUBE の管理画面では、売り上げを数字的に管理できるものの、入出金などは外部で処理、ということになります。セキュリティ的には安心できますね。

ちょっとした CSS や JavaScript については管理画面から編集可能で、この辺りは WordPress 同様便利。 ちなみにデータベースの様子は以下の通り。

image

WordPressに比べると格段にテーブルの数が多い。

EC-CUBEのSEO

さて、一旦 EC-CUBE のページを公開できたら気になるのがSEO。 Google Speed Insights と 構造化チェックを行った結果を下記の通りご紹介します。

image

モバイル:63点

image

主に画像系の部分で減点され、SEO的には厳しいか、という状況。WordPress並に srcset で画像を読み込むとなると、ちょっと難しそう。

image

構造化については設定無いので、別途ベータベースから情報を読み込んで、専用フォーマットに落とし込む必要があり。

サクッと ECサイトを立ち上げ・管理できる一方で、SEOの面は改良の余地あり、といった状況になっています。

Webサイト担当者としてのスキルが身に付く

無料カウンセリングはこちら

まとめ

今回私は初めて EC-CUBE を利用しましたが、「こんなに便利なモノがあるんだな」と痛感しました。 多くの方が「ネットショップ = カラーミー やWix」、もしくは「ネットショップの立ち上げ費用は高い」と思われているかもしれませんが、今回ご紹介した EC-CUBE をはじめ、世の中にはたくさんのネットショップの CMS やプラットドームが公開されています。 WordPressがブログやコーポレート系のサイト制作を加速させるなら、 EC-CUBE はネットショップのビジネスを加速させてくれることでしょう。

目まぐるしく変化する Web をターゲットに挑戦するなら、スピードとモチベーションが大事です。 ひとりでの学習では維持が難しいですが、講師と二人三脚で頑張れるマンツーマンオンラインレッスンのCodeCampなら心配無用! あなたの理解度や学習ペースに合わせて、効率よく着実に知識と技術が身につきます!

まずは無料体験で、雰囲気やレッスン内容を確かめてみてください!!


関連記事

オシママサラ
この記事を書いた人
オシママサラ
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp