TechBuzz 第17回 HTML5+JS 講演資料

Transcript

1. 1.

   Web Workers +α Kenju Wagatsuma

2. 2.

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

   Worker / Shared Worker ❖ 8m : Story Behind “Instagram JS” ❖ 6m : Service Worker ❖ 5m : Q&A
3. 3.

   Goal ❖ 1 : ʰWeb Worker APIͷجຊͷ࢖͍ํΛ ஌Δ͜ͱʱ ❖ 2:

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

   Self Introduction

5. 5.

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

6. 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. 7.

   Recent Keywords ❖ Atom ❖ Electron ❖ Node v4

8. 8.

   Hobby ❖ PENTATONIX ❖ Beatbox ❖ + Guitar

9. 9.

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

10. 10.

    Web Worker / Shared Worker

11. 11.

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

    How? ❖ Sample
12. 12.

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

13. 13.

    UI Thread DOM Event Listeners window object

14. 14.

    UI Thread Worker Thread Create

15. 15.

    UI Thread Worker Thread Create Message

16. 16.

    UI Thread Worker Thread Create Message Result

17. 17.

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

18. 18.

    UI Thread jQueryඳը

19. 19.

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

20. 20.

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

21. 21.

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

22. 22.

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

23. 23.

    UI Thread Worker Thread Create jQueryඳը

24. 24.

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

    εΫϩʔϧ Ґஔܭࢉ
25. 25.

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

    εΫϩʔϧ Ґஔܭࢉ Result
26. 26.

    When? ❖ CanvasΛ༻͍ͨը૾ॲཧ ❖ σʔλͷϓϦϩʔυ ❖ ಈը΍Ի੠ͷղੳॲཧ ❖ ΩϟογϡΛ༻͍ͨॲཧ ❖

    JSON΍จࣈྻͷॲཧ ❖ IndexedDBΛ༻͍ͨॲཧ ❖ ෳࡶͳ҉߸Խ ❖ εϖϧνΣοΫͳͲͷߏจղੳ ❖ Location API΍Local Storage APIͱͷԠ༻
27. 27.

    How? ❖ 1: new Worker()ͰWorkerΠϯελϯεΛੜ੒ ❖ 2: postMessage()ͰϝοηʔδΛૹΔ ❖ 3:

    WorkerଆͰड͚औͬͨϝοηʔδΛ ΋ͱʹॲཧΛߦ͏ ❖ 4: onmessageͰॲཧࡁΈͷσʔλΛड͚औΔ
28. 28.

    ❖ 1: new Worker()ͰWorkerΠϯελϯεΛੜ੒

29. 29.

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

30. 30.

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

31. 31.

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

32. 32.

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

33. 33.

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

    ✓ Web Workerͷجຊతͳϓϩηε ✓ Πϯελϯεੜ੒ ✓ WorkerεϨουͷॲཧ ✓ ϝοηʔδૹ৴ɾड৴
34. 34.

    Sample ❖ sample04: จࣈྻΧ΢ϯτ ✓ ୯ମͷม਺Ҏ֎ͷσʔλͷड͚౉͠ ✓ WorkerͰΦϒδΣΫτʢJSONʣΛड͚౉͢

35. 35.

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

36. 36.

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

    Workerͱಉ͡ ❖ Ұ౓ࡦఆ͔Β֎͞Εɺࡢ೥࠶౓࠾༻͞Εͨɹ ͱ͍͏ܦҢ͕͋Δ
37. 37.

    Sample ❖ sample06: Shared Web Workerͷجຊ ✓ Shared Web Workerͷجຊతͳ࢖͍ํ

    ✓ ಛ௃తಈ࡞ͷ֬ೝ ✓ جຊతͳϝοηʔδͷૹड৴
38. 38.

    Sample ❖ sample07: BlobΛ༻͍ͨWorkerͷ࡞੒ ❖ sample08: BlobΛ༻͍ͨWorkerͷ࡞੒ʢ̎ʣ ✓ ෳ਺ͷWorkerΠϯελϯεੜ੒ʹ͍ͭͯ ✓

    BlobΛ༻͍ͨWorkerͷ࡞੒ํ๏ʹ͍ͭͯ ✓ WorkerεΫϦϓτੜ੒ͱͷҧ͍ʹ͍ͭͯ
39. 39.

    Sample ❖ sample09: Web WorkerͰJSONΛParse ❖ sample10: Web Worker &

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

    Story Behind “Instagram JS”

41. 41.

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

42. 42.

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

43. 43.

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

44. 44.

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

45. 45.

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

    Result
46. 46.

    Service Worker

47. 47.

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

48. 48.

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

49. 49.

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

50. 50.

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

51. 51.

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

52. 52.

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

53. 53.

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

    ✓ جຊతͳϥΠϑαΠΫϧͷ֬ೝ
54. 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. 55.

    Q&A

56. 56.

    Appendix

57. 57.

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

    Slide : https://speakerdeck.com/kenju
58. 58.

    ͓͢͢Ίॻ੶ ❖ ։؟! JavaScript ―ݴޠ࢓༷͔ΒֶͿJavaScriptͷຊ࣭ ❖ JavaScript: The Good Parts

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