B豚の備忘録

題名を書いてて思った。「え？誰に対するお知らせ？？？」（＾＾；

広くアピールしているとおり、このブログは私の備忘録。今までほぼ自分オンリーしか見ていませんでした；
でも、ログを取ったら、最近アクセスが増えてていろんな人が見てくれてるんですね。ありがとうございます。

なので、一応改めて移転のお知らせです。
先にお知らせしたとおり、こちらのOLD BLOGは、今後更新されません。

新しいブログで更新していきます。

http://bton.papalabs.com

こんなにたくさん見てくれるんだったら、もっと気を使ってちゃんと、親切に書けばよかったデスヨ。。。
そのうち、ちゃんと整理したいと思います。

いくつかの記事は、閲覧パスワードが掛かっています。これは、別に意地悪をしているわけではないのですが、他の方から提供してもらったソースとか、時間がなくて、とりあえず、他のサイトからコピペでいただいてきた情報とか、ちょっとこれはそのままはブログにだせないな～という、そういうものが入っているわけです。備忘録として自分には必要な情報なのでお許しください。

整理ができた情報で可能なものは、その都度パスワード制限を解除します。本当は、このブログは全部閉じて、第三者に向けて公開できる情報だけを集めた別のブログができれば一番いいのでしょうな。

移転します。

このブログは、新しい方の様子を見るため、しばらく閉じませんが、今後の更新は、一旦新しいほうで行う予定。

このブログは、フリーサーバーで気軽に始めたんであるが、最近ネタも増え、すっかり頼りっきりになっている。
でも、動作がとっても不安定･･･
特にDB周りはよく落ちる。
タダなのをいいことに無茶使いしているユーザーがいるんであろうか？いるだろうな･･･

時々思い立ってはバックアップは取っているが、最近依存度の高いネタ帳になってきてしまったので、そろそろサーバの移転を考えている。

面倒だ～。でも、サーバー飛んでデータが無くなったら・・・と思うと恐怖。

モンモンと過ごす。

http://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/

相変わらず、SMASHING MAGAZINEはネタが豊富。

CSSやJSを利用したナビゲーションの面白いアイデアが掲載されています。
どれも個性的で、デザインだけでなく動作も洗練されているので、応用しだいで素敵なナビゲーションデザインができそう。

