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ファイルが公開されています

ケータイ向けサイトを作っていく上で一番問題となるのが、ドコモ端末が外部CSSファイル読み込みや、styleタグでの内部参照に対応していないことです。

PerlではHTML::DoCoMoCSS [hatena.ne.jp] というライブラリがあり、かねがね羨ましく思っており、いつか移植したいなと思っていたりしたのですが、ついにPHPでもこの問題を解決してくれるライブラリが登場しました。

これは素晴らしすぎます。

→　Asial blog　DoCoMo向けにCSS指定をインラインに埋め込むPHPライブラリ「toInlineCSSDoCoMo」作りました [asial.co.jp]

→　ゆどうふログ　勘違いのないようにtoInlineCSSDoCoMoの仕様について言っとくか [hatena.ne.jp]

oInlineCSSDoCoMo.phpは、基本的にはid:tokuhiromさんの作った上記のHTML::DoCoMoCSSをPHP用にリライトしたもので、それに若干の機能追加をしています。

とのことですので、基本的には上記Perlのライブラリを踏襲したつくりとなっているようです。

動作環境としてはPHP5.1以上とのことで、残念ながら4系で動いているサイトには使えないようです。

インストールは簡単で、

# pear install HTML_CSS

で、必要なPEARライブラリをインストールして、ダウンロードしたファイルを展開するだけです。
中に入っている「sample.php」にアクセスすれば、サンプルが表示されると思います。

使い方も簡単で、表示させたいHTMLの内容を取得して、toInlineCSSDoCoMoに渡してやるだけでＯＫのようです。

<?php
require_once '../lib/toInlineCSSDoCoMo.php';

$document = file_get_contents('sample.html');
try {
  echo toInlineCSSDoCoMo::getInstance()->setBaseDir('./')->apply($document);
} catch (RuntimeException $e) {
  var_dump($e);
} catch (Exception $e) {
  var_dump($e->getMessage());
}
?>

これでケータイサイトのHTML作成が相当楽になりますね。

早速、自分のサイトにも適用して試してみたいと思います。
ただ、テンプレートシステムにSmartyを使っているので、サンプルのままでは行かない感じです。
この辺りもまとまりましたら、また記事にしたいと思います。

関連：

• 絵文字ライブラリ「sfPictogramMobilePlugin」がバージョンアップし、PEARパッケージ化されたようです
• symfony用の絵文字プラグイン「sfPictogramMobilePlugin」
• Asial blogで絵文字データベースと相互変換マッピングデータベースのJSONファイルが公開されています

本日2008年7月8日付けで、auのEZサーバのIPアドレス帯域が追加になったようです。

→　KDDI au　EZfactory　技術情報　ＩＰアドレス帯域 [au.kddi.com]

ケータイキャリア・クローラIPアドレスWikiページのデータも合わせて修正を行いました。

今回追加となったのは「121.111.227.160/27」です。

7/8付けの修正となっていますが、いつから適用される帯域かは明記がありません。
早めの対応をしておいた方がよさそうです。

ケータイ向けサーバを管理している方は作業が必要になります。
ご注意ください。

関連：

• 2008年9月下旬にドコモのIPアドレスが追加になるようです
• ケータイキャリアやクローラのIPアドレス情報を共有するためのWikiを作ってみました
• ケータイからのみアクセスを許可する.htaccess

もはやケータイ電話業界では欠かせない存在となったQRコードですが、グーグルが提供しているグラフを書くためのAPI「Google Chart API」に、QRコードを生成する機能が追加されたようです。

→　Google Chart API – Developer’s Guide　QR codes [google.com]

従来は、qr_img [swetake.com] など別プログラムを利用しなければならなかったのですが、こちらを使えばimgタグを書くだけですみますので、大幅に楽ができますね。

使い方としては次の通りです。

http://chart.apis.google.com/chart?
cht=qr [固定]
&chs=[横幅]x[縦幅]
&chl=[QRコードで表示する文字列(URLなど)　※URLエンコードしてセット]
&choe=[文字コード]

より具体的な例としては次のようになります。

http://chart.apis.google.com/chart?cht=qr
&chs=150x150&chl=http%3A%2F%2Fke-tai.org%2F

ke-tai.orgのURL

日本語を使う場合は、choeパラメータで文字コードを指定してやればOKのようです。
UTF-8またはShift_JISが利用できます。

http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=
%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF%E4%B8%96%E7%95%8C&choe=Shift_JIS

日本語のサンプル

関連：

• 「Google Chart API」をケータイから使ってみる
• 「Google Static Maps API」を使って携帯でGoogleマップを表示する
• Google、モバイル向けクローラーの情報公開へ

ウノウラボさんのブログ内に、「Ext_JS + PHP」を使ったサーバサイドで動くケータイシミュレータ「mobile-simulator-1.0」が公開されています。

→　ウノウラボ　Ext JSをUIに使って携帯サイトのシミュレータを作ってみた [unoh.net]

この種のエミュレータでは、「ssb – server side browser」 [coderepos.org] が有名ですが、ruby環境に慣れてない人はセットアップが大変だったりするので、今回のようにPHPで出来ていた方が、いろんなサーバで動かすことができますし、個人的には嬉しかったりします。

ブログの説明を見るとセットアップ作業が大変なように感じますが、実際にやってみたところ意外とあっさりと動きました。

詳しくは、mobile-simulator自体にわかりやすいReadMeファイルが付いていますので、そちらを見るのが良いと思うのですが、下記のように表にまとめてみました。

* インストールする権限がない場合は、関連するパッケージをダウンロードし、適切な場所に設置することで動作させることも可能です。

動作中の画面

ヘッダ情報が見れたり、書き換えられたりするのは便利です。
こういったエミュレータの選択肢が増えるのは嬉しいですね。

関連：

• 3キャリア対応のケータイエミュレータ、「P1 Emulator」に30日ライセンスが登場
• 3キャリア対応のケータイエミュレータ、P1エミュレータ正式版が発売されました。さて気になるお値段は？
• 端末IDを設定でき、ケータイサイトの開発に便利なFirefoxアドオン「Modify Headers」