EC-CUBE2系からEC-CUBE3へのバージョンアップについて

EC-CUBE3 PHP

EC-CUBE Advent Calendar 2016 4日目の記事です。

4日目はEC-CUBE2系からEC-CUBE3へバージョンアップした時の内容を書きます。

EC-CUBE2系といっても2系には

  • 2.4
  • 2.11
  • 2.12
  • 2.13

というバージョンがあります。今回は2.4からバージョンアップした際に行った内容を書きます。

2.4から3系へバージョンアップする際に主な作業として、

  • DBの移行
  • プログラム移行
  • デザイン移行

等があります。

DBの移行

3系のDBは2系を基本にしていますが、3系に合わせて色々と修正されており、3系から存在しなくった機能については該当するテーブル自体が存在していません。2系と3系のテーブル比較はこちら記事を参考にしてください。

EC-CUBE2とEC-CUBE3のテーブル比較 - AmidaikeBlog

2.4から3系にデーブルを移行するためには、

  • マスタ類に関してはそのままデータ移行
  • マスタ系以外は商品、受注、会員データについては大きく異なるため、移行用プログラムなどを作成して対応
  • ポイントや商品レビュー機能など3系では標準で存在しない機能を利用していた場合、プラグインのテーブルに合わせて移行

を行います。また、当時PostgreSQLを採用していた場合、MySQLへ移行しても特に問題はありません。

移行ブログラムについては後日公開します。

デザイン移行

3系ではテンプレートがSmartyからTwigに変更されています。そのため、全ての画面をTwigに変更する作業が発生します。
DBのように移行プログラムなどを作成できれば作業の軽減ができますが、残念ながらそれができないため全て対応する必要があります。

デザインの移行にあたり、

  • 全ファイルをTwigに変更
  • 画像ファイルなどのリソースファイル移行
  • 標準機能にない場合、プラグインをインストール後に適切なレイアウトに修正

が必要になります。

プログラム移行

デフォルトのまま2.4を利用していた場合、問題なくそのまま3系の機能を使えますが独自にカスタマイズをしていたら変更が必要です。

EC-CUBE3ではフレームワークにSilexを採用しているため、それに則って本体をカスタマイズする必要があります。プラグインで対応出来るのであればプラグインでも対応しても問題ありません。

その他

2系採用当時に最新のミドルウェアを採用していても、その後バージョンアップをしていなければ合わせて最新バージョンの採用を行います。

例として3系はバージョンアップ時に採用したのは、

  • OS : CentOS7
  • DB : MySQL5.7
  • Webサーバ : Apache2.4
  • php7

と構築当時で一番最新のバージョンを採用しています。

以上簡単にではありますが、2系(2.4)から3系にバージョンアップするための主な作業を書きました。

もしバージョンアップをお考えの方や悩んでいる方は個別にご相談にのりますのでご連絡ください。

[2017/12/15 追記] データ移行ツールを公開しました。 amidaike.hatenablog.com

EC-CUBE3.0.11をXSERVERにインストールした時にhtmlを付けさせない方法

EC-CUBE3 PHP

これまでhtmlをURLに記事を付けさせない方法を書いてきました。

EC-CUBE3をさくらのレンタルサーバにインストールした時にhtmlを付けさせない方法 - AmidaikeBlog

前回 (EC-CUBE3.0.11がリリース、サーバ選定について - AmidaikeBlog) の記事でも書いた通り、EC-CUBE3.0.11からはhtmlをURLにつけさせない方法が提供されましたので、今回はXSERVERに対してhtmlを外す方法を説明します。
※すでにDBが作成されている前提です。

レンタルサーバでは公開ディレクトリは固定されている事が多く変更する事は出来ないのですが、XSERVERの公開ディレクトリは、

/home/hoge/hoge.xsrv.jp/public_html

とpublic_htmlが公開ディレクトリになっています。
※hogeの部分は適宜ご自身の環境と読み替えてください。

