Hatena::ブログ(Diary)

komoriyaのはてなダイアリー

2009-01-15

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

変換ルール

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

  • プロパティの変換
タグプロパティDoCoMoSoftbank
hrtext-alignfloatfloat
hrcolorborder-colorborder-color
  • プロパティと値の変換
タグプロパティ:値DoCoMoSoftbank
divfont-size:10pxfont-size:xx-smallfont-size:small
divfont-size:16pxfont-size:xx-largefont-size:xx-large
spanfont-size:10pxfont-size:xx-smallfont-size:small
spanfont-size:16pxfont-size:xx-largefont-size:xx-large
imgtext-align:leftfloat:leftfloat:left
imgtext-align:rightfloat:rightfloat:right
imgtext-align:centerfloat:nonefloat:none

その他

  • CPANに始めてアップしていろいろてこずりました。そしてドキュメントのインデントがなんか汚いw
  • willcomどうしようかな

こまつこまつ 2009/01/16 13:03 おお、polyに続いてkomoriyaさんも華麗にCPANデビューですね!Webから離れてしまいましたがあの頃がなつかしい。。

ちゃらちゃら 2009/01/17 10:09 是非ともこのPHPバージョンも!!

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証