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.

Offline Html5 3days

17,104 views

Published on

HTML5 3Days TechTalkのスライド。
「HTML5で作るオフラインWebアプリケーション」

  • Be the first to comment

Offline Html5 3days

  1. 1. HTML5 Web @
  2. 2. html5-developers-jp Google Web Google API Expert HTML5 2007 Gears Gears
  3. 3. Web Web API Web Database Web Storage Web Workers HTML5 Web
  4. 4. :HTML5 html5-developers-jp 2009/7/10 7 687 8 1,051 9 1,304 Google Trend HTML5
  5. 5. Web Web 2007 Google Gears HTML5 API Gears Web Workers Gears
  6. 6. Web Gears Web Google Docs, Gmail, Google Reader, Remenber the milk... PC
  7. 7. Web ( )
  8. 8. Web API Web Workers Web Storage Web Database
  9. 9. Web
  10. 10. CACHE MANIFEST # version: 200909241054 hello.html hello.js text/cache-manifest MIME Web html manifest URL : <html manifest=”hello.manifest”>
  11. 11. - UTF-8 1 CACHE MANIFEST # version: 200909241054 hello.html hello.js
  12. 12. (1)
  13. 13. (2) JavaScript 5 updateready Gears ResourceStore
  14. 14. Web Database SQL WEB DB
  15. 15. Web Database DB 1 DB DB Browser exampleA.com exampleB.com DB1 DB1 Table1 DB1 Table1 DB1 Table1 Table1 Table1 Table1
  16. 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. 17. Web Database ( Safari DB DB
  18. 18. Web Storage Web Database LocalStorage SessionStorage
  19. 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. 20. Web Workers JavaScript UI JavaScript
  21. 21. Web Workers → window document JS API UI Thread create manipulate Worker DOM (window, postMessage document) postMessage
  22. 22. Web Workers → window document JS API UI Thread create manipulate Worker DOM (window, postMessage document) postMessage
  23. 23. Web Workers → window document JS API UI Thread create manipulate Worker DOM (window, postMessage document) × postMessage
  24. 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. 25. Web Workers (
  26. 26. Web Workers Web Workers Worker switch-case
  27. 27. Web Workers Web Workers Worker switch-case (^^)
  28. 28. Web Workers Web Workers Worker → fakeworker.js eval() setTimeout() Web Workers switch-case (^^)
  29. 29. Web Workers Web Workers Worker → fakeworker.js eval() setTimeout() Web Workers switch-case → AlexService Web Workers (^^)
  30. 30. HTML5 Web HTML5(Open Web Platform)
  31. 31. HTML5 Web
  32. 32. Web DB
  33. 33. HTML5 Web DB Download/Upload DB
  34. 34. HTML5 Web Open Web Architecture( ) DB Download/Upload DB
  35. 35. Open Web Architecture • • • • • •
  36. 36. Open Web Architecture • • • • • •
  37. 37. Open Web Architecture • • • • • •
  38. 38. Open Web Architecture • • • • • • • • •
  39. 39. Open Web Architecture • • • • • • • • •
  40. 40. Alexing Framework!! • • • Cloud DB Client AlexingDownload/Upload DB
  41. 41. Alexing Framework • • • • class Cloud Greeting Java Class DB Client DB
  42. 42. Alexing Framework • • • • class Cloud Greeting Java Class DB Middleware class Alexing Client Greeting Sync Engine JavaScript Class DB
  43. 43. Alexing Framework • • • • class Cloud Greeting Java Class DB Middleware class Alexing Client Greeting Sync Engine edit Application JavaScript Class DB retrieve
  44. 44. Alexing Framework (1) • • • • • • •
  45. 45. Alexing Framework (2) • • •
  46. 46. Alexing Framework (3) • • class.find() • instance.save() • instance.remove() • • database.synchronize()
  47. 47. Alexing Framework • • • • • • • •

×