スマートフォン版GREE HTML5+JavaScript & Android

1. GREE
HTML5+JavaScript & Android
(@ku)
http://t.gree.jp/ku0522

2. • GREE
• HTML5
•
• GREE Android
• HTML

3. GREE
• 2010/8/9
• ajax
• iOS, android(xperia)
• HTML5+CSS3+javascript
• http://t.gree.jp/

4. ajax +

7. android,iOS webkit
• ajax
• HTML5
• CSS3, animation, transform

8. HTML Forms
• placeholder
•
•
• UI

9. placeholder
<input placeholder=‘ ’ />
•
•
• android1.6
• iOS4.0 textarea

10. <input type=email />
• android
•

11. <input type=number />

12. • url
• date
• search
UI

13. CSS3
• 3
•
•
•
• device-pixel-ratio

14. Selectors Level 3
• :last-child/:first-child
• :not(.loading)
• input[type='text']
• etc.

15. -webkit-gradient
-webkit-border-radius

16. -webkit-transition
CSS
• jQuery
• fps
•
• height: auto → height: 0

18. transform3d
• 3
• iPhone GPU
Google Code Blog: CSS3 Transitions and Transforms in Gmail for the iPad http://
googlecode.blogspot.com/2010/08/css3-transitions-and-transforms-in.html

19. GIF
Issue 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

20. devicePixelRatio
• devicePixelRatio=1.5
• 1 1.5
•
•2
• <meta name=viewport target-densitydpi=device-dpi />

21. Android
•
• IS03

23. class GreeAppJs WebView
WebView.addJavascriptInterface
void uploadImageFile
WebView.loadUrl('javascript:setMoodImage(b64Img)')

24. iOS
• webView:shouldStartLoadWithRequest:navigationType:
• stringByEvaluatingJavaScript:
• HTML android
iOS
•

25. • HTML5
•
•
• android HTML

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

28. Application cache
• manifest
(~10M)
•
( )
•

29. Web SQL Database
• SQLite
•
(~10M)
• SQL
• js HTML

30. Web Storage
• Key Value Store
• 5M~10M
• cookie js
•
cookie