月: 2008年10月

【EC-CUBE】新着商品をブロックで表示する

1)まずはオススメ商品のPHPソース3つをコピーして新着商品用にファイル名変更。

  • /data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Best5.php
  • /data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Best5_Ex.php
  • /frontparts/bloc/best5.php

をそれぞれコピーし、Best5のところをNewに変更する。

  • /data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_New.php
  • /data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_New_Ex.php
  • /frontparts/bloc/new.php

2)PHPソースの中の変数などBest5→Newへbest5→newへ置き換えする。(数箇所ある)

3)LC_Page_FrontParts_Bloc_New.phpのソースを変更。(Ver.2.3RC1の場合L55~)

    function process() {

        if (defined(“MOBILE_SITE”) && MOBILE_SITE) {
            $objView = new SC_MobileView();
        } else {
            $objView = new SC_SiteView();
        }
        $objSiteInfo = $objView->objSiteInfo;

~(中略:この中身を下記ソースに入れ替え)

        $objView->display($this->tpl_mainpage);
    }

———-(モバイルについて記載している↓この手前まで)
    /**
     * モバイルページを初期化する.
———-

  function process() {
if (defined(“MOBILE_SITE”) && MOBILE_SITE) {
$objView = new SC_MobileView();
} else {
$objView = new SC_SiteView();
}
$objSiteInfo = $objView->objSiteInfo;

// 基本情報を渡す
$objSiteInfo = new SC_SiteInfo();
$this->arrInfo = $objSiteInfo->data;
$objQuery = new SC_Query();

//検索したい商品のステータスを設定
//NEW→1, 残りわずか→2, ポイント2倍→3, オススメ→4, 限定品→5
$productFlag = 1;

//検索する商品のステータスをランダムに決定し、表示させたい場合は以下のコメントを外してください。
//$id_count = $objQuery->count(mtb_status);
//$productFlag = rand(1,$id_count);

$this->statusName =$objQuery->get(“mtb_status_image”, “name”, “id={$productFlag}”);

//表示する商品の件数
$listCount = 8;

$ret = “”;
$arrTmp[$productFlag] = “1”;

for($i = 1; $i <= $productFlag; $i++) {
if($arrTmp[$i] == “1”) {
$ret.= “1”;
} else {
$ret.= “_”;
}
}

if($ret != “”) {
$ret.= “%”;
}
//$col = “dtb_products.product_id, dtb_products.name, dtb_products.main_image,
// MIN(dtb_products_class.price02) AS price02_min, MAX(dtb_products_class.price02) AS price02_max”;
//$from = “dtb_products INNER JOIN dtb_products_class using(product_id)”;
//$where = “product_flag LIKE \”{$ret}\””;
//$groupby = “product_id”;
//$this->groupby=$objQuery->setgroupby($groupby);
//商品の表示はupdate_dateが新しい順
//$order = “dtb_products.update_date DESC”;
//$this->order=$objQuery->setorder($order);

$col = “DISTINCT price02_min, product_id, price02_max, main_list_image, status, product_flag, name”;
$from = “vw_products_allclass AS T1”;
$where = “del_flg = 0 AND status = 1 AND product_flag LIKE ‘{$ret}'”;
//商品の表示はproduct_id逆順
$order = “product_id DESC”;
$this->order=$objQuery->setorder($order);

$arrFlagList = $objQuery->select($col, $from, $where);

//商品の表示をランダムに抽出する場合は以下のコメントを外してください。
//srand((double)microtime()*1000000); //乱数生成器を初期化
//shuffle($arrFlagList);

$this->arrFlagProducts = array_slice($arrFlagList, 0, $listCount);
//この変数名をテンプレの値の呼び出しに使うので注意。

$objSubView = new SC_SiteView();
$objSubView->assignobj($this);
$objSubView->display($this->tpl_mainpage);
}

元のソースの最後のほうの商品検索functionは不要なので、削除。

4)上記の3つのファイルをアップロード。

5)新着商品用のブロックを作り、DBを修正する。

まず、管理画面で「デザイン管理」→「ブロック編集」でブロック名「新着商品表示」/ファイル名「new(.tpl)」を作成する。
内容は、おすすめ商品用ブロック(best5.tpl)をコピーして保存。

phpMyAdminでデータベースを開いて、「dtb_bloc」テーブルの中を見ると、新商品用ブロックのデータ、NEWが追加されているので、その中の、php_path(最初はnullとなっている)に「frontparts/bloc/new.php」と値をセット。

各ファイルの中で変数名がEC-CUBEのバージョンアップによって変更になったりすることがある。そのときは、BEST5のソースを参考にして、適宜調整するとよい。

例えば、$arrBest5は→$arrFlagProductsとなる。

これでOK。ブロックのレイアウトは表示したいように適宜変更。

参考:http://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&order=ASC&topic_id=1276&forum=6

【EC-CUBE】ヘッダーにログインやかごの中ブロックを表示するには

ヘッダーを編集して、

「ログイン」を表示したい場合

<!--{include_php file=`$smarty.const.HTML_PATH`frontparts/bloc/login.php}-->

「商品検索」を表示したい場合

<!--{include_php file=`$smarty.const.HTML_PATH`frontparts/bloc/search_products.php}-->

「かごの中」を表示したい場合

<!--{include_php file=`$smarty.const.HTML_PATH`frontparts/bloc/cart.php}-->

をそれぞれヘッダーのソースに追加する。(ver.2.3RC1にて動作検証)

フッターは未検証だが、多分同様にすれば可能。

モバイルサイトをPCで見るためのツールやFirefoxアドオン

(http://blog.livedoor.jp/ld_directors/archives/51079649.html より)

Web サーバは一般的に2つの方法でアクセスがモバイルからかどうかを判定します。1つはアクセス元のIP、そしてもう1つは HTTP ヘッダ中にある User-Agent です。そのため、携帯キャリアのゲートウェイ経由からのアクセスのみ閲覧を認めるサイト(つまりアクセス元の IP で閲覧制限するサイト)を除けば、モバイルコンテンツはPCから閲覧できます。User-Agent は申告制のため、PC からのアクセスでもモバイルブラウザーのUser-Agent に偽装することが可能だからです。

HTTP リクエストの User-Agent を変えたり、HTTP レスポンスを処理する方法は大きく
1.モバイルシミュレータを使う方法
2.(InternetExplorer や Firefox のような)汎用の Web ブラウザ+プロキシを使う方法
3.ブラウザそのものの機能やアドオンやプラグインを使う方法
の3つの方法がありますので、順に紹介します。

【01】モバイルシミュレータを使う方法

モバイルのシミュレータは携帯キャリア各社のサイトからダウンロードができます。それぞれの詳細は『携帯シミュレータ入門』で紹介されていますので、こちらをご覧ください。

また、現在は有償ですがネットファームさんから高機能なシミュレータ『P1 Emulator~ケータイマルチキャリア高機能テスター』も出ていますね。

これらはモバイルに特化していますので、お手軽に絵文字の表示など文字通り忠実に再現を行い、また仕様に照らし合わせた構文チェックなどもしてくれるところが便利です。ただ、使用できるOSは現在のところ Windows のみです。

個人的には、iモード HTML シミュレータIIの全体画面をキャプチャする機能が資料作成の際に便利なので重宝しています。

【02】汎用のWebブラウザ+プロキシを使う方法

HTTP リクエストやレスポンスの変換処理をプロキシに任せる方法です。プロキシが全てやってくれるので、汎用の Web ブラウザを表示に使えるのが利点です。

この方法には、モバイル専用のプロキシサーバを立てる方法と、自分のPC内にプロキシを立てる方法があります。ライブドアでは、社内で独自のモバイルプロキシサーバを立てています。ポート別に User-Agent やサブスクライバID を設定しておくことで、機種別での細かい挙動の差を見ることができます。モバイル関係の企業にはこのような専用プロキシがあることが多いのではないでしょうか。ただ、別途サーバが必要のため、個人ユースには向きません。

その場合には、Windows 上で動作するローカルプロキシソフトウェアである『Proxomitron』が利用できます。Proxomitron は非常に高機能で便利ですが、モバイルに特化したプロキシーではないので、モバイル向け設定を各自で行う必要があり、その分使いこなすのには時間が掛かるかもしれません。『パソコン遊戯』さんの『Proxomitron 入門』に詳しくインストールから使い方まで載っています。後ほど Proxyomitron を使用した例をご紹介します。

プロキシを使用した方法は、モバイルシミュレータと違って絵文字の表示はできませんが、どうしても絵文字を表示したい場合には、携帯電話用絵文字を Windows 外字ファイルとして登録するという方法があります。

詳しくは、
伝伝PC倶楽部
けーたい絵文字
i-mode絵文字対応外字データ
などのサイトが参考になると思います。

プロキシを使う方法は使用するブラウザを選びませんので、自分の使い慣れたブラウザを使えて便利です。

【03】ブラウザそのものの機能やアドオン/プラグインを使う方法

最後はブラウザそのものの機能やアドオン/プラグインを使う方法です。
できる/できないはブラウザに依存しますが、IE, Firefox, Opera, Safari, Sleipnir, Lunascape には User-Agent を変更する方法があるので、殆どのブラウザでこの方法を取ることができるようです。

以下では様々なプラットフォームで利用することができ、アドオンの充実しているFirefoxでの方法を紹介したいと思います。(以前のディレクターズブログ『仕事を加速する FireFox アドオン』)でも書いていますように、ウェブ制作の現場では、私もFirefoxをオススメしたいと思います)

http://firemobilesimulator.org/ FIREFOXのモバイルシミュレーター。こちらを使えば、携帯端末ごとの表示シミュレーションもできる。現状、これと、User アgentSwitcherをしようするとテストは便利。

User-Agentを変えるのには、HTTP リクエストヘッダを変更する『Modify Headers』アドオンを利用してもいいですが、User-Agentを簡単に切り替えられる『User Agent Switcher』アドオンを利用する方が楽にできますのでオススメです。携帯用のUser-Agentは、『我流天性 – がらくた屋』さんのサイトで『User Agent Switcher の携帯用のXML』を公開して下さっているので、それをimportするといいでしょう。

「Modify Headers」では、User-Agent だけではなく、HTTP ヘッダ全般を書き換えることができますので、端末 ID の設定など他の応用も可能です。『端末IDを設定でき、ケータイサイトの開発に便利な Firefox アドオン「Modify Headers」』でその方法が紹介されています。

【04】User-Agentを偽装しても、XML パースエラーでページが表示できない場合について

例えば、『http://mobile.nifty.com/i/index.xhtml(http://mobile.nifty.com/i/index.xhtml)』や『モバイルgoo(http://mobile.goo.ne.jp/)』のように、User-Agentを偽装してもFirefoxで閲覧しようとすると、以下のようなパースエラーでページが表示できないことがあります。

モバイル@niftyにアクセス時のエラーメッセージ

モバイルgooにアクセス時のエラーメッセージ

HTTP レスポンスヘッダの Content-Type が application/xhtml+xml の場合には、Firefox は XML 整形式のチェックを行うため、モバイルページ自体は HTML で書かれているサイトでは、整形式になっていないと判定し、今回のような XML パースエラーを起こすようです。

正統的な方法ではありませんが、これを強引でも表示させる方法として、レスポンスの Content-Type を text/html に変えて上記パースエラーを回避することができます。先ほど紹介した Proxomitron を使ってやってみましょう。

まず、「フィルタの編集」の「ヘッダ」を押して、「オプション」の「新規」を押します。

次に、ヘッダ値のマッチと置換するテキストをセットします。

最後に「In」にチェックを入れれば完了です。

proxomitron のプロキシを有効にすると、閲覧できるようになります。プロキシの設定には、切り替えを簡単に行えるアドオン『SwitchProxy Tool』が便利です。

SwitchProxy Toolアドオンのプロキシの設定画面と内容

SwitchProxy Toolアドオンのプロキシ設定の切り替え画面

また、実際にContent-Typeがtext/htmlになっているかをHTTPヘッダ情報を確認する『Live HTTP Headers』アドオンで確認してみましょう。

Content-Typeを変換する前のヘッダ情報


Content-Typeを変換した後のヘッダ情報

ちゃんと Content-Type が変わっていることが確認できました。

【05】最後に

上記の方法でPC上でモバイルサイトを見ていても、最後は実機で確認したい!ということになります。そのような時、今まではメールでURLを送っていましたが、Firefoxアドオンの『Mobile Barcoder』を使うと現在表示しているURLのQRコードを表示できるので、メール送信が不要になり便利です。以前はURLが長いと表示できないという問題がありましたが、バージョンアップして問題なく使えるようになりました。

ステータスバーの右下の Barcode 部分にカーソルを載せるとQRコードがポップアップします。これを携帯の QR コードリーダーで読み取りましょう。

以上、PC でモバイルサイトを見る方法を書いてきました。全てを端末からチェックするのは膨大な時間が掛かりますので、開発の場合には、最初は PC を使って効率的にデバッグを行い、最後に実機で最終確認をするという方法がよく用いられると思います。その中で、状況やニーズに合わせて3つの方法をうまく使い分けられればいいのではないかと思います。