Tweet
Tweet

Slide 1

Slide 1 text

ϒϥ΢β্Ͱ ϙέϞϯͷը૾Λղੳ͍ͨ͠ʂ @potato4d / LINE GW ࣗ༝ݚڀൃද LT / 2020.05.11

Slide 2

Slide 2 text

஫ҙ ࣾ಺ LT ༻ͳͷͰɺNuxt.js ͷ࿩ͯ͠·ͤΜ ※ Universal Application ͷΞʔΩςΫνϟͷ࿩͸ผ్ϒϩάॻ͖·͢

Slide 3

Slide 3 text

@potato4d

Slide 4

Slide 4 text

https://pokedri.com/pokemon63/

Slide 5

Slide 5 text

https://github.com/potato4d/pokemon63

Slide 6

Slide 6 text

ϙέϞϯͷϧʔϧ

Slide 7

Slide 7 text

ϙέϞϯͷϧʔϧ 1. 6ඖͷϙέϞϯΛ༻ҙ͢Δ

Slide 8

Slide 8 text

ϙέϞϯͷϧʔϧ 2. ͓ޓ͍ͷ6ඖΛݟ͍ͤ͋ɺ3ඖબͿ

Slide 9

Slide 9 text

ϙέϞϯͷϧʔϧ 3. 3ඖಉ࢜Ͱઓͬͯશһ౗ͨ͠Βউͪʂ

Slide 10

Slide 10 text

ϙέϞϯͷϧʔϧ 2. ͓ޓ͍ͷ6ඖΛݟ͍ͤ͋ɺ3ඖબͿ

Slide 11

Slide 11 text

ϙέϞϯͷϧʔϧ 2. ͓ޓ͍ͷ6ඖΛݟ͍ͤ͋ɺ3ඖબͿ ૬खͷબग़Λ༧૝͢Δྗ͕ॏཁ

Slide 12

Slide 12 text

1. ࣗ෼ͷબग़ϩάΛࡌͤΒΕͯ 2. ଞਓͷબग़͕ݟΒΕͯ 3. ਖ਼͍͠બग़ΛΩϟϦϒϨʔγϣϯͰ͖Δ

Slide 13

Slide 13 text

1. ࣗ෼ͷબग़ϩάΛࡌͤΒΕͯ 2. ଞਓͷબग़͕ݟΒΕͯ 3. ਖ਼͍͠બग़ΛΩϟϦϒϨʔγϣϯͰ͖Δ

Slide 14

Slide 14 text

1. ࣗ෼ͷબग़ϩάΛࡌͤΒΕͯ 2. ଞਓͷબग़͕ݟΒΕͯ 3. ਖ਼͍͠બग़ΛΩϟϦϒϨʔγϣϯͰ͖Δ

Slide 15

Slide 15 text

1. ࣗ෼ͷબग़ϩάΛࡌͤΒΕͯ 2. ଞਓͷબग़͕ݟΒΕͯ 3. ਖ਼͍͠બग़ΛΩϟϦϒϨʔγϣϯͰ͖Δ ԿΒ͔ͷπʔϧ͕΄͍͠ʂʂʂ

Slide 16

Slide 16 text

πʔϧͷ໰୊

Slide 17

Slide 17 text

……12 ඖ෼σʔλೖΕΔͷͩΔ͘ͳ͍ʁ

Slide 18

Slide 18 text

→ εΫγϣ্͛ͨΒউखʹղੳͯ͠΄͍͠

Slide 19

Slide 19 text

࡞Δ

Slide 20

Slide 20 text

΍ͬͨ͜ͱ • ݕग़ͷݩσʔλιʔεΛ༻ҙ͢Δ • Node.js Ͱಈ͘ը૾ղੳػΛ࡞Δ • ݱ࣮తͳղੳ଎౓ΛٻΊͯ Web Worker ʹҠ২͢Δ • σβΠϯͱը૾Ξηοτ࡞Δ(Sketch) • ΞϓϦέʔγϣϯΛ࡞Δ

Slide 21

Slide 21 text

΍ͬͨ͜ͱ • ݕग़ͷݩσʔλιʔεΛ༻ҙ͢Δ • Node.js Ͱಈ͘ը૾ղੳػΛ࡞Δ • ݱ࣮తͳղੳ଎౓ΛٻΊͯ Web Worker ʹҠ২͢Δ • σβΠϯͱը૾Ξηοτ࡞Δ(Sketch) • ΞϓϦέʔγϣϯΛ࡞Δ

Slide 22

Slide 22 text

σʔλιʔεूΊ(σʔλՃ޻)

Slide 23

Slide 23 text

σʔλιʔεूΊ(σʔλՃ޻)

Slide 24

Slide 24 text

σʔλιʔεूΊ(σʔλՃ޻)

Slide 25

Slide 25 text

σʔλιʔεूΊ(Τοδέʔεऩू)

Slide 26

Slide 26 text

σʔλՃ޻લ • ਫ਼౓͕ग़ͳ͍ • ಈ࡞΋Ұඖ10ඵ͔͔Δ

Slide 27

Slide 27 text

σʔλՃ޻લ • ਫ਼౓͕ग़ͳ͍ • ಈ࡞΋Ұඖ10ඵ͔͔Δ • jpegϊΠζͷٵऩɾεΫγϣʹ͍ۙഎܠͷ௥Ճ • 9ׂܕͷϙέϞϯ͕ਖ਼͘͠൑ఆՄೳʹ ਫ਼౓͕ग़ͳ͍ͱ͖͸σʔλՃ޻ΛؤுΔͱྑ͍

