TechBuzz 第17回 HTML5+JS 講演資料

TechBuzz 第17回 HTML5+JS 講演資料

3b36493b4296ebeb219bcd3ffab3aa2b?s=128

Kenju Wagatsuma

September 23, 2015
Tweet

Transcript

  1. Web Workers +α Kenju Wagatsuma

  2. Agenda ❖ 3m : Self Introduction ❖ 8m : Web

    Worker / Shared Worker ❖ 8m : Story Behind “Instagram JS” ❖ 6m : Service Worker ❖ 5m : Q&A
  3. Goal ❖ 1 : ʰWeb Worker APIͷجຊͷ࢖͍ํΛ ஌Δ͜ͱʱ ❖ 2:

    ʰࣄྫΛ௨ͯ͠Web Worker APIͷɹ ࣮ફྫͱԠ༻ํ๏ʹ͍ͭͯ஌Δʱ
  4. Self Introduction

  5. Self Introduction ❖ Career ❖ Hobby ❖ ʰࠓिಡΜͩຊʱ

  6. Career ❖ 2011 : Graphic Designer ( PS, AI, ID

    ) ❖ 2013 : Web Designer ( HTML, CSS, jQuery) ❖ 2014 : Web Engineer ( + JS - Coffee, Node ) ❖ 2015 : Programmer ( + Java/Android, Linux )
  7. Recent Keywords ❖ Atom ❖ Electron ❖ Node v4

  8. Hobby ❖ PENTATONIX ❖ Beatbox ❖ + Guitar

  9. ʰࠓिಡΜͩຊʱ “Soft Skills” ❖ AmazonόΧചΕ ❖ ࠓि΄ͬͯΜͱΓ ❖ ୯ͳΔϓϩάϥϚ͔Βͷ୤٫

  10. Web Worker / Shared Worker

  11. Web Worker / Shared Worker ❖ What? ❖ When? ❖

    How? ❖ Sample
  12. What? ❖ JSͰϚϧνεϨουॲཧΛ࣮ݱ͢Δɹ ͨΊͷHTML5ͷ࢓༷ ❖ ಠࣗͷάϩʔόϧείʔϓΛ࣋ͭ

  13. UI Thread DOM Event Listeners window object

  14. UI Thread Worker Thread Create

  15. UI Thread Worker Thread Create Message

  16. UI Thread Worker Thread Create Message Result

  17. UI Blocking... ❖ jQueryೖΕ͗ͯ͢ը໘͕ͪΒ͖ͭ͗͢ɻɻɻ ❖ εΫϩʔϧ͕΋ͬ͞Γɻɻɻ ❖ Animation͕શવεϜʔζ͡Όͳ͍ɻɻɻ

  18. UI Thread jQueryඳը

  19. UI Thread jQueryඳը εΫϩʔϧҐஔܭࢉ

  20. UI Thread jQueryඳը εΫϩʔϧҐஔܭࢉ JSONϨεϙϯεղੳ

  21. UI Thread jQueryඳը εΫϩʔϧҐஔܭࢉ JSONϨεϙϯεղੳ σʔλՃ޻

  22. Non-Blocking! ❖ JavaScript͸γϯάϧεϨου ❖ UIεϨουͱผͷεϨου͕͋Ε͹͍͍ ❖ DOMૢ࡞ͱܭࢉॲཧͷ෼཭

  23. UI Thread Worker Thread Create jQueryඳը

  24. UI Thread Worker Thread Create jQueryඳը JSON ղੳ σʔλ Ճ޻

    εΫϩʔϧ Ґஔܭࢉ
  25. UI Thread Worker Thread Create jQueryඳը JSON ղੳ σʔλ Ճ޻

    εΫϩʔϧ Ґஔܭࢉ Result
  26. When? ❖ CanvasΛ༻͍ͨը૾ॲཧ ❖ σʔλͷϓϦϩʔυ ❖ ಈը΍Ի੠ͷղੳॲཧ ❖ ΩϟογϡΛ༻͍ͨॲཧ ❖

    JSON΍จࣈྻͷॲཧ ❖ IndexedDBΛ༻͍ͨॲཧ ❖ ෳࡶͳ҉߸Խ ❖ εϖϧνΣοΫͳͲͷߏจղੳ ❖ Location API΍Local Storage APIͱͷԠ༻
  27. How? ❖ 1: new Worker()ͰWorkerΠϯελϯεΛੜ੒ ❖ 2: postMessage()ͰϝοηʔδΛૹΔ ❖ 3:

    WorkerଆͰड͚औͬͨϝοηʔδΛ ΋ͱʹॲཧΛߦ͏ ❖ 4: onmessageͰॲཧࡁΈͷσʔλΛड͚औΔ
  28. ❖ 1: new Worker()ͰWorkerΠϯελϯεΛੜ੒

  29. ❖ 2: postMessage()ͰϝοηʔδΛૹΔ

  30. ❖ 3: WorkerଆͰड͚औͬͨϝοηʔδΛ ΋ͱʹॲཧΛߦ͏

  31. ❖ 4: onmessageͰॲཧࡁΈͷσʔλΛड͚औΔ

  32. http://www.codeproject.com/Articles/429123/Web-Workers

  33. Sample ❖ sample01: 2ͷ50৐ͷܭࢉ ❖ sample02: 10ສ·Ͱͷ͏ͪ࠷େͷૉ਺ͷ୳ࡧ ❖ sample03: 2ͷn৐ͷܭࢉʢn͸೚ҙʣ

    ✓ Web Workerͷجຊతͳϓϩηε ✓ Πϯελϯεੜ੒ ✓ WorkerεϨουͷॲཧ ✓ ϝοηʔδૹ৴ɾड৴
  34. Sample ❖ sample04: จࣈྻΧ΢ϯτ ✓ ୯ମͷม਺Ҏ֎ͷσʔλͷड͚౉͠ ✓ WorkerͰΦϒδΣΫτʢJSONʣΛड͚౉͢

  35. Sample ❖ sample05: ը૾ॲཧ ✓ ޙड़

  36. Shared Worker? ❖ ҰͭͷWorkerεϨουΛෳ਺WindowؒͰڞ༗ ❖ WorkerεϨου = άϩʔόϧείʔϓ ❖ ੜ੒ํ๏͸Web

    Workerͱಉ͡ ❖ Ұ౓ࡦఆ͔Β֎͞Εɺࡢ೥࠶౓࠾༻͞Εͨɹ ͱ͍͏ܦҢ͕͋Δ
  37. Sample ❖ sample06: Shared Web Workerͷجຊ ✓ Shared Web Workerͷجຊతͳ࢖͍ํ

    ✓ ಛ௃తಈ࡞ͷ֬ೝ ✓ جຊతͳϝοηʔδͷૹड৴
  38. Sample ❖ sample07: BlobΛ༻͍ͨWorkerͷ࡞੒ ❖ sample08: BlobΛ༻͍ͨWorkerͷ࡞੒ʢ̎ʣ ✓ ෳ਺ͷWorkerΠϯελϯεੜ੒ʹ͍ͭͯ ✓

    BlobΛ༻͍ͨWorkerͷ࡞੒ํ๏ʹ͍ͭͯ ✓ WorkerεΫϦϓτੜ੒ͱͷҧ͍ʹ͍ͭͯ
  39. Sample ❖ sample09: Web WorkerͰJSONΛParse ❖ sample10: Web Worker &

    FileReaderSync ✓ ΑΓ࣮ફతͳWorkerͷαϯϓϧ ✓ Web APIͷJSONϨεϙϯεΛॲཧ ✓ FileReaderSync APIͱͷ߹Θٕͤ
  40. Story Behind “Instagram JS”

  41. Sample ❖ ҎԼͷهࣄʹԊͬͯ঺հ͠·͢ ✓ http://qiita.com/KENJU/items/78c0034d7e93fbe8f95a

  42. UI Thread canvasͰϐΫηϧσʔλऔಘ

  43. UI Thread Worker Thread Create canvasͰϐΫηϧσʔλऔಘ

  44. UI Thread Worker Thread Create canvasͰϐΫηϧσʔλऔಘ ϥάϥϯδϡ ิؒͷܭࢉ ৽͍͠ ϐΫηϧσʔλ

  45. UI Thread Worker Thread Create canvasͰϐΫηϧσʔλऔಘ ϥάϥϯδϡ ิؒͷܭࢉ ৽͍͠ ϐΫηϧσʔλ

    Result
  46. Service Worker

  47. Service Worker ❖ What? ❖ When? ❖ How? ❖ Sample

  48. What? ❖ ϖʔδͷόοάάϥ΢ϯυͰಈ͘ɹɹ ΠϕϯτۦಈͷJavaScript؀ڥʣby @nhiroki_͞Μ

  49. What? ❖ “Better AppCache” ❖ “ϒϥ΢β಺HTTP Proxy” ❖ “Native AppͱWebͷGapΛຒΊΔ”

  50. When? ❖ Offline ❖ Push௨஌ ❖ Backgroundॲཧ

  51. Life-Cycle ❖ Install > Activate ❖ Activate͞ΕͨΒ దٓfetch http://www.html5rocks.com/en/tutorials/service-worker/introduction/

  52. How? ❖ https·ͨ͸localhostͰͷΈಈ࡞ ❖ ʮchrome://inspect/#service-workersʯ

  53. Sample ❖ sample11: Service Workerͷجຊ ✓ Service Workerͷجຊతͳ࢖͍ํ ✓ ىಈํ๏ɾσόοάํ๏

    ✓ جຊతͳϥΠϑαΠΫϧͷ֬ೝ
  54. Further Reading ❖ http://dackdive.hateblo.jp/entry/2015/04/04/163234 ❖ http://www.html5rocks.com/en/tutorials/service-worker/introduction/ ❖ https://jakearchibald.com/2014/offline-cookbook/

  55. Q&A

  56. Appendix

  57. ؔ࿈ࢿྉ ❖ Github : https://github.com/KENJU/techbuzz_htmljs_20150924 ❖ Wiki : https://github.com/KENJU/techbuzz_htmljs_20150924/wiki ❖

    Slide : https://speakerdeck.com/kenju
  58. ͓͢͢Ίॻ੶ ❖ ։؟! JavaScript ―ݴޠ࢓༷͔ΒֶͿJavaScriptͷຊ࣭ ❖ JavaScript: The Good Parts

    ❖ ΦϒδΣΫτࢦ޲JavaScriptͷݪଇ ❖ JavaScriptύλʔϯ ―༏ΕͨΞϓϦέʔγϣϯͷͨΊͷ࡞๏ ❖ JavaScriptٯҾ͖Ϩγϐ jQueryରԠ (PROGRAMMER’S RECiPE) ❖ HTML5 Hacks ―ΠϯλϥΫςΟϒWebΞϓϦέʔγϣϯͷͨΊͷς ΫχοΫ