Craftworks

携帯サイトの CSS 対応は、今まで HTML::DoCoMoCSS を使用していましたが、01/15 に HTML::MobileJpCSS がリリースされていたので試してみました。

どういうことをしてくれるモジュールかと言うと、例えば hr タグは色を付けたいときに、キャリアによって下記のようにスタイルの指定が違います。

DoCoMo   <hr style="border-color:#FF0000;" />
au       <hr style="color:#FF0000;" />
SoftBank <hr style="border-color:#FF0000;" />

これを、ひとつの指定でモジュール側で 3 キャリア分の指定方法の振り分けを自動でやってくれるというものです。

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

こんな感じで CSS を指定して、

hr {
    margin: 2px 0;
    padding: 0;
    border: 0 solid #FFF;
    width: 100%;
    height: 1px;
}

*.red    { color: #FF0000; }
*.green  { color: #00FF00; }
*.blue   { color: #0000FF; }

テンプレート側でこんな感じにして hr 毎に色を変えられることができます。

<hr class="green" />

早速使ってみたのですが、hr の色指定は border-color じゃなくて、background-color でやりたかったので、new() のオプションで変換ルールのマッピングを上書きできると pod に書いてありましたが、バージョン 0.01 の現時点では実装がありませんでしたので以下のように修正しました。pod の style_map のコード例も誤字でキーが style になっていますので注意。

--- lib/HTML/MobileJpCSS.pm     2009-01-15 14:50:46.000000000 +0900
+++ /usr/lib/perl5/site_perl/5.8.8/HTML/MobileJpCSS.pm  2009-02-02 09:47:49.000000000 +0900
@@ -137,4 +137,7 @@
         $self->{agent} = HTTP::MobileAgent->new();
     }
+    if ($self->{style_map}) {
+        $StyleMap = { %$StyleMap, %{$self->{style_map}} };
+    }
 }

また、CSS で全てのタグに適用されるクラス指定をするときにいつも下記のように書いているのですが、

*.red { color: #FF0000; }

変換が行われませんでしたので、下記のように修正しました。

--- lib/HTML/MobileJpCSS.pm     2009-01-15 14:50:46.000000000 +0900
+++ /usr/lib/perl5/site_perl/5.8.8/HTML/MobileJpCSS.pm  2009-02-02 10:17:53.000000000 +0900
@@ -76,5 +76,5 @@
                 $style->{id}->{$2}    = $css->{$1};
             }
-            elsif (/^(\.(.+))/) {
+            elsif (/^(\*?\.(.+))/) {
                 $style->{class}->{$2} = $css->{$1};
             }

あと、問題点としましては、下記のような複数 class 指定に対応していないのと、

<hr class="green fs10" />

下記の形式でしか CSS ファイルに記述できず、

hr { ... }
#id { ... }
.class { ... }

下記のような形式が使えないと言ったところでしょうか。

hr.class { ... }
div.foo a.bar { ... }

この HTML::MobileJpCSS で不可能なことは、HTML::DoCoMoCSS で可能なので、当面は 3 キャリア共通の CSS に共通設定を記述して、それを DoCoMo のみ、HTML::DoCoMoCSS でインライン展開し、au と SoftBank は端末判別して外部 CSS を読み込ませて、記述方法の差異を吸収するというのがベストプラクティスな気がします。

HTML::MobileJpCSS には、今後のバージョンアップでの対応に期待です。

正規表現でのパースだけでなく、オプションで HTML::DoCoMoCSS と同様に XML::LibXML を使用できるようになってくれれば言うことなしですね。

review Mobile, Perl, cpan, css