plugins:adjustskin2mobile

差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

plugins:adjustskin2mobile [2011/03/23 21:28] (現在)
ライン 1: ライン 1:
 +====== NP_AdjustSkin2Mobile ======
 +
 +[[plugins:​AdjustSkin2MobileLite|NP_AdjustSkin2MobileLite]]を利用されることをおすすめします。
 +
 +
 +AjustSkin2MobileはUserAgentを判別しSkinを変更します。
 +docomo、au、SoftBank、Willcomを携帯端末、iPhone、Androidをスマートフォンとして認識し、PC|携帯|スマートフォン|キャリア|機種毎に適用するSkinを選択してくれます。
 +
 +
 +^General Plugin info ^^
 +^作者: | [[plugins:​authors:​nakazoe|nakazoe]] |
 +^最新のバージョン:​ | 0.2 |
 +^Nucleus対応バージョン:​ | 3.41 or later |
 +^入手場所:​ | [[http://​japan.nucleuscms.org/​bb/​viewtopic.php?​t=4473|フォーラムの記事より]] |  ​
 +
 +
 +
 +===== このプラグインの特徴 =====
 +AjustSkin2Mobileは携帯端末とスマートフォンのUserAgentを判別し適用するSkinを変更します。
 +{{:​plugins:​ajustskin2mobile_02_1.jpg|:​plugins:​ajustskin2mobile_02_1.jpg}}
 +
 +==== NP_MobileWithSinglePageとの違い ====
 +NP_MobileWithSinglePageを大いに参考にさせて頂いて作成されています。
 +NP_MobileWithSinglePageは携帯向けにスキンを自動修正することを目的に作成されているのに対し、このAdjustSkin2Mobileは文字コード、絵文字以外の自動修正を行いません
 +
 +
 +=====インストール方法=====
 +
 +  - zipファイルを解凍します
 +  - NP_AdjustSkin2Mobile.phpをnucleus/​plugins/​へコピー
 +  - adjustskin2mobileフォルダを丸ごとnucleus/​plugins/​へコピー
 +  - PEAR::​Net_UserAgent_Mobileをインストール
 +  - 管理画面からプラグインをインストール
 +
 +
 +====Net_UserAgent_Mobileのインストール====
 +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を変更します
 +{{:​plugins:​ajustskin2mobile_02_1.jpg|:​plugins:​ajustskin2mobile_02_1.jpg}}
 +
 +
 +
 +
 +====携帯端末として認識されるUserAgent====
 +docomo、au、SoftBank、Willcomを携帯端末、iPhone、Androidをスマートフォンとして認識します。
 +{{:​plugins:​ajustskin2mobile_02_2.jpg|:​plugins:​ajustskin2mobile_02_2.jpg}}
 +
 +
 +
 +
 +
 +
 +
 +====より詳細な振り分け====
 +キャリア、機種によって端末を分類し、より詳細に適用するSkinを選択させることができます。
 +
 +スマートフォンはiPhone、Androidを判別するのみで機種毎の細かな分類は行えません。
 +{{:​plugins:​ajustskin2mobile_02_3.jpg|:​plugins:​ajustskin2mobile_02_3.jpg}}
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +==== Skinの命名ルール ====
 +Skinの命名には以下のようなルールがあります。
 +PC用のSkin名が[default]の場合
 +
 +=== 【機種用Skin】 default/​[プラットフォーム短縮名]/​[機種名] ===
 +[プラットフォーム短縮名]は以下の通り
 +
 +  * docomo ​  => d
 +  * au       => e
 +  * SoftBank => s
 +  * Willcom ​ => w
 +  * iPhone ​  => ip
 +  * Android ​ => an
 +
 +[機種名]はスキン/​テンプレート変数TerminalModelを利用
 +
 +default/​d/​F906i 等と命名する
 +この例はdocomoのF906iに適用される
 +
 +=== 【プラットフォーム用Skin】 default/​[プラットフォーム名] ===
 +[プラットフォーム名]は以下の通り
 +
 +  * docomo ​  => docomo
 +  * au       => ezweb
 +  * SoftBank => softbank
 +  * Willcom ​ => willcom
 +  * iPhone ​  => iphone
 +  * Android ​ => android
 +
 +default/​docomo 等と命名する
 +
 +
 +=== 【携帯 用Skin】 default/​mobile ===
 +default/​mobile と命名すること
 +
 +
 +=== 【スマートフォン 用Skin】 default/​sphone ===
 +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段階にまとめた値です
 +
 +
 +
 +
 +====CarrierNameが返す値====
 +<​%AdjustSkin2Mobile(CarrierName)%>​は以下の値を返します
 +
 +  * docomo
 +  * softbank
 +  * ezweb
 +  * willcom
 +  * iphone
 +  * android
 +  * pc
 +
 +
 +====RoundWidthの仕様====
 +  * TerminalWidthが400px以上=>​480を返す
 +  * TerminalWidthが150px以下=>​120を返す
 +  * 上記以外=>​240を返す
 +
 +TerminalWidthが不明の場合、携帯端末は240、それ以外のスマートフォンやPCは480が返されます
 +
 +
 +
 +
 +
 +====RoundWidth Tips====
 +NetFrontブラウザの画面解像度はおよそ120px、240px、480pxの3つに分類されます。
 +トップバナーなど画面幅いっぱいに画像を表示したいとき少なくともその3種類を出し分ける制御が必要となります。
 +スマートフォンは一律480pxを返します。
 +
 +toplogo_120.jpg、toplogo_240.jpg、toplogo_480.jpgと画像を用意し
 +
 +<img src="​./​images/​toplogo_<​%AdjustSkin2Mobile(RoundWidth)%>​.jpg">​
 +
 +のように記述するとよいでしょう。
 +
 +
 +
 +====doif ifを使ってデザインを変更する====
 +テンプレート変数CarrierName、TerminalModelはdoifに対応しています
 +
 +スキンに以下のように記述することができます
 +
 +<​%if(AdjustSkin2Mobile,​CarrierName,​docomo)%>​
 +yes
 +<​%else%>​
 +no
 +<​%endif%>​
 +
 +
 +==== ソースの記述に関するTips ====
 +ソースは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]
 +    * スマートフォンに対応しました
 +
 +===== 同類のプラグイン =====
 +  * [[plugins:​mobilewithsinglepage|NP_MobileWithSinglePage.php]]
 +  * [[plugins:​Mobile|NP_Mobile.php]]
 +
 +
  
 
plugins/adjustskin2mobile.txt · 最終更新: 2011/03/23 21:28 (外部編集)