過去に説明した記事であれば、.htaccessを色々とごにょごにょする事で対応してきましたが、 今回は、

インストール時にURLからhtmlを無くす | EC-CUBE 開発ドキュメント

こちらを参考にhtmlを外す方法を説明していきます。

EC-CUBE3.0.11のアップロード

EC-CUBE3.0.11を

EC-CUBEダウンロード / ECサイト構築・リニューアルは「ECオープンプラットフォームEC-CUBE」

こちらからダウンロードし、 FTPで/home/hoge/hoge.xsrv.jp直下にアップロードします。

EC-CUBE3.0.11の解凍

ここからはsshを使った説明となりますが、XSERVERでsshを使う時は以下のサイトを参考にしてください。

https://www.xserver.ne.jp/manual/man_server_ssh.php

SSHでログイン後、解凍されたディレクトリまで移動しEC-CUBEを解凍します。

cd hoge.xsrv.jp
unzip eccube-3.0.11.zip

解凍したEC-CUBEをpublic_html配下にコピーします。

cd eccube-3.0.11
cp -pr . ../public_html/

これで公開ディレクトリにEC-CUBEが解凍されました。

ファイル配置場所の変更

公開ディレクトリまでカレントディレクトリを移動し、htmlディレクトリに存在する必要なファイルを公開ディレクトリ直下に移動させます。

cd
cd hoge.xsrv.jp/public_html
mv html/in* .
mv html/.htaccess .
mv html/robots.txt .

→今回はweb.configは不要なため移動させていません。

.htaccessの削除、.htaccess.sampleのリネーム

移動した.htaccessを削除し、public_html直下に存在している.htaccess.sampleに置き換えます。

rm .htaccess
mv .htaccess.sample .htaccess

index.php、install.phpの書き換え

  • index.phpの書き換え
vi index.php

を実行し、27行目のコメントアウトされている箇所を変更し、26行目をコメントアウトます。

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
require __DIR__.'/../autoload.php';
//require __DIR__.'/autoload.php';

↓

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
//require __DIR__.'/../autoload.php';
require __DIR__.'/autoload.php';
  • install.phpの書き換え
vi install.php

を実行し、31行目のコメントアウトされている箇所を変更し、30行目をコメントアウトします。

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
require __DIR__ . '/../autoload.php';
//require __DIR__ . '/autoload.php';

↓

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
//require __DIR__ . '/../autoload.php';
require __DIR__ . '/autoload.php';

autoload.phpの変更

  • autoload.phpの書き換え
vi autoload.php

を実行し、36行目のコメントアウトされている箇所を変更し、35行目をコメントアウトします。

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
define("RELATIVE_PUBLIC_DIR_PATH", '');
//define("RELATIVE_PUBLIC_DIR_PATH", '/html');

↓

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
//define("RELATIVE_PUBLIC_DIR_PATH", '');
define("RELATIVE_PUBLIC_DIR_PATH", '/html');

.htaccessの追加

公開ディレクトリをEC-CUBEルート直下にしたため、このままだと見せる必要のないディレクトリまで見えてしまいます。
そのため、以下の.htaccessファイルを各ディレクトリ直下に配置してくだsだい。

order allow,deny
deny from all

この内容を src、tests、vendorティレクトリ直下に配置します。(appディレクトリ直下には既に存在)

EC-CUBEのインストール

http://hoge.xsrv.jp とアクセスし、インストール作業が出来れば対応完了です。

以上がhtmlをURLから付けさせない方法となります。

他のレンタルサーバでもドキュメントルート部分(public_html)を読み替えて行えば同じ方法でURLからhtmlを付けなくする事は可能ですので是非お試しください。

インストール後もhtmlディレクトリを削除する事は可能ですが、非常にめんどくさいためインストール前に設定するのがオススメです。

この方法で上手く動かないという方はコメントください。

EC-CUBE3.0.11がリリース、サーバ選定について

EC-CUBE3 PHP

