AjustSkin2MobileはUserAgentを判別しSkinを変更します。 docomo、au、SoftBank、Willcomを携帯端末として認識し、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もインストールする必要があります。

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を携帯端末として認識します。

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

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

[キャリア短縮名]は以下の通り

• docomo ⇒ d
• au ⇒ e
• SoftBank ⇒ s
• Willcom ⇒ w

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

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

[キャリア名]は以下の通り

• docomo ⇒ docomo
• au ⇒ ezweb
• SoftBank ⇒ softbank
• Willcom ⇒ willcom

default/docomo　等と命名する

default/mobile　と命名すること

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

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

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

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

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

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

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

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

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

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

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

• docomo
• softbank
• ezweb
• willcom
• pc

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

TerminalWidthが不明の場合は240が返されます

NetFrontブラウザの画面解像度はおよそ120px、240px、480pxの3つに分類されます。 トップバナーなど画面幅いっぱいに画像を表示したいとき少なくともその3種類を出し分ける制御が必要となります。

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時に変更しました

• NP_MobileWithSinglePage.php
• NP_Mobile.php