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

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ͷ࿈ܞΛ༻͍ͯϢʔβʔ؅ཧػೳͷ ࣮૷Λߦ͍͍ͨ