Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ポケモンの選出画面を解析するWebアプリを作った話 / TeamPreviewAnalyst
odanado
July 15, 2017
Programming
0
420
ポケモンの選出画面を解析するWebアプリを作った話 / TeamPreviewAnalyst
odanado
July 15, 2017
Tweet
Share
More Decks by odanado
See All by odanado
Vue.observable で状態管理 / vue-observable-state-management
odanado
4
1.2k
nuxtjs-axios-error-handling
odanado
0
140
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
0
240
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
0
110
最近のweb3.js事情 / bc.tokyo-19
odanado
2
330
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
1
1.8k
JavaScript + Dockerの知見 / knowledge-of-docker-in-javascript
odanado
9
51k
nuxt-i18nを使ったWebサイトの多言語化 / i18n-of-web-site-using-nuxt-i18n
odanado
1
5.3k
aws-cdk触ってみた / try-aws-cdk
odanado
0
97
Other Decks in Programming
See All in Programming
Terraform Plan/Apply結果の自動通知
ymmy02
0
280
Mobile Product Engineering
championswimmer
0
290
エンジニアによる事業指標計測のススメ
doyaaaaaken
1
180
1時間半で克服するJavaScriptの非同期処理/async_javascript_kokufuku
marchin1989
2
600
io22 extended What's new in app performance
veronikapj
0
330
JetPackComposeは宣言型プログラミングパラダイムって実はよくわかってないんですが、別に使ってもいいんですよね、
conigashima
0
170
Amazon ECSのネットワーク関連コストの話
msato
0
620
Custom Design Systems in Compose UI
rharter
5
520
RFC 9111: HTTP Caching
jxck
0
150
言語処理ライブラリ開発における失敗談 / NLPHacks
taishii
1
430
The strategies behind ddd – AdeoDevSummit 2022
lilobase
PRO
4
230
PythonユーザによるRust入門
rmizuta3
9
3.1k
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.7k
Mobile First: as difficult as doing things right
swwweet
213
7.5k
It's Worth the Effort
3n
172
25k
Debugging Ruby Performance
tmm1
65
10k
Building Flexible Design Systems
yeseniaperezcruz
310
34k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
Facilitating Awesome Meetings
lara
29
4k
Optimizing for Happiness
mojombo
365
63k
Transcript
ϙέϞϯͷબग़ը໘Λ ղੳ͢ΔWebΞϓϦΛ࡞ͬͨ
࣍ • WebΞϓϦͷ֓ཁ • ϑϩϯτΤϯυ • όοΫΤϯυ • Πϯϑϥ •
ػೳ໘ͷ՝ • ײ • ·ͱΊ
WebΞϓϦͷ֓ཁ • ࠷ۙͷϙέϞϯ ΦϯϥΠϯରઓ͕Մೳ • ૬खͷख͕࣋ͪ ӈͷਤͷΑ͏ʹදࣔ͞ΕΔ γʔϯ͕͋Δ • Կ͕͍ࣸͬͯΔ͔ࣗಈͰ
ఆ͍ͨ͠
WebΞϓϦͷ֓ཁ • ·ͣ࠷ॳʹσϞ͠·͢ • ιʔείʔυ odanado/TeamPreviewAnalyst • ͍ΘΏΔSPA(Single Page Application)
• αʔόAPIΛ௨ͯ͡JSONͳͲΛൃߦ • ΫϥΠΞϯτJSONΛड͚औͬͯDOMΛૢ࡞ • HTMLͷੜαʔόଆͰͳ͘ ΫϥΠΞϯτଆͰߦ͏
WebΞϓϦͷ֓ཁ Πϯϑϥ ϑϩϯτΤϯυ όοΫΤϯυ
ϑϩϯτΤϯυ ϑϩϯτΤϯυ
ϑϩϯτΤϯυ • React(+redux)Ͱॻ͍ͨ • Facebook͕։ൃ͍ͯ͠ΔOSS • ίϯϙʔωϯτࢦ • ԾDOMͰޮతʹDOMΛߋ৽ •
JSXͱݺΕΔJSΛ֦ுͨ͠ݴޠͰهड़ • ޙड़͢Δը૾ղੳAPIʹϦΫΤετΛ͛ͯ ͦͷ݁ՌʹԠͯ͡ը໘ΛมԽͤ͞Δ
όοΫΤϯυ όοΫΤϯυ
όοΫΤϯυ • REST API • Bottle(Python)Ͱ࣮ • ݱঢ়༷͕؆୯ͳͷͰബ͍frameworkͰେৎ • ࣮తʹ࠷
• ը૾ղੳ • OpenCVͱscikit-image • ΞϧΰϦζϜ୯७(࣍ͷεϥΠυ)
όοΫΤϯυ • ը૾ղੳΞϧΰϦζϜ OpenCVͷinRangeؔͰ ΦϨϯδ৭ͷ෦͚ͩநग़ ྖҬݕΛߦ͍ Ұ൪େ͖͍ྖҬΛΓऔΓ
όοΫΤϯυ • ը૾ղੳΞϧΰϦζϜ ϙέϞϯ͕͍ࣸͬͯͦ͏ͳ ෦ΛΓग़͢
όοΫΤϯυ • ը૾ղੳΞϧΰϦζϜ ຊͷը૾ HOGಛྔͷϚϯϋολϯڑ͕ ࠷খ͍͞ͷΛબ (༁ Ұ൪ࣅ͍ͯΔͭΛબͿ) ºϙέϞϯͷ
Πϯϑϥ Πϯϑϥ
Πϯϑϥ Dockerίϯςφ্ͰόοΫΤϯυಈ࡞ nginxͷϦόʔεϓϩΩγͰ αϒυϝΠϯׂΓͯ APIΛhttpsͰ৴͢Δඞཁ͕͋ͬͨͷͰ Let’s Encrypt Ͱূ໌ॻΛൃߦ ͍ͭ͜Dockerίϯςφ (jwilder/nginx-proxy)
͍ͭ͜Dockerίϯςφ (jrcs/letsencrypt-nginx-proxy-companion) docker-compose Ͱཧ
ػೳ໘ͷ՝ • ͏ҰσϞ͠·͢ • ݱࡏͷղੳਫ਼6ׂఔ • Ұൠެ։͠σʔλΛऩूத • ࠓͷͱ͜Ζ400ຕू·ͬͨ •
σʔλ͕ू·ΕػցֶशͰղੳͰ͖Δ͔ • twitterͱ࿈ܞͯ͠Ϣʔβʔཧ͍ͨ͠
ײ • WebΞϓϦΛΠϯϑϥ͔ΒϑϩϯτΤϯυ ·Ͱ࡞ΔͷॳΊͩͬͨ • ҰਓͰ৭ʑࢼͤΔͷͰָ͔ͬͨ͠ • ओཁͳ෦3ؒϓϩάϥϛϯά͚ͩΛͯ͠ ࡞͕ͬͨɼମௐΛյ͔͚ͨ͠ •
·ͩ·ͩػೳվળ͍ͨ͠ • Docker͍͍ͧ
·ͱΊ • ϙέϞϯͷબग़ը໘ͷղੳΛߦ͏WebΞϓϦ Λ࡞ͬͨ • ϑϩϯτΤϯυʹReact όοΫΤϯυʹBottle(Python) ΠϯϑϥʹDockerΛͬͨ • ࠓޙղੳਫ਼ͷ্
twitterͷ࿈ܞΛ༻͍ͯϢʔβʔཧػೳͷ ࣮Λߦ͍͍ͨ