スマートフォン版GREE

HTML5+JavaScript & Android

グリー株式会社ソーシャルメディア統括部 エンジニア

熊谷 健太郎 (@ku)

http://t.gree.jp/ku0522

目次• スマートフォン版GREE

• HTML5のすばらしさ

• とその現実

• GREE Androidアプリ

• HTMLとネイティブコードのつなぎ方

スマートフォン版GREE概要• 2010/8/9リリース

• すべてajax

• iOS, android(xperia)で動作

• HTML5+CSS3+javascript

• http://t.gree.jp/

ajax + ストリーム

要素技術android,iOSともにwebkitベースのブラウザなので新技術を積極的に採用

• ajax

• HTML5

• CSS3, animation, transform

HTML Formsフォーム機能の拡張

• placeholderのサポート

• 入力項目のデータ型の明示

• 入力値のバリデーション

• 型に合わせて入力UIが変化

placeholder属性<input placeholder=‘メールアドレス’ />

• かんたん

• 画面を節約できる

• android1.6だと動作がおかしいので注意• iOS4.0未満でtextareaには効かない

<input type=email />

• androidでは変化しない• パスワードを覚えてもらえなくなる

<input type=number />

そのほかにも

• url

• date

• search

などなどあるので入力UIが追随してくれるようになるのを期待して適切に設定しておくべき

CSS3よりリッチな見た目を手軽に作れるように

• レベル3セレクタ

• グラデーション

• アニメーション

• 変形

• device-pixel-ratio

Selectors Level 3

• :last-child/:first-child

• :not(.loading)

• input[type='text']

• etc.

-webkit-gradient

-webkit-border-radiusとあわせてボタンを作るのに便利

-webkit-transitionCSSスタイルの値を指定した時間で滑らかに変化させてくれる

• jQueryより滑らか

• 高fps

• 低ジッタ

• height: auto → height: 0 はできない

• 要素を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

アニメ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

devicePixelRatio

• 多くの端末がdevicePixelRatio=1.5

• 画像の1ピクセルがデバイス上では1.5ピクセルに拡大される

• 解決策• 2倍のサイズの画像を縮小して表示• <meta name=viewport target-densitydpi=device-dpi />

Androidアプリ版• スマートフォン版にブラウザだけでは実現できない機能を付加

• IS03プリインストール

写真アップロードのしくみ

WebViewclass GreeAppJs

void uploadImageFile

WebView.loadUrl('javascript:setMoodImage(b64Img)')

WebView.addJavascriptInterface

iOSでも同様のことが実現可能

• webView:shouldStartLoadWithRequest:navigationType:

• stringByEvaluatingJavaScript:

• 表示部分をHTMLで作るとandroidとiOSで同じものが使える

• クライアントバイナリはそのままで表示だけ変更可能

まとめ• HTML5で表現力も開発効率も向上

• クロスプラットフォーム

• 足りない部分はネイティブの機能を組み合わせて実現

• androidのHTML ↔ ネイティブブリッジは美しい

ありがとうございました

絵文字

Issue 10059 - android - Browser does not render Unicode snowman character (U+2603) http://code.google.com/p/android/issues/detail?id=10059

Application cache

• manifestで指定したファイルをオフラインキャッシュとして保持(~10M)

• 大量の小さな静的ファイルをキャッシュするの向き(アバターとか)

• うまく動作させられなかったので見送り

Web SQL Database• SQLite

• サーバから読み出したデータをローカルに保存しておける(~10M)

• SQLでデータを読み出せるのでアプリケーションを機能的にリッチにできる

• jsでHTMLのレンダリングをしないといけなくなるので工数的に断念

Web Storage• ドメインごとのKey Value Store

• ドメインごとに5M~10Mまで利用可能

• cookieのように使えてjsから扱いやすい

• 無条件でリクエストヘッダに入ってしまうcookieよりエコ