Home > php | モバイル > cakephpで携帯サイトを作る-絵文字対応編-(MobilePictogramConverterとNet_UserAgent_Mobile)

cakephpで携帯サイトを作る-絵文字対応編-(MobilePictogramConverterとNet_UserAgent_Mobile)

2009-03-30 (月) 20:46
php | モバイル
cakephp | mobile | PEAR | php | UserAgent | ライブラリ | 携帯サイト | 絵文字

ゼロから携帯サイトを作ることになったので、cakephpを使って携帯サイトを素早く構築してみる。

携帯サイトを作るとなるとネックになるのが携帯独自の機能の実装。
すごくおおざっぱに分けると以下の３つかな

キャリア依存絵文字
端末毎の動作の違い
セッション管理

んで、これを実現させるとなるとなにが必要かということですが、それぞれこんな感じ

キャリア依存絵文字
端末のキャリア判別→絵文字を対応するキャリアのものに変換してやる
端末毎の動作の違い
これは細かくやるときりがないけど、動きとしては端末の種類を判別→独自処理に振り分けるといった感じ
セッション管理
すべてのリンクにセッションIDを付与する or 端末IDを取得しDBに格納する

とこう書くとすごくめんどくさい感じだけど、
世の中には偉大な先人の方々が作ってくださったライブラリというものがあるので、
これらをうまく使って携帯独自のめんどくさい処理をパパッと作ってしまいましょう。
んで、面白い部分だけコーディングしよー。

今回は絵文字の変換処理を作ってみます。
使用させてもらうライブラリはこんな感じ

MobilePictogramConverter
3キャリア対応の絵文字変換ライブラリ
PEAR::Net_UserAgent_Mobile
UserAgentを元に色々できるPEARライブラリ

とまぁ定番のこの２つです。

さっそくcakephpに入れてみます。

MobilePictogramConverter

app/vendors
 ∟MobilePictogramConverter
   ∟MobilePictogramConverter.php
   ∟Carrier
app/webroot/img/mpc
 ∟e
 ∟i
 ∟s

PEAR::Net_UserAgent_Mobile

app/vendors
 ∟pear_ini.php
 ∟PEAR
   ∟Net
     ∟UserAgent
       ∟Mobile
       ∟Mobile.php

ほい。こんな感じに配置します。
MobilePictogramConverterのライブラリにあるimgフォルダは名前をmpcにしてwebrootのimgフォルダに置いてあげました。
あと普通は「pear_ini.phpなんてファイルねぇよ！」ということになるので、作ってあげてください。
これはcakephpでPEARを使う場合に必要なファイルです。

中身はこんな感じにします。

<?php
    ini_set('include_path', dirname(__FILE__) . DS . 'PEAR' . PATH_SEPARATOR . get_include_path());
?>

見れば分かるけど、include_pathを追加してるんすね。
今後PEARを使う場合もここにポンポン入れていけばいいので便利です。

さて、これで必要なライブラリが揃いました。

ここでちょっと何がしたいのかを整理します。

テンプレートファイルに絵文字を直接記述する。
出力される時に勝手に各キャリアの対応絵文字に変換してくれる。

これができれば、携帯サイトをつくる時に絵文字のことは考えずに作成できますね。

さて、まずテンプレート絵文字はDoCoMoのUnicode(UTF-8)で記載しましょう。
自作で恐縮ですが、このページでunicodeにチェック入れると出てくるのがドコモのunicode絵文字です。
http://script.sj6.org/emoji/

はい。デフォルトのviewにでも書いてみます。
app/views/layouts/default.ctp
場所はどこでもいいので「」を追記します。
ここでページを表示すると謎の文字がでてきますね。

では次にキャリア毎に変換してあげます。

ちょっとここでcakephpの解説。
cakephpでは各ContollerがAppControllerを継承しています。
なので、AppControllerに絵文字の変換処理を記載してあげれば、
ページを作る際に変換処理を考えなくてOKってことですね。

で、AppControllerにどのように記載するかというと、afterFilterメソッドを使います。
これはテンプレートデータを読み込んだ後でなおかつ出力する前に呼び出されるメソッドです。
ここで出力前のデータを読み出して絵文字を変換しといてあげればOKです。

ちなみにAppControllerはこんな感じにしちゃってください。
(なにか書いてある場合は追記してください)

App::import('Vendor', 'pear_ini');
App::import('Vendor', 'Net_UserAgent_Mobile', array('file' => 'Net' . DS . 'UserAgent' . DS . 'Mobile.php'));
App::import('Vendor', 'MobilePictogramConverter', array('file' => 'MobilePictogramConverter' . DS . 'MobilePictogramConverter.php'));
class AppController extends Controller {
    function afterFilter() {
        $mpc =& MobilePictogramConverter::factory($this->output, MPC_FROM_FOMA, MPC_FROM_CHARSET_UTF8,MPC_FROM_OPTION_WEB);
        $agent = &Net_UserAgent_Mobile::factory();
		switch( true )
		{
		  case ($agent->isDoCoMo()):
		    //Docomo用の処理
			$this->output = $mpc->Convert(MPC_TO_FOMA, MPC_TO_OPTION_WEB);
			break;

		  case ($agent->isSoftBank()):
		    //Softbank用の処理
		  	$this->output = $mpc->Convert(MPC_TO_SOFTBANK, MPC_FROM_OPTION_WEB);
		  	break;

		  case ($agent->isEZweb()):
		    //Au用の処理
			$this->output = $mpc->Convert(MPC_TO_EZWEB, MPC_FROM_OPTION_WEB);
		  	break;

		  default:
		    //PCは画像を出力
			$mpc->setImagePath('/img/mpc/');
		  	$this->output = $mpc->autoConvert();
		  	break;
		}
    }
}

さて解説。まず最初の3行App::・・・は最初に配置したライブラリを読み込む為のものですね。
次にafterFilterメソッドですが、上から
$mpc =& Mobile・・・
これで出力データを読み込んで絵文字データを取得している感じです。
引数は順に、(出力前のデータ,FOMAの絵文字,UTF-8で記載,Web入力コード)

次にNet_UserAgent_Mobileライブラリを用いてキャリアの判別をしています。
そして判別結果にあわせて、出力データを変換し、$this->outputに返しています。

PCの場合は、絵文字画像のimgタグを呼び出すようにしています。

さて、これでさきほどのページを叩くとお日様の絵文字が表示されているかと思います。

これはPC用のimgタグに変換されている状態です。
UserAgentを変えてあげると、それぞれ別の絵文字が表示されるはずです。
（UserAgentの変更にはfiremobilesimulatorがおすすめ）

これで絵文字の変換はバッチリですね！

気が向いたらセッション管理とかキャリア毎の個別処理なんかも書きますー。