greeのhtml5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs...
Post on 01-Sep-2019
3 Views
Preview:
TRANSCRIPT
GREEのHTML5とiOS+Android対応
グリー株式会社ソーシャルメディア統括部 エンジニア
熊谷 健太郎 (@ku)
http://t.gree.jp/ku0522
2011年3月3日木曜日
2011年3月3日木曜日
もくじ• スマートフォン版GREEについて
• アーキテクチャの選択肢
• ライブラリ比較
• emojiとpush
• まとめ
2011年3月3日木曜日
スマートフォン版GREE概要• 2010/8/9リリース
• すべてajax
• iOS2.0~, android1.6~で動作
• HTML5+CSS3+javascript
• 絵文字対応
• http://t.gree.jp/
2011年3月3日木曜日
スマートフォン版GREE概要• 2010/8/9リリース
• すべてajax
• iOS2.0~, android1.6~で動作
• HTML5+CSS3+javascript
• 絵文字対応
• http://t.gree.jp/
2011年3月3日木曜日
ajax + ストリーム
2011年3月3日木曜日
2011年3月3日木曜日
2011年3月3日木曜日
アーキテクチャの選択肢
✴ ページの表示方法
ajax vs static HTML
✴ HTMLの組み立て方
DOM vs innerHTML
2011年3月3日木曜日
ajax vs static HTML✴ajax
• レンダリング時間が短い
• 待ち時間が短く感じられる
• facebook, youtube, etc...
✴static HTML
• 開発が楽
• permalinkを持たせるのが容易
2011年3月3日木曜日
DOM vs innerHTML✴DOM
• Application Cache, Web SQL Database等と組み合わせて高度なウェブアプリを開発可能
• ネイティブアプリとAPIを共通化可能
✴innerHTML
• レンダリング時間が短い
• 開発が楽
2011年3月3日木曜日
左上に行くほど快適だが実装が複雑
ajax static HTML
DOMウェブアプリ
(ex. gmail)NA
innerHTML GREE 通常のサイト
2011年3月3日木曜日
ライブラリiUI, jqTouch, SenchaTouchなどを検討
• レイアウトのパターン制約
• androidでもiOSっぽい見た目
• 使われている例が少ない(ex. mixi touch)
2011年3月3日木曜日
今から作るなら✴ jQuery Mobile (alpha3)
規約に従ってHTMLを書くとtouchデバイスに最適化された表示にしてくれる
✴ 手作りボタンを大きくするだけでも快適に
✴ Titanium Mobilejsでネイティブアプリ
2011年3月3日木曜日
EmojiとPush• Emoji
• iOS 2.2~
• Android
• Push
• Apple Push Notification (iOS 3.0~)
• C2DM (Android 2.2~)
2011年3月3日木曜日
• UTF-8 Private Use Areaを使用
• SoftBankの絵文字と1:1対応(™だけ例外)
• UTF-8/実体参照で出力
• 日本のケータイ向け変換も容易
emoji(iOS)
2011年3月3日木曜日
2011年3月3日木曜日
emoji(android)
• OS標準では入力・表示非サポート
KEYCODE_PICTSYMBOLS(2.3~)
• サードパーティのIMEでいちおう入力可能
• フォントにグリフがない
2011年3月3日木曜日
2011年3月3日木曜日
Issue 10059 - android - Browser does not render Unicode snowman character (U+2603) http://code.google.com/p/android/issues/detail?id=10059
2011年3月3日木曜日
Apple Push NotificationGREE上で発生したイベントをお知らせ
• メール
• 友だち希望
• コメント
• いいね
• etc.
2011年3月3日木曜日
2011年3月3日木曜日
運用状況と今後の予定• 1/4から運用開始
• 遅延は5秒程度
• 送信量制限なし(？)
• GREE独自非同期処理サーバで実装
• php-apns, AnyEvent::APNS
• GREE Platformでも対応の予定
2011年3月3日木曜日
C2DMCloud To Device Messaging
• Apple Push Notificationとほぼ同じ
• 今のところLabs扱い
"will ultimately be available to all developers"
• 登録申込時に使用量を連絡
2011年3月3日木曜日
GREE
Android Device
Google C2DM Server
2011年3月3日木曜日
GREE
Android Device
Google C2DM Server
2011年3月3日木曜日
GREE
Android Device
Google C2DM ServerREGISTER
2011年3月3日木曜日
GREE
Android Device
Google C2DM ServerREGISTER
2011年3月3日木曜日
GREE
Android Device
Google C2DM ServerREGISTER
REGISTRATION
2011年3月3日木曜日
GREE
Android Device
Google C2DM ServerREGISTER
REGISTRATION
2011年3月3日木曜日
GREE
Android Device
Google C2DM ServerREGISTER
REGISTRATION
registration ID
2011年3月3日木曜日
GREE
Android Device
Google C2DM ServerREGISTER
REGISTRATION
registration ID
registration ID
2011年3月3日木曜日
GREE
Android Device
Google C2DM Server
registration ID
2011年3月3日木曜日
GREE
Android Device
Google C2DM Server
registration ID
2011年3月3日木曜日
GREE
Android Device
Google C2DM Server
message+registration ID
registration ID
2011年3月3日木曜日
GREE
Android Device
Google C2DM Server
message+registration ID
registration ID
2011年3月3日木曜日
GREE
Android Device
Google C2DM Server
message+registration ID
RECEIVE+message
registration ID
2011年3月3日木曜日
まとめ• HTML5でブラウザだけでもいろいろできるようになりました
• ネイティブアプリでサービスの利便性・リアルタイム性を高めることができます
• まだスマートフォン時代の定石というものがないのでチャレンジしていきましょう
2011年3月3日木曜日
ありがとうございました
2011年3月3日木曜日
参考• Android Bazaar and Conference 2011 Winter
http://www.slideshare.net/greetech/abc2011w-6512925
• HTML5とか勉強会#15
http://t.co/zUlk11n
2011年3月3日木曜日
アニメGIFIssue 3422 - android - Animated GIF not working in browser
スロバーがきれいに回ってくれないので困る
• canvasで描く
• jsのタイマーで画像を入れ替える
Issue 3422 - android - Animated GIF not working in browser http://code.google.com/p/android/issues/detail?id=3422
2011年3月3日木曜日
Jason Parrott
アニメGIFファイルをXHRで持ってきてパースしてcanvasにレンダリングするよ！
ブラウザでアニメーションファイル(GIF)をJavaScript
を用いて再生する方法 | GREE Engineers' Blog
http://labs.gree.jp/blog/2011/02/2800/
2011年3月3日木曜日
• 要素を3次元的に変形させられる• iPhoneではGPUサポートあり
transform3d
Google Code Blog: CSS3 Transitions and Transforms in Gmail for the iPad http://googlecode.blogspot.com/2010/08/css3-transitions-and-transforms-in.html
2011年3月3日木曜日
• 要素を3次元的に変形させられる• iPhoneではGPUサポートあり
transform3d
Google Code Blog: CSS3 Transitions and Transforms in Gmail for the iPad http://googlecode.blogspot.com/2010/08/css3-transitions-and-transforms-in.html
2011年3月3日木曜日
devicePixelRatio
• 多くのandroid端末がwindow.devicePixelRatio=1.5
• 画像の1ピクセルがデバイス上では1.5ピクセルに拡大される
• 解決策• 2倍のサイズの画像を縮小して表示• <meta name=viewport target-densitydpi=device-dpi />
2011年3月3日木曜日
top related