ERDEが2007年から運営しているサプリメントのPowerNavi オンラインショップ。EC-CUBE2.3.4のままずっとバージョンアップしないまま10年経ってしまった。とっくにサポートは終了し,セキュリティホールもそのまま。危ないとは知りつつも非常に面倒なため,放置していたが,正月休みを利用して一気に最新のEC-CUBE2.13.5にあげた。
EC-CUBEは株式会社ロックオンが開発し,無償で公開しているオープンソースのECサイト構築アプリケーション。
本体はPHPで書かれており,ユーザが自由にカスタマイズすることができる。ところが,そのカスタマイズがバージョンアップの障壁にもなってしまう。PowerNaviのサイトもあちこち手を入れており,特にデータベースのテーブルをいじっているので新バージョンが出たからといって,すぐインストールすることができない。
さらにメジャーバージョンがあがるたびにデータベースの構造が変わってしまうという無展望な設計のため,カスタマイズしていないオリジナル版であってもバージョンアップは鬼門なのだ。
ECサイトにとって顧客データ,氏名・住所・電話番号・パスワード・購入履歴を引き継げないバージョンアップはあり得ない。数年前,公開されているデータ移行ツールを使ってバージョンアップを試みたが,途中で登録されている顧客数が減ってしまうというとんでもない事態が発生し,頓挫した。
去年は年末にかけて別のクライアントの案件でEC-CUBE2.13.5をずっといじっていて,中身をかなり把握した自信も着いてきた。ちょうど年末から腰痛になってクライミングにも行けなかったので,三が日というか1月2日から4日まで,ほぼ自宅に籠もってバージョンアップに挑戦した。
ECCUBE-2.13.5をインストールする
まずはeccube-2.13.5用のデータベースを作っておく。
そしてpowernavi.erde.co.jpにEC-CUBE2.13.5をインストールする。
このソフト,通常はhtmlフォルダの中身をドキュメントルートに置くようになっている。powernaviだと/var/www/powernavi/だ。ところがここには現在のサイトのファイルが置いてあるので上書きするわけにはいかない。そこで/var/www/powernavi/onlineshop/というディレクトリを作り,そこにhtml以下のファイルを展開した。
dataファイルの中身はブラウザでアクセスできない場所に置くようにということなので,/var/data/に展開する。
実際には/var/www/powernavi/でtarボールを展開し,必要なフォルダを移動する。
tar zxvf /home/masaru/eccube-2.13.5.tar.gz
mkdir onlineshop
mv powernavi-2.13.5/html/ onlineshop/
パーミッションを777にする
chmod -R 777 onlineshop/
mv powernavi-2.13.5/data /var/
onlineshop/define.phpのdataディレクトリ指定を修正する。
emacs onlineshop/define.php
3行目を
define('HTML2DATA_DIR','../../../data/');
にして保存。
Webブラウザで
https://powernavi.erde.co.jp/onlineshop/
にアクセスするとインストール画面になるので,店の名前,メールアドレス,ログインID,パスワード,管理ディレクトリ,データベースなどを指定する。
インストールが完了したところで管理者画面にログインできた。セキュリティ上問題があるのでinstall/index.phpを削除しろと言ってくる。実は後で再インストールが必要になるので,削除ではなくファイル名を変えて起動できないようにしておく。
mv onlineshop/install/index.php onlineshop/install/index.___
BOOTSTRAP3を導入
EC-CUBE2.13.5はPC画面,スマートフォン画面,携帯画面とそれぞれ別のテンプレートを適用するようになっており,レスポンシブデザインではない。そこまで作り込む気はないのでレスポンシブデザインエンジンのbootstrap3を導入する。Atsushi Nagakiさんが作ったEC-CUBE2.13.5用パッケージeccube-on-bootstrap3をGitHubからダウンロードする。
また,デフォルトのEC-CUBE2.13.5は画面幅を狭くすると自動的にスマホ画面,携帯画面に切り替えてしまうので,それを止めておく。
/var/data/class_extend/SC_Display_Ex.phpを開いて
と修正する。
管理画面の[デザイン管理][PC][テンプレート追加]で
テンプレートコード:eccubeonbootstrap3
テンプレート名:eccubeonbootstarp3
[テンプレート設定]でeccubeonbootstrap3を選択し登録する。
と画面の表示が変わった。ブラウザの幅を狭くするとレイアウトが変わり,スマホ対応のレスポンシブデザインになっていることが分かる。
商品データを登録したり,特定商取引法に基づく表記やプライバシーポリシーを書き込んだり,ロゴやトップ画面をいじるのはいつものことなので省略。