plugins:adjustskin2mobilelite

差分

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

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

plugins:adjustskin2mobilelite [2011/07/01 19:25] (現在)
ライン 1: ライン 1:
 +====== NP_AdjustSkin2MobileLite ======
 +
 +AjustSkin2MobileLiteは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=4806|フォーラムの記事より]] |  ​
 +
 +
 +
 +===== このプラグインの特徴 =====
 +AjustSkin2MobileLiteは携帯端末とスマートフォンのUserAgentを判別し適用するSkinを変更します。
 +{{:​plugins:​ajustskin2mobile_02_1.jpg|:​plugins:​ajustskin2mobile_02_1.jpg}}
 +
 +==== AjustSkin2Mobileとの違い ====
 +Net_UserAgent_Mobileが不要になりました。
 +
 +そのため、機種毎の振り分け、画面サイズの取得、機種名の取得が利用できなくなっています。
 +
 +
 +=====インストール方法=====
 +
 +  - zipファイルを解凍します
 +  - NP_AdjustSkin2MobileLite.phpをnucleus/​plugins/​へコピー
 +  - adjustskin2mobileliteフォルダを丸ごとnucleus/​plugins/​へコピー
 +  - 管理画面からプラグインをインストール
 +
 +=====このプラグインの使い方=====
 +
 +====最もシンプルな機能====
 +AjustSkin2MobileLiteは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の命名ルール ====
 +Skinの命名には以下のようなルールがあります。
 +PC用のSkin名が[default]の場合
 +
 +=== 【プラットフォーム用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 と命名すること
 +
 +=== 【命名ルールを設定する】default/​[半角英数] ===
 +プラグイン管理⇒オプション設定で命名ルールを設定することができます
 +
 +==== オプション ====
 +プラグインの管理⇒オプション管理でこのプラグインに関するオプションを設定することができます。
 +
 +=== スマートフォン対応SKINプライオリティ ===
 +スマートフォン用のskinが用意されていない場合の、適用するskinの優先順位を指定します。
 +
 +  * SmartPhone > dfault
 +  スマートフォン用skinがない場合、default skinを表示します
 +
 +  * SmartPhone >​ Mobile > dfault
 +  スマートフォン用skinがない場合、ケータイ用skinを、ケータイ用skinもない場合はdefault skinを表示します
 +
 +=== 絵文字画像へのパス ===
 +絵文字画像へのパスを指定します
 +
 +インストール方法を参照された場合は変更の必要はありません
 +
 +
 +==== 絵文字を扱う ====
 +携帯特有の絵文字の扱いについて説明します。
 +
 +絵文字変換に関して以下のサイトを大いに参考にさせて頂いております。
 +
 +http://​www.dspt.net/​tools/​emoji/​
 +
 +http://​www.sound-uz.jp/​php/​note/​mobile
 +
 +=== このプラグインでの絵文字の扱い ===
 +AdjustSkin2MobileLiteは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=>​キャリア名
 +    * Mobileは240を、それ以外は480を返します
 +
 +====CarrierNameが返す値====
 +<​%AdjustSkin2Mobile(CarrierName)%>​は以下の値を返します
 +
 +  * docomo
 +  * softbank
 +  * ezweb
 +  * willcom
 +  * iphone
 +  * android
 +  * pc
 +
 +
 +====RoundWidthの仕様====
 +  * Mobile ​    => 240を返す
 +  * Mobile以外 => 480を返す
 +
 +
 +====RoundWidth Tips====
 +toplogo_240.jpg、toplogo_480.jpgと命名した画像を用意し
 +
 +<img src="​./​images/​toplogo_<​%AdjustSkin2Mobile(RoundWidth)%>​.jpg">​
 +
 +のように記述するとよいでしょう。
 +
 +====doif ifを使ってデザインを変更する====
 +テンプレート変数CarrierNameは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.2  [2011-07-1] 命名ルール変更対応
 +  * version 0.1  [2011-03-10]
 +    * リリース
 +
 +===== 同類のプラグイン =====
 +  * [[plugins:​mobilewithsinglepage|NP_AdjustSkin2Mobile.php]]
 +  * [[plugins:​mobilewithsinglepage|NP_MobileWithSinglePage.php]]
 +  * [[plugins:​Mobile|NP_Mobile.php]]
 +
 +
  
 
plugins/adjustskin2mobilelite.txt · 最終更新: 2011/07/01 19:25 (外部編集)