zend frameworkで始める携帯サイト

ZFではじめる携帯サイト

id:Bayside

id:Bayside　MAIL: [email protected]

Copyright (C) 2009 Buzoo Inc. All Rights Reserved.

ZendFramework勉強会@Tokyo

Copyright (C) 2009 Buzoo Inc. All Rights Reserved.　　　Z F ではじめる携帯サイトid :B a y s id e 2

自己紹介

はてなerid:Bayside日記以外にほとんど使っていません

技術メモなどhttp://d.hatena.ne.jp/Bayside

覚えた言語：Java→C言語→C++言語→Perl/VB→PHP/AS3現在はもっぱらPHPer2月からバズー株式会社というところで携帯サイト作ってます

http://buzoo.jp/新規案件からは全面的にZFを使うことが決定！

http://d.hatena.ne.jp/Bayside

http://buzoo.jp/


自己紹介

はてなerid:Bayside日記以外にほとんど使っていません

技術メモなどhttp://d.hatena.ne.jp/Bayside

覚えた言語：Java→C言語→C++言語→Perl/VB→PHP/AS3現在はもっぱらPHPer2月からバズー株式会社というところで携帯サイト作ってます

http://buzoo.jp/新規案件からは全面的にZFを使うことが決定！

・・・というか勝手に決めて、社長承認を取得w3月中にいろんなサイトをZFで作りました

http://d.hatena.ne.jp/Bayside

http://buzoo.jp/


本日のアジェンダ

いわゆる携帯サイトとは？文字コードについて機種判別についてセッションについて画像変換について絵文字変換についてZend_Formのつかいどころ半角カナ＆絵文字メールについてアクセス制限についてテストについてその他についてまとめ


いわゆる携帯サイトとは？

docomo/au/softbank携帯に対応したウェブサイト携帯電話会社→キャリア、個々の携帯→端末もっぱらSJISで書かれている最近はCSSにも対応しているキャリアごとの仕様の違いを上手く吸収する必要がある


いわゆる携帯サイトとは？

docomo/au/softbank携帯に対応したウェブサイト携帯電話会社→キャリア、個々の携帯→端末もっぱらSJISで書かれている最近はCSSにも対応しているキャリアごとの仕様の違いを上手く吸収する必要がある

エンジニアの実力の見せ所！


文字コードについて

UTF-8に対応している端末もあるが、対応範囲を広げるならSJISUTF-8→SJIS変換は文字化けする文字があるのでオススメしない文字コード変換のコストを考えると、全部SJISにするのが楽

データベースソースコードHTMLテンプレート


①機種判別について

UserAgentでキャリア、機種IDを取得

$ua = $_SERVER['HTTP_USER_AGENT'];

