plugins:adjustskin2mobile

NP_AdjustSkin2Mobile

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

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

General Plugin info
作者: nakazoe
最新のバージョン: 0.2
Nucleus対応バージョン: 3.41 or later
入手場所: フォーラムの記事より

このプラグインの特徴

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

NP_MobileWithSinglePageとの違い

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

インストール方法

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

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

携帯端末として認識されるUserAgent

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

より詳細な振り分け

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

スマートフォンはiPhone、Androidを判別するのみで機種毎の細かな分類は行えません。 :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/adjustskin2mobile.txt · 最終更新: 2011/03/23 21:28 (外部編集)