NP_AdjustSkin2MobileLiteを利用されることをおすすめします。
AjustSkin2MobileはUserAgentを判別しSkinを変更します。 docomo、au、SoftBank、Willcomを携帯端末、iPhone、Androidをスマートフォンとして認識し、PC|携帯|スマートフォン|キャリア|機種毎に適用するSkinを選択してくれます。
General Plugin info | |
---|---|
作者: | nakazoe |
最新のバージョン: | 0.2 |
Nucleus対応バージョン: | 3.41 or later |
入手場所: | フォーラムの記事より |
NP_MobileWithSinglePageを大いに参考にさせて頂いて作成されています。 NP_MobileWithSinglePageは携帯向けにスキンを自動修正することを目的に作成されているのに対し、このAdjustSkin2Mobileは文字コード、絵文字以外の自動修正を行いません
PEAR::Net_UserAgent_Mobileを利用しています。 zipにも収録されていますが、携帯端末の最新機種対応の為にも最も新しいバージョンをインストールしましょう。 PEAR.php、PEAR5.phpもインストールする必要があります。
Ver0.2からコアとなるUA判定にPEAR::Net_UserAgent_Mobileを利用せず独自に行うようになりました。 PEAR::Net_UserAgent_Mobileは端末名や機種固有の画面サイズを得るために利用されています。
http://pear.php.net/package/Net_UserAgent_Mobile
Skinの命名には以下のようなルールがあります。 PC用のSkin名が[default]の場合
[プラットフォーム短縮名]は以下の通り
[機種名]はスキン/テンプレート変数TerminalModelを利用
default/d/F906i 等と命名する この例はdocomoのF906iに適用される
[プラットフォーム名]は以下の通り
default/docomo 等と命名する
default/mobile と命名すること
default/sphone と命名すること
携帯特有の絵文字の扱いについて説明します。 絵文字変換に関して以下のサイトを大いに参考にさせて頂いております。
AdjustSkin2Mobileはdocomoの絵文字を基本として設計されています。 絵文字を各キャリア用(PC含む)へコンバートして出力します。
CMSとして使われることを前提に設計されており、携帯からのコメント入力などは対応していません。 アイテム追加、コメント投稿などはPCから行われることを前提に作られています。
(次バージョンで対応予定です)
携帯専用の絵文字を入力したいときはdocomoが提供しているi絵文字を使うとよいでしょう。
http://www.nttdocomo.co.jp/service/imode/make/content/pictograph/tool/
<%AdjustSkin2Mobile(CarrierName)%>は以下の値を返します
TerminalWidthが不明の場合、携帯端末は240、それ以外のスマートフォンやPCは480が返されます
NetFrontブラウザの画面解像度はおよそ120px、240px、480pxの3つに分類されます。 トップバナーなど画面幅いっぱいに画像を表示したいとき少なくともその3種類を出し分ける制御が必要となります。 スマートフォンは一律480pxを返します。
toplogo_120.jpg、toplogo_240.jpg、toplogo_480.jpgと画像を用意し
<img src="./images/toplogo_<%AdjustSkin2Mobile(RoundWidth)%>.jpg">
のように記述するとよいでしょう。
テンプレート変数CarrierName、TerminalModelはdoifに対応しています
スキンに以下のように記述することができます
<%if(AdjustSkin2Mobile,CarrierName,docomo)%> yes <%else%> no <%endif%>
ソースはXHTMLで記述しましょう。
http://www.nttdocomo.co.jp/service/imode/make/content/browser/xhtml/about/index.html
<div style="color:#ff0000;background-color:#000000;">HOGEHOGE</div>
のように記述することで3G以上の機種で各キャリア共通表示が可能となります。 (全ての機種で検証してはいませんがほとんどいける、はず、)
*willcomはbackground-colorが指定できないようです。寂しいデザインになってしまいますがマイノリティだということで妥協することをお勧めします。