FENCES( http://www.stardock.com/products/fences/　）

デスクトップ上のアイコンをグループ化してまとめてくれるツール。まとめたアイコンはグループごとにドラッグ＆ドロップで移動もでき、WINDOWのように重ねることができる。

便利。

ただしデスクトップラウンチャーのようなもので、動作は少々遅くなる気が･･･

それにしても、GOOGLEデスクトップ入れたら起動遅いし；これと2つ入れるのはキツいなぁ；

この投稿はパスワードで保護されています。表示するにはパスワードを入力してください:

パスワード:

以前に、追加した大変便利なブロック機能。「新着商品をブロックで表示する」（http://www.bton.net46.net/?p=493）

 これは実装時には基本PCサイトでのみ動作していたのだけど、携帯でも同じように使用したい。

ということで、ちょこっと改変して、携帯でも使うことにする。

そこで、私は、http://www.bton.net46.net/?p=735で商品登録に携帯用のコメントを追加したので、モバイルサイトでは、PC用の普通の説明文ではなく、携帯用の説明文を表示させることにする。（そうすると絵文字も自由に使えるからね！）

さて、新着商品の表示だけど、トップページで、左に小さな写真、右に商品名、携帯用説明文（最初の60字）を表示させて、写真と商品名には詳細ページへのリンクをつける、ということにしたい。

その１）ブロックのPHPを作成する。

以前に作成した、/html/frontparts/bloc/new.phpをコピーして、/html/mobile/frontparts/bloc/new.phpとして保存。

コピーしたファイルを開き、最後から2行目、3行目の、

$objPage->init();
$objPage->process();

を

$objPage->mobileInit();
$objPage->mobileProcess();

に変更して保存。

その２）ブロック作成。

/data/Smarty/templates/default/mobile/frontparts/bloc/にnew.tplを作成し、下記ソースを参考に表示用のテンプレートブロックを作成する。

<!–{if count($arrFlagProducts) > 0}–>
<div style=”background-color:#3cf; color:#fff; font-size:small; padding:1px; text-align:center;”>新着商品</div>
<div style=”font-size:x-small; background-color:#cff;”>
<!–{section name=cnt loop=$arrFlagProducts step=1 max=6}–>
<!–{if $arrFlagProducts[cnt].main_list_image != “”}–>
<!–{assign var=image_path value=”`$arrFlagProducts[cnt].main_list_image`”}–>
<!–{else}–>
<!–{assign var=image_path value=”`$smarty.const.NO_IMAGE_DIR`”}–>
<!–{/if}–>
<div style=”clear:both;”><a href=”<!–{$smarty.const.MOBILE_DETAIL_P_HTML}–><!–{$arrFlagProducts[cnt].product_id}–>”><img src=”<!–{$smarty.const.SITE_URL}–>resize_image.php?image=<!–{$image_path|sfRmDupSlash}–>&amp;width=60&amp;height=60″ alt=”<!–{$arrFlagProducts[cnt].name|escape}–>” style=”float:left;margin-top:3px; margin-right:3px; margin-bottom:8px; margin-left:3px;” align=”left” border=”0″ /></a>
<span style=”<!–color:#f36;–>”>[emoji:148]&nbsp;<a href=”<!–{$smarty.const.MOBILE_DETAIL_P_HTML}–><!–{$arrFlagProducts[cnt].product_id}–>”><strong><!–{$arrFlagProducts[cnt].name|escape}–></strong></a></span><br /><br />
[emoji:76]<span style=”color:#666;”><!–{if !$arrProduct.comment7}–><!–{$arrFlagProducts[cnt].main_list_comment|mb_strimwidth:0:60:”…”|escape|nl2br}–><!–{else}–><!–{$arrFlagProducts[cnt].comment7|mb_strimwidth:0:60:”…”|escape|nl2br}–><!–{/if}–></span><br clear=”all” /></div>
<!–{/section}–>
</div>

ポイント。

リサイズイメージで、商品画像を60×60pxに変換している。
SECTIONのループで、max=6と指定しているので、新着商品は6個表示される。
imgタグのSTYLE属性で画像を左にfloatさせている。ドコモXHTMLでは、floatの解除は、brタグではできないので、divタグのスタイル属性でstyle=”clear:both;”とするんであるが、古い携帯の場合、これでクリアされないかもしれないので、念のため、保険代わりに<br clear=”all” />も追加しておく。
最後のほうで、携帯用のコメント（comment7）があれば、それを表示し、携帯コメントが登録されていなければ、PC用のコメントを表示する、としている。また、コメントはいずれも全角30字とし、それ以上長いものは、省略させている。
こんなとこ。
変数名が前回保存したPC用のソースで指定したものと一致しているか確認すること。（変数名が違うと表示されない）

その３）データベースから抽出されるデータにcommnet7を追加しておく。

/data/class/db/dbfactory/SC_DB_DBFactory_MYSQL.php

のL368あたりから（ver.2.3.3の場合）vw_products_allclassというのがあるので、この中の           comment3,の下あたりにcomment7,を1行追加。

ついでなので、その20行ほど下の、

 T0.comment3,の下にも、
 T0.comment7,を1行追加しておいた。

モバイルサイトでは、ニュースは、最新1つだけ、しかもタイトルのみしか表示されない。

これだと更新履歴や商品入荷情報などを配信したい場合、ちょいと不都合。

ということで、モバイルサイトのニュースでも、

日付:　「2009.02.01」　というように。
タイトル:「○○が入荷しました！」というように。
本文:「オススメの人気ブランド○○のTシャツ緊急入荷！急げ！」というように。（また、本文は、文字数を頭から20字のみ表示、というように丸めたい場合もあると思うので、それも踏まえて改修。）

こういう表記になるように変更する。

これも基本、PCサイトのソースを持ってきて変更するだけ。

NEWSはPCと同じCLASSのロジックを使用しているので、基本テンプレのファイルを修正するだけでOK。
PCサイトのほうからソースをコピーしてきて、モバイル用に表示のHTMLを変更していく。

ニュースブロックの中身を変更する。

/data/Smarty/templates/default/mobaile/frontparts/bloc/news.tpl

を開く。

ソースを下記を参考に変更する。（※XHTMLで記述している）

<div style=”color:#666; font-size:small;”><strong>NEWS!!</strong></div>
<!–{section name=data loop=$arrNews}–>
<!–{assign var=”date_array” value=”-”|explode:$arrNews[data].news_date_disp}–>
<div style=”color:#666; font-size:x-small;”>[emoji:e54]<!–{$date_array[0]}–>.<!–{$date_array[1]}–>.<!–{$date_array[2]}–></div>
<div style=”color:#666; font-size:x-small;”>
<!–{if $arrNews[data].news_url}–><a href=”<!–{$arrNews[data].news_url}–>”>
<!–{/if}–>
<!–{$arrNews[data].news_title|escape|nl2br}–>
<!–{if $arrNews[data].news_url}–></a></span>
<!–{/if}–><br />
<!–{$arrNews[data].news_comment|mb_strimwidth:0:40:”…”|escape|nl2br}–>
</div>
<!–{/section}–>

小さくポイントになるところを解説。

1. SECTIONでloopさせている$arrNewsは、ニュースの数だけ繰り返し、という意味なので、例えば最新の3つのニュースを表示するのであれば、$arrNewsではなく、「3」といれる。
2. <!–{$date_array[0]}–>.<!–{$date_array[1]}–>.<!–{$date_array[2]}–>は、2009.02.01というように日付の区切りを[.]にしているので、/にしたければ、[/]に変更すればよいし、[年]、[月]、[日]としたければ、そのように記述。
3. mb_strimwidth:0:40:”…”|　この部分で、ニュース本文の最初(0文字目)から40字目（半角なので、全角文字の場合は、これで20字ということ）までを表示し、最後に[...]を追加する、ということを言っている。[...]を[続く]としたり、他の記号にすることもできるし、40字ではなく60字などにすることもできる。

 こんなもんかな？

EC-CUBEでは携帯サイトの商品検索は、PCよりしょぼい･･･（失礼！）

というか、こういう仕様になったのにはそれなりの訳もあるのかもしれない（表示のパフォーマンスや色々あるのかもしれないし、単にこっちはとりあえず実装だったのかもしれない）が、PCサイトでは、商品検索でカテゴリ検索ができる。検索窓でカテゴリの一覧から検索対象のカテゴリを選択することができるのだ。

これが、モバイルのほうでは、いきなり検索したい商品名を入力してちょ、とくる。そして別画面で検索のみ行う仕様である。
初めてのユーザーや特定の商品名、キーワードのイメージがないユーザーには、ちょいと使いにくい仕様である。なので、これをカスタマイズして、PCと同じくカテゴリ検索ができるようにする。

こういう感じ。この機能をブロックにして、トップページなどで利用できるようにする。
モバイルサイトでは、ブロックは管理画面から配置するのではなく、該当するテンプレート中に、直接インクルードするので、今回はデータベースと管理画面は触らない。

基本的には、PCサイトのsearchのロジックをMOBILEに移植するだけでOK。

【携帯サイトへカテゴリ検索ブロックの追加】

その１）ブロック用PHP作成。

/html/frontparts/bloc/search_products.php　をコピーして、
/html/mobile/frontparts/bloc/search_products.php　として保存。

コピーしたファイルを開き、最後から2行目、3行目に、

$objPage->init();
$objPage->ｐrocess();

というそーすがあるのを、

$objPage->mobileInit();
$objPage->mobileProcess();

と変更する。

その２）ブロック作成。

/data/Smarty/templates/default/mobile/frontparts/bloc/に、SearchProducts.tplという名称でテンプレファイルを作成し、PC用のSearchProducts.tplを参考にしながら、コーディング。

参考までに、上記のようなデザインにするためのコードは下記。（※XHTMLにてコーディングした場合）

<div style=”background-color:#96c; color:#fff; font-size:small; padding:1px; text-align:center;”>[emoji:119]&nbsp;商品検索&nbsp;[emoji:119]</div>
<div style=”font-size:x-small; padding:1px; background-color:#EEE6F7;”>&nbsp;お探しの商品名・型番を入力してください。</div>
<div style=”text-align:center; font-size:x-small;”><br /><form name=”search_form” id=”search_form” method=”get” action=”<!–{$smarty.const.URL_DIR}–>products/list.php”>
ｶﾃｺﾞﾘから選ぶ<br />
<input type=”hidden” name=”mode” value=”search” />
<select name=”category_id”>
<option label=”全ての商品” value=”">全ての商品</option>
<!–{html_options options=$arrCatList selected=$category_id}–>
</select><br />
商品名を入力する<br />
<input type=”text” name=”name2″ maxlength=”50″ value=”<!–{$smarty.get.name|escape}–>” />
<br />
<input type=”submit” name=”search” value=”&nbsp;&nbsp;&nbsp;検索&nbsp;&nbsp;&nbsp;”>
</form>

これで、検索ブロックの基本は完成。

その３）最後に、トップページへ検索ブロックを埋め込む。

/data/Smarty/templates/default/mobile/top.tpl の、検索窓を表示したい箇所に、

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

と記述。もちろん他のページでもかまわない。現状のEC-CUBEの構造で、検索ページの中身をカテゴリ検索の形に変更したいのであれば、

/html/mobile/products/search.php　と

/data/Smarty/templates/default/mobile/products/search.tpl　のソースを上記で出来上がるソースに置き換えればいい。（または、別に上記ソースを作成しておいて、商品検索のリンクのみ、/html/mobile/frontparts/bloc/search_products.phpへのリンクパスに変更すればいい。

他にも色々やった（オススメや新着のランダム表示ブロックに携帯機能を追加したりとかトップエページにカテゴリリストをボーダーデザインで出すようにしたりとか）けど、以外にスムーズに行き過ぎ、小さく色々さわりすぎたもんで、手順を記録できず、整理するのが大変･･･（＾＾；

次のときに必要だから、思い出して必ず記録する！乙！

今はモバイルサイトの仕様過渡期なので、ちょいと注意が必要なんだけども。

というのも、少し前に、モバイルXHTMLの標準化について、なんとなく関係各処でオーソライズされたらしいので。けれど、しばらくは、色々な事情からこのネタも生きることであろう。

モバイルサイトをXHTMLにすると何がいいかというと、ドコモでインラインCSSが使えるようになる。
ドコモなどで、文字に背景をつけたいとかインラインスタイルを書いて色々ちょいと調整したいとか、ただでさえ制限の多い携帯のコーディングで、少しでも自由な表現をするには、やっぱりスタイルシートが使えないと不便。

画像の多様で容量上げて凝ったデザインにするのはECではつらいので、モバゲーみたいに色々デザインされたページを無理なくコードで実現しようとすると、やっぱりCSSが必要なんである。

細かいところは、携帯サイトのコーディングについて詳しいサイトがいくつも公開されているので、そちらにお願いすることにして、とりあえず抑えておくポイントは、EC-CUBEのようなシステムベースだから3キャリア共通でHTMLソースを使用したいという場合には、XHTMLで、ドコモ向けにコーディングし、小さなところで、auやソフトバンク向けに調整する、ということが必要なんである。

ドコモでは、XHTMLは、docタイプが適切に出力されて、MIMEタイプがapplication/xhtml+xmlとして認識されて、などいくつかの制限がクリアされないとXHTMLと認識されず、HTMLと認識されてしまう。

EC-CUBEはSMARTYのテンプレートを使用しているので、ページがdisplayされる前に、mimetypeにxhtml+xmlをセットする。

【EC-CUBEの携帯サイトを3キャリア対応のXHTMLにするための手順】

１）/data/Smarty/templates/default/mobile/site_frame.tplのヘッダを、

<?xml version=”1.0″ encoding=”Shift_JIS”?>　※この行はなくても可。
<!DOCTYPE html PUBLIC “-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1)1.0//EN” “i-xhtml_4ja_10.dtd”>
<html xml:lang=”ja”>　

または、

<?xml version=”1.0″ encoding=”Shift_JIS”?>　※この行はなくても可。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”ja” xml:lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”application/xhtml+xml; charset=Shift_JIS” />

とする。

２）/data/class/helper/SC_Helper_Mobile.phpのL253あたりに、

 function sfMobileInit() {
ini_set(“default_mimetype”, “application/xhtml+xml”); 　//1行追加
$this->lfMobileInitInput();

これで、OK。