TechBuzz 第17回 HTML5+JS 講演資料

TechBuzz 第17回 HTML5+JS 講演資料

3b36493b4296ebeb219bcd3ffab3aa2b?s=128

Kenju Wagatsuma

September 23, 2015
Tweet

Transcript

  1. 2.

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

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

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

    ʰࣄྫΛ௨ͯ͠Web Worker APIͷɹ ࣮ફྫͱԠ༻ํ๏ʹ͍ͭͯ஌Δʱ
  3. 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 )
  4. 26.

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

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

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

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

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

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

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

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

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

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

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

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

    Q&A

  11. 56.
  12. 58.

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

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