9月28日にEC-CUBE3.0.11がリリースされました。

www.ec-cube.net

EC-CUBE3.0.11で特徴的なものとしては、

  • PHP7 対応
  • パフォーマンス向上
  • URLからhtmlを取り除くことが可能

が大きな特徴となります。

このブログで度々URLからhtmlを削除する方法を書いてきましたが、 3.0.11から公式にhtmlの削除ができる方法が提供されるようになりました。 削除する方法はこちらのURLを参考にしてください。

インストール時にURLからhtmlを無くす | EC-CUBE 開発ドキュメント

3.0.11のパフォーマンス結果についてより詳しく知りたい方は、こちらのURLも参考にしてください。

パフォーマンス | EC-CUBE 開発ドキュメント

サーバ選定について

今回のバージョンよりパフォーマンス向上及びPHP7に対応したということで、
EC-CUBE3を今後利用したいという方のためにどのサーバを選べば良いのか書かせてもらいます。

既にEC-CUBE3を利用されている方はお気付きのように、3系は2系に比べて動作がもっさりしており表示速度も芳しくありませんでした。

EC-CUBE3.0.11ではあれこれ手を加えてパフォーマンス向上を行いましたが、 さらにストレスなく動作させる上で重要となるのがサーバとなります。

EC-CUBEを利用するには必ず

等と契約する必要がありますが、インフラに詳しい方がいる場合、

先ずはこの基準で検討してもらって問題ありません。

次に必要となるのがサーバスペックとなります。 EC-CUBE3のパフォーマンスを色々と調査した結果、一番効果が期待できるサーバ要件としては、

  1. SSDを使う
  2. PHP7を使う
  3. OPcacheを使う
  4. apcuを使う

これらが適用できる環境であればストレスなく動作させる事が可能です。

クラウドやVPSを利用できる方は是非この組み合わせでサーバを構築してください。SSDは必須です。

レンタルサーバをご利用される方についてはレンタルサーバ会社によってスペックが異なりますが、 今ならPHP7が使えるレンタルサーバを是非ご利用ください。

代表的なところとしては、以下のレンタルサーバがPHP7に対応しておりレンタルサーバ選びに迷っている方は参考にしてください。

www.xserver.ne.jp

heteml.jp

www.cpi.ad.jp

個人的には昔からさくらサーバを長年愛用していますので、早くさくらサーバもphp7に対応して欲しいところではありますが。

今回DBのパフォーマンスについて言及しませんでしたが、機会があればまた書きたいと思います。

データベースの型を変更したEC-CUBE3.0.10のリポジトリの作成

EC-CUBE3 PHP

本日4月25日にec-cube3.0.10がリリースされました。

www.ec-cube.net

EC-CUBE3.0.10の修正点などはリリースノートを参照してもらうこととして、 現在、EC-CUBE3ではデータベースの型が全てtext型で定義されています。

このままだとmysqlの場合、longtext型になったり、Oracleでは利用できなかったりと非常に不便なためデータベースの型を変更したEC-CUBEを下記リポジトリに用意してみました。

https://github.com/k-yamamura/ec-cube3-modify-type-database

こちらの内容はtextをstringに変更したり、notnull条件の見直しなどしています。

インストールまでは確認していますが動作確認まではしていませんのでご利用の際はご注意ください。

EC-CUBE3に対してGoogleAnalyticsタグ、Googleタグマネージャ、Yahooタグマネージャーの設置方法

EC-CUBE3 PHP

EC-CUBE3でサイト運用されている方が徐々に増えてきているのですが、ECサイト如何に関わらずサイト運営に必要になってくるのかGoogleタグマネージャやYahooタグマネージャー等のサイト解析を行うためのツールです。

EC-CUBE3でこのタグを簡単に埋め込む方法を説明します。

GoogleAnalyticsタグの設置方法

GoogleAnalyticsタグは</head>の上に設置するのですが、こちらはブロック管理を使って簡単に埋め込む事が可能です。

