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

1,049 views
1,036 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,049
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  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>

×