EC-CUBEのカスタマイズ、ネットショップ制作メモ

主にEC-CUBEを利用したネットショップの制作、カスタマイズや独自機能の開発について

EC-CUBE 2.11系で変わった事 -商品一覧の取得方法-

ショッピングサイト WEB PHP カスタマイズ EC-CUBE オープンソース

EC-CUBEも2.11.1がリリースされましたね。
遅ればせながら2.4系から2.11系*1で変わったところをご紹介していきたいと思います。
今回は遅いクソだと言われ続けていた商品一覧の表示処理の部分についてです。

2.4系からEC-CUBEをいじってる方はまずココで「アレ？」ってなるのではないでしょうか？

1回の表示でSQLを2回発行する様になった

EC-CUBEの商品情報は主に、メインの商品情報と、「規格」と呼ばれるサイズや色違いの商品情報を取得している商品から構成されています。
そこにカテゴリ情報なんかが結合されて商品一覧を表示しているのですが、MySQLではサブクエリからのSELECTでインデックスが利用されないなど、複数のテーブルを複雑に結合している為にパフォーマンスはかなり犠牲にされていました。
特にMySQLで動かした場合は規格を増やすと最悪サイトが止まるレベルの重さでした。

コアの開発者の大河内さんはこの部分にも非常に心を痛めており、「次のバージョンでは絶対に改善させる！」と考えていた様です。

2.11.0で新しく追加されたSC_Product

EC-CUBEの2.11では2.4系には無かったSC_Productというクラスが新たに追加されました。
MVCで言うと「Productモデル」の様な物で、商品の表示関連の処理はここに書かれています。

2.11系ではデータベースでviewを使わない様に変更されています。
なので商品一覧を取得する際は、まず検索条件とソート順で表示する分だけの商品IDを取得し、その後でその商品IDから一覧で表示する情報を取得する様になっています。*2

僕も最初見た時は
「何で2回に分けてるんだ？」
と思いましたが、理由を聞いたところこの方法がPostgreSQL、MySQL共に一番早かった様です。

なので、もし商品一覧で表示する項目や並び順をカスタマイズされたいのであれば、一度このクラスの動きを追っておく事をオススメします。

*1:何で2.4から2.11？2.5は？と思うかも知れません、当初は2.5だったんですが、「いっぱい変わったし2011年だし！」という関西ノリで2.11になりました。

*2:他にもページング用の全体件数を取得したりもしています。

EC-CUBE2.4.4以前のバージョンに存在するクロスサイトリクエストフォージェリの脆弱性への対応

ショッピングサイト セキュリティ バグ EC-CUBE カスタマイズ EC オープンソース Tips

2011年5月10日、JVNからEC-CUBEの2.4.4以前のバージョンに存在するCSRFの脆弱性に関する情報が公開されました
JVN#37878530 EC-CUBE におけるクロスサイトリクエストフォージェリの脆弱性
*1

CSRF*2とは、簡単に言うと、どんなサイトやHTMLメールからでも、ユーザの意図しない情報をターゲットのサイトに送信させて、望まない操作をさせる事が出来るという物です。*3
特にサイト管理者の方はEC-CUBEの管理画面にログインしたままの状態で、よく解らないリンクやボタンをクリックしない様にしましょう。*4

2.11.0以降のバージョンには存在しませんので、2.11.0以降を利用されている方は大丈夫です。*5

2.4系から2.11系へのデータ移行ツールもリリースされていますが、2.11系は2.4系とは大きく変わり、簡単にはバージョンアップ出来ないのも事実です。
特に多数のカスタマイズを加えていると、より作業量は増えてしまいます。
とりあえず2.4系をそのまま使って、この脆弱性に対応する為のやり方を今回はご紹介します。

*1:クリックしなくても開いただけで攻撃も可能です

*2:クロスサイトリクエストフォージェリ

*3:具体的にどんな事が出来るかは、ここで書く事は控えさせて頂きます。

*4:管理画面にログインしている時は、ブラウザで他のウィンドウやタブを開かない様にして、コマメにログアウトすれば平気です。

*5:2.11の開発中にこの辺の話や作業をしました。

続きを読む

concrete5 の簡単なテーマの作り方

