DoCoMo向けにCSS指定をインラインに埋め込むPHPライブラリ「toInlineCSSDoCoMo」作りました
こんにちは。Windowsの最大の発明はゴミ箱の標準装備だと思っている亀本です。
追記：Mac信者の某氏にゴミ箱はWindowsの発明じゃないと突っ込まれてしまいました。すみません<(｡_｡)>
昨日はグリーさんのオープンソース勉強会に参加してきました。
今回の講師はDeNAの川崎さんで、わりとモバイル屋さんな自分としてはぜひともチェックしておきたいなと思って参加してきました。
勉強会・懇親会ともなかなか面白い話が聞けたり、変な人がいっぱいしたりしてとても面白かったです。
モバイルをやっているといつも面倒なのは、テンプレートの扱いです。
そのあたりのまとめは以前このブログでうちの高橋さんが超まとめてくれた記事があるので、そちらをご参照ください。
とくにDoCoMoのCSS(i-CSS)は開発者泣かせですね。インラインのみに対応とか、開発しにくくて涙ちょちょぎれそうです。
さてさてそんなDoCoMoのCSSですが、PerlにはHTML::DoCoMoCSSというCPANライブラリがあります。
styleタグで指定した外部CSSファイルを読み込んで、インラインのstyle要素に入れ込んでくれるというすぐれものです。
(MobaSiFもそうですが、Perlの周辺はモバイル関連のライブラリが非常に充実していますね。
なんだかあちこち探してみると、いろいろと便利そうなライブラリが転がっています。)
せっかくそんな素晴らしいライブラリがあるんですが、僕はPerl？イエモンですね、把握しました。みたいな生粋のPHPerなので、PHPしか使えません。
PerlなんてわかんないよPHPじゃないと使えないよ(´･ω･`)ｼｮﾎﾞｰﾝって思ったので、これをPHPで作ってみました。
ファイル:toInlineCSSDoCoMo.tar.gz
(追記2008/07/09 18:19：getInstance()にstatic指定が抜けていたので修正しました)
追記：バージョンアップした物をHTML_CSS_Mobileという名称に変更して、CodeReposにimportしました。
http://coderepos.org/share/browser/lang/php/HTML_CSS_Mobile
同梱物は
toInlineCSSDoCoMo/
+ lib/
++ toInlineCSSDoCoMo.php
++ selectorToXPath.php
+ sample/
++ sample.php
++ sample.html
++ sample.css
です。
toInlineCSSDoCoMo.phpは、基本的にはid:tokuhiromさんの作った上記のHTML::DoCoMoCSSをPHP用にリライトしたもので、それに若干の機能追加をしています。
selectorToXPath.phpもPerlのHTML::Selector::XPathというid:miyagawaさんのライブラリの移植です。
ただ、selectorToXPathの方は自分自身がXPathもCSSもさほど詳しくなかったので、理解できるレベルでしか移植していません。なので単体での配布はちょっと見送りましたが、大体の場合はうまく動くと思います。
なお、動作環境としてはPHP 5.1以上になります。
以下に簡単に利用方法を説明しておきます。
このライブラリ自体がPEAR::HTML_CSSに依存しているので、まずそちらをインストールします。
% sudo pear install HTML_CSS
あとは、上記のtarボールをDLしてきて、普通に展開して下さい。
% wget http://blog.asial.co.jp/data/toInlineCSSDoCoMo.tar.gz
% tar xvzf toInlineCSSDoCoMo.tar.gz
サンプルスクリプトは以下のようになります。
<?php
require_once 'lib/toInlineCSSDoCoMo.php';
$document = file_get_contents('path/to/file.html');
try {
echo toInlineCSSDoCoMo::getInstance()->setBaseDir('path/to/css_basedir/')->apply($document);
} catch (Exception $e) {
var_dump($e);
}
これで、linkタグで外部ファイルとして指定してあるCSS、および<style>タグで記述したCSSをパースして、よしなにインラインのstyle要素に埋め込んでくれます。
なお、CSSはhttp経由で取ってくるわけじゃないので、ちゃんとcss_basedirをパス指定してあげてください。
実際にどんな感じになるかは、sampleディレクトリの中を見てもらえればわかりやすいかと思いますが、
sample.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html lang="ja">
<head>
<link rel="stylesheet" href="sample.css" />
<style type="text/css">
div.hoge {
color:#00FF00;
}
div.hoge a {
color:#FFFF00;
}
</style>
</head>
<body>
<h1>test</h1>
<div>hogehoge</div>
<div class="hoge">test<a href="" style="font-size:8px">test</a></div>
</body>
</html>
sample.css:
body {
margin: 0px;
}
h1 {
font-size: 11px;
}
div {
font-size: 10px;
}
a:hover {
color: #0000FF;
}
結果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html lang="ja">
<head><style type="text/css"><![CDATA[
a:hover{color:#0000FF;}
]]></style></head>
<body style="margin:0px;">
<h1 style="font-size:11px;">test</h1>
<div style="font-size:10px;">hogehoge</div>
<div class="hoge" style="font-size:10px;color:#00FF00;">test<a href="" style="font-size:8px;color:#FFFF00;">test</a>
</div>
</body>
</html>
という感じになります。
現段階で実装してあること：
・linkタグで指定した外部CSSの読み込み、インライン化
・ファイル内のstyleタグCSSの読み込み、インライン化
・インライン化したlinkタグやstyleタグの削除
・a:hover,a:link,a:visited,a:focusのstyleタグへの 埋め込み
・複数class指定への対応
まだ対応していないこと：
・@importなどの対応
・a:以外の疑似クラスにもうちょっときちんと対応
こんな感じのライブラリです。
これでDoCoMoのCSSをインライン以外でも書けるようになるので、テンプレート作成がだいぶ楽になるんじゃないかなー、と思います。
もしお役に立てば幸いです。
なお、このライブラリを完成させるにあたり、id:maru_ccさん、うちの会社の（笑）熊谷さんにはデバッグ、アイデア出し等でひじょーにお世話になりました。
この場をお借りしてお礼申し上げます。
※おまけですが、selectorToXPathの使い方はこんな感じです。
<?php
require_once 'lib/selectorToXPath.php';
$selector = 'li.hogehoge';
$xpath = selectorToXPath::toXPath($selector);
var_dump($xpath);
たぶん、これはこれ単体で結構使えると思うので、問題なさそうなら単体配布しようかなー。。。なんて。