先ず、管理画面よりブロック管理機能を使ってサイト用のトラッキングコードを入力してブロックを作成します。

管理画面から 、 [コンテンツ管理]→[ブロック管理]→[新規入力]を選択し、ブロック名とファイル名には分かるように
ブロック名 : GoogleAnalytics(任意)
ファイル名 : analytics(任意)

と入力し、ブロックデータにはサイト用のトラッキングコードを入力してブロックを作成します。

<!-- Google Analytics -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-xxxxxxx-x', 'auto');
  ga('send', 'pageview');

</script>

その後、作成したブロックをページ管理機能を使って配置します。

配置方法は、 [ページ管理]→[TOPページのレイアウト編集]を選択し、
未使用ブロック欄に先ほど作成したブロックが含まれているためそれをheadに配置します。 #headerではありませんのご注意ください。

全ページに適用させるなら「全ページ」にチェックし登録するとGoogleAnalyticsタグが設置されます。

Googleタグマネージャの設置方法

Googleタグマネージャは<body>タグ直後に設置します。
GoogleAnalyticsタグと同じようにブロック管理とページ管理を使って設置できればいいのですが、<body>タグ直後に設置するための方法が用意されていませんので、直接タグを埋め込む必要があります。

default_frame.twigに対して<body>直下にGoogleタグマネージャ用タグを設置します。