個人的メモ テーマ WEB デザイン PHP オープンソース Tips CMS concrete5

僕が日本語化に参加している、直感的CMS、concrete5の簡単なテーマの作り方をFacebookに書いたので、こっちにも書いておきます。

  1. 適当にHTML+CSSでページを作る。
  2. HTMLファイルのファイル名をdefault.phpに変える。
  3. DTD宣言の前に魔法の呪文１を追記する。

    <?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>


  4. の最後に魔法の呪文2を追記する。

    <?php Loader::element('header_required'); ?>


  5. ブロックを置きたいところに魔法の呪文3を追記する。

    <?php
    $a = new Area('[area name]');//好きなエリア名を入れる、大体Side barとMain
    $a->display($c);
?>


  6. 直前に魔法の呪文4を追記する。

    <?php Loader::element('footer_required'); ?>


  7. CSSの名前をmain.cssに変える

  8. typography.cssというファイルを作る

超省略して書くと、こんな感じです。
画像とかを使いたい場合は、

<?php echo $this->getThemePath() ?>

で、インストールしたテーマのパスが取得出来るので、

<img src="<?php echo $this->getThemePath() ?>/images/sample.jpg" alt="サンプル" />

とか書けば表示されます。

CSSに書く時は、

div.sample{background:url(images/sample.jpg);}

で、[インストールしたテーマのディレクトリ]/images/sample.jpgを参照してくれます。

尚、サンプルのテーマファイルは下記からダウンロード出来ます。
http://www.xross-cube.com/index.php/tools/required/files/download?fID=295

イイ感じのテーマが出来たら、是非公式サイトのフォーラムで教えてください。

EC-CUBEのゴールドパートナーになりました！

ショッピングサイト WEB EC オープンソース EC-CUBE OSS


4月1日にEC-CUBEの開発元の株式会社ロックオンより、今回更新されたEC-CUBE公式インテグレートパートナーランクが発表され、私たちXROSS CUBEは、フリーランスとしては唯一、ゴールドランクのパートナーに認定されました。
http://www.ec-cube.net/integrate/partner/partner.php?partner_id=305

このEC-CUEBのインテグレートパートナーは上から、プラチナ、ゴールド、シルバー、ブロンズ、ノーマル、プレ、と5段階あり、ゴールドランクは上位7%になります。
ランクは、構築実績、コミュニティでの活動、EC-CUBE本体のコードへのコミット等で決定されます。

以前は、各ランクの認定基準があいまいだったのですが、今回から各活動を数値化し、明確な基準に基づいたランク制度になりました。このため、今までよりもより正確にその制作パートナーの力量等が解る様になっています。（詳細はこちら）
こういった明確な基準になってランクが上がった事はとても嬉しい事なのですが、その反面、気を抜いているとすぐランクが下がってしまいます。
クロスキューブはゴールドランクになれたのですが、ギリギリなのでこれからも頑張っていきたいと思います。

東北地方太平洋沖地震用のEC-CUBEのポイント寄付ブロックを作成しました。

EC-CUBE WEB カスタマイズ オープンソース 東北地方太平洋沖地震

2011年3月11日、東北地方でM8.9、最大震度7の大地震が発生しました。

私たちは何か出来る事が無いかを考え、EC-CUBEのコアコミッターの大河内氏と共に、EC-CUBEで構築されたサイトで、会員が保有するポイントを寄付出来るブロックを作成しました。
EC-CUBEでショップを運営されているショップオーナーの皆様、これ使って是非ご協力をお願いします。

ショップオーナー様で、会員のポイント分の金額を寄付しても良いという方は無償にてご利用頂けます。

2011-3-12 18:37 追記：
EC-CUBEコアコミッターの大河内様が管理機能を追加してくれました。ご利用される場合は、上記の「寄付ポイント管理アドオン」をダウンロードしてください。

使用方法

    1. /html/frontparts/bloc/ に解凍したファイル（send_point.php）をアップロードします。
    2. アップロード後、[ショップのアドレス]/frontparts/bloc/send_point.php にアクセスするとブロックがインストールされます。
    3. EC-CUBEの管理画面の「デザイン管理」から設置したいページに追加されたブロックを追加してください。

