greeのhtml5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs...
TRANSCRIPT
![Page 1: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/1.jpg)
GREEのHTML5とiOS+Android対応
グリー株式会社ソーシャルメディア統括部 エンジニア
熊谷 健太郎 (@ku)
http://t.gree.jp/ku0522
2011年3月3日木曜日
![Page 2: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/2.jpg)
2011年3月3日木曜日
![Page 3: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/3.jpg)
もくじ• スマートフォン版GREEについて
• アーキテクチャの選択肢
• ライブラリ比較
• emojiとpush
• まとめ
2011年3月3日木曜日
![Page 4: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/4.jpg)
スマートフォン版GREE概要• 2010/8/9リリース
• すべてajax
• iOS2.0~, android1.6~で動作
• HTML5+CSS3+javascript
• 絵文字対応
• http://t.gree.jp/
2011年3月3日木曜日
![Page 5: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/5.jpg)
スマートフォン版GREE概要• 2010/8/9リリース
• すべてajax
• iOS2.0~, android1.6~で動作
• HTML5+CSS3+javascript
• 絵文字対応
• http://t.gree.jp/
2011年3月3日木曜日
![Page 6: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/6.jpg)
ajax + ストリーム
2011年3月3日木曜日
![Page 7: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/7.jpg)
2011年3月3日木曜日
![Page 8: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/8.jpg)
2011年3月3日木曜日
![Page 9: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/9.jpg)
アーキテクチャの選択肢
✴ ページの表示方法
ajax vs static HTML
✴ HTMLの組み立て方
DOM vs innerHTML
2011年3月3日木曜日
![Page 10: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/10.jpg)
ajax vs static HTML✴ajax
• レンダリング時間が短い
• 待ち時間が短く感じられる
• facebook, youtube, etc...
✴static HTML
• 開発が楽
• permalinkを持たせるのが容易
2011年3月3日木曜日
![Page 11: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/11.jpg)
DOM vs innerHTML✴DOM
• Application Cache, Web SQL Database等と組み合わせて高度なウェブアプリを開発可能
• ネイティブアプリとAPIを共通化可能
✴innerHTML
• レンダリング時間が短い
• 開発が楽
2011年3月3日木曜日
![Page 12: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/12.jpg)
左上に行くほど快適だが実装が複雑
ajax static HTML
DOMウェブアプリ
(ex. gmail)NA
innerHTML GREE 通常のサイト
2011年3月3日木曜日
![Page 13: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/13.jpg)
ライブラリiUI, jqTouch, SenchaTouchなどを検討
• レイアウトのパターン制約
• androidでもiOSっぽい見た目
• 使われている例が少ない(ex. mixi touch)
2011年3月3日木曜日
![Page 14: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/14.jpg)
今から作るなら✴ jQuery Mobile (alpha3)
規約に従ってHTMLを書くとtouchデバイスに最適化された表示にしてくれる
✴ 手作りボタンを大きくするだけでも快適に
✴ Titanium Mobilejsでネイティブアプリ
2011年3月3日木曜日
![Page 15: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/15.jpg)
EmojiとPush• Emoji
• iOS 2.2~
• Android
• Push
• Apple Push Notification (iOS 3.0~)
• C2DM (Android 2.2~)
2011年3月3日木曜日
![Page 16: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/16.jpg)
• UTF-8 Private Use Areaを使用
• SoftBankの絵文字と1:1対応(™だけ例外)
• UTF-8/実体参照で出力
• 日本のケータイ向け変換も容易
emoji(iOS)
2011年3月3日木曜日
![Page 17: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/17.jpg)
2011年3月3日木曜日
![Page 18: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/18.jpg)
emoji(android)
• OS標準では入力・表示非サポート
KEYCODE_PICTSYMBOLS(2.3~)
• サードパーティのIMEでいちおう入力可能
• フォントにグリフがない
2011年3月3日木曜日
![Page 19: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/19.jpg)
2011年3月3日木曜日
![Page 20: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/20.jpg)
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日木曜日
![Page 21: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/21.jpg)
Apple Push NotificationGREE上で発生したイベントをお知らせ
• メール
• 友だち希望
• コメント
• いいね
• etc.
2011年3月3日木曜日
![Page 22: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/22.jpg)
2011年3月3日木曜日
![Page 23: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/23.jpg)
運用状況と今後の予定• 1/4から運用開始
• 遅延は5秒程度
• 送信量制限なし(?)
• GREE独自非同期処理サーバで実装
• php-apns, AnyEvent::APNS
• GREE Platformでも対応の予定
2011年3月3日木曜日
![Page 24: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/24.jpg)
C2DMCloud To Device Messaging
• Apple Push Notificationとほぼ同じ
• 今のところLabs扱い
"will ultimately be available to all developers"
• 登録申込時に使用量を連絡
2011年3月3日木曜日
![Page 25: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/25.jpg)
GREE
Android Device
Google C2DM Server
2011年3月3日木曜日
![Page 26: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/26.jpg)
GREE
Android Device
Google C2DM Server
2011年3月3日木曜日
![Page 27: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/27.jpg)
GREE
Android Device
Google C2DM ServerREGISTER
2011年3月3日木曜日
![Page 28: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/28.jpg)
GREE
Android Device
Google C2DM ServerREGISTER
2011年3月3日木曜日
![Page 29: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/29.jpg)
GREE
Android Device
Google C2DM ServerREGISTER
REGISTRATION
2011年3月3日木曜日
![Page 30: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/30.jpg)
GREE
Android Device
Google C2DM ServerREGISTER
REGISTRATION
2011年3月3日木曜日
![Page 31: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/31.jpg)
GREE
Android Device
Google C2DM ServerREGISTER
REGISTRATION
registration ID
2011年3月3日木曜日
![Page 32: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/32.jpg)
GREE
Android Device
Google C2DM ServerREGISTER
REGISTRATION
registration ID
registration ID
2011年3月3日木曜日
![Page 33: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/33.jpg)
GREE
Android Device
Google C2DM Server
registration ID
2011年3月3日木曜日
![Page 34: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/34.jpg)
GREE
Android Device
Google C2DM Server
registration ID
2011年3月3日木曜日
![Page 35: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/35.jpg)
GREE
Android Device
Google C2DM Server
message+registration ID
registration ID
2011年3月3日木曜日
![Page 36: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/36.jpg)
GREE
Android Device
Google C2DM Server
message+registration ID
registration ID
2011年3月3日木曜日
![Page 37: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/37.jpg)
GREE
Android Device
Google C2DM Server
message+registration ID
RECEIVE+message
registration ID
2011年3月3日木曜日
![Page 38: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/38.jpg)
まとめ• HTML5でブラウザだけでもいろいろできるようになりました
• ネイティブアプリでサービスの利便性・リアルタイム性を高めることができます
• まだスマートフォン時代の定石というものがないのでチャレンジしていきましょう
2011年3月3日木曜日
![Page 39: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/39.jpg)
ありがとうございました
2011年3月3日木曜日
![Page 40: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/40.jpg)
参考• Android Bazaar and Conference 2011 Winter
http://www.slideshare.net/greetech/abc2011w-6512925
• HTML5とか勉強会#15
http://t.co/zUlk11n
2011年3月3日木曜日
![Page 41: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/41.jpg)
アニメ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日木曜日
![Page 42: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/42.jpg)
Jason Parrott
アニメGIFファイルをXHRで持ってきてパースしてcanvasにレンダリングするよ!
ブラウザでアニメーションファイル(GIF)をJavaScript
を用いて再生する方法 | GREE Engineers' Blog
http://labs.gree.jp/blog/2011/02/2800/
2011年3月3日木曜日
![Page 43: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/43.jpg)
• 要素を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日木曜日
![Page 44: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/44.jpg)
• 要素を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日木曜日
![Page 45: GREEのHTML5と - mixi.co.jp · アーキテクチャの選択肢 ページの表示方法 ajax vs static HTML HTMLの組み立て方 DOM vs innerHTML 2011年3月3日木曜日](https://reader030.vdocuments.pub/reader030/viewer/2022040704/5e016cd43b5de00a95160cdf/html5/thumbnails/45.jpg)
devicePixelRatio
• 多くのandroid端末がwindow.devicePixelRatio=1.5
• 画像の1ピクセルがデバイス上では1.5ピクセルに拡大される
• 解決策• 2倍のサイズの画像を縮小して表示• <meta name=viewport target-densitydpi=device-dpi />
2011年3月3日木曜日