Zend Frameworkで始める携帯サイト
2 likes2,040 views
いわゆる携帯サイトとは？ 文字コードについて 機種判別について セッションについて 画像変換について 絵文字変換について Zend_Formのつかいどころ 半角カナ＆絵文字メールについて アクセス制限について テストについて その他について まとめ
![機種判別について①
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 など
}
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 8](https://image.slidesharecdn.com/ktaizf2009-100406061632-phpapp01/85/Zend-Framework-8-320.jpg)
![機種判別について③
端末固有IDで固体判別することが可能
docomo???URLに”guid=ON”をつける
$_SERVER['HTTP_X_DCMGUID'] から取得
au???HTTPヘッダについてくる
$_SERVER['HTTP_X_UP_SUBNO'] から取得
softbank???HTTPヘッダについてくる
$_SERVER['HTTP_X_JPHONE_UID'] から取得
取得した端末固有IDを使って「簡単ログイン」などを実現できる
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 10](https://image.slidesharecdn.com/ktaizf2009-100406061632-phpapp01/85/Zend-Framework-10-320.jpg)
![画像変換について①
端末ごとに画面サイズが違う
対応画像形式も違う
画像はアプリ側で変換させる
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;
}
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 12](https://image.slidesharecdn.com/ktaizf2009-100406061632-phpapp01/85/Zend-Framework-12-320.jpg)
![半角カナ＆絵文字メールについて①
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' => 'system@hogehoge.com',
'to' => 'hoge@ezweb.ne.jp',
'subject' => '?????????',
'body' => '??????'
));
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 19](https://image.slidesharecdn.com/ktaizf2009-100406061632-phpapp01/85/Zend-Framework-19-320.jpg)
More Related Content
What's hot (20)
Similar to Zend Frameworkで始める携帯サイト (20)
Recently uploaded (11)
Zend Frameworkで始める携帯サイト
- 1. ZendFramework勉強会@Tokyo ZFではじめる携帯サイト id:Bayside id:Bayside MAIL: bayside@cpan.org Copyright (C) 2009 Buzoo Inc. All Rights Reserved.
- 2. 自己紹介 はてなer id:Bayside 日記以外にほとんど使っていません 技術メモなど http://d.hatena.ne.jp/Bayside 覚えた言語：Java→C言語→C++言語→Perl/VB→PHP/AS3 現在はもっぱらPHPer 2月からバズー株式会社というところで携帯サイト作ってます http://buzoo.jp/ 新規案件からは全面的にZFを使うことが決定！ Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 2
- 3. 自己紹介 はてなer id:Bayside 日記以外にほとんど使っていません 技術メモなど http://d.hatena.ne.jp/Bayside 覚えた言語：Java→C言語→C++言語→Perl/VB→PHP/AS3 現在はもっぱらPHPer 2月からバズー株式会社というところで携帯サイト作ってます http://buzoo.jp/ 新規案件からは全面的にZFを使うことが決定！ ???というか勝手に決めて、社長承認を取得w 3月中にいろんなサイトをZFで作りました Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 3
- 4. 本日のアジェンダ いわゆる携帯サイトとは？ 文字コードについて 機種判別について セッションについて 画像変換について 絵文字変換について Zend_Formのつかいどころ 半角カナ＆絵文字メールについて アクセス制限について テストについて その他について まとめ Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 4
- 5. いわゆる携帯サイト は？ と docomo/au/softbank携帯に対応したウェブサイト 携帯電話会社→キャリア、個々の携帯→端末 もっぱらSJISで書かれている 最近はCSSにも対応している キャリアごとの仕様の違いを上手く吸収する必要がある Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 5
- 6. いわゆる携帯サイト は？ と docomo/au/softbank携帯に対応したウェブサイト 携帯電話会社→キャリア、個々の携帯→端末 もっぱらSJISで書かれている 最近はCSSにも対応している キャリアごとの仕様の違いを上手く吸収する必要がある エンジニアの実力の見せ所！ Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 6
- 7. 文字コ について ード UTF-8に対応している端末もあるが、対応範囲を広げるならSJIS UTF-8→SJIS変換は文字化けする文字があるのでオススメしない 文字コード変換のコストを考えると、全部SJISにするのが楽 データベース ソースコード HTMLテンプレート Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 7
- 8. 機種判別について① 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 など } Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 8
- 9. 機種判別について② 機種IDから端末情報を取得 何らかの形の端末データベースが必要 http://svn.sourceforge.jp/view/mod_chxj/trunk/etc/?root=modchxj http://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 | +--------+------+-------+-----+-----+-------+ Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 9
- 10. 機種判別について③ 端末固有IDで固体判別することが可能 docomo???URLに”guid=ON”をつける $_SERVER['HTTP_X_DCMGUID'] から取得 au???HTTPヘッダについてくる $_SERVER['HTTP_X_UP_SUBNO'] から取得 softbank???HTTPヘッダについてくる $_SERVER['HTTP_X_JPHONE_UID'] から取得 取得した端末固有IDを使って「簡単ログイン」などを実現できる Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 10
- 11. セッ ンについて ショ 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(); Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 11
- 12. 画像変換について① 端末ごとに画面サイズが違う 対応画像形式も違う 画像はアプリ側で変換させる 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; } Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 12
- 13. 画像変換について② 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'); } Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 13
- 14. 絵文字変換について① キャリアによって仕様がバラバラでカオスな部分 docomo絵文字 au絵文字 HTML用 Email用 softbank絵文字 SJIS用 UTF-8用 基本絵文字???176文字 拡張絵文字???端末ごとに異なる 変換表が必須 Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 14
- 15. 絵文字変換について② MobilePictogramConverterが便利 http://php-develop.org/MobilePictogramConverter/ Zend_Layoutを使っているならこんな感じで使う // application/default/views/script/laytout.html <?php echo $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'); Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 15
- 16. Z e n d _F o r m のつかいどころ① 基本的な使い方はPCサイトと同じ ユーザビリティをあげるために初期入力モードを設定 istyle???docomo / au istyle=”1” //全角かな istyle=”2” //半角カナ istyle=”3” //英字 istyle=”4” //数字 mode???softbank istyle=hiragana” //全角かな istyle=katakana” //全角カナ istyle=hankakukana” //半角カナ istyle=alphabet” //英字 istyle=numeric” //数字 istyleとmodeは混在可能 <form input type=”text” istyle=”4” mode=”numeric”> Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 16
- 17. Z e n d _F o r m のつかいどころ② Zend_Config_Iniを使っているならこんな感じで設定する register.step1.elements.email.type = "text" register.step1.elements.email.options.required = false register.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" Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 17
- 18. Z e n d _F o r m のつかいどころ③ 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> Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 18
- 19. 半角カナ＆絵文字メールについて① 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' => 'system@hogehoge.com', 'to' => 'hoge@ezweb.ne.jp', 'subject' => '?????????', 'body' => '??????' )); Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 19
- 20. 半角カナ＆絵文字メールについて② 絵文字メールはバッドノウハウだらけ??? 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 Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 20
- 21. アクセス制限について 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,Allow Deny from all # docomo (http://www.nttdocomo.co.jp/service/imode/make/content/ip/) # 2008/06/20 Allow 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 この後ずらーっと続く Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 21
- 22. テストについて iモードHTMLシミュレータII http://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/ Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 22
- 23. その他について 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キャリアごとに微妙に仕様が違うテンプレート Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 23
- 24. まとめ SJISにするのが楽 キャリアごとの独自仕様にどうやって対応するかが肝 機種判別 セッション 画像変換 絵文字変換 半角カナ＆絵文字メール IPアドレスによるアクセス制限 GPS / Flash Lite / デコメ ??? 便利なライブラリを使いこなす Net_UserAgent_Mobile MobilePictogramConverter ZFに向かない箇所もある 絵文字メール 日本語固有のバリデーション 携帯固有のバリデーション Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 24
- 25. おわり ご静聴ありがとうございました Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 25