品質の岐路に立ったときの実装術／池田 亮

2020年2月15日に行われたDIST.31 「DIST 6周年イベント」のスライドです。

■概要
DISTは、職種や技術の垣根を越えてWebに関わるすべての人を結ぶクリエイティブコミュニティです。デザイナー、エンジニア、ディレクターなどあらゆる立場の方に参加していただき、その知の共有、研鑽ならびに参加者同士の交流を目的とした勉強会を定期的に開催しています。

今回はDIST設立6周年を迎えて、初の土曜日開催＆時間拡大版で記念イベントを開催します。歴代スピーカーによる豪華セッションに加え、これまでのDISTの振り返りや今後の展望も発表予定です。

■DISTについて
DISTは、職種や技術の垣根を越えてWebに関わるすべての人を結ぶクリエイティブコミュニティです。

Web制作関連をテーマとした勉強会を、2ヶ月に1回程度のペースで開催しています。デザイナー、エンジニア、ディレクターなどあらゆる立場の方に参加していただき、その知の共有、研鑽ならびに参加者同士の交流を目的としています。

■公式サイト
https://dist.tokyo

■Twitter
https://twitter.com/dist_jp

■YouTube
https://www.youtube.com/channel/UCNsgmodjXtYKAi1HxLK94kQ

■GitHubリポジトリ
https://github.com/448jp/dist

Transcript

1. ඼࣭ͷذ࿏ʹཱͬͨͱ͖ͷ࣮૷ज़ %*45
2. ஑ా
   ྄ w ϑϦʔϥϯεͷϑϩϯτΤϯυΤϯδχΞ
   w ΠϯλϥΫςΟϒͳ8FCαΠτͷ࣮૷͕ಘҙ
   w ෋ࢁࡏॅ !JLFSZPV ࣗݾ঺հ
3. ࿩͢͜ͱ ίʔυͰಈ͖Λͭ͘Δͱ͖ͷෛՙରࡦ
4. ࿩͢͜ͱ ԿΛଥڠͯ͠ɺԿΛ࢒͔͢
5. ࿩͢͜ͱ ΫΦϦςΟΛམͱ͞ͳ͍ෛՙରࡦ
6. αϯϓϧ ͜Μͳͷ࡞͖ͬͯ·ͨ͠
7. αϯϓϧ GQT
   ϑϨʔϜϨʔτ
8. αϯϓϧ GQT
   ϑϨʔϜϨʔτ ඵؒʹॲཧ͞ΕΔϑϨʔϜ਺
9. αϯϓϧ GQT
   
   ඵؒʹճը໘Λߋ৽ͯ͠Δͱ͍͏͜ͱ
10. αϯϓϧ XFCϒϥ΢βʹ͓͚ΔGQT͸͍͍ͩͨ
11. αϯϓϧ GQT͕ҎԼͷ৔߹͸ϒϥ΢βʹແ஡Λͤͯ͞ΔՄೳੑ͕͋Δɻɻɻ
12. αϯϓϧ GQT͸ϚγϯεϖοΫʹґଘ͢Δ .BD#PPL
    1SP
    GQT
     .BD#PPL
    "JS
    GQT
    
13. αϯϓϧ TUBUTKT https://github.com/mrdoob/stats.js/
15. ϦΞϧλΠϜ΅͔͠Λ΍ΊΔ ରࡦ
    
16. ॲཧଟΊɻɻɻ ରࡦ̍
    lϦΞϧλΠϜ΅͔͠Λ΍ΊΔz งғؾΛग़͠΍͍͢ԋग़͕ͩߴෛՙ
17. ͋Β͔͡Ί΅͔ͨ͠ը૾Λ༻ҙ ରࡦ̍
    lϦΞϧλΠϜ΅͔͠Λ΍ΊΔz
19. େ͖͗͢ΔςΫενϟΛ࢖Θͳ͍ ରࡦ
    
20. େ͖͍ςΫενϟ͸ॲཧ͢Δσʔλྔ΋ଟ͍ ରࡦ
    lେ͖͗͢ΔςΫενϟΛ࢖Θͳ͍z º º ෛՙߴ͍
21. લ໘͸େ͖͍ը૾ɺഎܠ͸খ͍͞ը૾Λ࢖͏
    ɹ ରࡦ
    lେ͖͗͢ΔςΫενϟΛ࢖Θͳ͍z º º
