Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

100915 HTML5とか勉強会発表資料

19,379 views

Published on

Sencha Touchの紹介

Published in: Technology

100915 HTML5とか勉強会発表資料

  1. 1. End of Native ? Sencha Touch : HTML5 + CSS3 + JavaScript Web Ext Japan, LLC (@extjapan) (@naotori)
  2. 2. Ext JS is now Sencha
  3. 3. Ext JS is now Sencha • jQTouch Raphaël Connect
  4. 4. Ext JS is now Sencha • jQTouch Raphaël Connect • Sencha Touch
  5. 5. Ext JS is now Sencha • jQTouch Raphaël Connect • Sencha Touch • VC
  6. 6. Sencha Ext JS Ext GWT Sencha Touch Ext Core Ext Designer jQTouch Raphael
  7. 7. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  8. 8. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  9. 9. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  10. 10. Sencha Ext Designer JavaScript Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  11. 11. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Java Ext GWT
  12. 12. FAQ
  13. 13. FAQ • Ext JS4.0 Sencha Touch jQTouch Raphaël
  14. 14. FAQ • Ext JS4.0 Sencha Touch jQTouch Raphaël • Sencha Touch jQTouch
  15. 15. FAQ • Ext JS4.0 Sencha Touch jQTouch Raphaël • Sencha Touch jQTouch • jQTouch Raphaël GPL
  16. 16. Sencha Touch beta
  17. 17. Coming Soon: BlackBerry 6 & WebOS
  18. 18. WebKit Rocks! • HTML5 + CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
  19. 19. WebKit Rocks! • HTML5 + CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
  20. 20. • WebKit • • • Orientation • • • • • GUI
  21. 21. • • Tap Double tap Tap and hold Swipe Pinch Drag & drop
  22. 22. • • WebKitCSSMatrix • GUI
  23. 23. GUI • Lists Nested Grouped Sortable • Carousel • Picker • Overlay • Toolbars & buttons • HTML5 Audio Video GeoLocation
  24. 24. <75k minified & gzipped
  25. 25. FAQ
  26. 26. FAQ • Sencha Touch Ext JS
  27. 27. FAQ • Sencha Touch Ext JS • jQuery
  28. 28. FAQ • Sencha Touch Ext JS • jQuery • AppStore/Android Market
  29. 29. FAQ • Sencha Touch Ext JS • jQuery • AppStore/Android Market • Ext Designer
  30. 30. FAQ • Sencha Touch Ext JS • jQuery • AppStore/Android Market • Ext Designer • Windows Phone
  31. 31. HTML5?
  32. 32. HTML5? • HTML5 CSS3
  33. 33. HTML5? • HTML5 CSS3 • HTML5
  34. 34. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio
  35. 35. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local
  36. 36. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation
  37. 37. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5
  38. 38. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5 • WebSockets?
  39. 39. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5 • WebSockets? • SVG?
  40. 40. • ¥9,900/ • • GPLv3
  41. 41. Demos http://twimap.net/ http://github.com/naotori/twimap
  42. 42. viewport meta/link
  43. 43. UI
  44. 44. 3 TwiMap BookmarkForm HistoryPanel MapPanel
  45. 45. “xtype”
  46. 46. MapPanel
  47. 47. localStorage
  48. 48. Sencha Touch • Version: 0.95β • • Android • API •
  49. 49. • Ext JS / Sencha Touch
  50. 50. • Ext JS / Sencha Touch •
  51. 51. • Ext JS / Sencha Touch • • JavaScript+HTML+CSS iOS Android
  52. 52. • Ext JS / Sencha Touch • • JavaScript+HTML+CSS iOS Android • PhoneGap
  53. 53. Objective-C JavaScript Ext Japan, LLC (@extjapan) (@naotori)

×