会員が寄付申請したポイントは、/data/downloads/donation.csv に"日時","顧客ID"、"寄付ポイント"で追加されていきますので、ショップ管理者様の方でエクセル等で集計して赤十字等の機関へポイント分の金額を寄付願います。

尚、管理画面で寄付されたポイントを確認出来るアドオンは、追って大河内氏より公開される予定です。

免責事項

このプログラムを利用した事により発生した、いかなる損害、被害についても当方は責任を負いません。ご利用される方の自己責任でご利用願います。


震度7エリアには祖母が住んでおり、福島原発のすぐそばの相馬市には義理の祖母と叔母が住んでいます。
こんな事しか思いつきませんでしたが、何もしないよりかはマシかと思ってます。皆様、ご協力をお願いします。

EC-CUBE クラウドサーバを試してみた。速い！

オープンソース EC-CUBE チューニング WEB MySQL PHP EC

前回のブログから気づけば1ヶ月以上も経ってしまいました。
なかなか継続して書くのは難しいですね...

EC-CUBEクラウドサーバ

最近の案件で、サーバ選定からするケースがあったので、ちょうどリリースされたばかりのEC-CUBEクラウドサーバを試してみました。
EC-CUBE公式のクラウド環境という事で、その実力が気になっていました。特に、EC-CUBEの弱点とされるパフォーマンスが気になって夜も眠れませんでした。
EC-CUBEクラウドサーバはファーストサーバさんが実際の環境を構築して運営されています。
サーバのOSはLinuxだそうで、聞いた話ではカーネルレベルでEC-CUEB用にカスタマイズしたそうです。いったいどんな事をしたんでしょうね。

ロックオンさんからファーストサーバさんのご担当者*1をご紹介頂き、検証用の環境を準備して頂けないか聞いてみました。
「ちょっとまだリリース前なので... 相談してみます」
との事だったのですが、もうその日の内に検証用の環境を準備して頂きました！
正直、いままでファーストサーバさんのサーバ（共有）は制約が多く、使いにくくてあまり好きではありませんでした。
しかしこの素早いご対応！ちょっと好きになりました。
準備して頂いたのは、一番安いプランの「ファースト」（月額1,785円）です。

管理画面は普通のファーストサーバ

サーバの管理画面は他のプランと同じ見慣れた管理画面です。
f:id:xross-cube:20110224043705p:image
なので、「サーバの事はよくわからない」という方でも簡単に設定出来ます。
EC-CUBEがインストールされた状態で環境が準備されるので、インストールでつまづく事もありません。

早速検証。1,000点商品を登録してみました。

f:id:xross-cube:20110224043706p:image
例の商品情報生成スクリプトでサクッと生成しました。

  • 商品点数1,000点
  • カテゴリ
    • 大カテゴリ10個
    • 中カテゴリ4個
    • 小カテゴリ3個
  • 規格 1も2も3個づつ
    • 規格分類は100個

Apache benchをかけてみます。

とりあえず軽いのから
表示画面 全商品一覧
コネクト数 10
リクエスト数 50

*1:舟木様、非常に素早いご対応ありがとうございました。

続きを読む

concrete5が重くなってきたら古いバージョンを消そう。

ウェブサイト チューニング WEB PHP MySQL オープンソース Tips CMS concrete5 個人的メモ

concrete5のちょっとしたTips。
concrete5はページを更新する度にその履歴が「バージョン」として残っていきます。
間違えちゃったり、以前の状況を確認したい時なんかに便利なのですが、この履歴データのせいで、しばらく運用しているとデータベースが肥大化していきます。
特にCollectionVersionBlocksとかすごいレコード数になったりします。


なので、
「あれ？最近なんか重くなってきたなー」
と思ったら古いバージョンを消しましょう。データベースからもレコードが消えてデータベースが軽くなります。
消し方は、

  1. ページを編集モードにして
  2. 「履歴」をクリック
    「古いバージョン」をクリックすると最新のバージョン以外が選択されるので便利です。




  3. 「削除」をクリック


  4. 編集モードを終了。

これで古い履歴が全部消えます。ついでにデータベースを最適化しておいた方が良いでしょう。

