ITOBEN STYLE > EC-CUBEプラグイン > EC-CUBE:QRコードを自動生成する 2012年5月7日カテゴリー: EC-CUBEプラグイン EC-CUBEデザインテンプレート EC-CUBE:QRコードを自動生成する 現在開いているURLのQRコードを自動生成。ブロックで配置する。 ただし商品詳細ページでは、ブロック配置ではなく、テンプレートをインクルードする。 1 下記より、jQueryプラグイン「jquery.MyQRCode.js」をダウンロードし、■html/js/jquery.myqrcodeフォルダに置く。 http://www.kfsoft.info/MyQRCode/demo.php (1) デフォルトでは、下記設定になっている。(jquery.MyQRCode.jsに記述あり) [php] //default values jQuery.fn.MyQRCode.defaults = { encoding:”UTF-8″, content: window.location, size:”150×150″ }; [/php] (2) オプションをscriptで記述することで変更する。 [php] [/php] (3) QRコード化するデータ 「content: window.location」は、現在開いているページ。 固定するのであれば、「content:’PHP & JavaScript Room\nhttp://○○○.com/’」 (4) 画像サイズ サイズ指定を行っても、QRコード自体の大きさがピクセル単位で変わるのではなく、周りの余白が調整されて、全体として指定したサイズになる。 さらに、定かではないが、QRコード化したデータの量でQRコード自体の大きさが変わるようである。 下記の範囲内では、QRコード自体の大きさは変わらなかった。ただし、これもQRコードのデータ量によるのかも・・・。(下図参照) 実際、トップページと商品一覧ページに表示した際、大きさが変わった。 size:”111×111″~size:”147×147″ size:”80×80″~size:”110×110 ▼トップページにブロックを配置 ▼商品一覧ページにブロックを配置 ▼商品詳細ページにインクルード 2 ■data/Smarty/templates/default/site_frame.tpl 追加 [php] [/php] 3 ブロックを新規作成する ① ■html/frontparts/bloc/qrcode.php [php] blocItems = $params[‘items’]; register_shutdown_function(array($objPage, “destroy”)); $objPage->init(); $objPage->process(); ?> [/php] ② ■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Qrcode_Ex.php [php] [/php] ③ ■data/class/page/frontparts/bloc/LC_Page_FrontParts_Bloc_Qrcode.php [php] setTplMainpage(‘qrcode.tpl’); //を機能させるために必要 } /** * Page のプロセス. * * @return void */ function process() { $this->action(); $this->sendResponse(); } /** * Page のアクション. * * @return void */ function action() { } /** * デストラクタ. * * @return void */ function destroy() { parent::destroy(); } } ?> [/php] ④ ■data/Smarty/templates/default/frontparts/bloc/qrcode.tpl [php] この商品を携帯やスマートフォンで見る場合、QRコードを読み込んでください。 現在のページを携帯やスマートフォンで見る場合、QRコードを読み込んでください。 [/php] ⑤ モバイルイメージを下記フォルダに置く。 ■html/user_data/packages/default/img/common/img_mobile.png ⑥ データベースdtb_blocテーブルに追加する ———————————————— device_type_id:10 bloc_id:16(環境に応じて) bloc_name:QRコード自動生成 tpl_path:qrcode.tpl filename:qrcode create_date :作成日 update_date:更新日 php_path:frontparts/bloc/qrcode.php deletable_flg:0 ———————————————— 4 ■data/Smarty/templates/default/products/detail.tpl 商品詳細ページでは、ブロック配置ではなく、画像の下に表示する。下記を追加。 [php] [/php] 5 cssファイルを編集する ■html/user_data/packages/default/css/bloc.css(適当な箇所に追記) [php] /* =============================================== ▼QRコードの自動生成 =============================================== */ .qrcode_area { margin-bottom:20px; background:url(../img/common/img_mobile.png) no-repeat right bottom; } .qrcode_area .qrcode_box { overflow:hidden; border:1px solid #CCC; width:95px; height:95px; } .qrcode_area .qrcode { position:relative; top:-8px; left:-8px; } /* 商品詳細ページ ———————————————– */ .qrcode_detail { margin:10px 0; } .qrcode_detail .qrcode_box { overflow:hidden; border:1px solid #CCC; width:95px; height:95px; float:left; } .qrcode_detail .qrcode { position:relative; top:-8px; left:-8px; } .qrcode_detail .text { float:left; width:55%; margin-left:10px; } [/php]
現在開いているURLのQRコードを自動生成。ブロックで配置する。
ただし商品詳細ページでは、ブロック配置ではなく、テンプレートをインクルードする。
1 下記より、jQueryプラグイン「jquery.MyQRCode.js」をダウンロードし、■html/js/jquery.myqrcodeフォルダに置く。
http://www.kfsoft.info/MyQRCode/demo.php
(1) デフォルトでは、下記設定になっている。(jquery.MyQRCode.jsに記述あり)
[php]
//default values
jQuery.fn.MyQRCode.defaults = {
encoding:”UTF-8″,
content: window.location,
size:”150×150″
};
[/php]
(2) オプションをscriptで記述することで変更する。
[php]
[/php]
(3) QRコード化するデータ
「content: window.location」は、現在開いているページ。
固定するのであれば、「content:’PHP & JavaScript Room\nhttp://○○○.com/’」
(4) 画像サイズ
サイズ指定を行っても、QRコード自体の大きさがピクセル単位で変わるのではなく、周りの余白が調整されて、全体として指定したサイズになる。
さらに、定かではないが、QRコード化したデータの量でQRコード自体の大きさが変わるようである。
下記の範囲内では、QRコード自体の大きさは変わらなかった。ただし、これもQRコードのデータ量によるのかも・・・。(下図参照)
実際、トップページと商品一覧ページに表示した際、大きさが変わった。
size:”111×111″~size:”147×147″
size:”80×80″~size:”110×110
▼トップページにブロックを配置
▼商品一覧ページにブロックを配置
▼商品詳細ページにインクルード
2 ■data/Smarty/templates/default/site_frame.tpl 追加
[php]
[/php]
3 ブロックを新規作成する
① ■html/frontparts/bloc/qrcode.php
[php]
blocItems = $params[‘items’];
register_shutdown_function(array($objPage, “destroy”));
$objPage->init();
$objPage->process();
?>
[/php]
② ■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Qrcode_Ex.php
[php]
[/php]
③ ■data/class/page/frontparts/bloc/LC_Page_FrontParts_Bloc_Qrcode.php
[php]
setTplMainpage(‘qrcode.tpl’); //を機能させるために必要
}
/**
* Page のプロセス.
*
* @return void
*/
function process() {
$this->action();
$this->sendResponse();
}
/**
* Page のアクション.
*
* @return void
*/
function action() {
}
/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}
?>
[/php]
④ ■data/Smarty/templates/default/frontparts/bloc/qrcode.tpl
[php]
[/php]
⑤ モバイルイメージを下記フォルダに置く。
■html/user_data/packages/default/img/common/img_mobile.png
⑥ データベースdtb_blocテーブルに追加する
————————————————
device_type_id:10
bloc_id:16(環境に応じて)
bloc_name:QRコード自動生成
tpl_path:qrcode.tpl
filename:qrcode
create_date :作成日
update_date:更新日
php_path:frontparts/bloc/qrcode.php
deletable_flg:0
————————————————
4 ■data/Smarty/templates/default/products/detail.tpl
商品詳細ページでは、ブロック配置ではなく、画像の下に表示する。下記を追加。
[php]
[/php]
5 cssファイルを編集する
■html/user_data/packages/default/css/bloc.css(適当な箇所に追記)
[php]
/* ===============================================
▼QRコードの自動生成
=============================================== */
.qrcode_area {
margin-bottom:20px;
background:url(../img/common/img_mobile.png) no-repeat right bottom;
}
.qrcode_area .qrcode_box {
overflow:hidden;
border:1px solid #CCC;
width:95px;
height:95px;
}
.qrcode_area .qrcode {
position:relative;
top:-8px;
left:-8px;
}
/* 商品詳細ページ
———————————————– */
.qrcode_detail {
margin:10px 0;
}
.qrcode_detail .qrcode_box {
overflow:hidden;
border:1px solid #CCC;
width:95px;
height:95px;
float:left;
}
.qrcode_detail .qrcode {
position:relative;
top:-8px;
left:-8px;
}
.qrcode_detail .text {
float:left;
width:55%;
margin-left:10px;
}
[/php]