3キャリア対応のCSS変換モジュールHTML::MobileJpCSS

DoCoMo,EZweb,Softbankを共通の外部CSSファイルからスタイルを反映させるモジュールを作りました。

http://search.cpan.org/~komoriya/HTML-MobileJpCSS-0.01/

3キャリア間での変換の必要性

DoCoMoでは外部CSSを参照できずインラインのみの対応となっています。

DoCoMoのインライン化についてはid:tokuhiromさんの作成したHTML::DoCoMoCSSこちらで対応が可能なのですが、3キャリア間で共通のCSSを参照するとなると属性の指定方法に微妙な差異が問題となります。

例えば小さいフォントを表示したい時は、

DoCoMo   --- font-size:xx-small
EZweb    --- font-size:10px
Softbank --- font-size:small

と属性の値が異なります。

hrタグに色をしていしたいときなどは、

DoCoMo   --- <hr style="border-color:#FF0000;" />
EZweb    --- <hr style="color:#FF0000;" />
Softbank --- <hr style="border-color:#FF0000;" />

とタグにより属性名が異なります。

このような差異を吸収して1つのテンプレート、共通のCSSファイルでケータイサイトが作成ができればなといった感じです。

使い方

SYNOPSIS

メソッド

基本的にHTML::DoCoMoCSSを参照させていただきました。

(中身はパフォーマンスの都合上正規表現でごりっと置換しています)

CSS

EZwebのCSSを基本ファイルとしHTTP::MobileAgentにてキャリア判別を行い、DoCoMo,Softbankならインライン化&変換、EZwebならデフォルトでは何もしないという仕様になっています。

istyle

DoCoMoならistyleの変換も行います

istyle="1" => style="-wap-input-format:&quot;*&lt;ja:h&gt;&;"
istyle="2" => style="-wap-input-format:&quot;*&lt;ja:hk&gt;&quot;"
istyle="3" => style="-wap-input-format:&quot;*&lt;ja:en&gt;&quot;"
istyle="4" => style="-wap-input-format:&quot;*&lt;ja:n&gt;&quot;"

オプション

agent
- 必要な場合にHTTP::MobileAgentのインスタンスを渡す
inliner_ezweb
- EZwebにて外部CSSの読み込みが終わるまでのレイアウト崩れるのが気になるみたいなときにtrueの値を渡せばEZwebもCSSをインライン化します
base_dir
- XHTML内のCSSのhrefと繋げCSSファイルのパスになるディレクトリの指定
css_file
- XHTML内にhrefを記述せずにCSSファイルのパスを直接して読み込ませます
style_map
- キャリア別の差異のマッピングをhashの形式にて上書きします

変換ルール

デフォルトで適用される変換については、共通のCSSファイルにEZwebの記法で記述したものを以下のルールで変換します。

プロパティの変換

タグ	プロパティ	DoCoMo	Softbank
hr	text-align	float	float
hr	color	border-color	border-color

プロパティと値の変換

タグ	プロパティ:値	DoCoMo	Softbank
div	font-size:10px	font-size:xx-small	font-size:small
div	font-size:16px	font-size:xx-large	font-size:xx-large
span	font-size:10px	font-size:xx-small	font-size:small
span	font-size:16px	font-size:xx-large	font-size:xx-large
img	text-align:left	float:left	float:left
img	text-align:right	float:right	float:right
img	text-align:center	float:none	float:none