0
第 35 回 PHP 勉強会 @ トライコーン 亀本 大地 (a.k.a: yudoufu) 2008/08/31 モバイル開発@ symfony
自己紹介 <ul><li>ゆどうふ (id:Yudoufu) </li></ul><ul><ul><li>ゆどうふと焼き肉が大好きなぺちぱー </li></ul></ul><ul><li>実は今日が誕生日 </li></ul><ul><ul><...
今日話すこと <ul><li>モバイルサイト開発のポイント </li></ul><ul><ul><li>キャリアごとの違い (3G 限定で ) </li></ul></ul><ul><li>symfony でモバイル開発 </li></ul><...
モバイルサイト開発 <ul><li>キャリア / 端末の違いを意識した開発が必要 </li></ul><ul><ul><li>キャリア / 端末情報の取得 </li></ul></ul><ul><ul><ul><li>独自定義の HTTP ヘッ...
HTML/CSS の仕様 <ul><li>全キャリアで XHTML/CSS が利用可 </li></ul><ul><ul><li>キャリア毎に DTD 宣言を変える </li></ul></ul><ul><li>DoCoMo </li></ul...
HTML/CSS のハマりどころ <ul><li>ハマり①: font サイズの指定 </li></ul><ul><ul><li>サイズの変化がバラバラ </li></ul></ul><ul><ul><ul><li>DoCoMo と SoftB...
文字コードの押さえ所 <ul><li>DoCoMo </li></ul><ul><ul><li>Shift_JIS  or UTF-8 </li></ul></ul><ul><ul><ul><li>UTF-8 だと機種によって POST の際に...
symfony でモバイル開発 <ul><li>ライブラリや拡張をうまくやっておくと、通常の Web サイトと同様の開発が可能 </li></ul><ul><li>自分はどんな対応をしているか?を紹介 </li></ul><ul><li>モバイ...
symfony のフィルタ
モバイルフィルタの作成 <ul><li>モバイル特有の処理を行うフィルタクラスを作成 </li></ul><ul><li>apps/app_name/config/filters.yml  に追記 </li></ul>rendering: ~ ...
モバイルフィルタの作成 <ul><li>apps/app_name/lib/myMobileFIlter.class.php </li></ul><ul><li>sfFilter を継承したクラスに実装を加えていく </li></ul><?ph...
キャリア判別 <ul><li>Net_UserAgent_Mobile を利用 </li></ul><ul><ul><li>symfony の autoload 機構 </li></ul></ul><ul><li>app/app_name/co...
キャリア判別 <ul><li>myMobileFilter.class.php ( 抜粋 ) </li></ul><ul><li>判別結果を Request の attribute に入れておく </li></ul>public functio...
絵文字の変換 <ul><li>sfPictogramMobilePlugin  を利用 </li></ul><ul><ul><li>手前味噌 ( ^^;ゞ </li></ul></ul><ul><li>myMobileFilter.class....
文字コードの変換 <ul><li>内部の運用文字コードは UTF-8 に統一する。 </li></ul><ul><li>入出力時に、キャリア毎に表示エンコードとの相互変換を行う。 </li></ul><ul><ul><li>DoCoMo : S...
文字コードの変換 <ul><li>入力時 </li></ul><ul><ul><li>preFilter にて入力データ全体を取得し、これに再帰的な文字コード変換を施す。 </li></ul></ul><ul><ul><li>絵文字の変換は <...
CSS の切り替え <ul><li>外部 CSS を設定し、キャリア毎に切替 </li></ul><ul><li>myMobileFilter.class.php ( 抜粋 ) </li></ul><ul><li>CSS を動的に切り替えるよう...
CSS の切り替え <ul><li>DoCoMo が i-CSS でインラインしか使えない。。 </li></ul><ul><li>HTML_CSS_Mobile  を利用 </li></ul><ul><ul><li>やっぱり手前味噌 ( ^^...
テンプレートとヘルパー <ul><li>モバイルフィルタの作成 </li></ul><ul><ul><li>キャリア判定の実装 </li></ul></ul><ul><ul><li>絵文字 / 文字コード変換 </li></ul></ul><u...
symfony のテンプレート機能
テンプレートの対応 <ul><li>全体を規定するレイアウトファイルを変更 </li></ul><ul><li>apps/app_name/templates/layout.php( 抜粋) </li></ul><ul><li>パーシャルを使っ...
テンプレートの対応 <ul><li>CSS や DTD 宣言の動的な切り替えが行われているので、各モジュールのテンプレートファイルはキャリアをほとんど気にせず編集できる。 </li></ul><ul><li>「完全に気にせず」ではないので注意。...
モバイルヘルパーの実装 <ul><li>mailto や input 要素の問題などを吸収する </li></ul><ul><li>apps/app_name/lib/helper/MobileHelper.php を作成 </li></ul>...
モバイルヘルパーの実装 <ul><li>input 要素も同様に作成 </li></ul>function m_input_tag($name, $value = null, $options = array()) { $carrier = s...
セッションのモバイル対応 <ul><li>モバイルフィルタの作成 </li></ul><ul><ul><li>キャリア判定の実装 </li></ul></ul><ul><ul><li>絵文字 / 文字コード変換 </li></ul></ul><...
セッションのモバイル対応 <ul><li>DoCoMo 全機種と SoftBank の一部機種で Cookie が使用不可 </li></ul><ul><li>特定の場合のみ session.use_trans_sid を使う </li></u...
セッションのモバイル対応 <ul><li>Redirect() の場合にセッションが途切れてしまう。 </li></ul><ul><li>apps/app_name/lib/myMobileSessionStorage.class.php  を...
セッションのモバイル対応 <ul><li>ついでに。。。 DoCoMo の guid もここで対応 </li></ul>class myMobileFrontController extends  sfFrontWebController { ...
セッションのモバイル対応 <ul><li>拡張したクラスを利用するように、設定変更 </li></ul><ul><li>apps/app_name/config/factories.yml </li></ul><ul><li>これで、セッション...
まとめ? <ul><li>Filter やコンポーネントの拡張を活用すれば、モバイル端末に依存する部分のほとんどを無理なく処理できる。 </li></ul><ul><li>うまくまとめれば、 plugin 化も容易なので、効率化も図れる。 </...
おわりに <ul><li>トライコーンさん、いつも会場提供ありがとうございます>< </li></ul><ul><li>ご清聴ありがとうございました。 </li></ul>
Upcoming SlideShare
Loading in...5
×

モバイル開発@symfony

3,605

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
3,605
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "モバイル開発@symfony"

  1. 1. 第 35 回 PHP 勉強会 @ トライコーン 亀本 大地 (a.k.a: yudoufu) 2008/08/31 モバイル開発@ symfony
  2. 2. 自己紹介 <ul><li>ゆどうふ (id:Yudoufu) </li></ul><ul><ul><li>ゆどうふと焼き肉が大好きなぺちぱー </li></ul></ul><ul><li>実は今日が誕生日 </li></ul><ul><ul><li>焼き肉好きぺちぱーなのにヤサイ (831) の日生まれ </li></ul></ul><ul><ul><li>これは懇親会。。。き…期待なんてしてないんだからねっ>< </li></ul></ul><ul><ul><ul><li>あっ、石を投げないでっ! </li></ul></ul></ul>
  3. 3. 今日話すこと <ul><li>モバイルサイト開発のポイント </li></ul><ul><ul><li>キャリアごとの違い (3G 限定で ) </li></ul></ul><ul><li>symfony でモバイル開発 </li></ul><ul><ul><li>symfony(1.0) でどう解決していったか </li></ul></ul><ul><ul><li>具体的な実装の話 </li></ul></ul>
  4. 4. モバイルサイト開発 <ul><li>キャリア / 端末の違いを意識した開発が必要 </li></ul><ul><ul><li>キャリア / 端末情報の取得 </li></ul></ul><ul><ul><ul><li>独自定義の HTTP ヘッダー等から取得 </li></ul></ul></ul><ul><ul><li>HTML/CSS </li></ul></ul><ul><ul><li>文字コードのgdgd </li></ul></ul><ul><ul><li>絵文字 </li></ul></ul><ul><ul><li>セッションと Cookie </li></ul></ul><ul><ul><ul><li>Cookie が使えない機種 / キャリアの存在 </li></ul></ul></ul>
  5. 5. HTML/CSS の仕様 <ul><li>全キャリアで XHTML/CSS が利用可 </li></ul><ul><ul><li>キャリア毎に DTD 宣言を変える </li></ul></ul><ul><li>DoCoMo </li></ul><ul><ul><li>HTTP ヘッダに application/xhtml+xml 必須 </li></ul></ul><ul><ul><li>i-CSS :独自仕様の インライン CSS </li></ul></ul><ul><li>Au </li></ul><ul><ul><li>外部 CSS が利用可能 </li></ul></ul><ul><ul><ul><li>子孫セレクタ等は効かない </li></ul></ul></ul><ul><li>SoftBank </li></ul><ul><ul><li>外部 CSS が利用可能 </li></ul></ul><ul><ul><ul><li>子孫セレクタも OK </li></ul></ul></ul>
  6. 6. HTML/CSS のハマりどころ <ul><li>ハマり①: font サイズの指定 </li></ul><ul><ul><li>サイズの変化がバラバラ </li></ul></ul><ul><ul><ul><li>DoCoMo と SoftBank は small と指定したら小さくなるのに、 Au は小さくならない。。。とか </li></ul></ul></ul><ul><li>ハマり②: input 要素 </li></ul><ul><ul><li>入力モード制御がカオス </li></ul></ul><ul><li>ハマり③: mailto の文字コード </li></ul><ul><ul><li>SoftBank のみ UTF-8 で URL エンコード </li></ul></ul><ul><li>これらは、統一テンプレートで解決するのは無理。 </li></ul><ul><ul><li>何かしらの、切り替える仕組みが必要 </li></ul></ul>
  7. 7. 文字コードの押さえ所 <ul><li>DoCoMo </li></ul><ul><ul><li>Shift_JIS or UTF-8 </li></ul></ul><ul><ul><ul><li>UTF-8 だと機種によって POST の際に文字が消える。 </li></ul></ul></ul><ul><li>Au </li></ul><ul><ul><li>Shift_JIS or UTF-8( 非公式 ) </li></ul></ul><ul><ul><ul><li>SSL 領域は UTF-8 が使えない </li></ul></ul></ul><ul><li>SoftBank </li></ul><ul><ul><li>Shift_JIS or UTF-8 </li></ul></ul><ul><ul><ul><li>Shift_JIS では、機種によって絵文字が POST されてこない。 </li></ul></ul></ul><ul><li>それぞれ、赤字の文字コードで出力するべき。 </li></ul>
  8. 8. symfony でモバイル開発 <ul><li>ライブラリや拡張をうまくやっておくと、通常の Web サイトと同様の開発が可能 </li></ul><ul><li>自分はどんな対応をしているか?を紹介 </li></ul><ul><li>モバイルフィルタ </li></ul><ul><ul><li>キャリア判定の実装 </li></ul></ul><ul><ul><li>絵文字 / 文字コード変換 </li></ul></ul><ul><ul><li>CSS の切り替え </li></ul></ul><ul><li>テンプレートとモバイル用ヘルパー </li></ul><ul><li>セッションのモバイル対応 </li></ul>
  9. 9. symfony のフィルタ
  10. 10. モバイルフィルタの作成 <ul><li>モバイル特有の処理を行うフィルタクラスを作成 </li></ul><ul><li>apps/app_name/config/filters.yml に追記 </li></ul>rendering: ~ web_debug: ~ security: ~ # generally, you will want to insert your own filters here mobile: class: myMobileFilter cache: ~ common: ~ flash: ~ execution: ~
  11. 11. モバイルフィルタの作成 <ul><li>apps/app_name/lib/myMobileFIlter.class.php </li></ul><ul><li>sfFilter を継承したクラスに実装を加えていく </li></ul><?php class myMobileFilter extends sfFilter { public function execute($filterChain) { // execute() の前に書くと preFilter $filterChain->execute(); // execute() の後に書くと postFilter } }
  12. 12. キャリア判別 <ul><li>Net_UserAgent_Mobile を利用 </li></ul><ul><ul><li>symfony の autoload 機構 </li></ul></ul><ul><li>app/app_name/config/autoload.yml を作成 </li></ul><ul><li>これで、 symfony の autoload 対象となるので、これを myMobileFilter 内で利用 </li></ul>autoload: PEAR: name: PEAR files: Net_UserAgent_Mobile: /path/to/Net/UserAgent/Mobile.php
  13. 13. キャリア判別 <ul><li>myMobileFilter.class.php ( 抜粋 ) </li></ul><ul><li>判別結果を Request の attribute に入れておく </li></ul>public function execute($filterChain) { $request = $this->getContext()->getRequest(); $response = $this->getContext()->getResponse(); if ($this->isFirstCall()) { $agent = @Net_UserAgent_Mobile::singleton(); switch (true) { case $agent->isDoCoMo(): $carrier = 'docomo'; $response->setContentType('application/xhtml+xml; charset=Shift_JIS'); break; case $agent->isEzweb(): // 中略 } $request->setAttribute('agent', $agent); $request->setAttribute('carrier', $carrier); } $filterChain->execute(); preFilter 部に設定 出力ヘッダを指定
  14. 14. 絵文字の変換 <ul><li>sfPictogramMobilePlugin を利用 </li></ul><ul><ul><li>手前味噌 ( ^^;ゞ </li></ul></ul><ul><li>myMobileFilter.class.php ( 抜粋 ) </li></ul>$ symfony plugin-install http://blog.asial.co.jp/data/sfPictogramMobilePlugin-0.0.4.tgz ・ ・ $request->setAttribute('agent', $agent); $request->setAttribute('carrier', $carrier); $pictogram = sfPictogramMobile::factory($carrier, 'utf-8'); $request->setAttribute('pictogram', $pictogram); } $filterChain->execute(); $content = $response->getContent(); $content = $request->getAttribute('pictogram')->replace($content); $response->setContent($content); } } postFilter 文書全体を取得
  15. 15. 文字コードの変換 <ul><li>内部の運用文字コードは UTF-8 に統一する。 </li></ul><ul><li>入出力時に、キャリア毎に表示エンコードとの相互変換を行う。 </li></ul><ul><ul><li>DoCoMo : Shift_JIS </li></ul></ul><ul><ul><li>Au : Shift_JIS </li></ul></ul><ul><ul><li>SoftBank : UTF-8 </li></ul></ul><ul><li>で運用。 </li></ul><ul><li>コードは長くなりすぎるのでかいつまんで。。。 </li></ul>
  16. 16. 文字コードの変換 <ul><li>入力時 </li></ul><ul><ul><li>preFilter にて入力データ全体を取得し、これに再帰的な文字コード変換を施す。 </li></ul></ul><ul><ul><li>絵文字の変換は </li></ul></ul><ul><ul><li>のようにすると、化けずにエンコードできる。 </li></ul></ul><ul><li>出力時 </li></ul><ul><ul><li>出力する $content 全体に文字コード変換 </li></ul></ul>$parameter = $request->getParameterHolder()->getAll(); $pict_output = sfPictogramMobile::factory($carrier, $pict_encode); $value = $pict_output->convert ($value); mb_convert_variables($internal_encoding, $view_encoding, $value); $value = $pictogram->restore ($value);
  17. 17. CSS の切り替え <ul><li>外部 CSS を設定し、キャリア毎に切替 </li></ul><ul><li>myMobileFilter.class.php ( 抜粋 ) </li></ul><ul><li>CSS を動的に切り替えるように。 </li></ul>if ($this->isFirstCall()) { $request = $this->getContext()->getRequest(); $agent = @Net_UserAgent_Mobile::singleton(); switch (true) { case $agent->isDoCoMo(): $carrier = 'docomo'; $response->setContentType('application/xhtml+xml; charset=Shift_JIS'); $responce->addStylesheet('/path/to/docomo.css'); break; case $agent->isEzweb(): $carrier = 'ezweb'; $responce->addStylesheet('/path/to/ezweb.css'); // 略 ・ ・ キャリア別の CSS を指定
  18. 18. CSS の切り替え <ul><li>DoCoMo が i-CSS でインラインしか使えない。。 </li></ul><ul><li>HTML_CSS_Mobile を利用 </li></ul><ul><ul><li>やっぱり手前味噌 ( ^^ ;; ゞ </li></ul></ul><ul><li>適当な場所にインストール </li></ul><ul><li>myMobileFilter.class.php ( 抜粋 ) </li></ul>$ pear install HTML_CSS $ svn co http ://svn.coderepos.org/share/lang/php/HTML_CSS_Mobile/trunk / /path/to/lib $filterChain->execute(); $content = $response->getContent(); $content = $request->getAttribute('pictogram')->replace($content); if ($request->getAttribute('carrier') == 'docomo') { $content = HTML_CSS_Mobile::getInstance()->setBaseDir('/path/to/doc_root')->apply($content); } $response->setContent($content); 出力直前に CSS を インライン展開
  19. 19. テンプレートとヘルパー <ul><li>モバイルフィルタの作成 </li></ul><ul><ul><li>キャリア判定の実装 </li></ul></ul><ul><ul><li>絵文字 / 文字コード変換 </li></ul></ul><ul><ul><li>CSS の切り替え </li></ul></ul><ul><li>テンプレートとモバイル用ヘルパー </li></ul><ul><li>セッションのモバイル対応 </li></ul>
  20. 20. symfony のテンプレート機能
  21. 21. テンプレートの対応 <ul><li>全体を規定するレイアウトファイルを変更 </li></ul><ul><li>apps/app_name/templates/layout.php( 抜粋) </li></ul><ul><li>パーシャルを使って XML/DTD 宣言を切り替える </li></ul><ul><li>apps/app_name/templates/_dtd.php を作成 </li></ul><? include_partial('global/dtd'); ?> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;ja&quot; lang=&quot;ja&quot;> <head> <?php switch (sfContext::getInstance()->getRequest()->getAttribute('carrier')): ?> <?php case 'docomo': ?> <?php echo '<'; ?>?xml version=&quot;1.0&quot; encoding=&quot;Shift_JIS&quot; ?> <!DOCTYPE html PUBLIC &quot;-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1) 1.0//EN&quot; &quot;i-xhtml_4ja_10.dtd&quot;> <?php break; ?> <?php case 'ezweb': ?> <?php echo '<'; ?>?xml version=&quot;1.0&quot; encoding=&quot;Shift_JIS&quot; ?> <!DOCTYPE html PUBLIC &quot;-//OPENWAVE//DTD XHTML 1.0//EN&quot; &quot;http://www.openwave.com/DTD/xhtml-basic.dtd&quot;> // 以下略。。。
  22. 22. テンプレートの対応 <ul><li>CSS や DTD 宣言の動的な切り替えが行われているので、各モジュールのテンプレートファイルはキャリアをほとんど気にせず編集できる。 </li></ul><ul><li>「完全に気にせず」ではないので注意。 </li></ul><ul><ul><li>モバイルの HTML ならではの、バッドノウハウが必要になるところもある。 </li></ul></ul><ul><li>その他、キャリア毎に切り替えが必要なものはヘルパーとして実装する。 </li></ul>
  23. 23. モバイルヘルパーの実装 <ul><li>mailto や input 要素の問題などを吸収する </li></ul><ul><li>apps/app_name/lib/helper/MobileHelper.php を作成 </li></ul><ul><li>mailto の文字化けをこれで回避 </li></ul>function m_mail_to($email, $name = ‘’, $options = array(), $default_value = array()) { $carrier = sfContext::getInstance()->getRequest()->getAttribute('carrier'); if ($carrier == 'docomo' || $carrier == 'ezweb') { foreach ($default_value as $key => $val) { $default_value[$key] = mb_convert_encoding($val, 'SJIS-win', 'UTF-8'); } } return mail_to($email, $name, $options, $default_value); } 内部文字コードが UTF-8 なので、 docomo と au を SJIS にしている
  24. 24. モバイルヘルパーの実装 <ul><li>input 要素も同様に作成 </li></ul>function m_input_tag($name, $value = null, $options = array()) { $carrier = sfContext::getInstance()->getRequest()->getAttribute('carrier'); if (isset($options['input_style']) && $input_style = strtolower($options[&quot;input_style&quot;])) { unset($options[&quot;input_style&quot;]); switch (strtolower($input_style)) { case &quot;kana&quot;: $options[&quot;mode&quot;] = &quot;hiragana&quot;; if ($carrier != 'docomo') { $options[&quot;istyle&quot;] = &quot;1&quot;; $options[&quot;format&quot;] = &quot;*M&quot;; } else { $options[&quot;style&quot;] .= &quot;;-wap-input-format:&quot;*&lt;ja:h&gt;&quot;;-wap-input-format:*M;&quot;; } break; // 中略 } return input_tag($name, $value, $options); } 付与する属性を変え、入力モードを適切に切り替えている
  25. 25. セッションのモバイル対応 <ul><li>モバイルフィルタの作成 </li></ul><ul><ul><li>キャリア判定の実装 </li></ul></ul><ul><ul><li>絵文字 / 文字コード変換 </li></ul></ul><ul><ul><li>CSS の切り替え </li></ul></ul><ul><li>テンプレートとモバイル用ヘルパー </li></ul><ul><li>セッションのモバイル対応 </li></ul>
  26. 26. セッションのモバイル対応 <ul><li>DoCoMo 全機種と SoftBank の一部機種で Cookie が使用不可 </li></ul><ul><li>特定の場合のみ session.use_trans_sid を使う </li></ul><ul><li>apps/app_name/lib/myMobileSessionStorage.class.php を作成 </li></ul>class myMobileSessionStorage extends sfSessionStorage { public function initialize($context, $parameters = null) { $agent = @Net_UserAgent_Mobile::singleton(); if ($agent->isDoCoMo() || $agent->isSoftBank()) { ini_set('session.use_only_cookies', 0); ini_set('session.use_cookies', 0); ini_set('session.use_trans_sid', 1); } parent::initialize($context, $parameters); } }
  27. 27. セッションのモバイル対応 <ul><li>Redirect() の場合にセッションが途切れてしまう。 </li></ul><ul><li>apps/app_name/lib/myMobileSessionStorage.class.php を作成 </li></ul>class myMobileFrontController extends sfFrontWebController { public function redirect($url, $delay = 0 ,$statusCode = 302) { $request = $this->getContext()->getRequest(); if ($agent = $this->getContext()->getRequest()->getAttribute('agent')) { if ($agent->isDoCoMo() || $agent->isSoftBank()) { $url = $this->implementParameter($url, SID); } } parent::redirect($url, $delay, $statusCode); } private function implementParameter($url, $implement) { // 略 } } SID(session_id) を含めてリダイレクト URL を再構成
  28. 28. セッションのモバイル対応 <ul><li>ついでに。。。 DoCoMo の guid もここで対応 </li></ul>class myMobileFrontController extends sfFrontWebController { public function redirect($url, $delay = 0 ,$statusCode = 302) { // 略 } public function genUrl($parameters = array(), $absolute = false) { $url = parent::genUrl($parameters, $absolute); if ($agent = $this->getContext()->getRequest()->getAttribute('agent')) { if ($agent->isDoCoMo()) { $url = $this->implementParameter($url, 'guid=ON'); } } return $url; } private function implementParameter($url, $implement) { // 略 } }
  29. 29. セッションのモバイル対応 <ul><li>拡張したクラスを利用するように、設定変更 </li></ul><ul><li>apps/app_name/config/factories.yml </li></ul><ul><li>これで、セッション ID が DoCoMo/SoftBank の場合に QueryString につく </li></ul>// 上略 all: controller: class: myMobileFrontController storage: class: myMobileSessionStorage param: session_name: symfony
  30. 30. まとめ? <ul><li>Filter やコンポーネントの拡張を活用すれば、モバイル端末に依存する部分のほとんどを無理なく処理できる。 </li></ul><ul><li>うまくまとめれば、 plugin 化も容易なので、効率化も図れる。 </li></ul><ul><li>絵文字・ HTML/CSS のぐだぐだ部分なんかも、ライブラリをうまく活用することでテンプレート作成の労力も大幅に減らせる。 </li></ul>
  31. 31. おわりに <ul><li>トライコーンさん、いつも会場提供ありがとうございます>< </li></ul><ul><li>ご清聴ありがとうございました。 </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×