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

ケータイサイトを開発する上でやっかいな問題の一つに、キャリアや機種によって表示できない画像フォーマットがあるという点があります。

今回ご紹介するのは、機種によって画像の拡張子を置き換え、全ての端末で画像を正しく表示するためのPHPサンプルプログラムです。
あくまで拡張子を置換するだけですので、あらかじめ画像をアップロードする際に、「JPG」「GIF」「PNG」と3種類の画像を設置する必要があります。

ユーザエージェントで画像の拡張子を置換するサンプルプログラム

// 対象となる画像ファイル名をセット
$filename = 'testimage.jpg';

// 拡張子を取得
$ext = substr($filename, -4);

// ユーザエージェントの取得
$agent = $_SERVER['HTTP_USER_AGENT'];

if (preg_match('/^DoCoMo/', $agent)) {
	// DoCoMoの場合
	if ('.png' == $ext) {
		// 「.png」→「.gif」に置換
		$ext = '.gif';
	} elseif ('.jpg' == $ext) {
		$nglist = '501i|502i|821i|209i|651i|691i|671i|210i
|F503i|SO503i|D503i|F211i|D211i'; // ※実際には1行で入力
		$pattern = "/^DoCoMo\\/1\\.0\\/.*($nglist)/";
		if (preg_match($pattern, $agent)) {
			// 「.jpg」→「.gif」に置換
			$ext = '.gif';
		}
	}
} elseif (preg_match('/^J-PHONE/', $agent)) {
	// ソフトバンク3G以前の場合
	if ('.gif' == $ext) {
		// 「.gif」→「.png」に置換
		$ext = '.png';
	}
}

// 出力
echo substr($filename, 0, -4) . $ext;

※表示の都合上、改行をいれています

次のルールで置換を行っています。

• ドコモはPNGを表示できないため「.gif」に置換
• ドコモのJPG非対応機種は「.gif」に置換
• ソフトバンクの3G以前の機種はGIFを表示できないため「.png」に置換

厳密な機種判定を行っているわけではないので、多少ルーズな処理ですが、ひとまずこれで「画像が表示されない」というケースは避けることができるはずです。

関連：

• PHPでキャリア毎に振り分けを行うには（ユーザエージェント編）
• ケータイキャリア毎に振り分けを行うには（mod_rewrite編）

少し古い記事ですが、ご紹介します。
先日発売されたばかりのドコモ905i、705iシリーズの一部機種において、フルブラウザ(NetFrontBrowser)上でAjaxが動くようになったようです。

→　ACCESS　報道発表資料　ドコモの905i、705iシリーズ全23機種に「NetFront Browser」を提供 [access-company.com]

→　ITMedia +D Mobile　FOMA 905i／705iシリーズ23機種に「NetFront Browser」を提供 [itmedia.co.jp]

905i、705iシリーズの全機種にNetFrontが搭載されているらしいのですが、Ajaxに対応したのは次の4機種だけとのことです。

• D905i
• F905i
• SO905i
• SO905iCS

開発側としては、全ての機種で動くか、いっそ非対応として欲しいところです。

該当機種をお手持ちの方は、試してみてはいかがでしょうか。

ssbの携帯端末情報リスト更新機能に、当サイトの「ケータイスペック一覧」のデータが使用されることになったようです。

ssbとは、ケータイウェブ開発の際にPC のブラウザで見れるように、HTML をレンダリングしてくれるWeb アプリケーションです。
詳しくは下記のページが参考になります。

→　ssb – server side browser [coderepos.org]
→　coding my life　ssb にクイック機種変更機能を追加 [xrea.com]
→　TokuLog 改め だまってコードを書けよハゲ ssb がすばらしすぎる件 [hatena.ne.jp]

ssbについては、近々記事に書こうと思っていたところでした。
微力ながらお力になれたようで何よりです。
今後もがんばってリストのメンテを続けていきたいと思いますので、皆様もよろしければぜひご協力をお願いいたします。

