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日木曜日