Slide 28

Slide 28 text

ղੳػ • OpenCV ͸ϒϥ΢βͰಈ͔ͳ͍ • ීஈ࢖͏ JS ϑϨʔϜϫʔΫ͕ Universal ͳͷͰɺݕग़ػ΋ͦ͏͍ͨ͠ • ML ͳͲͰ͸ͳ͘·ͣ͸۪௚ʹ CPU ͷྗͰ౗͍ͨ͠

Slide 29

Slide 29 text

ղੳػ • OpenCV ͸ϒϥ΢βͰಈ͔ͳ͍ • ීஈ࢖͏ JS ϑϨʔϜϫʔΫ͕ Universal ͳͷͰɺݕग़ػ΋ͦ͏͍ͨ͠ • ML ͳͲͰ͸ͳ͘·ͣ͸۪௚ʹ CPU ͷྗͰ౗͍ͨ͠ https://www.npmjs.com/package/jimp

Slide 30

Slide 30 text

ϒϥ΢βͰಈ͔͢ • ϑΝΠϧγεςϜ͕࢖͑ͳ͍ • OpenCV ͱ͔΋ಈ͔ͳ͍ • ͳΜ͔৭ʑ੍໿͕͋Δ

Slide 31

Slide 31 text

ࣗ෼ଆͷϙέϞϯ: 6 ඖɹ ૬खଆͷϙέϞϯ: 6 ඖ ࠓ࢖͑ΔϙέϞϯ: 528 ඖ

Slide 32

Slide 32 text

ࣗ෼ଆͷϙέϞϯ: 6 ඖɹ ૬खଆͷϙέϞϯ: 6 ඖ ࠓ࢖͑ΔϙέϞϯ: 528 ඖ × 12 = 6336

Slide 33

Slide 33 text

ϒϥ΢βͰಈ͔͢ • ϑΝΠϧγεςϜ͕࢖͑ͳ͍ • OpenCV ͱ͔΋ಈ͔ͳ͍ • ͳΜ͔৭ʑ੍໿͕͋Δ • ͱʹ͔͘ൺֱ͢Δॲཧ͕ॏ͍ʂʂʂ

Slide 34

Slide 34 text

ϒϥ΢βͰಈ͔͢ • ϑΝΠϧγεςϜ͕࢖͑ͳ͍ • OpenCV ͱ͔΋ಈ͔ͳ͍ • ͳΜ͔৭ʑ੍໿͕͋Δ • ͱʹ͔͘ൺֱ͢Δॲཧ͕ॏ͍ʂʂʂ • Web Worker ͰͿΜճ͢ํ਑

Slide 35

Slide 35 text

Ճ޻σʔλͷϋογϡ஋Λར༻͢Δ͜ͱʹ

Slide 36

Slide 36 text

Ճ޻σʔλͷϋογϡ஋Λར༻͢Δ͜ͱʹ FSඇґଘɾߴ଎Խ Ұ௨Γ Jimp ͷίʔυಡΜͩΒܕఆٛʹͳ͍͚ͲͰ͖ͦ͏ͳͷͰ΍ͬͨ

Slide 37

Slide 37 text

Ξοϓϩʔυը૾ͷ Uint8Array ԽˠWorkerసૹ

Slide 38

Slide 38 text

෮ݩ࣮ͯ͠ߦ (8 workers / 66 pokemon per worker)

Slide 39

Slide 39 text

෮ݩ࣮ͯ͠ߦ (8 workers / 66 pokemon per worker) worker + fs ඇґଘ + Jimp Ͱ΄΅ Universal ʹ׬੒ ※ ͜ͷॲཧࣗମ͸ Node.js Ͱ΍Δඞཁ͕ͳ͔ͬͨͷͰɺ࠷ऴతʹ͸ worker_thread ͱͷޓ׵ੑΛ੾ͬͨ

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

ղੳ଎౓ : 350ms/pokemon ݕग़ਫ਼౓(jpeg:orig) : ΄΅100% (σʔλͷϛεҎ֎ޡݕ஌ͳͦ͞͏) ݕग़ਫ਼౓(jpeg:normal) : 85~%

Slide 42

Slide 42 text

ϦϦʔεޙ΄΅ຖ೔σϓϩΠத

Slide 43

Slide 43 text

ѹॖ཰ʹউͭʹ͸΍͸Γಛ௃ྔʁ

Slide 44

Slide 44 text

࠷ޙʹ • ࠓճݴٴ͠ͳ͔ͬͨ SSR/SPA ෦෼͸ผ్ϒϩάʹ·ͱΊ·͢ • Nuxt.js + Inject + Firebase + Tailwind Έ͍ͨͳߏ੒͕Կނڧ͍͔ • Store ׬શඇґଘ͔ͭ֎෦ґଘΛҰ੾௚઀ import ͠ͳ͍ϝϦοτ • ऴΘΓΏ͘ v2 ʹ͓͚Δ Vue.js ΞϓϦέʔγϣϯͷճ౴ͳͷͰͥͻ • Ұ೥ఔ౓΄΅͜ͷελΠϧͰ͔͠ίʔυॻ͍ͯͳ͍͚Ͳྑ͍ײ͡

Slide 45

Slide 45 text

ԿʹͤΑ

Slide 46

Slide 46 text

ϙέϞϯରઓΛ΍Ζ͏ʂ