Android Bazaar and Conference 2011 Winter

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

Transcript

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. • ཁૉΛ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
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. ࣸਅΞοϓϩʔυͷ͘͠Έ WebView class GreeAppJs void uploadImageFile WebView.loadUrl('javascript:setMoodImage(b64Img)') WebView.addJavascriptInterface
24. iOSͰ΋ಉ༷ͷ͜ͱ͕࣮ݱՄೳ • webView:shouldStartLoadWithRequest:navigationType: • stringByEvaluatingJavaScript: • දࣔ෦෼ΛHTMLͰ࡞Δͱandroidͱ iOSͰಉ͡΋ͷ͕࢖͑Δ • ΫϥΠΞϯτόΠφϦ͸ͦͷ··Ͱද ͚ࣔͩมߋՄೳ
25. ·ͱΊ • HTML5Ͱදݱྗ΋։ൃޮ཰΋޲্ • ΫϩεϓϥοτϑΥʔϜ • ଍Γͳ͍෦෼͸ωΠςΟϒͷػೳΛ૊Έ ߹Θ࣮ͤͯݱ • androidͷHTML 㲗 ωΠςΟϒϒϦοδ͸ ඒ͍͠
26. ͋Γ͕ͱ͏͍͟͝·ͨ͠
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ΑΓΤί