• HOME
• Webキャッシュ
• viewer
• マイページ
• アップロード

スライド1: モダンなモバイル開発のススメ (PHP編)2009/02/14北海道LOCAL合同勉強会亀本　 大地(a.k.a: yudoufu)

スライド2: 謝辞・ 発表の機会を与えてくださったLOCALの皆様、ありがとうございます!・ ちゃんとした講演の場だと思わず、しゃしゃりました<(_ _)>・ 空気読めてないタイトル提出してすいません><・ 午睡の時間のつもりで聞いてね!

スライド3: 自己紹介・ ゆどうふ(id:Yudoufu)・ 湯豆腐好きなので。・ http://wassr.jp/user/yudoufu・ 本名:亀本大地・ 1981年生まれ・ でってぃぅ・ 所属:アシアル株式会社 →・ PHPのシステム構築とかスクールとかやってます。・ 最近iPhoneとかAndroidとかもやってます。・ Objective­C、イイ。。。

スライド4: 作った公開物とか・ 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_XPatメールヘッダをパースしてXPath式で抽出

スライド5: モダンなモバイル開発っていうけど・ 要するに・ モバイル依存のgdgdコードをライブラリでなんとかして、気軽にやろうよ!という話。・ モバイルも昔からやるにはやってるけど、最近どんな感じでやるのがイイの?みたいな。・ なんて呼べばいいかわからなかったので。・ スマートフォンとかいう話じゃないです><

スライド6: 話す事・サポート対象を考える・キャリア/機種判定・HTMLテンプレート・絵文字と文字コード・開発に便利なツール・まとめ

スライド7: ~サポート対象を考える~

スライド8: キャリアとか世代とか・ 市場のシェアのほとんどを占めるキャリアは3つ・ DoCoMo/au/SoftBank・ この3つは何が何でも抑える必要あり。・ Willcomやe­mobileもだんだん無視できなくなりだしてる。・ 2G端末と3G端末2G→ move 、WAP1.0、3GC以前3G→ Foma 、WAP2.0、3GC以降・ アクティブにモバイルインターネットを使う若年層は9割がた3G端末に移行してる・ movaは端末在庫自体が20万強らしい。

スライド9: どこまで対応するか?・ ほとんどのサービス利用者は3Gになってる・ 2Gの契約者数自体はWillcomやemobileより若干上・ でもモバイルサービス使いそうなのは後者・ これらをどう扱うかはサービス次第・ 表現力や取得できる情報に違いがあるので、2G/3Gに両対応するとかなり大変・ 「3キャリア・3Gのみ」がリーズナブル

スライド10: ~キャリア/機種判定~

スライド11: キャリア/端末情報の取得・ 基本的にHTTPヘッダーから取得できる・ 中には条件付きのものも中でも、取得すべき情報は主に以下の3つ・ キャリア/機種名UserAgentから取得・ 画面サイズ情報DoCoMoだけはDBを持っておく必要ありau、SoftBankは独自ヘッダが飛んでくる・ 端末(ユーザ)固有ID形はいろいろだが、HTTPヘッダ経由。「かんたんログイン」の肝

スライド12: どう取得するか?・ Net_UserAgent_Mobile・ http://pear.php.net/package/Net_UserAgent_Mobile/・ これはもう定番・ HTTPヘッダを色々いじりまわしてラッピングして、よしなにやってくれる。・ isDoCoMo()/isEZWeb()/isSoftBank()。。。などのメソッドでキャリア判別可能になる。・ getUID()で端末固有IDが取れる。・ iモードID用にguid=onをつけるのまではやってくれない・ ほぼこれだけで、端末情報の問題はクリア

スライド13: 使用例・ 昔と違って・ Vodafone   SoftBank→ になってる・ singletonが実装された

スライド14: Net_UserAgent_Mobileの注意点・ DoCoMoは画面サイズ情報を返さないので、自前でデータベースが必要・ Net_UserAgent_Mobile_DoCoMo_ScreenInfo・ ここにある・ 新しい機種が出た場合には、自分で追加していくようにしないといけない・ http://www.nttdocomo.co.jp/service/imode/make/content/spec・ pear  upgradeした場合にも気をつける。・ 画面サイズを使わないなら必要ない。

スライド15: ~HTMLテンプレート~

スライド16: モバイルのHTML・ HTMLの定義がキャリアごとに違う。・ 共通テンプレート作りにもひと苦労・ 3Gから各キャリアともXHTML/CSSに対応・ 表現力が上がった・ やっぱりキャリア独自だけど。・ BKの塊には変わりないけど。・ デザイン性向上も狙えるため、旧来のHTMLを使うよりXHTML/CSSでやる方が良い