！注意！戻せませんので必ずバックアップを取ってから作業しましょう。

管理画面からデータベースのバックアップが取れます。必ずバックアップを取ってから作業しましょう。

大量のページがあるサイトではかなり面倒

このやり方では1ページづつしか古いバージョンを消せません。
なので大量にページがあると厄介です。
自分でも欲しいので、近い内に全ページの古いバージョンを消すアドオンでも作ろうと思ってます。

もし、「待てないー！」という方はご自分でチャレンジされても良いかもしれません。
/concrete/models/collection_version.phpのCollectionVersion::delete()に実際の処理が書いてあります。

EC-CUBEをチューニング - MySQL：MySQLでもviewを使って8倍速にするカスタマイズ!!

ショッピングサイト チューニング MySQL カスタマイズ EC オープンソース EC-CUBE Tips

こちらは2.4系の記事になります。3系でのチューニングの記事はコチラ

さて、だいぶ間が開いてしまいましたが、前回の続きで、EC-CUBEをMySQLで動かす際のチューニングの続きです。
僕がやった施策の中ではこれが劇的に効果がありました。
今回は、MySQLでもviewを使うという物です。

データベースのviewとは、簡単い言うとSELECT文の結果をテーブルの様に扱える機能という事です。

EC-CUBEは、PostgreSQLで動かす場合は、商品情報のカテゴリや規格の情報をまとめた物をviewにして、商品一覧画面や商品詳細画面等で利用しています。
ところが、EC-CUBEをMySQLで動かす場合、MySQLのバージョンが4.1でも利用出来る様に作られているため、viewの部分をサブクエリにして動かしています。
この、ネストしたサブクエリからSELECTする場合、インデックスが使えないので、こんなに遅くなっていて、インデックス張っても意味が無い訳です。

バージョン5.0からはMySQLでもviewが使える様になっています。最近のレンタルサーバであれば5.0以上を導入しているところも多いので、バージョン5.0以上なら導入可能です。

8.25倍速くなった！

結果から言うと、/products/list.php*1 が8.25倍速くなりました！
実はちょこちょこ問題もあるので、微修正は必要ですが、そんな事も苦にならないくらいの激速っぷりです！！
体感的にも劇的な改善です。
一応ちょっと負荷を上げた状態でのabテストの結果も貼っておきます。

Document Path:          /eccube244/html/products/list.php

Document Length:        90587 bytes
Concurrency Level:      5

Time taken for tests:   13.157 seconds

Complete requests:      10

Failed requests:        0

Write errors:           0

Total transferred:      909540 bytes

HTML transferred:       905870 bytes