if (preg_match("/^DoCoMo\/1\.0/", $ua)) { # docomo (mova)} elseif (preg_match("/^J\-PHONE|^Vodafone|^SoftBank/", $ua)) { # softbank (3G)} elseif (isset($_SERVER['HTTP_X_JPHONE_MSNAME'])) { # softbank (2G)} elseif (preg_match("/UP\.Browser/", $ua)) { # au} elseif (preg_match("/^DoCoMo\/2\.0/", $ua)) { # docomo (foma)} else { # willcom / emobile / PC など}


②機種判別について

機種IDから端末情報を取得何らかの形の端末データベースが必要

http://svn.sourceforge.jp/view/mod_chxj/trunk/etc/?root=modchxjhttp://pear.php.net/package/Net_UserAgent_Mobile/

最新機種が出るたびに更新しないといけないので結構大変・・・

＜端末データベースの例＞+--------+------+-------+-----+-----+-------+| career | d_id | dname | w | h | flash |+--------+------+-------+-----+-----+-------+| 2 | HI3B | W53H | 232 | 348 | 2 || 2 | KC3B | W53K | 232 | 348 | 2 || 2 | SN3B | W53S | 228 | 368 | 2 || 2 | CA39 | W53CA | 232 | 348 | 2 || 2 | TS3D | W53T | 229 | 348 | 2 || 2 | ST32 | W53SA | 230 | 348 | 2 |+--------+------+-------+-----+-----+-------+

http://svn.sourceforge.jp/view/mod_chxj/trunk/etc/?root=modchxj

http://pear.php.net/package/Net_UserAgent_Mobile/


③機種判別について

端末固有IDで固体判別することが可能docomo・・・URLに”guid=ON”をつける

$_SERVER['HTTP_X_DCMGUID'] から取得au・・・HTTPヘッダについてくる

$_SERVER['HTTP_X_UP_SUBNO'] から取得softbank・・・HTTPヘッダについてくる

$_SERVER['HTTP_X_JPHONE_UID'] から取得取得した端末固有IDを使って「簡単ログイン」などを実現できる


セッションについて

docomoはcookieが使えないauもSSLをまたぐとセッションが使えなかったりするcookieは使えないものとして考えるPC以外からのアクセスでは、URLにセッションIDをつけるGETのときはhiddenタグに埋める（ここでハマリやすい！）セッションID名は”.htaccess”に”php_value session.name XXXX”と書けば変更できるので”PHPSESSIONID”はなるべく使わない

if ($career) { ini_set('session.use_cookies','off'); ini_set('session.use_trans_sid','1'); Zend_Session::setOptions( array('use_trans_sid'=> '1', 'use_only_cookies'=> '0') );}Zend_Session::start();


①画像変換について

端末ごとに画面サイズが違う対応画像形式も違う画像はアプリ側で変換させるImageMagickが便利

sudo pecl install imagick毎回やると遅～いので、キャッシュの仕組みが別途必要

＜.htaccessの例＞RewriteRule (.*)\.(gif|jpg|png)$ /index.php/image/view?file=$1&ext=$2 [R]

public function viewAction() { // ビューを無効にする $this->_helper->layout->disableLayout(); $this->_helper->viewRenderer->setNoRender();

// PECL::Imagickが必要 $image = new Imagick(); $image->readImageBlob($image_data); // ここでいろんな処理 echo $image;}


②画像変換について

ImageMagickの使い方はマニュアルを参照http://jp.php.net/manual/ja/book.imagick.php

毎回やると遅～いので、キャッシュの仕組みが別途必要

＜画像形式変更＞header('Content-type: image/jpeg');$image->setImageFormat('jpg');

＜リサイズ＞$image->thumbnailImage($width, 0);

＜コピー禁止＞if ($career === DOCOMO) { $image->commentImage('copy="NO"');} elseif ($career === AU) { $image->commentImage('kddi_copyright=on');} elseif ($career === SOFTBANK) { header('x-jphone-copyright: no-transfer,no-peripheral');}


①絵文字変換について

キャリアによって仕様がバラバラでカオスな部分docomo絵文字au絵文字

HTML用Email用

softbank絵文字SJIS用UTF-8用

基本絵文字・・・176文字拡張絵文字・・・端末ごとに異なる変換表が必須


②絵文字変換について

MobilePictogramConverterが便利http://php-develop.org/MobilePictogramConverter/

Zend_Layoutを使っているならこんな感じで使う

// application/default/views/script/laytout.html<?phpecho $this->render('header.html');require_once '../MobilePictogramConverter.php';if ($this->career === DOCOMO) { $career_code = MPC_FROM_FOMA;} elseif ($this->career === AU) { $career_code = MPC_FROM_EZWEB;} elseif ($this->career === SOFTBANK) { $career_code = MPC_FROM_SOFTBANK;}$mpc = MobilePictogramConverter::factory( $this->layout()->content, $career_code, MPC_FROM_CHARSET_SJIS, MPC_FROM_OPTION_RAW);$mpc->setImagePath("./img/");echo $this->career ? $mpc->autoConvert() : $mpc->Except();$this->render('footer.html');

http://php-develop.org/MobilePictogramConverter/


Z e n d _F o rm ①のつかいどころ

基本的な使い方はPCサイトと同じユーザビリティをあげるために初期入力モードを設定

istyle・・・docomo / auistyle=”1” //全角かなistyle=”2” //半角カナistyle=”3” //英字istyle=”4” //数字

mode・・・softbankistyle=hiragana” //全角かなistyle=katakana” //全角カナistyle=hankakukana” //半角カナistyle=alphabet” //英字istyle=numeric” //数字

istyleとmodeは混在可能<form input type=”text” istyle=”4” mode=”numeric”>


Z e n d _F o rm ②のつかいどころ

Zend_Config_Iniを使っているならこんな感じで設定する

register.step1.elements.email.type = "text"register.step1.elements.email.options.required = falseregister.step1.elements.email.options.istyle = "3"register.step1.elements.email.options.mode = "alphabet"register.step1.elements.email.options.size = "40"register.step1.elements.email.options.validators.email.validator = "EmailAddress"register.step1.elements.email.options.validators.strlen.validator = "StringLength"register.step1.elements.email.options.validators.strlen.options.min = "0"register.step1.elements.email.options.validators.strlen.options.max = "64"


Z e n d _F o rm ③のつかいどころ

ControllerとViewはこんな感じ

class RegisterController extends Zend_Controller_Action { public step1Action() { $config = new Zend_Config_Ini("../application/default/configs/register.ini", "form"); $form = new Zend_Form($config->register->step1); if ( $this->getRequest()->isPost() ) { if ( $form->isValid($_POST) ) { ： } } $this->view->form = $form; }}

<form action=”/register/step1” method=”post”>　　：<?= $this->form->getElement('email) ?>　　：</form>


①半角カナ＆絵文字メールについて

ISO-2022-JPには半角カナは定義されていない無理やりJISに変換してBASE64エンコードすると半角カナも使用可能Zend_Mailは日本語対応が相当微妙なので、ラッパー関数が必要

sub send_mail($params = array()) { $subject = mb_convert_encoding($params['subject'], 'JIS', 'SJIS'); $body = mb_convert_encoding($params['body'], 'JIS', 'SJIS'); $mail = new Zend_Mail( 'ISO-2022-JP' ); $mail->setBodyText( $body, 'ISO-2022-JP', Zend_Mime::ENCODING_BASE64 ); $mail->setFrom( $params['from'], null ); $mail->addTo( $params['to'], null ); $mail->setSubject( $subject ); $mail->send();}

sub_mail(array( 'from' => '[email protected]', 'to' => '[email protected]', 'subject' => 'ﾊﾝｶｸｶﾅﾃｽﾄ', 'body' => 'ﾃｽﾄﾃｽﾄ'));


②半角カナ＆絵文字メールについて

絵文字メールはバッドノウハウだらけ・・・auはEmail絵文字を使う必要があるsoftbankはutf-8で送らないと途中で途切れる場合があるPCでは確実に文字化けするので、絵文字を削除する必要があるZend_Mailでやるのは大変そうなので mail() 関数を使う

携帯絵文字メール送信（３キャリア）http://yantona.jugem.jp/?eid=342

id:maru_cc さんの記事☆☆☆http://d.hatena.ne.jp/maru_cc/20080519/softbank_emoji_mail


アクセス制限について

PCからのアクセスを遮断するならIPアドレス制限が必要キャリアのIPアドレスはしょっちゅう増えたり減ったり・・・ke-tai.orgが提供しているものをありがたく使わせてもらいましょう

http://ke-tai.org/index.php?%A5%B1%A1%BC%A5%BF%A5%A4%A5%AD%A5%E3%A5%EA%A5%A2%A1%A6%A5%AF%A5%ED%A1%BC%A5%E9IP%A5%A2%A5%C9%A5%EC%A5%B9

自分のIPアドレスを追加しておくこと

＜.htaccess＞

Order Deny,AllowDeny from all

# docomo (http://www.nttdocomo.co.jp/service/imode/make/content/ip/)# 2008/06/20Allow from 210.153.84.0/24 210.136.161.0/24 210.153.86.0/24 124.146.174.0/24 124.146.175.0/24

この後ずらーっと続く


テストについて

iモードHTMLシミュレータIIhttp://www.nttdocomo.co.jp/service/imode/make/content/html/tool2/

User Agent Switcher（Firefox拡張）https://addons.mozilla.org/ja/firefox/addon/59

FireMobileSimulator（Firefox拡張）http://firemobilesimulator.org/

P1 Emulator（製品）http://p1.netfarm.ne.jp/

もちろん最後には実機で！持っていない機種でチェックするなら

http://www.ktai-labo.com/


その他について

GPS位置情報取得いろいろ楽しいことができそう緯度・経度→住所・地域の変換をどうするか

携帯Flash（Flash Lite）1.0/1.1/2.0/3.0/3.1/非対応Flash Lite 1.1ならほとんどの機種で対応しているが制限が多い

サイズが100KBまでフィルターが使えない等大きい透過PNGが表示できないオープンソースのFlashコンパイラでは作れない私はAdobe Flash CS3で作っています

対応機種をしぼって2.0以降にするのもあり？デコメについて

実体はHTMLメールデコ絵文字はただの画像3キャリアごとに微妙に仕様が違うテンプレート


まとめ

SJISにするのが楽キャリアごとの独自仕様にどうやって対応するかが肝

機種判別セッション画像変換絵文字変換半角カナ＆絵文字メールIPアドレスによるアクセス制限GPS / Flash Lite / デコメ・・・

便利なライブラリを使いこなすNet_UserAgent_MobileMobilePictogramConverter

ZFに向かない箇所もある絵文字メール日本語固有のバリデーション携帯固有のバリデーション


おわり

ご静聴ありがとうございました

zend frameworkで始める携帯サイト

Technology