plugins:adjustskin2mobilelite

NP_AdjustSkin2MobileLite

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

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

このプラグインの特徴

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

AjustSkin2Mobileとの違い

Net_UserAgent_Mobileが不要になりました。

そのため、機種毎の振り分け、画面サイズの取得、機種名の取得が利用できなくなっています。

インストール方法

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

このプラグインの使い方

最もシンプルな機能

AjustSkin2MobileLiteはUserAgentを判別し適用するSkinを変更します :plugins:ajustskin2mobile_02_1.jpg

携帯端末/スマートフォンとして認識されるUserAgent

docomo、au、SoftBank、Willcomを携帯端末、iPhone、Androidをスマートフォンとして認識します。 :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/adjustskin2mobilelite.txt · 最終更新: 2011/07/01 19:25 (外部編集)