ホームページ制作関連の技術ネタを備忘録的にまとめています

ECCUBEで構築されたサイトで、新規にページを追加して商品のランディングページのようなものを作成した際に、商品詳細にあるレビュー機能を実装したかったので調べましたが、そのようなニーズが無いのか、希望するものが見つからなかった為、レビュー機能を表示する方法をまとめておきます。

まず、お客様の声のSmartyのソースは下記のようになっておりますので、これを追加したページのテンプレートファイルに貼り付けます。
※ソースは必要に応じて適宜変更してください。

<!–この商品に対するお客様の声–>
<div id=”customervoice_area”>
<h2><img src=”<!–{$TPL_URLPATH}–>img/title/tit_product_voice.png” alt=”この商品に対するお客様の声” /></h2>

<div class=”review_bloc clearfix”>
<p>この商品に対するご感想をぜひお寄せください。</p>
<div class=”review_btn”>
<!–{if count($arrReview) < $smarty.const.REVIEW_REGIST_MAX}–>
<!–★新規コメントを書き込む★–>
<a href=”../products/review.php”
onclick=”eccube.openWindow(‘../products/review.php?product_id=●●●●●’,’review’,’600′,’640′); return false;”
target=”_blank”>
<img class=”hover_change_image” src=”<!–{$TPL_URLPATH}–>img/button/btn_comment.jpg” alt=”新規コメントを書き込む” />
</a>
<!–{/if}–>
</div>
</div>

<!–{if count($arrReview) > 0}–>
<ul>
<!–{section name=cnt loop=$arrReview}–>
<li>
<p class=”voicetitle”><!–{$arrReview[cnt].title|h}–></p>
<p class=”voicedate”><!–{$arrReview[cnt].create_date|sfDispDBDate:false}–>　投稿者：<!–{if $arrReview[cnt].reviewer_url}–><a href=”<!–{$arrReview[cnt].reviewer_url}–>” target=”_blank”><!–{$arrReview[cnt].reviewer_name|h}–></a><!–{else}–><!–{$arrReview[cnt].reviewer_name|h}–><!–{/if}–>　おすすめレベル：<span class=”recommend_level”><!–{assign var=level value=$arrReview[cnt].recommend_level}–><!–{$arrRECOMMEND[$level]|h}–></span></p>
<p class=”voicecomment”><!–{$arrReview[cnt].comment|h|nl2br}–></p>
</li>
<!–{/section}–>
</ul>
<!–{/if}–>
</div>
<!–お客様の声ここまで–>

※product_idは該当する商品のidを指定します。

このソースを見ると、必要な情報は「$arrReview」と「$arrRECOMMEND」という配列に入っているようなので、

user_dataフォルダの中の新規に追加したファイル名のPHPファイルに追加していきます。

まず、変数の宣言をします。

/** @var array レビュー情報 */
public $arrReview;

/** おすすめレベル */
public $arrRECOMMEND;

次に関数を下記の通り変更する。

function init()
{
parent::init();
$masterData = new SC_DB_MasterData_Ex();
$this->arrRECOMMEND = $masterData->getMasterData(‘mtb_recommend’);
}

function action()
{
//レビュー情報の取得
$this->arrReview = $this->lfGetReviewData();

}

action関数で使われるlfGetReviewData関数を追加する

//商品ごとのレビュー情報を取得する
function lfGetReviewData() {
$objQuery =& SC_Query_Ex::getSingletonInstance();
$col = “create_date, reviewer_url, reviewer_name, recommend_level, title, comment”;
$from = “dtb_review”;
$where = “del_flg = 0 AND status = 1 AND product_id = ?”;
$objQuery->setOrder(‘create_date DESC’);
$objQuery->setLimit(REVIEW_REGIST_MAX);
$arrWhereVal = array(“4”);
$arrReview = $objQuery->select($col, $from, $where, $arrWhereVal);
return $arrReview;
}

※$arrWhereValは、表示したい商品のproduct_idを指定します。

これで、レビューの表示と投稿ができるようになりました。

スマートフォンサイトでは、PCサイトとは違いマウスがありませんのでロールオーバー効果は表現できませんが、タップしたときにロールオーバーのような効果をつけることはスマホサイトでも可能です。

