Your SlideShare is downloading. ×
0
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Zend Frameworkで始める携帯サイト
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Zend Frameworkで始める携帯サイト

6,737

Published on

いわゆる携帯サイトとは? …

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,737
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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() 関数を使う 携帯絵文字メール送信(3キャリア) 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

×