ポケモンの選出画面を解析する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ͷ࿈ܞΛ༻͍ͯϢʔβʔ؅ཧػೳͷ ࣮૷Λߦ͍͍ͨ