検索してもaddClass()やremoveClass()を使用したclass操作だったり、background-imageを利用した操作だったりと手間がかかるため簡単に画像を差し替えられるスクリプトを作成しました。

<img>にclassを設定するだけで、タップしたときに画像が切り替わります。

スクリプトは下記になります。
rollover.jsのような名称を付けたファイルに保存しておいて、使用するときはjQueryと一緒に読み込むようにするとソースもすっきりします。

プリロード機能もあるので、手間いらずです。

//ロールオーバー用画像のプリロード

$(function(){
$(“.rollover”).each(function(){
if(String($(this).attr(“src”)).match(/_off\.(.*)$/)){
var img = new Image();
img.src = String($(this).attr(“src”)).replace(/_off\.(.*)$/,”_on.$1″);
}
});
});

//_offと_onを切り替える

$(function(){
$(“.rollover”).bind(“touchstart”,function(){
$(this).attr(“src”,$(this).attr(“src”).replace(“_off.”, “_on.”));
});
$(“.rollover”).bind(“touchend”,function(){
$(this).attr(“src”,$(this).attr(“src”).replace(“_on.”, “_off.”));
});
});

【使い方】

jQueryと上記のソースを外部ファイル化（rollover.js）したものを読み込んで、イメージにクラスを指定するだけです。

その際、画像のファイル名は、「_off.拡張子」というように、「_off」のついた名称にする必要があります。

<img src=”hogehoge_off.jpg” class=”rollover”>

SSL3.0のプロトコルについて、新たな脆弱性「POODLE」が確認されたという事で、その対応を行ったので備忘録としてまとめておきます。
使用していたサーバーは使えるネットのVPSシルバープランです。

まず、SSL3.0が有効なのか無効なのかを調べてみました。
コマンドは下記のとおりです。

openssl s_client -ssl3 -connect [サイトのドメイン名]:[ポート]

無効な場合は、以下のようなエラーになりますので、この場合は対応しなくて大丈夫です。

SSL routines:SSL3_READ_BYTES:sslv3 alert handshake failure:
/xx/src/ssl/s3_pkt.c:xxxx:SSL alert number 40
SSL routines:SSL3_WRITE_BYTES:ssl handshake failure:/xx/src
/ssl/s3_pkt.c:xxx:

私の環境は有効な状態でしたので、対応してみます。
私の場合は、apacheなので、apacheの設定ファイルを以下のように修正します。

まず、/etc/httpd/conf.d/ssl.confのバックアップをとって、
ssl.confを見てみますと下記のような記述がありましたのでその部分を変更します。

【変更前】
#SSLProtocol all -SSLv2

↓

【変更後】
SSLProtocol all -SSLv2 -SSLv3

あとはapacheを再起動して、最初のコマンドで確認してみると
無事に無効化されていました。

QRコードの生成プログラムを作りたかったので、Pearの「Image_QRCode」を使いたかったのでインストールしてみました。

使用するサーバーは、さくらインターネットのスタンダードプラン。

以前、他のサーバーで行った方法と同じ、go-pear.phpを利用したインストールを行ってみました。

1）http://pear.php.net/go-pear　の内容をgo-pear.phpという名前で保存

2)FTPソフトを使用して、サーバー内にアップロードします。

3）アップロードしたgo-pear.phpにブラウザでアクセス。

4）画面に従って進めていき、2箇所だけ設定

1のInstallation prefixは、/home/（アカウント名）/pear

11のphp.ext pathはさくらインターネットの場合「/usr/local/bin/php」

ここで、どうしても、21％から先に進んでくれません。

調べてみると、go-pear.php自体に問題があるらしく、下記のサイトからgo-pear.phpをダウンロードしたら無事に完了しました。

http://d.hatena.ne.jp/furyu-tei/20140501/1398940857

5）次にシェルで.cshrcにパスを設定する

私の場合、Tera Termで、$HOMEで、ホームディレクトリに行き、.schrcをviで編集しました。

set pathの末尾に「$HOME/（インストールフォルダ名）/bin」を追記。
（私の場合は$HOME/pear/bin）

6）これでPearのインストールは完了です。

