モダンなモバイル開発のススメ
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,218 views

 

Statistics

Views

Total Views
1,218
Views on SlideShare
1,218
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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