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

Transcript

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

   View Slide

2. ໨࣍
   • WebΞϓϦͷ֓ཁ
   • ϑϩϯτΤϯυ
   • όοΫΤϯυ
   • Πϯϑϥ
   • ػೳ໘ͷ՝୊
   • ײ૝
   • ·ͱΊ
   

   View Slide

3. WebΞϓϦͷ֓ཁ
   • ࠷ۙͷϙέϞϯ͸
   ΦϯϥΠϯରઓ͕Մೳ
   • ૬खͷख͕࣋ͪ
   ӈͷਤͷΑ͏ʹදࣔ͞ΕΔ
   γʔϯ͕͋Δ
   • Կ͕͍ࣸͬͯΔ͔ࣗಈͰ
   ൑ఆ͍ͨ͠
   

   View Slide

4. WebΞϓϦͷ֓ཁ
   • ·ͣ࠷ॳʹσϞ͠·͢
   • ιʔείʔυ
   odanado/TeamPreviewAnalyst
   • ͍ΘΏΔSPA(Single Page Application)
   • αʔό͸APIΛ௨ͯ͡JSONͳͲΛൃߦ
   • ΫϥΠΞϯτ͸JSONΛड͚औͬͯDOMΛૢ࡞
   • HTMLͷੜ੒͸αʔόଆͰ͸ͳ͘
   ΫϥΠΞϯτଆͰߦ͏
   

   View Slide

5. WebΞϓϦͷ֓ཁ
   Πϯϑϥ
   ϑϩϯτΤϯυ
   όοΫΤϯυ
   

   View Slide

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

   View Slide

7. ϑϩϯτΤϯυ
   • React(+redux)Ͱॻ͍ͨ
   • Facebook͕։ൃ͍ͯ͠ΔOSS
   • ίϯϙʔωϯτࢦ޲
   • Ծ૝DOMͰޮ཰తʹDOMΛߋ৽
   • JSXͱݺ͹ΕΔJSΛ֦ுͨ͠ݴޠͰهड़
   • ޙड़͢Δը૾ղੳAPIʹϦΫΤετΛ౤͛ͯ
   ͦͷ݁ՌʹԠͯ͡ը໘ΛมԽͤ͞Δ
   

   View Slide

8. όοΫΤϯυ
   όοΫΤϯυ
   

   View Slide

9. όοΫΤϯυ
   • REST API
   • Bottle(Python)Ͱ࣮૷
   • ݱঢ়࢓༷͕؆୯ͳͷͰബ͍frameworkͰ΋େৎ෉
   • ࣮૷଎౓తʹ࠷଎
   • ը૾ղੳ
   • OpenCVͱscikit-image
   • ΞϧΰϦζϜ͸୯७(࣍ͷεϥΠυ)
   

   View Slide

10. όοΫΤϯυ
    • ը૾ղੳΞϧΰϦζϜ
    OpenCVͷinRangeؔ਺Ͱ
    ΦϨϯδ৭ͷ෦෼͚ͩநग़
    ྖҬݕ஌Λߦ͍
    Ұ൪େ͖͍ྖҬΛ੾ΓऔΓ
    

    View Slide

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

    View Slide

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

    View Slide

13. Πϯϑϥ
    Πϯϑϥ
    

    View Slide

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

    View Slide

15. ػೳ໘ͷ՝୊
    • ΋͏Ұ౓σϞ͠·͢
    • ݱࡏͷղੳਫ਼౓͸6ׂఔ౓
    • Ұൠެ։͠σʔλΛऩूத
    • ࠓͷͱ͜Ζ400ຕू·ͬͨ
    • σʔλ͕ू·Ε͹ػցֶशͰղੳͰ͖Δ͔΋
    • twitterͱ࿈ܞͯ͠Ϣʔβʔ؅ཧ͍ͨ͠
    

    View Slide

16. ײ૝
    • WebΞϓϦΛΠϯϑϥ͔ΒϑϩϯτΤϯυ
    ·Ͱ࡞Δͷ͸ॳΊͩͬͨ
    • ҰਓͰ৭ʑࢼͤΔͷͰָ͔ͬͨ͠
    • ओཁͳ෦෼͸3೔ؒϓϩάϥϛϯά͚ͩΛͯ͠
    ࡞͕ͬͨɼମௐΛյ͔͚ͨ͠
    • ·ͩ·ͩػೳվળ͍ͨ͠
    • Docker͸͍͍ͧ
    

    View Slide

17. ·ͱΊ
    • ϙέϞϯͷબग़ը໘ͷղੳΛߦ͏WebΞϓϦ
    Λ࡞ͬͨ
    • ϑϩϯτΤϯυʹReact
    όοΫΤϯυʹBottle(Python)
    ΠϯϑϥʹDockerΛ࢖ͬͨ
    • ࠓޙ͸ղੳਫ਼౓ͷ޲্΍
    twitterͷ࿈ܞΛ༻͍ͯϢʔβʔ؅ཧػೳͷ
    ࣮૷Λߦ͍͍ͨ
    

    View Slide