次に今回必要なパッケージ「Image_Qrcode」をインストールします。
安定版（stable）が無いようですので、下記のコマンドでインストールします。

pear install channel://pear.php.net/Image_QRCode-0.1.3

すると、下記のようなエラーが！

Cannot install, php_dir for channel “pear.php.net” is not writeable by the current user

pear config-showで設定を確認すると、さくらインターネットの共用部分を指していますので、

私の場合、下記のコマンドでディレクトリを変更することで、無事にインストールできました。
pear config-set php_dir /home/（アカウント名）/pear
pear config-set data_dir /home/（アカウント名）/pear/PEAR/data
pear config-set doc_dir /home/（アカウント名）/pear/PEAR/docs
pear config-set test_dir /home/（アカウント名）/pear/PEAR/tests

7）最後に、さくらインターネットのコントロールパネルでphp.iniを変更します。

include_path=”.:/usr/local/php/5.3/lib/php:.:/home/（アカウント名）/（PEARインストールフォルダ名）”
デフォルトのインクルードパスと、今回Pearをインストールしたパスを:（コロン）でつなげて複数指定します

以上で、無事に「Image_QRCode」を使う事が出来ました。

ECCUBEの商品画像を増やすカスタマイズを行ったので、備忘録として方法をまとめます。
ECCUBEのバージョンは2.13.2で、使用しているサーバーは使えるネットのVPSサーバーです。

とりあえず、10点まで登録できるようにしてみました。

（1）データベースに格納する領域を確保
phpMyAdminを使用します。
dtb_productsテーブルを見ると、写真６までのフィールドがあるので、
７から追加していきます。
まず、以下のSQLを実行。

ALTER TABLE dtb_products ADD COLUMN sub_title7 text;
ALTER TABLE dtb_products ADD COLUMN sub_comment7 text;
ALTER TABLE dtb_products ADD COLUMN sub_image7 text;
ALTER TABLE dtb_products ADD COLUMN sub_large_image7 text;
ALTER TABLE dtb_products ADD COLUMN sub_title8 text;
ALTER TABLE dtb_products ADD COLUMN sub_comment8 text;
ALTER TABLE dtb_products ADD COLUMN sub_image8 text;
ALTER TABLE dtb_products ADD COLUMN sub_large_image8 text;
ALTER TABLE dtb_products ADD COLUMN sub_title9 text;
ALTER TABLE dtb_products ADD COLUMN sub_comment9 text;
ALTER TABLE dtb_products ADD COLUMN sub_image9 text;
ALTER TABLE dtb_products ADD COLUMN sub_large_image9 text;
ALTER TABLE dtb_products ADD COLUMN sub_title10 text;
ALTER TABLE dtb_products ADD COLUMN sub_comment10 text;
ALTER TABLE dtb_products ADD COLUMN sub_image10 text;
ALTER TABLE dtb_products ADD COLUMN sub_large_image10 text;

すると、dtb_productsテーブルの末尾に新たなフィールドが作成されます。

（2）/data/class/SC_Product.phpの修正
alldtlSQL関数内に下記を追加

,dtb_products.sub_title7
,dtb_products.sub_comment7
,dtb_products.sub_image7
,dtb_products.sub_large_image7
,dtb_products.sub_title8
,dtb_products.sub_comment8
,dtb_products.sub_image8
,dtb_products.sub_large_image8
,dtb_products.sub_title9
,dtb_products.sub_comment9
,dtb_products.sub_image9
,dtb_products.sub_large_image9
,dtb_products.sub_title10
,dtb_products.sub_comment10
,dtb_products.sub_image10
,dtb_products.sub_large_image10

（3）ECCUBEの管理画面の設定を変更する
EC-CUBE管理画面＞システム設定＞パラメーター設定　の
PRODUCTSUB_MAX を10に変更

ECCUBEの変更箇所は以上の通りです。

ただ、私の環境では、９枚目以降の登録ができませんでした。
これは、サーバーのmax_file_uploadsの値が20になっていた為のようです。
私の場合は、PLESKにログインして「PHP設定」のページの一番下にある
「追加ディレクティブ」の入力ボックス内に
max_file_uploads = 100
と設定することで、９枚目以降の画像も登録できるようになりました。