ポケモンの選出画面を解析するWebアプリを作った話 / TeamPreviewAnalyst

ポケモンの選出画面を解析するWebアプリを作った話 / TeamPreviewAnalyst

00766b8e1f9c2665cf7fd29f9cf558df?s=128

odanado

July 15, 2017
Tweet

Transcript

  1. ϙέϞϯͷબग़ը໘Λ ղੳ͢ΔWebΞϓϦΛ࡞ͬͨ

  2. ໨࣍ • WebΞϓϦͷ֓ཁ • ϑϩϯτΤϯυ • όοΫΤϯυ • Πϯϑϥ •

    ػೳ໘ͷ՝୊ • ײ૝ • ·ͱΊ
  3. WebΞϓϦͷ֓ཁ • ࠷ۙͷϙέϞϯ͸ ΦϯϥΠϯରઓ͕Մೳ • ૬खͷख͕࣋ͪ ӈͷਤͷΑ͏ʹදࣔ͞ΕΔ γʔϯ͕͋Δ • Կ͕͍ࣸͬͯΔ͔ࣗಈͰ

    ൑ఆ͍ͨ͠
  4. WebΞϓϦͷ֓ཁ • ·ͣ࠷ॳʹσϞ͠·͢ • ιʔείʔυ odanado/TeamPreviewAnalyst • ͍ΘΏΔSPA(Single Page Application)

    • αʔό͸APIΛ௨ͯ͡JSONͳͲΛൃߦ • ΫϥΠΞϯτ͸JSONΛड͚औͬͯDOMΛૢ࡞ • HTMLͷੜ੒͸αʔόଆͰ͸ͳ͘ ΫϥΠΞϯτଆͰߦ͏
  5. WebΞϓϦͷ֓ཁ Πϯϑϥ ϑϩϯτΤϯυ όοΫΤϯυ

  6. ϑϩϯτΤϯυ ϑϩϯτΤϯυ

  7. ϑϩϯτΤϯυ • React(+redux)Ͱॻ͍ͨ • Facebook͕։ൃ͍ͯ͠ΔOSS • ίϯϙʔωϯτࢦ޲ • Ծ૝DOMͰޮ཰తʹDOMΛߋ৽ •

    JSXͱݺ͹ΕΔJSΛ֦ுͨ͠ݴޠͰهड़ • ޙड़͢Δը૾ղੳAPIʹϦΫΤετΛ౤͛ͯ ͦͷ݁ՌʹԠͯ͡ը໘ΛมԽͤ͞Δ
  8. όοΫΤϯυ όοΫΤϯυ

  9. όοΫΤϯυ • REST API • Bottle(Python)Ͱ࣮૷ • ݱঢ়࢓༷͕؆୯ͳͷͰബ͍frameworkͰ΋େৎ෉ • ࣮૷଎౓తʹ࠷଎

    • ը૾ղੳ • OpenCVͱscikit-image • ΞϧΰϦζϜ͸୯७(࣍ͷεϥΠυ)
  10. όοΫΤϯυ • ը૾ղੳΞϧΰϦζϜ OpenCVͷinRangeؔ਺Ͱ ΦϨϯδ৭ͷ෦෼͚ͩநग़ ྖҬݕ஌Λߦ͍ Ұ൪େ͖͍ྖҬΛ੾ΓऔΓ

  11. όοΫΤϯυ • ը૾ղੳΞϧΰϦζϜ ϙέϞϯ͕͍ࣸͬͯͦ͏ͳ ෦෼Λ੾Γग़͢

  12. όοΫΤϯυ • ը૾ղੳΞϧΰϦζϜ ຊ෺ͷը૾ HOGಛ௃ྔͷϚϯϋολϯڑ཭͕ ࠷΋খ͍͞΋ͷΛબ୒ (༁ Ұ൪ࣅ͍ͯΔ΍ͭΛબͿ) ºϙέϞϯͷ਺

  13. Πϯϑϥ Πϯϑϥ

  14. Πϯϑϥ Dockerίϯςφ্ͰόοΫΤϯυ͸ಈ࡞ nginxͷϦόʔεϓϩΩγͰ αϒυϝΠϯׂΓ౰ͯ APIΛhttpsͰ഑৴͢Δඞཁ͕͋ͬͨͷͰ Let’s Encrypt Ͱূ໌ॻΛൃߦ ͍ͭ͜΋Dockerίϯςφ (jwilder/nginx-proxy)

    ͍ͭ͜΋Dockerίϯςφ (jrcs/letsencrypt-nginx-proxy-companion) docker-compose Ͱ؅ཧ
  15. ػೳ໘ͷ՝୊ • ΋͏Ұ౓σϞ͠·͢ • ݱࡏͷղੳਫ਼౓͸6ׂఔ౓ • Ұൠެ։͠σʔλΛऩूத • ࠓͷͱ͜Ζ400ຕू·ͬͨ •

    σʔλ͕ू·Ε͹ػցֶशͰղੳͰ͖Δ͔΋ • twitterͱ࿈ܞͯ͠Ϣʔβʔ؅ཧ͍ͨ͠
  16. ײ૝ • WebΞϓϦΛΠϯϑϥ͔ΒϑϩϯτΤϯυ ·Ͱ࡞Δͷ͸ॳΊͩͬͨ • ҰਓͰ৭ʑࢼͤΔͷͰָ͔ͬͨ͠ • ओཁͳ෦෼͸3೔ؒϓϩάϥϛϯά͚ͩΛͯ͠ ࡞͕ͬͨɼମௐΛյ͔͚ͨ͠ •

    ·ͩ·ͩػೳվળ͍ͨ͠ • Docker͸͍͍ͧ
  17. ·ͱΊ • ϙέϞϯͷબग़ը໘ͷղੳΛߦ͏WebΞϓϦ Λ࡞ͬͨ • ϑϩϯτΤϯυʹReact όοΫΤϯυʹBottle(Python) ΠϯϑϥʹDockerΛ࢖ͬͨ • ࠓޙ͸ղੳਫ਼౓ͷ޲্΍

    twitterͷ࿈ܞΛ༻͍ͯϢʔβʔ؅ཧػೳͷ ࣮૷Λߦ͍͍ͨ