22. ૉࡐ͸࢖͍ճ͢ ରࡦ
    
23. ૉࡐ͕ͨ͘͞Μ͋Ε͹σʔλྔ΋ଟ͍ ରࡦ
    lૉࡐ͸࢖͍ճ͢z HFPNFUSZ
    " NBUFSJBM
    " HFPNFUSZ
    # NBUFSJBM
    # HFPNFUSZ
    $ NBUFSJBM
    $ HFPNFUSZ
    % NBUFSJBM
    %
24. w HFPNFUPSZ
    ηάϝϯτ਺ গ
    w HFPNFUPSZ
    ηάϝϯτ਺ ଟ
    w NBUFSJBM
    ը૾ খ
    w NBUFSJBM
    ը૾ େ
    w NBUFSJBM
    ը૾ খ
    ϫΠϠʔදݱ
    w NBUFSJBM
    ը૾ େ
    ϫΠϠʔදݱ ରࡦ
    lૉࡐ͸࢖͍ճ͢z
25. w HFPNFUPSZ
    ηάϝϯτ਺ গ
    w HFPNFUPSZ
    ηάϝϯτ਺ ଟ
    w NBUFSJBM
    ϫΠϠʔදݱͳ͠
    w NBUFSJBM
    ϫΠϠʔදݱ͋Γ ରࡦ
    lૉࡐ͸࢖͍ճ͢z
26. ϦΞϧදݱΛ͠ͳ͍ ରࡦ
    
27. ٿମʹ͍ۙ ରࡦ
    lϦΞϧදݱΛ͠ͳ͍z ٿମ͔Βԕ͍ ෛՙߴ͍
28. GQTΛԼ͛Δ ରࡦ
    
29. GQTΛٙࣅతʹίϯτϩʔϧ͢Δ ରࡦ
    lGQTΛԼ͛Δz
30. Renderer.render() ରࡦ
    lGQTΛԼ͛Δz
31. if(updateCnt % 2 == 0){ Renderer.render() } ରࡦ
    lGQTΛԼ͛Δz
32. εΫϩʔϧͯ͠ɺཁૉ͕ग़͖ͯͨΒGQTΛʹ͢Δ ରࡦ
    lGQTΛԼ͛Δz
33. ը࣭Λམͱ͢ ରࡦ
    
34. ରࡦ
    lը࣭Λམͱ͢z Renderer.setPixelRatio(0.5)
35. ରࡦ
    lը࣭Λམͱ͢z ෛՙߴ͍ Renderer.setPixelRatio(2) Renderer.setPixelRatio(0.25)
36. w ϦΞϧλΠϜ΅͔͠Λ΍ΊΔ
    w େ͖͗͢ΔςΫενϟΛ࢖Θͳ͍
    w ૉࡐ͸࢖͍ճ͢
    w ϦΞϧදݱΛ͠ͳ͍
    w GQTΛԼ͛Δ
    w ը࣭Λམͱ͢ ෛՙରࡦ
37. αϯϓϧ εΫϩʔϧ࿈ಈ͢Δ%0.ͷΞχϝʔγϣϯ ͪΐ͍ෳࡶ͔΋ɺɺ
38. ཁૉ৘ใͷऔಘ͸ޮ཰Α͘ ରࡦ
    
39. ରࡦ
    lཁૉ৘ใͷऔಘ͸ޮ཰Α͘z εΫϩʔϧ࿈ಈΞχϝʔγϣϯ ޮ཰͍͍ํ๏໛ࡧதɻɻ
40. ରࡦ
    lཁૉ৘ใͷऔಘ͸ޮ཰Α͘z w εΫϩʔϧҐஔ
    w λʔήοτͷߴ͞
    w λʔήοτͷ:Ґஔ
41. ରࡦ
    lཁૉ৘ใͷऔಘ͸ޮ཰Α͘z w εΫϩʔϧҐஔ
    w λʔήοτͷߴ͞
    w λʔήοτͷ:Ґஔ
42. ରࡦ
    lཁૉ৘ใͷऔಘ͸ޮ཰Α͘z w εΫϩʔϧҐஔ
    w λʔήοτͷߴ͞
    w λʔήοτͷ:Ґஔ ຖϑϨʔϜ
    
    
    
    ߋ৽͍͚ͨ͠Ͳɺ
    ෛՙ৺഑ ϦαΠζ࣌ʹ
    ਖ਼֬ͳ৘ใΛͱΕͳ͍
