ke-tai.org ケータイサイト開発に関わる記事・情報を紹介

昨日から、ドコモで外部CSSやスタイルタグが利用できるようになるＰＨＰライブラリ、「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歩前進です。

関連：

• ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」
• 絵文字ライブラリ「sfPictogramMobilePlugin」がバージョンアップし、PEARパッケージ化されたようです
• Asial blogで絵文字データベースと相互変換マッピングデータベースのJSONファイルが公開されています