スライド17: XHTML/CSSの悩み・ DoCoMoHTTPヘッダーにapplication/xhtml+xmlが必須i­CSSという独自拡張CSS。Inlineしか使えない。・ au割と素直なXHTML。拡張は少ない。外部CSSも効くが、子孫セレクタとかは使えない・ SoftBankXHTMLもCSSも素直。子孫セレクタも効く文字サイズの拡縮が残念なことが多い。3キャリア共通テンプレートを作るには、外部CSSが使えない。。。CSS使う意味ないw

スライド18: どう対処するか?・ HTML_CSS_Mobile・ http://openpear.org/package/HTML_CSS_Mobile・ 手前みそですが。・ DoCoMoの場合にはこれで外部CSSを展開・ キャリア毎にCSSを切り替えるようにする。・ HTMLテンプレートは共通にできる・ inputタグの入力モード問題もこれで回避可能・ 全端末チェックはしてないので心配は残る。。

スライド19: 使用例・ CSSはHTML内に書いてもいいし、プログラム側からでも追加できる。

スライド20: ~絵文字と文字コード~

スライド21: 絵文字と文字コードのgdgd・ 各キャリアとも、サポートする文字コードが限定的・ 3G端末になってから、全キャリアUTF­8表示ができるように。・ 絵文字も全キャリアUTF­8バイナリの定義がある。・ これで統一できる!と思いきや案外だめだめ。

スライド22: 出力文字コード・ DoCoMo  →  Shift_JIS・ UTF­8だと、POST時に文字が消えるバグがある・ 機種依存だけど、3Gでもろに現れるのでさすがに無理・ au →  Shift_JIS・ SSL領域ではUTF­8が使用できない(Shift_JISのみ)・ 元々、UTF­8は正式サポートではない。・ SoftBank  →  UTF­8・ Shift_JISでは、機種により絵文字が消えるバグ・ 出力文字コードはキャリア毎に上記に切り替える。・ もちろん絵文字もそれに準拠

スライド23: 内部文字コード・ UTF­8で運用・ 3キャリアに絵文字バイナリ定義が存在するので。・ id:miyagawa氏の見つけたau裏unicodeを使うと、定義領域の被りなしで運用できる。・ DoCoMoとauは入力値をShift_JISからUTF­8に変換してやる必要がある。・ 絵文字の変換をどうするか。

スライド24: 絵文字を何とかするには?・ ライブラリの候補は2種類・ Text_Pictogram_Mobile・ http://openpear.org/package/Text_Pictogram_Mobile・ auのメール絵文字にも対応・ MobilePictogramConverter・ http://php­develop.org/MobilePictogramConverter/・ id:rysterさん作。・ バイナリ以外にも、文字参照も変換可能・ どちらも絵文字バイナリを変換するなら同等ちょっとずつ機能が違うので、必要に応じて選択。

スライド25: ~開発に便利なツール~

スライド26: 付いて回る面倒なテスト・ 開発は実機で確認しながらなんて進められない・ エミュレータ重要・ 半端なエミュレータだとiモードIDなどに対応できない・ ヘッダ情報の入力・収集も大変・ HTMLはどのみち実機確認なので、それほど実機準拠じゃなくてもOK・ そこは開発者の要望よりデザイナの要望

スライド27: 開発時のエミュレータ決定版・ FireMobileSimulator・ http://firemobilesimulator.org/・ Firefoxのアドオン・ 各種ヘッダ情報の任意設定。GPSも行ける。・ 端末情報の切り替えの容易さ・ 端末サイズのエミュレート・ http://ke­tai.org/の携帯DBと連動・ 欲しい端末情報がすぐ追加できる・ これとLiveHTTPHeaderの組み合わせが最強・ 他に何も要りません。。。(^^;

スライド28: ~まとめ~

スライド29: まとめ・ 3キャリア・3Gサポートのみで行くという選択肢・ これはサービス次第・ 端末情報取得は定番、Net_UserAgent_Mobile・ テンプレート共通化はHTML_CSS_Mobile・ CSSファイル切り替えによるデザイン調整で実現・ 運用文字コードは内部はUTF­8、出力はキャリア毎に適切に切り替えるべし。・ 絵文字は適切なライブラリでカバー可能・ テスト環境はFireMobileSimulator最強説

スライド30: ご清聴ありがとうございました><