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

A9066b308c02ba960ebee5805d310c3f?s=47 DIST
February 15, 2020

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

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

A9066b308c02ba960ebee5805d310c3f?s=128

DIST

February 15, 2020
Tweet

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#PPL1SP GQT .BD#PPL"JS GQT

  13. αϯϓϧ TUBUTKT https://github.com/mrdoob/stats.js/

  14. None
  15. ϦΞϧλΠϜ΅͔͠Λ΍ΊΔ ରࡦ

  16. ॲཧଟΊɻɻɻ ରࡦ̍lϦΞϧλΠϜ΅͔͠Λ΍ΊΔz งғؾΛग़͠΍͍͢ԋग़͕ͩߴෛՙ

  17. ͋Β͔͡Ί΅͔ͨ͠ը૾Λ༻ҙ ରࡦ̍lϦΞϧλΠϜ΅͔͠Λ΍ΊΔz

  18. None
  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. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