▼ここでのカスタマイズファイルをすべてダウンロードできます。
必要な箇所だけコピーしてご利用ください。
他のカスタマイズも含まれている場合がありますので、ファイルの上書きは絶対におやめください。
こちらから（facebookユーザーのみ）
現在開いているURLのQRコードを自動生成。ブロックで配置する。
ただし商品詳細ページでは、ブロック配置ではなく、テンプレートをインクルードする。
1 下記より、jQueryプラグイン「jquery.MyQRCode.js」をダウンロードし、■html/js/jquery.myqrcodeフォルダに置く。
http://www.kfsoft.info/MyQRCode/demo.php
（1）デフォルトでは、下記設定になっている。（jquery.MyQRCode.jsに記述あり）
//default values
jQuery.fn.MyQRCode.defaults = {
encoding:”UTF-8″,
content: window.location,
size:”150×150″
};
（2）オプションをscriptで記述することで変更する。
（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 追加
<!--QRコード自動生成-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.myqrcode/jquery.MyQRCode.js"></script>
3 ブロックを新規作成する
① ■html/frontparts/bloc/qrcode.php
<?php
// {{{ requires
require_once realpath(dirname(__FILE__)) . '/../../require.php';
require_once CLASS_EX_REALDIR . 'page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Qrcode_Ex.php';
// }}}
// {{{ generate page
$objPage = new LC_Page_FrontParts_BLoc_Qrcode_Ex();
$objPage->blocItems = $params['items'];
register_shutdown_function(array($objPage, "destroy"));
$objPage->init();
$objPage->process();
?>
② ■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Qrcode_Ex.php
<?php
// {{{ requires
require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Qrcode.php';
class LC_Page_FrontParts_Bloc_Qrcode_Ex extends LC_Page_FrontParts_Bloc_Qrcode {
// }}}
// {{{ functions
/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
}
/**
* Page のプロセス.
*
* @return void
*/
function process() {
parent::process();
}
/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}
?>
③ ■data/class/page/frontparts/bloc/LC_Page_FrontParts_Bloc_Qrcode.php
<?php
// {{{ requires
require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc.php';
class LC_Page_FrontParts_Bloc_Qrcode extends LC_Page_FrontParts_Bloc {
// }}}
// {{{ functions
/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
$this->setTplMainpage('qrcode.tpl'); //<!--{include_php file="`$smarty.const.HTML_REALDIR`frontparts/bloc/qrcode.php"}-->を機能させるために必要
}
/**
* Page のプロセス.
*
* @return void
*/
function process() {
$this->action();
$this->sendResponse();
}
/**
* Page のアクション.
*
* @return void
*/
function action() {
}
/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}
?>
④ ■data/Smarty/templates/default/frontparts/bloc/qrcode.tpl
<!--{assign var=detail value="`$smarty.const.ROOT_URLPATH`products/detail.php"}-->
<!--{if $smarty.server.PHP_SELF==$detail}-->
<div class="qrcode_detail">
<script type="text/javascript">
$(function(){
$(".qrcode").MyQRCode({
size:"111x111"
});
});
</script>
<div class="qrcode_box">
<div class="qrcode"></div>
</div>
<div class="text">この商品を携帯やスマートフォンで見る場合、QRコードを読み込んでください。</div>
</div>
<div class="clear"></div>
<!--{else}-->
<div class="block_outer">
<div class="qrcode_area">
<script type="text/javascript">
$(function(){
$(".qrcode").MyQRCode({
size:"111x111"
});
});
</script>
<div class="mini">現在のページを携帯やスマートフォンで見る場合、QRコードを読み込んでください。</div>
<div class="qrcode_box">
<div class="qrcode"></div>
</div>
</div>
</div>
<!--{/if}-->
⑤ データベースdtb_blocテーブルに追加する
INSERT INTO dtb_bloc (device_type_id, bloc_id, bloc_name, tpl_path, filename, create_date, update_date, php_path, deletable_flg) VALUES (10, 15, 'QRコード自動生成', 'qrcode.tpl', 'qrcode', CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, 'frontparts/bloc/qrcode.php', 0);
4 ■data/Smarty/templates/default/products/detail.tpl
商品詳細ページでは、ブロック配置ではなく、画像の下（id=”detailphotobloc”内の最後）に表示する。下記を追加。
<!--▼QRコードの自動生成▼-->
<!--{include_php file="`$smarty.const.HTML_REALDIR`frontparts/bloc/qrcode.php"}-->
<!--▲QRコードの自動生成▲-->
5 cssファイルを編集する
■html/user_data/packages/default/css/bloc.css（適当な箇所に追記）
/* ===============================================
▼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;
}
6 ■img/common/img_mobile.pngを追加する。
