2007-06-15

携帯サイト作りで“3社3様”の絵文字に苦しめられていませんか？バイナリのSoftbankだけ別テンプレートを作ったり、代替画像を無数に用意したり…。

「絵文字マップ法」は携帯3キャリアの絵文字表示方法の違いを意識することなく、サイト上に表示する方法です。PHP または Perl の基礎知識を前提にその実例を記してみようと思います。

PHP や Perl にある程度なれていると、下記のサンプルスクリプトは極々簡単なものだと思いますが、そうでない場合はやや敷居が高いと感じるかもしれません。そのときは…がんばってください。ひたすらに... orz

[ 目的 ]
ユーザーエージェントをもとに DoCoMo, au, Softbank の3キャリアを判別し、絵文字マップを使用し、キャリアに応じた絵文字を $emoji 配列にセット。これにより、キャリアの違いを意識せず絵文字を表示.（絵文字マップ法）

[ 前提 ]

・PHP または Perl の基礎知識　（サンプルはPHP）
・携帯サイトの出力文字コード Shift-JIS
・EC-CUBE（必須）, PEAR Net_UserAgent_Mobile（任意）を拝借（感謝）

[ 準備 ]

1. EC-CUBE 日本発の「ECオープンソース」より EC-CUBE のソースをダウンロード
2. EC-CUBE のソースファイル内 /data/include ディレクトリをFTPなどでサーバにアップロード[※1]
3. mobile_emoji_map_other.inc を作成し、同ディレクトリにアップロード(mobile_emoji_map_other.incのソース)
4. PEAR の Net_UserAgent_Mobile をインストール [※2]

[ サンプル ]

下記リンクをクリックすると下記ソースを実行します.DoCoMo, au, Softbank 携帯からアクセスしてください。どの端末からアクセスしても、同じキーに同じ絵文字が割り当てられるハズです。

DoCoMo, au, Softbank 絵文字テスト　（PCからアクセスしても絵文字は表示されません）
(コピー用)

※ キャリア自体が対応する絵文字を設定していないというハード上の問題は代替イメージかテキストで対処する以外ありません。

[ サンプルコード ]

<?php
/**
 * DoCoMo, au (含tu-ka), Softbank の3キャリア絵文字対応
 * mobile_emoji_map_other.inc は 各自で用意
 */
require_once('Net/UserAgent/Mobile.php');
$agent = &Net_UserAgent_Mobile::factory();
$emoji = getEmojiByCarrier($agent);

// キャリアに応じた絵文字配列を取得する関数（サブルーチン）
function getEmojiByCarrier($agent)
{
	if ($agent->isDoCoMo()) {
		return require('./include/mobile_emoji_map_docomo.inc');
	} else if ($agent->isVodafone()) {
		return require('./include/mobile_emoji_map_softbank.inc');
	} else if ($agent->isEZweb()) {
		return require('./include/mobile_emoji_map_ezweb.inc');
	} else {
		return require('./include/mobile_emoji_map_other.inc');
	}
}

// XHTML が主流ですが簡単のため HTML とします
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>DoCoMo, au, Softbank 絵文字テスト</title>
</head>
<body>

<div>
<p>
$emoji['1']はどの端末からでも「晴れ」の絵文字を表示&nbsp;<?php echo $emoji['1']; ?>
</p>
<p>
$emoji['3']はどの端末からでも「雨」の絵文字を表示&nbsp;<?php echo $emoji['3']; ?>
</p>
</div>

<div>
<p>
<?php
print "絵文字一覧";
foreach ($emoji as $key => $val) {
	echo "<br>".$key."&nbsp;&nbsp;".$val;
}
?>
</p>
</div>

</body>
</html>

[ ポイント解説 ]

1. $agent = &Net_UserAgent_Mobile::factory();
=> PEAR Net_UserAgent_Mobile の定番処理です。$_SERVER 変数をもとに端末情報を保持するオブジェクトを生成するメソッドですが、使用する上では理解する必要はありません。おまじないと思ってください。
2. getEmojiByCarrier関数
=> return require();　 EC-CUBE のソースを改変せず使用したため、 return require() という微妙なシンタックスを用いています。また、サンプルでは簡単のため相対パス指定していますが、実用する場合には realpath(dirname(__FILE__)) などを用いて絶対パスで指定した方がいいです。
3. サーバ設定によってはソースを見られることもあるので、拡張子 .inc はあまりお薦めしません。（本サンプルでは無害なのでよいですが）
4. 実績があるオープンソースソフトということで、EC-CUBEの絵文字マップを拝借しましたが、自作してもいいかもしれません。

[ おことわり ]

貧乏人なので au の実機しか持ってない都合上、実機確認はできてません。EC-CUBEの代替テキスト処理部分等でバグがあれば教えて下さい。

[ 本文中の脚注 ]

[※1]
実際に必要なファイルは以下の3つだけなので、他のファイルはアップロードする必要はありません.
・mobile_emoji_map_docomo.inc
・mobile_emoji_map_ezweb.inc
・mobile_emoji_map_softbank.inc
=> 上記ファイル名をクリックするとソースを表示します。
=> softbank の絵文字をバイナリからテキストデータに変換して使う方法はちょっとしたトリビアです。
=> 使用言語が Perl なら上記に対応するハッシュを用意してください。

[※2]
簡単のため Net_UserAgent_Mobile を使用しますが、ユーザーエージェントによる端末判別処理を自分で行ってもよいです.
=> 使用言語が Perl なら CPAN の HTTP-MobileAgent を使用してください。( PEAR の Net_UserAgent_Mobile は CPAN の HTTP-MobileAgent を移植しただけです。上記ソースは容易に読めると思います。)

[ PR ]
終電を逃した！ちょっと遅くまでやっているお店を探したい！夜中ななのに具合が悪くなったら、、
真夜中ナビ深夜営業・24時間営業のお店探し
 真夜中ナビ深夜営業・24時間営業のお店探しモバイル

真夜中のプログラミングTips

絵文字マップ法で携帯3キャリアの絵文字を一括表示