android bazaar and conference 2011 winter
DESCRIPTION
スマートフォン版GREE HTML5+JavaScript & AndroidTRANSCRIPT
スマートフォン版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よりエコ