Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

モダンなモバイル開発のススメ

1,292 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

モダンなモバイル開発のススメ

  1. 1. 2009/02/14 北海道 LOCAL 合同勉強会 亀本 大地 (a.k.a: yudoufu) モダンなモバイル開発のススメ (PHP 編 )
  2. 2. 謝辞 <ul><li>発表の機会を与えてくださった LOCAL の皆様、ありがとうございます! </li></ul><ul><li>ちゃんとした講演の場だと思わず、しゃしゃりました <(_ _)> </li></ul><ul><ul><li>空気読めてないタイトル提出してすいません>< </li></ul></ul><ul><li>午睡の時間のつもりで聞いてね! </li></ul>
  3. 3. 自己紹介 <ul><li>ゆどうふ (id:Yudoufu) </li></ul><ul><ul><li>湯豆腐好きなので。 </li></ul></ul><ul><ul><li>http://wassr.jp/user/yudoufu </li></ul></ul><ul><li>本名:亀本大地 </li></ul><ul><li>1981 年生まれ </li></ul><ul><ul><li>でってぃぅ </li></ul></ul><ul><li>所属:アシアル株式会社-> </li></ul><ul><ul><li>PHP のシステム構築とかスクールとかやってます。 </li></ul></ul><ul><ul><li>最近 iPhone とか Android とかもやってます。 </li></ul></ul><ul><ul><ul><li>Objective-C 、イイ。。。 </li></ul></ul></ul>
  4. 4. 作った公開物とか <ul><li>Text_Pictogram_Mobile </li></ul><ul><ul><ul><li>http://openpear.org/package/Text_Pictogram_Mobile </li></ul></ul></ul><ul><ul><li>モバイル用絵文字操作・変換ライブラリ </li></ul></ul><ul><li>HTML_CSS_Mobile </li></ul><ul><ul><ul><li>http://openpear.org/package/HTML_CSS_Mobile </li></ul></ul></ul><ul><ul><li>モバイル向けに外部 CSS を展開して inline 化する </li></ul></ul><ul><ul><ul><li>同梱の selectorToXPath も便利。 </li></ul></ul></ul><ul><li>Mail_mime_XPath </li></ul><ul><ul><ul><li>http://coderepos.org/share/browser/lang/php/Mail_mime_XPath </li></ul></ul></ul><ul><ul><li>メールヘッダをパースして XPath 式で抽出 </li></ul></ul>
  5. 5. モダンなモバイル開発っていうけど <ul><li>要するに </li></ul><ul><ul><li>モバイル依存のgdgdコードをライブラリでなんとかして、気軽にやろうよ!という話。 </li></ul></ul><ul><ul><li>モバイルも昔からやるにはやってるけど、最近どんな感じでやるのがイイの?みたいな。 </li></ul></ul><ul><ul><ul><li>なんて呼べばいいかわからなかったので。 </li></ul></ul></ul><ul><ul><li>スマートフォンとかいう話じゃないです>< </li></ul></ul>
  6. 6. 話す事 <ul><ul><li>サポート対象を考える </li></ul></ul><ul><ul><li>キャリア / 機種判定 </li></ul></ul><ul><ul><li>HTML テンプレート </li></ul></ul><ul><ul><li>絵文字と文字コード </li></ul></ul><ul><ul><li>開発に便利なツール </li></ul></ul><ul><ul><li>まとめ </li></ul></ul>
  7. 7. ~サポート対象を考える~
  8. 8. キャリアとか世代とか <ul><li>市場のシェアのほとんどを占めるキャリアは3つ </li></ul><ul><ul><li>DoCoMo/au/SoftBank </li></ul></ul><ul><ul><ul><li>この3つは何が何でも抑える必要あり。 </li></ul></ul></ul><ul><ul><ul><li>Willcom や e-mobile もだんだん無視できなくなりだしてる。 </li></ul></ul></ul><ul><li>2G 端末と 3G 端末 </li></ul><ul><ul><li>2G->move 、 WAP1.0 、 3GC 以前 </li></ul></ul><ul><ul><li>3G->Foma 、 WAP2.0 、 3GC 以降 </li></ul></ul><ul><li>アクティブにモバイルインターネットを使う若年層は 9 割がた 3G 端末に移行してる </li></ul><ul><ul><li>mova は端末在庫自体が20万強らしい。 </li></ul></ul>
  9. 9. どこまで対応するか? <ul><li>ほとんどのサービス利用者は 3G になってる </li></ul><ul><ul><li>2G の契約者数自体は Willcom や emobile より若干上 </li></ul></ul><ul><ul><ul><li>でもモバイルサービス使いそうなのは後者 </li></ul></ul></ul><ul><ul><li>これらをどう扱うかはサービス次第 </li></ul></ul><ul><li>表現力や取得できる情報に違いがあるので、 2G/3G に両対応するとかなり大変 </li></ul><ul><li>「3キャリア・3Gのみ」がリーズナブル </li></ul>
  10. 10. ~キャリア / 機種判定~
  11. 11. キャリア / 端末情報の取得 <ul><li>基本的に HTTP ヘッダーから取得できる </li></ul><ul><ul><li>中には条件付きのものも </li></ul></ul><ul><li>中でも、取得すべき情報は主に以下の3つ </li></ul><ul><ul><li>キャリア / 機種名 </li></ul></ul><ul><ul><li>UserAgent から取得 </li></ul></ul><ul><ul><li>画面サイズ情報 </li></ul></ul><ul><ul><li>DoCoMo だけは DB を持っておく必要あり </li></ul></ul><ul><ul><li>au 、 SoftBank は独自ヘッダが飛んでくる </li></ul></ul><ul><ul><li>端末 ( ユーザ ) 固有 ID </li></ul></ul><ul><ul><li>形はいろいろだが、 HTTP ヘッダ経由。 </li></ul></ul><ul><ul><li>「かんたんログイン」の肝 </li></ul></ul>
  12. 12. どう取得するか? <ul><li>Net_UserAgent_Mobile </li></ul><ul><ul><ul><li>http://pear.php.net/package/Net_UserAgent_Mobile/ </li></ul></ul></ul><ul><ul><li>これはもう定番 </li></ul></ul><ul><li>HTTP ヘッダを色々いじりまわしてラッピングして、よしなにやってくれる。 </li></ul><ul><li>isDoCoMo()/isEZWeb()/isSoftBank() 。。。などのメソッドでキャリア判別可能になる。 </li></ul><ul><li>getUID() で端末固有 ID が取れる。 </li></ul><ul><ul><ul><li>i モード ID 用に guid=on をつけるのまではやってくれない </li></ul></ul></ul><ul><li>ほぼこれだけで、端末情報の問題はクリア </li></ul>
  13. 13. 使用例 <ul><li>昔と違って </li></ul><ul><ul><li>Vodafone -> SoftBank になってる </li></ul></ul><ul><ul><li>singleton が実装された </li></ul></ul>
  14. 14. Net_UserAgent_Mobile の注意点 <ul><li>DoCoMo は画面サイズ情報を返さないので、自前でデータベースが必要 </li></ul><ul><li>Net_UserAgent_Mobile_DoCoMo_ScreenInfo </li></ul><ul><ul><li>ここにある </li></ul></ul><ul><li>新しい機種が出た場合には、自分で追加していくようにしないといけない </li></ul><ul><ul><ul><li>http://www.nttdocomo.co.jp/service/imode/make/content/spec/screen_area/ </li></ul></ul></ul><ul><ul><li>pear upgrade した場合にも気をつける。 </li></ul></ul><ul><ul><li>画面サイズを使わないなら必要ない。 </li></ul></ul>
  15. 15. ~ HTML テンプレート~
  16. 16. モバイルの HTML <ul><li>HTML の定義がキャリアごとに違う。 </li></ul><ul><ul><li>共通テンプレート作りにもひと苦労 </li></ul></ul><ul><li>3G から各キャリアとも XHTML/CSS に対応 </li></ul><ul><ul><li>表現力が上がった </li></ul></ul><ul><ul><li>やっぱりキャリア独自だけど。 </li></ul></ul><ul><ul><li>BK の塊には変わりないけど。 </li></ul></ul><ul><li>デザイン性向上も狙えるため、旧来の HTML を使うより XHTML/CSS でやる方が良い </li></ul>
  17. 17. XHTML/CSS の悩み <ul><li>DoCoMo </li></ul><ul><ul><li>HTTP ヘッダーに application/xhtml+xml が必須 </li></ul></ul><ul><ul><li>i-CSS という独自拡張 CSS 。 Inline しか使えない。 </li></ul></ul><ul><li>au </li></ul><ul><ul><li>割と素直な XHTML 。拡張は少ない。 </li></ul></ul><ul><ul><li>外部 CSS も効くが、子孫セレクタとかは使えない </li></ul></ul><ul><li>SoftBank </li></ul><ul><ul><li>XHTML も CSS も素直。子孫セレクタも効く </li></ul></ul><ul><ul><li>文字サイズの拡縮が残念なことが多い。 </li></ul></ul><ul><li>3キャリア共通テンプレートを作るには、外部 CSS が使えない。。。 CSS 使う意味ないw </li></ul>
  18. 18. どう対処するか? <ul><li>HTML_CSS_Mobile </li></ul><ul><ul><ul><li>http://openpear.org/package/HTML_CSS_Mobile </li></ul></ul></ul><ul><ul><li>手前みそですが。 </li></ul></ul><ul><li>DoCoMo の場合にはこれで外部 CSS を展開 </li></ul><ul><li>キャリア毎に CSS を切り替えるようにする。 </li></ul><ul><ul><li>HTML テンプレートは共通にできる </li></ul></ul><ul><li>input タグの入力モード問題もこれで回避可能 </li></ul><ul><ul><ul><li>全端末チェックはしてないので心配は残る。。 </li></ul></ul></ul>
  19. 19. 使用例 <ul><li>CSS は HTML 内に書いてもいいし、プログラム側からでも追加できる。 </li></ul>
  20. 20. ~絵文字と文字コード~
  21. 21. 絵文字と文字コードのgdgd <ul><li>各キャリアとも、サポートする文字コードが限定的 </li></ul><ul><li>3G 端末になってから、全キャリア UTF-8 表示ができるように。 </li></ul><ul><li>絵文字も全キャリア UTF-8 バイナリの定義がある。 </li></ul><ul><li>これで統一できる!と思いきや案外だめだめ。 </li></ul>
  22. 22. 出力文字コード <ul><li>DoCoMo -> Shift_JIS </li></ul><ul><ul><li>UTF-8 だと、 POST 時に文字が消えるバグがある </li></ul></ul><ul><ul><ul><li>機種依存だけど、 3G でもろに現れるのでさすがに無理 </li></ul></ul></ul><ul><li>au -> Shift_JIS </li></ul><ul><ul><li>SSL 領域では UTF-8 が使用できない (Shift_JIS のみ ) </li></ul></ul><ul><ul><ul><li>元々、 UTF-8 は正式サポートではない。 </li></ul></ul></ul><ul><li>SoftBank -> UTF-8 </li></ul><ul><ul><li>Shift_JIS では、機種により絵文字が消えるバグ </li></ul></ul><ul><li>出力文字コードはキャリア毎に上記に切り替える。 </li></ul><ul><ul><li>もちろん絵文字もそれに準拠 </li></ul></ul>
  23. 23. 内部文字コード <ul><li>UTF-8 で運用 </li></ul><ul><ul><li>3キャリアに絵文字バイナリ定義が存在するので。 </li></ul></ul><ul><li>id:miyagawa 氏の見つけた au 裏 unicode を使うと、定義領域の被りなしで運用できる。 </li></ul><ul><li>DoCoMo と au は入力値を Shift_JIS から UTF-8 に変換してやる必要がある。 </li></ul><ul><ul><li>絵文字の変換をどうするか。 </li></ul></ul>
  24. 24. 絵文字を何とかするには? <ul><li>ライブラリの候補は2種類 </li></ul><ul><li>Text_Pictogram_Mobile </li></ul><ul><ul><ul><li>http://openpear.org/package/Text_Pictogram_Mobile </li></ul></ul></ul><ul><ul><li>au のメール絵文字にも対応 </li></ul></ul><ul><li>MobilePictogramConverter </li></ul><ul><ul><ul><li>http://php-develop.org/MobilePictogramConverter/ </li></ul></ul></ul><ul><ul><li>id:ryster さん作。 </li></ul></ul><ul><ul><li>バイナリ以外にも、文字参照も変換可能 </li></ul></ul><ul><li>どちらも絵文字バイナリを変換するなら同等 </li></ul><ul><li>ちょっとずつ機能が違うので、必要に応じて選択。 </li></ul>
  25. 25. ~開発に便利なツール~
  26. 26. 付いて回る面倒なテスト <ul><li>開発は実機で確認しながらなんて進められない </li></ul><ul><ul><li>エミュレータ重要 </li></ul></ul><ul><li>半端なエミュレータだと i モード ID などに対応できない </li></ul><ul><li>ヘッダ情報の入力・収集も大変 </li></ul><ul><li>HTML はどのみち実機確認なので、それほど実機準拠じゃなくても OK </li></ul><ul><ul><li>そこは開発者の要望よりデザイナの要望 </li></ul></ul>
  27. 27. 開発時のエミュレータ決定版 <ul><li>FireMobileSimulator </li></ul><ul><ul><ul><li>http://firemobilesimulator.org/ </li></ul></ul></ul><ul><ul><li>Firefox のアドオン </li></ul></ul><ul><li>各種ヘッダ情報の任意設定。 GPS も行ける。 </li></ul><ul><li>端末情報の切り替えの容易さ </li></ul><ul><li>端末サイズのエミュレート </li></ul><ul><li>http://ke-tai.org/ の携帯 DB と連動 </li></ul><ul><ul><li>欲しい端末情報がすぐ追加できる </li></ul></ul><ul><li>これと LiveHTTPHeader の組み合わせが最強 </li></ul><ul><ul><li>他に何も要りません。。。(^^; </li></ul></ul>
  28. 28. ~まとめ~
  29. 29. まとめ <ul><li>3キャリア・3Gサポートのみで行くという選択肢 </li></ul><ul><ul><ul><li>これはサービス次第 </li></ul></ul></ul><ul><li>端末情報取得は定番、 Net_UserAgent_Mobile </li></ul><ul><li>テンプレート共通化は HTML_CSS_Mobile </li></ul><ul><ul><ul><li>CSS ファイル切り替えによるデザイン調整で実現 </li></ul></ul></ul><ul><li>運用文字コードは内部は UTF-8 、出力はキャリア毎に適切に切り替えるべし。 </li></ul><ul><ul><ul><li>絵文字は適切なライブラリでカバー可能 </li></ul></ul></ul><ul><li>テスト環境は FireMobileSimulator 最強説 </li></ul>
  30. 30. <ul><li>ご清聴ありがとうございました>< </li></ul>

×