{# ▲Head COLUMN #}

</head>
<body id="page_{{ app.request.get('_route') }}" class="{{ body_class|default('other_page') }}">
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager --> 
<div id="wrapper">
    <header id="header">

というように直接タグを埋め込んで保存すればGoogleタグマネージャの設置が完了です。

Yahooタグマネージャーの設置方法

Yahooタグマネージャーは</body>タグ直前に設置します。
こちらもGoogleAnalyticsタグと同じようにブロック管理とページ管理を使って設置できればいいのですが、</body>タグ直前に設置するための方法が用意されていませんので、直接タグを埋め込む必要があります。

こちらもdefault_frame.twigに対して</body>直前にYahooタグマネージャー用タグを設置します。

</script>
{% block javascript %}{% endblock %}
<!-- Yahoo Tag Manager -->
<script type="text/javascript">
  (function () {
  var tagjs = document.createElement("script");
  var s = document.getElementsByTagName("script")[0];
  tagjs.async = true;
  tagjs.src = "//s.yjtag.jp/tag.js#site=xxxxxxx";
  s.parentNode.insertBefore(tagjs, s);
  }());
</script>
<noscript>
  <iframe src="//b.yjtag.jp/iframe?c=xxxxxxx" width="1" height="1" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</noscript>
<!-- Yahoo Tag Manager -->
</body>
</html>

というように直接タグを埋め込んで保存すればYahooタグマネージャーの設置が完了です。

Googleタグマネージャ、Yahooタグマネージャーについてはdefault_frame.twigに対してタグを埋め込む方法を説明しましたが、
ECCUBEROOT/src/Eccube/Resource/template/default/default_frame.twig
に対して直接変更をする方法はEC-CUBE3では推奨していません。

ではどのように編集するかというと、default_frame.twigファイルを ECCUBEROOT/app/template/default
直下にコピーし、そのファイルに対して修正を加えます。

この仕組みは説明すると長くなりますのでこういうものだと覚えてください。

ブロック管理やdefault_frame.twigの仕組みさえ理解できれば簡単にタグが設置する事が可能になりますし、 facebook Page pluginやTwitter、Instagramなども簡単に設置可能なので、ぜひお試しください。

EC-CUBE3でテンプレートとして採用しているTwigのお話

EC-CUBE3 PHP

今年に入ってから毎週水曜日にEC-CUBE3の勉強会を開催しているのですが、 EC-CUBE3の話であったり、Symfony2やSilexの話をしたりとまとまりのないことを話ししています。

先日デザイナー向け勉強会を開催したのですがTwigの内容をまとめたところ割と簡潔にまとまった資料ができましたので公開します。

こちらの資料はEC-CUBE3以外でもTwigを少し触れたことがあるという方に導入編として読んでもらえれば理解の手助けになると思います。

次回はForm周りなどの解説をする予定です。

hetemlにEC-CUBE3をインストールする方法

EC-CUBE3 PHP

前回の記事から随分と間が空いてしまいました。

過去にさくらのレンタルサーバやさくらのクラウドに対してEC-CUBE3のインストール方法を書きました。

今回はhetemlというレンタルサーバに対してのインストール記事を書きます。

heteml.jp

hetemlには標準でEC-CUBE3をインストールしてくれる機能が用意されていますが、 最新のEC-CUBE3を使いたいという方を対象としています。

また、URL形式は http://ドメイン名/html ではなく http://ドメイン名 で接続できるようにします。

事前準備としてhetemlにsshで接続できるように設定をしておいてください。

SSH のご利用方法 - レンタルサーバー「heteml（ヘテムル）」

hetemlの公開ディレクトリですが、

/home/sites/heteml/users/[ユーザディレクトリ名]/web

に対して設定されています。

今回は http://ドメイン名 でアクセスできるようにするため、その準備を行います。

まず、EC-CUBE3をユーザディレクトリ直下(ログインした時のディレクトリ)において解凍してください。 解凍するとユーザディレクトリはこんな感じになります。 今回はパッケージ版ではなく、Gitからcloneしたものを置いていますので人によっては若干異なります。

.
|-- COPYING
|-- LICENSE.txt
|-- README.md
|-- app
|-- apps
|-- appveyor.yml
|-- autoload.php
|-- cli-config.php
|-- composer.json
|-- composer.lock
|-- composer.phar
|-- eccube_install.sh
|-- html
|-- index.html
|-- phpunit.xml.dist
|-- src
|-- tests
|-- vendor
`-- web

この中にある

apps
index.html
web

はhetemlが標準で用意しているディレクトリとファイルになります。

ではEC-CUBE3をインストールしてみましょう。 ただ、EC-CUBE3をインストールする際に、 標準のままだとインストールが行えないため以下の変更を行います。

  • htmlディレクトリをwebにリネーム
mv web webold
mv html web

webをリネームして、htmlディレクトリをwebに変更します。

  • path.yml.distの変更 src/Eccube/Resource/config/path.yml.dist を開きhtmlと記載している箇所をwebに変更
# realdir::image
image_save_realdir: ${ROOT_DIR}/web/upload/save_image
image_temp_realdir: ${ROOT_DIR}/web/upload/temp_image

# realdir::user_data
user_data_realdir: ${ROOT_DIR}/web/user_data

# realdir::block
block_default_realdir: ${ROOT_DIR}/src/Eccube/Resource/template/default/Block
block_realdir: ${ROOT_DIR}/app/template/${TEMPLATE_CODE}/Block

# realdir::template
template_default_realdir: ${ROOT_DIR}/src/Eccube/Resource/template/default
template_default_html_realdir: ${ROOT_DIR}/web/template/default
template_admin_realdir: ${ROOT_DIR}/src/Eccube/Resource/template/admin
template_admin_html_realdir: ${ROOT_DIR}/web/template/admin
template_realdir: ${ROOT_DIR}/app/template/${TEMPLATE_CODE}
template_html_realdir: ${ROOT_DIR}/web/template/${TEMPLATE_CODE}
template_temp_realdir: ${ROOT_DIR}/app/cache/eccube/template

webに変更した結果となります。

  • InstallController.phpの変更 src/Eccube/Controller/Install/InstallController.php を開き615行目の/htmlを/webに変更
'/html',
から
'/web',
に変更

こちらの変更を先に行った後、

http://ドメイン名/install.php

よりEC-CUBE3のインストールを行ってください。

これらを行うことで http://ドメイン名 でアクセスできるようになります。

出来ないという方や分からないという方はコメントにでも書いてください。