昨日から、ドコモで外部CSSやスタイルタグが利用できるようになるPHPライブラリ、「toInlineCSSDoCoMo」に夢中です。
読み手がかたよってしまうことを承知の上で、続編の記事を書かせていただきます。
私の作成したサイトはSmartyを使ったものが多いため、フィルタを作成しようかなと考えていたら、既に同じようなコードを書いていた方がいました。
当ブログにいつもコメントを戴いているmaru_ccさんのブログです。
→ PHPライブラリ「toInlineCSSDoCoMo」をEthnaに組み込んでみた [hatena.ne.jp]
ここでは、Ethnaに「toInlineCSSDoCoMo」を組み込む方法が紹介されています。
Ethna使いの方は要チェックですね。
ひとまず私はSmartyフィルタだけ拝借し、一部を修正して利用させていただくことにしました。
しかし実際に動かしてみたところ、幾つか問題が出てきました。
どれも「toInlineCSSDoCoMo」の問題というよりは、PEARの「HTML_CSS」の問題のようです。
1. Warningエラーが出る
サイト内のHTMLの書き方が汚く、HTMLをパースする際にエラーになってしまうようです。
こちらは少しずつ書き直していくしかないですね。
ただ、「<a id=”anchor” name=”anchor”></a>」のような書き方でも何故かエラーになってしまうため、困っていたりします。
通常のCSSと同じようにエラーを出したくない方は、「@」でエラー抑止をすると良いと思います。
またCSSファイルが読み取れなかった場合でも、Exceptionに飛んでいってしまうため、注意が必要です。
2. 文字化けしてしまう
HTMLヘッダ内の文字コード指定のmetaタグより前にtitleタグがあった場合には、文字化けしてしまうようです。
調べてみると、metaタグを先に書くのが正しいようですね。
今まで特に問題がなかったので気づきませんでした。
3. non-objectエラーで止まってしまうことがある
styleタグで内部CSSを指定した場合に、152行目の「$parent->removeChild($node);」でエラーとなってしまうことがあります。
同じstyleタグの書き方でもエラーが出る場合と、出ない場合があるので詳細は調査中です。(styleタグ自体を削除すると直ります)
ひとまず152行目に、「if ($parent) {」を追加し回避しています。
4. Smarty->fetchでコンテンツを取得してる場合、outputfilterでは対応できないかも
私のサイトでは、よく使う表示ブロックは、Smartyのテンプレート関数を作成し、独自タグを設定しています。
例えば、最新ニュースを表示したいときには、タグ「{displayNews num=”5″}」で表示するようにしています。
(こうすると、あちこちでニュースを表示できて便利なためです)
内部ではsmarty->fetchメソッドでニュースを取得しているのですが、fetchに対してもoutpufilterが効いてしまいます。
fetchされるテンプレートは当然ヘッダ情報などを持っていませんので、outputfilterとtoInlineCSSDoCoMoとの相性は、あまり良くありません。
ということで、「ob_start([コールバック関数])」を利用し、出力直前の情報に対して、処理を行うことにしました。
コールバック関数のサンプルは次の通りです。
<?php
// obフィルタの設定
ob_start('ob_filter_cssdocomo');
function ob_filter_cssdocomo($out)
{
require_once 'toInlineCSSDoCoMo.php';
$basedir = dirname($_SERVER['SCRIPT_FILENAME']) . '/';
try {
$buf = toInlineCSSDoCoMo::getInstance()->setBaseDir($basedir)->apply($out);
} catch (Exception $e) {
// エラー処理へ
}
return $buf;
}
?>
今のところ、これで一通りうまくいっています。
もう少し試行錯誤が必要ですが、快適なHTML製作に向けて、1歩前進です。
関連: