Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

odanado
PRO

July 15, 2017
Tweet

More Decks by odanado

Other Decks in Programming

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