ZendFramework勉強会@Tokyo




ZFではじめる携帯サイト


             id:Bayside



    id:Bayside MAIL: bayside@cpan.org

   Copyright (...
自己紹介
 はてなer
   id:Bayside
   日記以外にほとんど使っていません
      技術メモなど
       http://d.hatena.ne.jp/Bayside
 覚えた言語:Java→C言語→C++言語→Perl...
自己紹介
 はてなer
   id:Bayside
   日記以外にほとんど使っていません
      技術メモなど
       http://d.hatena.ne.jp/Bayside
 覚えた言語:Java→C言語→C++言語→Perl...
本日のアジェンダ
 いわゆる携帯サイトとは?
 文字コードについて
 機種判別について
 セッションについて
 画像変換について
 絵文字変換について
 Zend_Formのつかいどころ
 半角カナ&絵文字メールについて
 アクセス制限について...
いわゆる携帯サイト は?
         と
 docomo/au/softbank携帯に対応したウェブサイト
 携帯電話会社→キャリア、個々の携帯→端末
 もっぱらSJISで書かれている
 最近はCSSにも対応している
 キャリアごとの仕様...
いわゆる携帯サイト は?
         と
 docomo/au/softbank携帯に対応したウェブサイト
 携帯電話会社→キャリア、個々の携帯→端末
 もっぱらSJISで書かれている
 最近はCSSにも対応している
 キャリアごとの仕様...
文字コ について
   ード
 UTF-8に対応している端末もあるが、対応範囲を広げるならSJIS
 UTF-8→SJIS変換は文字化けする文字があるのでオススメしない
 文字コード変換のコストを考えると、全部SJISにするのが楽
   データ...
機種判別について①
 UserAgentでキャリア、機種IDを取得

                    $ua = $_SERVER['HTTP_USER_AGENT'];

                    if (preg_ma...
機種判別について②
 機種IDから端末情報を取得
 何らかの形の端末データベースが必要
  http://svn.sourceforge.jp/view/mod_chxj/trunk/etc/?root=modchxj
  http://pea...
機種判別について③
 端末固有IDで固体判別することが可能
  docomo・・・URLに”guid=ON”をつける
    $_SERVER['HTTP_X_DCMGUID'] から取得
  au・・・HTTPヘッダについてくる
    $_...
セッ ンについて
  ショ
docomoはcookieが使えない
auもSSLをまたぐとセッションが使えなかったりする
cookieは使えないものとして考える
PC以外からのアクセスでは、URLにセッションIDをつける
GETのときはhidde...
画像変換について①
 端末ごとに画面サイズが違う
 対応画像形式も違う
 画像はアプリ側で変換させる
 ImageMagickが便利
    sudo pecl install imagick
 毎回やると遅~いので、キャッシュの仕組みが別途必...
画像変換について②
 ImageMagickの使い方はマニュアルを参照
    http://jp.php.net/manual/ja/book.imagick.php
 毎回やると遅~いので、キャッシュの仕組みが別途必要
          ...
絵文字変換について①
 キャリアによって仕様がバラバラでカオスな部分
 docomo絵文字
 au絵文字
    HTML用
    Email用
 softbank絵文字
    SJIS用
    UTF-8用
 基本絵文字・・・176文字...
絵文字変換について②
 MobilePictogramConverterが便利
   http://php-develop.org/MobilePictogramConverter/
 Zend_Layoutを使っているならこんな感じで使う
 ...
Z e n d _F o r m のつかいどころ①
 基本的な使い方はPCサイトと同じ
 ユーザビリティをあげるために初期入力モードを設定
  istyle・・・docomo / au
     istyle=”1” //全角かな
     i...
Z e n d _F o r m のつかいどころ②
 Zend_Config_Iniを使っているならこんな感じで設定する

                    register.step1.elements.email.type = "te...
Z e n d _F o r m のつかいどころ③
 ControllerとViewはこんな感じ

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

    ...
半角カナ&絵文字メールについて②
 絵文字メールはバッドノウハウだらけ・・・
 auはEmail絵文字を使う必要がある
 softbankはutf-8で送らないと途中で途切れる場合がある
 PCでは確実に文字化けするので、絵文字を削除する必要が...
アクセス制限について
 PCからのアクセスを遮断するならIPアドレス制限が必要
 キャリアのIPアドレスはしょっちゅう増えたり減ったり・・・
 ke-tai.orgが提供しているものをありがたく使わせてもらいましょう
    http://ke...
テストについて
 iモードHTMLシミュレータII
    http://www.nttdocomo.co.jp/service/imode/make/content/html/tool2/
 User Agent Switcher(Firef...
その他について
 GPS位置情報取得
   いろいろ楽しいことができそう
   緯度・経度→住所・地域の変換をどうするか
 携帯Flash(Flash Lite)
   1.0/1.1/2.0/3.0/3.1/非対応
   Flash Lite...
まとめ
 SJISにするのが楽
 キャリアごとの独自仕様にどうやって対応するかが肝
   機種判別
   セッション
   画像変換
   絵文字変換
   半角カナ&絵文字メール
   IPアドレスによるアクセス制限
   GPS / Fla...
おわり




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




Copyright (C) 2009 Buzoo Inc. All Rights Reserved.   Z F ではじ...
Upcoming SlideShare
Loading in …5
×

Zend Frameworkで始める携帯サイト

7,011 views
6,963 views

Published on

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

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

No Downloads
Views
Total views
7,011
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Zend Frameworkで始める携帯サイト

  1. 1. ZendFramework勉強会@Tokyo ZFではじめる携帯サイト id:Bayside id:Bayside MAIL: bayside@cpan.org Copyright (C) 2009 Buzoo Inc. All Rights Reserved.
  2. 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. 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. 4. 本日のアジェンダ いわゆる携帯サイトとは? 文字コードについて 機種判別について セッションについて 画像変換について 絵文字変換について Zend_Formのつかいどころ 半角カナ&絵文字メールについて アクセス制限について テストについて その他について まとめ Copyright (C) 2009 Buzoo Inc. All Rights Reserved.   Z F ではじめる携帯サイトid :B a y s id e 4
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 25. おわり ご静聴ありがとうございました Copyright (C) 2009 Buzoo Inc. All Rights Reserved.   Z F ではじめる携帯サイトid :B a y s id e 25

×