Download - Android Bazaar and Conference 2011 Winter
![Page 1: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/1.jpg)
スマートフォン版GREE
HTML5+JavaScript & Android
グリー株式会社ソーシャルメディア統括部 エンジニア
熊谷 健太郎 (@ku)
http://t.gree.jp/ku0522
![Page 2: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/2.jpg)
目次• スマートフォン版GREE
• HTML5のすばらしさ
• とその現実
• GREE Androidアプリ
• HTMLとネイティブコードのつなぎ方
![Page 3: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/3.jpg)
スマートフォン版GREE概要• 2010/8/9リリース
• すべてajax
• iOS, android(xperia)で動作
• HTML5+CSS3+javascript
• http://t.gree.jp/
![Page 4: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/4.jpg)
ajax + ストリーム
![Page 5: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/5.jpg)
![Page 6: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/6.jpg)
![Page 7: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/7.jpg)
要素技術android,iOSともにwebkitベースのブラウザなので新技術を積極的に採用
• ajax
• HTML5
• CSS3, animation, transform
![Page 8: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/8.jpg)
HTML Formsフォーム機能の拡張
• placeholderのサポート
• 入力項目のデータ型の明示
• 入力値のバリデーション
• 型に合わせて入力UIが変化
![Page 9: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/9.jpg)
placeholder属性<input placeholder=‘メールアドレス’ />
• かんたん
• 画面を節約できる
• android1.6だと動作がおかしいので注意• iOS4.0未満でtextareaには効かない
![Page 10: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/10.jpg)
<input type=email />
• androidでは変化しない• パスワードを覚えてもらえなくなる
![Page 11: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/11.jpg)
<input type=number />
![Page 12: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/12.jpg)
そのほかにも
• url
• date
• search
などなどあるので入力UIが追随してくれるようになるのを期待して適切に設定しておくべき
![Page 13: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/13.jpg)
CSS3よりリッチな見た目を手軽に作れるように
• レベル3セレクタ
• グラデーション
• アニメーション
• 変形
• device-pixel-ratio
![Page 14: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/14.jpg)
Selectors Level 3
• :last-child/:first-child
• :not(.loading)
• input[type='text']
• etc.
![Page 15: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/15.jpg)
-webkit-gradient
-webkit-border-radiusとあわせてボタンを作るのに便利
![Page 16: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/16.jpg)
-webkit-transitionCSSスタイルの値を指定した時間で滑らかに変化させてくれる
• jQueryより滑らか
• 高fps
• 低ジッタ
• height: auto → height: 0 はできない
![Page 17: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/17.jpg)
![Page 18: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/18.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
![Page 19: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/19.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
![Page 20: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/20.jpg)
devicePixelRatio
• 多くの端末がdevicePixelRatio=1.5
• 画像の1ピクセルがデバイス上では1.5ピクセルに拡大される
• 解決策• 2倍のサイズの画像を縮小して表示• <meta name=viewport target-densitydpi=device-dpi />
![Page 21: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/21.jpg)
Androidアプリ版• スマートフォン版にブラウザだけでは実現できない機能を付加
• IS03プリインストール
![Page 22: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/22.jpg)
![Page 23: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/23.jpg)
写真アップロードのしくみ
WebViewclass GreeAppJs
void uploadImageFile
WebView.loadUrl('javascript:setMoodImage(b64Img)')
WebView.addJavascriptInterface
![Page 24: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/24.jpg)
iOSでも同様のことが実現可能
• webView:shouldStartLoadWithRequest:navigationType:
• stringByEvaluatingJavaScript:
• 表示部分をHTMLで作るとandroidとiOSで同じものが使える
• クライアントバイナリはそのままで表示だけ変更可能
![Page 25: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/25.jpg)
まとめ• HTML5で表現力も開発効率も向上
• クロスプラットフォーム
• 足りない部分はネイティブの機能を組み合わせて実現
• androidのHTML ↔ ネイティブブリッジは美しい
![Page 26: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/26.jpg)
ありがとうございました
![Page 27: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/27.jpg)
絵文字
Issue 10059 - android - Browser does not render Unicode snowman character (U+2603) http://code.google.com/p/android/issues/detail?id=10059
![Page 28: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/28.jpg)
Application cache
• manifestで指定したファイルをオフラインキャッシュとして保持(~10M)
• 大量の小さな静的ファイルをキャッシュするの向き(アバターとか)
• うまく動作させられなかったので見送り
![Page 29: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/29.jpg)
Web SQL Database• SQLite
• サーバから読み出したデータをローカルに保存しておける(~10M)
• SQLでデータを読み出せるのでアプリケーションを機能的にリッチにできる
• jsでHTMLのレンダリングをしないといけなくなるので工数的に断念
![Page 30: Android Bazaar and Conference 2011 Winter](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5598dba91a28ab315c8b483b/html5/thumbnails/30.jpg)
Web Storage• ドメインごとのKey Value Store
• ドメインごとに5M~10Mまで利用可能
• cookieのように使えてjsから扱いやすい
• 無条件でリクエストヘッダに入ってしまうcookieよりエコ