HTML5 and Open Web Architecture
•Download as KEY, PDF•
15 likes•5,226 views
HTML5 3Days TechTalkのスライド。 「HTML5で作るオフラインWebアプリケーション」
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (9)
Similar to HTML5 and Open Web Architecture
Similar to HTML5 and Open Web Architecture (20)
More from Shumpei Shiraishi
More from Shumpei Shiraishi (20)
HTML5 and Open Web Architecture
- 1. HTML5 Web @
- 2. html5-developers-jp Google Web Google API Expert HTML5 2007 Gears Gears
- 3. Web Web API Web Database Web Storage Web Workers HTML5 Web
- 4. :HTML5 html5-developers-jp 2009/7/10 7 687 8 1,051 9 1,304 Google Trend HTML5
- 5. Web Web 2007 Google Gears HTML5 API Gears Web Workers Gears
- 6. Web Gears Web Google Docs, Gmail, Google Reader, Remenber the milk... PC
- 7. Web ( )
- 8. Web API Web Workers Web Storage Web Database
- 9. Web
- 10. CACHE MANIFEST # version: 200909241054 hello.html hello.js text/cache-manifest MIME Web html manifest URL : <html manifest=”hello.manifest”>
- 11. - UTF-8 1 CACHE MANIFEST # version: 200909241054 hello.html hello.js
- 12. (1)
- 13. (2) JavaScript 5 updateready Gears ResourceStore
- 14. Web Database SQL WEB DB
- 15. Web Database DB 1 DB DB Browser exampleA.com exampleB.com DB1 DB1 Table1 DB1 Table1 DB1 Table1 Table1 Table1 Table1
- 16. Web Database API API API var db = openDatabase(...) db.transaction(function(tx) { tx.executeSql(“...”, [...], function onSuccess(tx, results) { ... }, function onError(tx, error) { ...} }); API var db = openDatabaseSync(...) db.transaction(function(tx) { var results = tx.executeSql(“...”); ...
- 17. Web Database ( Safari DB DB
- 18. Web Storage Web Database LocalStorage SessionStorage
- 19. Web Storage Web Database Web Storage localStorage sessionStorage // localStorage/sessionStorage // localStorage.setItem(“key”, “value”); var val = localStorage.getItem(“key”); // localStorage.key =“value”; var val = localStorage.key;
- 20. Web Workers JavaScript UI JavaScript
- 21. Web Workers → window document JS API UI Thread create manipulate Worker DOM (window, postMessage document) postMessage
- 22. Web Workers → window document JS API UI Thread create manipulate Worker DOM (window, postMessage document) postMessage
- 23. Web Workers → window document JS API UI Thread create manipulate Worker DOM (window, postMessage document) × postMessage
- 24. Web Workers : new Worker(scriptUrl) : worker.postMessage(message); : worker.onmessage(event); postMessage onmessage ui.js worker.js worker.onmessage = onmessage = function(msg) { function(msg) { ... ... postMessage(...) } } function a { worker.postMessage(...) }
- 25. Web Workers (
- 26. Web Workers Web Workers Worker switch-case
- 27. Web Workers Web Workers Worker switch-case (^^)
- 28. Web Workers Web Workers Worker → fakeworker.js eval() setTimeout() Web Workers switch-case (^^)
- 29. Web Workers Web Workers Worker → fakeworker.js eval() setTimeout() Web Workers switch-case → AlexService Web Workers (^^)
- 30. HTML5 Web HTML5(Open Web Platform)
- 31. HTML5 Web
- 32. Web DB
- 33. HTML5 Web DB Download/Upload DB
- 34. HTML5 Web Open Web Architecture( ) DB Download/Upload DB
- 35. Open Web Architecture • • • • • •
- 36. Open Web Architecture • • • • • •
- 37. Open Web Architecture • • • • • •
- 38. Open Web Architecture • • • • • • • • •
- 39. Open Web Architecture • • • • • • • • •
- 40. Alexing Framework!! • • • Cloud DB Client AlexingDownload/Upload DB
- 41. Alexing Framework • • • • class Cloud Greeting Java Class DB Client DB
- 42. Alexing Framework • • • • class Cloud Greeting Java Class DB Middleware class Alexing Client Greeting Sync Engine JavaScript Class DB
- 43. Alexing Framework • • • • class Cloud Greeting Java Class DB Middleware class Alexing Client Greeting Sync Engine edit Application JavaScript Class DB retrieve
- 44. Alexing Framework (1) • • • • • • •
- 45. Alexing Framework (2) • • •
- 46. Alexing Framework (3) • • class.find() • instance.save() • instance.remove() • • database.synchronize()
- 47. Alexing Framework • • • • • • • •