NP_AdjustSkin2MobileLiteを利用されることをおすすめします。

AjustSkin2MobileはUserAgentを判別しSkinを変更します。 docomo、au、SoftBank、Willcomを携帯端末、iPhone、Androidをスマートフォンとして認識し、PC|携帯|スマートフォン｜キャリア|機種毎に適用するSkinを選択してくれます。

AjustSkin2Mobileは携帯端末とスマートフォンのUserAgentを判別し適用するSkinを変更します。

NP_MobileWithSinglePageを大いに参考にさせて頂いて作成されています。 NP_MobileWithSinglePageは携帯向けにスキンを自動修正することを目的に作成されているのに対し、このAdjustSkin2Mobileは文字コード、絵文字以外の自動修正を行いません

1. zipファイルを解凍します
2. NP_AdjustSkin2Mobile.phpをnucleus/plugins/へコピー
3. adjustskin2mobileフォルダを丸ごとnucleus/plugins/へコピー
4. PEAR::Net_UserAgent_Mobileをインストール
5. 管理画面からプラグインをインストール

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

• プラグインディレクトリ (通常は"plugins")
  • "sharedlibs"ディレクトリ
    • "Net"ディレクトリ
      • "UserAgent"ディレクトリ
        • "Mobile.php"
          • "Mobile"ディレクトリ (およびその中身)
    • PEAR.php
    • PEAR5.php

AjustSkin2MobileはUserAgentを判別し適用するSkinを変更します

docomo、au、SoftBank、Willcomを携帯端末、iPhone、Androidをスマートフォンとして認識します。

キャリア、機種によって端末を分類し、より詳細に適用するSkinを選択させることができます。

スマートフォンはiPhone、Androidを判別するのみで機種毎の細かな分類は行えません。

Skinの命名には以下のようなルールがあります。 PC用のSkin名が[default]の場合

[プラットフォーム短縮名]は以下の通り

• docomo ⇒ d
• au ⇒ e
• SoftBank ⇒ s
• Willcom ⇒ w
• iPhone ⇒ ip
• Android ⇒ an

[機種名]はスキン/テンプレート変数TerminalModelを利用

default/d/F906i　等と命名する この例はdocomoのF906iに適用される

[プラットフォーム名]は以下の通り

• docomo ⇒ docomo
• au ⇒ ezweb
• SoftBank ⇒ softbank
• Willcom ⇒ willcom
• iPhone ⇒ iphone
• Android ⇒ android

default/docomo　等と命名する

default/mobile　と命名すること

default/sphone と命名すること

携帯特有の絵文字の扱いについて説明します。 絵文字変換に関して以下のサイトを大いに参考にさせて頂いております。

http://www.dspt.net/tools/emoji/

http://www.sound-uz.jp/php/note/mobile

AdjustSkin2Mobileはdocomoの絵文字を基本として設計されています。 絵文字を各キャリア用（PC含む）へコンバートして出力します。

• docomo⇒docomo準拠のためそのまま出力
• au⇒localsrcを利用して端末内の絵文字へ変換
• SoftBank⇒プラグイン内の対応表により変換
• Willcom⇒Willcom準拠のコンバート
• iPhone⇒gif画像へコンバート
• Android⇒gif画像へコンバート
• PC⇒gif画像へコンバート

CMSとして使われることを前提に設計されており、携帯からのコメント入力などは対応していません。 アイテム追加、コメント投稿などはPCから行われることを前提に作られています。

（次バージョンで対応予定です）

携帯専用の絵文字を入力したいときはdocomoが提供しているi絵文字を使うとよいでしょう。

http://www.nttdocomo.co.jp/service/imode/make/content/pictograph/tool/

• スキン/テンプレート変数 <%AdjustSkin2Mobile(name)%>「name」で指定したUserAgentの情報を表示します。
  • isMobile⇒携帯端末ならtrue、携帯端末以外ならfalseを返す
  • isiPhone⇒iPhoneならtrue、iPhone以外ならfalseを返す
  • isAndroid⇒Android端末ならtrue、Android端末以外ならfalseを返す
  • CarrierName⇒キャリア名
  • TerminalModel⇒機種名
  • TerminalWidth⇒携帯端末のブラウザが利用できる画面横幅
  • TerminalHeight⇒携帯端末のブラウザが利用できる画面高さ
  • RoundWidth⇒TerminalWidthを3段階にまとめた値です

<%AdjustSkin2Mobile(CarrierName)%>は以下の値を返します

• docomo
• softbank
• ezweb
• willcom
• iphone
• android
• pc

• TerminalWidthが400px以上⇒480を返す
• TerminalWidthが150px以下⇒120を返す
• 上記以外⇒240を返す

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が指定できないようです。寂しいデザインになってしまいますがマイノリティだということで妥協することをお勧めします。

• 管理画面からプラグインをアンインストール

• version 0.1 [2009-07-31]
  • はじめてのリリース
• version 0.12 [2009-10-27]
  • SqlTablePrefixをサポートしました
  • CarrierName、TerminalModelでifが使えるようになりました
• version 0.13 [2010-01-19]
  • event_PostSkinParse時に行っていた文字コードの宣言をevent_PostSkinParse時に変更しました
• version 0.2 [2011-01-14]
  • スマートフォンに対応しました

• NP_MobileWithSinglePage.php
• NP_Mobile.php