なお、ケータイスペック一覧ページは、より使いやすく、より正確な情報を保てるように、近々大幅な改修を検討しています。
どうぞご期待ください。

先日の「PHPを使ってたった2行で絵文字を取り除く方法」の応用技です。

SJIS形式の絵文字は、そのままだとDBに格納する際や文字コード変換時に、文字化けを起こしてしまうことがあります。

iモードの場合は、先日ご紹介した、
「iモード絵文字をSJIS形式からUnicode形式に変換するPHPサンプル」
の方法でもエスケープできますが、ドコモのみの方法ですし、やや面倒です。

今回はもっと簡単にエスケープする方法をご紹介します。
この方法であれば、DoCoMo・au・SoftBank（SJIS形式のみ）の絵文字は全てエスケープできますし、後で元に戻すこともできます。

エスケープ処理　サンプルコード

$str = '絵文字[晴れ]';
mb_substitute_character('long');
$str = mb_convert_encoding($str, 'SJIS', 'SJIS');

// 出力
echo $str;

※ソースはSJISで記述します
※Blog上では絵文字は表示できませんので、「晴れ」の部分は絵文字を入力し直してください。

実行例：

「mb_substitute_character」は、存在しない文字コードがある場合（いわゆるゲタになる場合）の処理を設定するためのものです。
「long」を指定すると、存在しない文字は「BAD+[SJISコード]」という文字列に置換されます。
次の「mb_convert_encoding」で実際に変換を行うと（ダミーのためSJIS→SJISでOK）、絵文字がエスケープされる仕掛けです。

変換後のデータを元に戻すサンプルは次の通りです。

逆エスケープ処理　サンプルコード

$str = '絵文字BAD+F89F';

// 絵文字を検索
$pattern = "/BAD\\+[0-9A-F]{4}/";
preg_match_all($pattern, $str, $arr); // $arr[0]に対象絵文字が格納される

// 絵文字に置換
$rep_arr = array();
foreach($arr[0] as $value) {
	$dec = hexdec(substr($value, 4, 4));
	$rep_arr[$value] = pack('n', $dec);
}

// 置換処理
$str = strtr($str, $rep_arr);

// 出力
echo $str;

実行例：

関連：

• PHPを使ってたった2行で絵文字を取り除く方法
• iモード絵文字をSJIS形式からUnicode形式に変換するPHPサンプル
• iモード絵文字をUnicode形式からSJIS形式に逆変換するPHPサンプル

先日ご紹介した「PHPを使ってたった2行で絵文字を取り除く方法」の補足です。

「mb_substitute_character」を使った絵文字除去方法では、ソフトバンクの絵文字を除去しきれない場合があります。
SJIS形式以外にも、ウェブコードでフォーム値を送ってくる端末もあるためです。
それらを除去するためのサンプルコードはこちらです。

ソフトバンク絵文字（ウェブコード）除去サンプル

$in_string = '絵文字$G!削除';

$pattern = '/[\\x1B][\\x24][G|E|F|O|P|Q][\\x21-\\x7E]+([\\x0F]|$)/';
preg_match_all($pattern, $in_string, $arr);
$search = $arr[0];	// $arr[0]に対象絵文字が格納される

// 絵文字除去
$out_string = str_replace($search, array(), $in_string);

// 出力
echo $out_string;

※Blog上ではソフトバンク絵文字が表示できないため、正しく入力しなおしてください。

正規表現の最後が、x0Fまたは$となっているのは、古い機種の中に端末のバグで、絵文字で終わっている場合に末尾のx0Fがつかない端末があるためです。*

先日ご紹介したこちらの方法と、上記サンプルコードを併用することで、全ての絵文字が取り除けるはずです。

* 対応する機種が手元にないため実機での確認が取れていません。
　もしお手持ちの方がいましたら、検証のご協力をお願いします。

関連：

• PHPを使ってたった2行で絵文字を取り除く方法
• ソフトバンクの絵文字を検出する正規表現
• ソフトバンクの絵文字を入力するには