43. ରࡦ
    lཁૉ৘ใͷऔಘ͸ޮ཰Α͘z w εΫϩʔϧҐஔ
    w λʔήοτͷߴ͞
    w λʔήοτͷ:Ґஔ ϑϨʔϜʹճ͚ͩऔಘ ˞ຖϑϨʔϜऔಘ͠ͳ͍
44. ରࡦ
    lཁૉ৘ใͷऔಘ͸ޮ཰Α͘z if(updateCnt % 30 == 0){ updateTgInfo(); }
45. ରࡦ
    lཁૉ৘ใͷऔಘ͸ޮ཰Α͘z ճ໨ͷ৘ใऔಘ
    ˡ
    ཁૉͷϦαΠζ׬ྃલͰਖ਼͘͠ͳ͍৘ใ
    ճ໨ͷ৘ใऔಘ
    ˡ
    ཁૉͷϦαΠζ׬ྃલͰਖ਼͘͠ͳ͍৘ใ
    ճ໨ͷ৘ใऔಘ
    ˡ
    ཁૉͷϦαΠζ׬ྃޙͳͷͰਖ਼͍͠৘ใ
    ճ໨ͷ৘ใऔಘ
    ˡ
    ཁૉͷϦαΠζ׬ྃޙͳͷͰਖ਼͍͠৘ใ
    ճ໨ͷ৘ใऔಘ
    ˡ
    ཁૉͷϦαΠζ׬ྃޙͳͷͰਖ਼͍͠৘ใ
    ճ໨ͷ৘ใऔಘ
    ˡ
    ཁૉͷϦαΠζ׬ྃޙͳͷͰਖ਼͍͠৘ใ
    
    
    
    
    
46. ରࡦ
    lཁૉ৘ใͷऔಘ͸ޮ཰Α͘z w εΫϩʔϧҐஔ
    w λʔήοτͷߴ͞
    w λʔήοτͷ:Ґஔ ճ͚ͩऔಘɻճ໨Ҏ߱͸औಘ͠ͳ͍ɻ 3FTJ[F࣌ʹɺ͜ͷ੍ݶճ਺͸Ϧηοτ͢Δɻ
47. ରࡦ
    lཁૉ৘ใͷऔಘ͸ޮ཰Α͘z ճ໨ͷ৘ใऔಘ
    ˡ
    ཁૉͷϦαΠζ׬ྃલͰਖ਼͘͠ͳ͍৘ใ
    ճ໨ͷ৘ใऔಘ
    ˡ
    ཁૉͷϦαΠζ׬ྃલͰਖ਼͘͠ͳ͍৘ใ
    ճ໨ͷ৘ใऔಘ
    ˡ
    ཁૉͷϦαΠζ׬ྃޙͳͷͰਖ਼͍͠৘ใ
    ճ໨ͷ৘ใऔಘ
    ˡ
    ཁૉͷϦαΠζ׬ྃޙͳͷͰਖ਼͍͠৘ใ
    ճ໨ͷ৘ใऔಘ
    ˡ
    ཁૉͷϦαΠζ׬ྃޙͳͷͰਖ਼͍͠৘ใ
    ճ໨Ҏ߱৘ใͷऔಘ͸͠ͳ͍
    ϦαΠζ͕ൃੜ
    
48. ରࡦ
    lཁૉ৘ใͷऔಘ͸ޮ཰Α͘z ਖ਼֬ੑͱෛՙͷόϥϯεΛߟ࣮͑ͨ૷
49. ·ͱΊ
50. ϦΞϧදݱΛ͠ͳ͍ ·ͱΊ ͦΕͬΆ͘ݟͤΔ޻෉Λͨ͠දݱ
    XFCͳΒͰ͸ͷදݱ
51. ׬ᘳͳXFCαΠτͷԋग़ ·ͱΊ ψϧψϧɺαΫαΫɺεʔύʔϦον
52. ׬ᘳͳXFCαΠτͷԋग़ ·ͱΊ ψϧψϧɺαΫαΫɺεʔύʔϦον
53. ׬ᘳͳXFCαΠτͷԋग़ ·ͱΊ GQTɺ௿ը࣭ɺΠʔδϯάͳ͠
54. XFCͳΒͰ͸ͷԋग़·ͩ·ͩ͋Γͦ͏ ·ͱΊ
55. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