of 60 /60
Firefox OS App Dev @ HTML5 Caravan @ JAWS FESTA 2013 on 2013/09/28 by Tomoya Asai (dynamis)

Firefox OS App Dev

Embed Size (px)

DESCRIPTION

HTML5 Caravan @ JAWS FESTA 2013 で使用したスライド http://jfk2013.doorkeeper.jp/events/5022

Text of Firefox OS App Dev

  • 1. Firefox OS App Dev @ HTML5 Caravan @ JAWS FESTA 2013 on 2013/09/28 by Tomoya Asai (dynamis)

2. about:me 3. Tomoya ASAI Mozilla Japan Technical Marketing (Evangelist) dynamis @ community dynamis.jp @dynamitter facebook.com/dynamis mailto: Tomoya ASAI @ 4. about:topics 5. Firefox OS Application Development Firefox OS Simulator Debug with Android Firefox Publishing Apps 6. Firefox OS 7. 8. 9. 10. 11. Firefox Firefox Marketplace 12. Firefox OS - Web is the Platform Web = Web = Web API Web 13. Web = Native Web HTML/CSS/JS API W3C Java asm.js WebGL DOMCrypt Web 14. Semantic Elements Multi Media HTML5 Forms Oine SupportHTML5HTML5 Parser Mouse, Key ev. XHTML5 WAI- ARIA W3C 15. Semantic Elements Multi Media Canvas HTML5 Forms Oine Support Micro- Data Server- Sent ev. Web Sockets Web Storage HTML5HTML5 Parser Mouse, Key ev. XHTML5 Web Workers Web Messag- ing WAI- ARIA W3C WHATWG HTML 16. Semantic Elements Multi Media Canvas HTML5 Forms Oine Support Micro- Data Server- Sent ev. Web Sockets Web Storage Layout Media Queries HTML5 CSS3~Trans form Anim ation Regions Filters HTML5 Parser Mouse, Key ev. XHTML5 Web Workers Web Messag- ing WAI- ARIA W3C WHATWG HTML 17. Semantic Elements Multi Media Canvas HTML5 Forms Oine Support Micro- Data WebGL Indexed DB SVG Server- Sent ev. Web Sockets Web Sockets Geo- location FileAPI Web Storage XHR2 Math ML Layout Media Queries HTML5 CSS3~Trans form Anim ation Regions Filters HTML5 Parser Mouse, Key ev. ECMA Script CSP SPDY XHTML5 Orien- tation Web Workers Web Messag- ing DOM4 SMIL Vibra- tion XPath RSS OGP WAI- ARIA W3C WHATWG other Khronos ECMA IETF WOFF HTML DNT 18. Semantic Elements Multi Media Canvas HTML5 Forms Oine Support Webm H.264 Micro- Data WebGL Web SQL Indexed DB SVG Server- Sent ev. Web Sockets Web Sockets Geo- location FileAPI Web Storage XHR2 Math ML Web Audio Layout Media Queries HTML5 CSS3~Trans form Anim ation Regions Filters HTML5 Parser Mouse, Key ev. Opus ECMA Script ECMA 6th USB CSP SPDY WebCL Web RTC Net Info MP3 Device Storage TCP Socket NFC File Sys Noti- cation XHTML5 Orien- tation Web Workers Web Messag- ing DOM4 SMIL Vibra- tion Proxi- mity XPath RSS RDF OGP Schema .org WAI- ARIA W3C WHATWG other Khronos ECMA IETF WOFF Battery Status Radio Tel HTML DNT Flex Box 19. ( ...) SMS ... 20. ( ...) SMS ... Web 21. Firefox OS : Tizen : Android Native Framework & HAL Web Platform Web Framework App Framework Android Runtime Dalvik WebKit Java Native Library Web WebKit Web Native OSP etc... DeviceAPI WebRT Web Packaged Web Gecko DeviceAPI SystemAPI Web SGL etc. Native Interface & HAL & HAL X.org etc. Web 22. C 23. asm.js C 1/2 Java C# asm.js Firefox OS 1.2 24. Java C Java Dalvik C C JS https://blog.mozilla.org/javascript/staring-at-the-sun-dalvik-vs-spidermonkey/ 25. Unreal Engine on Browser 100 C & OpenGL 5 LLVM + Emscripten JavaScript (asm.js) epic CITADEL http://www.unrealengine.com/html5/ 26. 18 KDDI, Telefnica, Deutsche TelekomTelenor... Qualcomm, ARM ZTE, Alcatel, LG, Huawei, Sony Foxconn... 27. Firefox OS (MWC ) 28. Firefox OS (MWC ) 29. 30. Developer Preview Phone 4/23 () Keon: 91+tax+shipping MSM7225AB 1GHz, 4GB ROM, 512MB RAM, 3.5" HVGA Peak: 149++ MSM8225 1.2GHz x2, 4GB ROM, 512MB RAM, 4.3" qHD http://www.geeksphone.com/ 31. Peak+ (Pre-order) 910 () 11 () Peak: 149++ MSM8225 1.2GHz x2, 4GB ROM, 1GB RAM, 4.3" qHD 149 http://shop.geeksphone.com/en/phones/8-peak.html 32. 72 Telefnica ZTE Open 5000 69 () 30 712 81 2013~2014 http://mozilla.jp/blog/entry/10310/ 33. 34. 35. 36. 37. ZTE ZTE Open: Size: 114 x 62 x 12.5 mm Display: 3.5" HVGA CPU: MSM7225A 1 GHz (Cortex-A5, Adreno 200) RAM 256 MB ROM: 512 MB http://www.ztedevices.com/product/smart_phone/2bcf2d56-0c9a-4129-a25c-acce58c8e502.html 38. Alcatel (TCL) One Touch Fire: Size: 115 x 62.3 x 12.2 mm Display: 3.5" HVGA CPU: MSM7227A 1 GHz (Cortex-A5, Adreno 200) RAM 256 MB ROM: 512 MB http://www.alcatelonetouch.com/global-en/products/smartphones/one_touch_fire.html 39. SIM eBay ZTE Open SIM eBay US 79.99 eBay UK 59.99 eBay 816 https://blog.mozilla.org/blog/zte-will-soon-start-sales-of-firefox-os-phones-on-ebay/ 40. Apps Dev 41. Firefox OS Web Web Web 42. Firefox OS Web Web Web 43. Firefox OS 44. Web manifest JSON API Android Firefox https://github.com/dynamis/firefoxos/wiki/simulator 45. Hosted (Web ) OS Web Packaged () ZIP Packaged Web Hosted Web Internet Server : https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps 46. Hosted App Web Web + manifest.webapp Packaged App ZIP + package.manifest 47. (manifest.webapp) { "name": "", "description": "", "launch_path": "/index.html", "icons": { "128": "/icons/foxkeh-128.png" }, "developer": { "name": "dynamis", "url": "http://dynamis.jp/" } } // : / -> /index.html https://developer.mozilla.org/en-US/docs/Apps/Manifest 48. Package App 1. manifest.webapp Hosted Apps 2. ZIP manifest.webapp 3. package.manifest 49. package.manifest (mini manifest) { "name": "", "package_path": "/package.zip", "version": "1.0", "developer": { "name": "dynamis", "url": "http://dynamis.jp/" } } // : package.zip manifest.webapp name, version, developer, locales https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps 50. Simulator 51. Firefox OS Simulator https://addons.mozilla.org/ja/ refox/addon/refox-os-simulator/ Web Firefox Alpha 4.0 : https://dev.mozilla.jp/firefox-os-simulator-4-0-released/ 52. Firefox OS Simulator 53. Debug with Android Firefox 54. Android Firefox 1. Firefox 2. 3. Firefox 4. 5. Hosted App Android Firefox 55. Firefox OS Apps on Heroku 56. Heroku PaaS Ruby, Java, Node, Python... git Web Hosting Ruby Sinatra 57. Heroku // Hello World Clone git clone [email protected]:dynamis/hello-hosted- app.git cd hello-hosted-app // heroku heroku login heroku apps:create git push heroku master // http://.herokuapp.com/ 58.