ケータイ電話に対応させました＆mobile向けTIPS

2007年04月14日プログラミングTIPS

「Nucleusを半分やめて、100倍速を実現しました！」の時に、今まであった機能がなくなりました。

ケータイ電話からのブログ表示機能

です。

ケータイ電話からのアクセスがほとんどなかったのと、実装するのが面倒だったので無くしたわけですが、もう一度復活させました。
良く考えたら、定期的にケータイからアクセスする人はいなくても、他のケータイサイトからのリンク経由で見に来る人はいるかもしれないことに気付きました。

試しに、携帯電話用表示対応前に、自分のケータイ（旧vodafone2.5G機種）で「[Z]ZAPAブロ～グ2.0」トップページにアクセスしてみたところ、ファイルサイズが大きすぎて開けませんでした。
今は携帯電話用表示に対応させたので、問題なく閲覧できています。

出先などでケータイからチェックしたくなったときは、ケータイからもチェックできるようになりました。
（と言っても、PCブラウザと違ってサイズ制限があるので、画像表示機能などは搭載していませんが）
ケータイ派の人は、試しに携帯電話からアクセスしてみてください。
何か表示がおかしい点などがありましたら、使用機種とバグ内容を連絡いただけると助かります。

以下、ケータイ向けの表示機能を搭載したときのPHPプログラミングTIPSです。
PHPでケータイ電話向けにHTML内容を送信するために、以下の方法で変換していきました。
参考に、サンプルコードも載せておきます。

1. ケータイ機種判定（PEARバージョン）

ケータイ向けに表示をカスタマイズするには、まずアクセスしてきた端末がケータイ電話かどうか判定しなくてはいけません。

最初、PEAR :: Package :: Net_UserAgent_Mobileを使おうとしました。
簡単にケータイ電話の判別をしてくれることで有名なので、このpearライブラリをインストールしてみました。（ベータ版なので、-fオプションを付けないとインストールできませんでした）

pear install -f Net_UserAgent_Mobile

インストールが終わったら、例えば、

//PEARライブラリ読み込み
require_once('Net/UserAgent/Mobile.php');

$agent = &Net_UserAgent_Mobile::singleton();

if($agent->isDoCoMo()){
  $agent = "DoCoMo";
}else if($agent->isVodafone()){
  $agent = "vodafone";
}else if($agent->isEZweb()){
  $agent = "ezweb";
}else{
  $agent = "PC";
}

などとすれば、簡単に各ケータイ電話会社の判別ができます。
ケータイごとに違う絵文字を使って見栄えを優先させたいときには便利なライブラリです。

ところが、このライブラリはまだベータバージョンで（0.30.0(beta)）、実際に使ってみても「開発途上」という印象を受けました。
また、思っていたよりも処理速度の低下が見られました。
PEARライブラリを読み込んで、携帯電話の判定をするだけで、ブログトップページの表示が

0.0045sec　→　0.0055sec

へと遅くなりました。（微々たるものかもしれませんが…）
別に、各電話会社ごとに処理を分けて、違う絵文字を表示することなどは考えていなかったので、もう少しシンプルな方法で実現させることにしました。

2. ケータイ機種判定（ユーザーエージェントバージョン）

次のケータイ機種判定は、端末から送られてくるユーザーエージェントで判別する方法です。
各携帯電話（PHS）会社のUAはそれぞれ、

作ろうiモードコンテンツ：ユーザエージェント一覧 | サービス・機能 | NTTドコモ
ソフトバンク：ユーザーエージェントについて
KDDI au: そのほかの技術情報 > ユーザーエージェント
WILLCOM｜ウィルコムの電話機向けホームページの作成方法

に載っているので、このページを見れば判定できます。

例えば、ドコモのFOMAを判定したいのであれば、こんな感じで判定できます。

//FOMA判定
if(stripos( $_SERVER["HTTP_USER_AGENT"], 'DoCoMo/2') !== false){
  agent = "ドコモ FOMA (XHTML)";
}

送られてきたユーザーエージェントから、アクセス端末がケータイ電話かそうでないかを判別できます。
FOMA、mova、SoftBank、Vodafone、J-PHONE、KDDI、UP.Browser、DDIPOCKET、WILLCOMなどに対応させましたが、PEARライブラリ読み込み時のような処理速度の低下は見られませんでした。

3. ケータイ向けに表示内容をカスタマイズ

ケータイ端末からのアクセスが判別できたら、次はケータイ電話向けにブログの内容をカスタマイズして出力します。

ケータイ電話にはPC用のブラウザと違って、使えないHTMLタグや使うべきでないHTMLタグが存在します。
今回は、単純にstrip_tags関数を利用し、第二引数で取り除かないHTMLタグを指定して、HTMLタグを除去しました。
例えば、こんな感じでタグを除去します。

//HTMLタグを取り除く
strip_tags($body, '<br><a><ul><li><dl><dt><dd><p><h1><h2><h3><h4><blockquote>');

もちろん、PCと表示内容を変える必要があれば携帯電話向けに表示用テンプレートもカスタマイズしておきます。

4. ケータイ向けにシフトJISに変換して送信

最後に、ケータイ電話向けにシフトJISに変換すれば、ケータイ電話で表示できるようになります。
例えば、元々のエンコーディングがEUC-JPの場合、以下のようにシフトJISに変換して送信します。

//ケータイ用にシフトJISで送信
header('Content-Type: text/html; charset=Shift_JIS');
echo mb_convert_encoding($html, "SJIS","EUC-JP");

5. エミュレータと実機で表示確認

以上4つの手順が終了したら、各携帯電話（PHS）会社で無料で配布されている「携帯電話エミュレータ（シミュレータ）」を使って表示を確認します。
iモードHTMLシミュレータやOpenwave SDKなどをダウンロードしてインストールすれば、PCを利用してケータイ電話アクセス時の表示内容を確認することができます。
一応、実際に自分のケータイ電話でもアクセスしてみて、正常に表示できていれば完成です！

←一つ前の記事へ

ZAPAブログ2.0