Requests per second:    0.76 [#/sec] (mean)

Time per request:       6578.478 [ms] (mean)

Time per request:       1315.696 [ms] (mean, across all concurrent requests)

Transfer rate:          67.51 [Kbytes/sec] received
Connection Times (ms)

              min  mean[+/-sd] median   max

Connect:        0    1   0.9      2       2

Processing:  1728 5980 3188.8   5578   13155

Waiting:     1323 4816 3472.3   4640   13145

Total:       1728 5981 3189.5   5580   13157

WARNING: The median and mean for the initial connection time are not within a normal deviation

        These results are probably not that reliable.
Percentage of the requests served within a certain time (ms)

  50%   5580

  66%   7296

  75%   7300

  80%   7530

  90%  13157

  95%  13157

  98%  13157

  99%  13157

 100%  13157 (longest request)


で、実際にどうするかですが、ここからはクロスキューブからクリスマスプレゼントです。

*1:全件一覧表示

続きを読む

EC-CUBEをチューニング - MySQL：テーブル設計 - カラムの型

ショッピングサイト チューニング MySQL カスタマイズ オープンソース EC-CUBE CMS

EC-CUBEの新バージョン、2.5.0の開発が開発合宿でかなり進んだ様です。僕も参加したかったのですが、諸事情により参加出来ませんでした。*1
EC-CUBE2.5.0では、MySQLへの対応がかなり改善されていて、パフォーマンスもかなり向上しているとの事です。
いやー、楽しみですね。


しかし、現在EC-CUBEでECサイトを運営されている方は、MySQLへの対応が不完全なバージョンを利用しており、2.5.0がリリースされるまでは2.4.4以下のバージョンを使い続けなければいけません。
また、仮に2.5.0がリリースされたとしても、バージョンアップ作業は大変でしょうし、すぐバージョンアップは出来ないと思います。*2
そこで、このEC-CUBEをチューニング - MySQL編もまだ需要があると思いますので、続きを書いてみます。
前回のEC-CUBEをチューニング - MySQL：準備編で、EC-CUBEに大量の商品データを登録するところまでやりました。
今回は、テーブルの構造を出来るだけ変えずにパフォーマンスをアップさせる方法です。
レンタルサーバ等ではMySQLのパラメータの設定を変更出来ない環境も多いと思うので、テーブルやカラムの設定変更だけで出来るだけパフォーマンスを上げます。

前回準備した環境では遅過ぎて作業に支障が出るので、VM上に再度環境を構築しました。
PHP 5.2.13
MySQL 5.1.39

大カテゴリ
5
中カテゴリ
4
小カテゴリ
4
規格1
5
規格2
5
商品数
1000
商品数を減らしてカテゴリ、規格を増やしてみました。
標準の状態では全商品一覧の表示に13960msもかかってしまいました。遅いですねー

カラムの型を変更する。

EC-CUBEでは、テキストデータが入るカラムがtext型になっています。*3
しかしMySQLではtext型が設定されているカラムはインデックスに指定出来ませんし、min()等の関数で処理する際もかなり遅くなってしまいます。
なので、

  • dtb_productsのname、main_list_comment
  • dtb_produts_classのproduct_code*4

をchar型に変えてしまいます。
結果は10843msになりました。ちょっと速くなりましたね。


「おいおい、チューニングで大切なインデックスは？」
とツッコミたくなる方もいらっしゃると思いますが、EC-CUBEをMySQLで動かす場合、PostgreSQLで動かす時のviewをサブクエリをガンガン ネストして表現しているので、あんまり意味がありません。
むしろ遅くなる事の方が多い様です。


次回は、もう少し踏込んで、テーブルを変えずにもっと劇的に変わる方法をご紹介します。

*1:残念！

*2:カスタマイズしていると余計に大変だと思います。

*3:多分PostgreSQL使う時の名残です

*4:ここ重要

Google ショッピング beta 登場！ EC-CUBEの商品情報フィードをGoogleショッピング用に吐いてみる。

ショッピングサイト WEB プロモーション カスタマイズ オープンソース EC-CUBE google SEO

10月28日、GoogleよりGoogle ショッピングの日本語betaがリリースされました。

googleショッピング
Googleショッピングとは、要はGoogleで色んなECの商品情報が検索出来るという新しいgoogleのサービスです。*1海外では少し前から既にスタートしていました。
今現在では直接的な売上げに対する効果はまだ未知数ですが、SEOや、今後の事を考えると取り入れた方が良さそうです。

Googleショッピングに自分のショップの商品を登録する方法は、商品情報のテキストファイルか、xml(rss)をgoogleに手動でアップデートするか、WEB上に公開してgoogleさんに取りにきてもらいます。*2
googleさんに取りに来てもらう場合、自動で取りに来るスケジュールを設定できるので、らくちんになります。

そこで、EC-CUBEの商品情報をrssで吐いて登録してみました。

実はEC-CUBEには商品情報のRSS機能が元々ある。

実は、EC-CUBEには元々商品情報のRSSを出力する機能があります。
EC-CUBEのショップをお持ちの方は
http://[ショップのURL]/rss/product.php
にアクセスしてみてください。
何か変な形式のxmlが取得できます。
クロスキューブのEC-CUBEデモサイトの場合だと
http://eccube-customize.xross-cube.com/rss/product.php
になります。
これは、元々開発元の方で、実際に公開されているEC-CUBEを使ったショップで、どれくらいの商品が公開されているかを集計する為に作られた様です。
ただ、サイト運営者にとってはまったく用途の無い機能です。
今回、この機能がやっと日の目を見る時が来ました。
基本的な機能はこの商品情報xml出力機能にあるので、あとはちょっと表示形式をgoogleさんに合わせれば、Googleショッピング用のrss出力が可能になります。

Googleショッピングの商品情報フィードの形式

googleショッピングのフィード形式はRSS 2.0およびAtom 1.0で、以下の様な感じです。

<?xml version="1.0"?>
<rss version="2.0" 
xmlns:g="http://base.google.com/ns/1.0">
<channel>
<title>The name of your data feed</title>
<link>http://www.example.com</link>
<description>コンテンツの説明</description>
<item>
<title>赤いウールのセーター</title>
<link> http://www.example.com/item1-info-page.html</link>
<description>寒い冬の夜におすすめの、柔らかく着心地の良い、暖かいセーターです。</description>
<g:image_link>http://www.example.com/image1.jpg</g:image_link> <g:price>2500</g:price> <g:condition>新品</g:condition> <g:id>1a</g:id>
</item>
</channel>
</rss>

<?xml version="1.0"?>
<rss version="2.0" 
xmlns:g="http://base.google.com/ns/1.0">

は、おまじないなので、必ず書かないといけません。

<channel>
...
</channel>

の部分がメインの情報が格納されていて、

<item>
...
</item>

の部分が個々のアイテム情報になります。
<channel>直下の<title><link><description>は、それぞれショップに関する情報です。
ショップ名、SITE_URL、ショップ説明といったところでしょうか。

<item>の商品情報での必須項目は、

  • id [id]
  • 商品名 [title]
  • 商品リンク [link]
  • 価格 [price]
  • 商品説明 [description]
  • 状態 [condition]

になります。
idはEC-CUBEのproduct_idです。
商品リンクはフルパスで、商品詳細ページへのURLとなります。
通常のEC-CUBEであれば、
http://[ショップのURL]/products/detail.php?product_id=[product_id]
になると思います。
価格はその商品の税込価格です。
商品説明は1000文字まで送信可能との事なので、EC-CUBEの詳細メインコメントにしておいた方が良さそうです。
状態は新品か、中古かのフラグです。
新品なら「new」、中古なら「used」とします。


必須項目以外にも多くの商品情報を追加する事が出来ます。
可能であれば出来る限りの情報を掲載した方が良いと思います。
追加で送信出来る情報は、

  • GTIN [gtin]
  • ブランド [brand]
  • 製品番号 [mpn]
  • 商品画像リンク [image_link]
  • 商品カテゴリ [product_type]
  • 在庫状況 [availability]
  • 在庫数 [quantity]
  • 送料 [shipping]
  • 税金 [tax]
  • 仕様 [feature]
  • オンライン限定 [online_only]
  • 製造者 [manufacturer]
  • 有効期限 [expiration_date]
  • 搬送重量 [shipping_weight]
  • ジャンル [genre]
  • 目玉商品 [featured_product]
  • 色 [color]
  • サイズ [size]
  • 製造年 [year]
  • 著者 [author]
  • 版 [edition]

があります。
どういう商品かによってどの項目を使うかは変わってきますが、GTIN（JAN）、商品画像リンク、商品カテゴリ、在庫状況は出力した方が良さそうです。
特に商品カテゴリに関しては、EC-CUBE同様に複数カテゴリの指定が出来るので、出力した方がよさそうです。*3

実際の出力結果については
http://eccube-customize.xross-cube.com/rss/product.php
を見てみて下さい。

今現在では、Googleショッピングの有効性は未知数です。
また、詳細な商品情報を標準的な形式で表示される事によって、競合店に自店の商品情報を抜かれやすくもなりますので、デメリットもあります。
ある程度、認知度が上がって、利用ユーザが増えてから導入しても良いですし、新しい集客ルートとしていち早く導入してみるのも良いと思います。

クロスキューブでは、ECサイトの構築に関する情報だけでなく、構築後の運営まで考えたサービスを提供しており、日々こういったECサイト運営に関する情報も集めております。
また、構築後の運営サービスも承っておりますので、ご興味があれば是非コチラからお問い合わせください。

*1:Googleが運営する無料の価格ドットコムの様な感じでしょうか

*2:詳細はコチラ: http://www.google.com/support/merchants/bin/answer.py?answer=188478&hl=jp

*3:商品詳細ページの関連カテゴリ表示処理を使うと簡単です