Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ポケモンの選出画面を解析するWebアプリを作った話 / TeamPreviewAnalyst
Search
odanado
PRO
July 15, 2017
Programming
0
550
ポケモンの選出画面を解析するWebアプリを作った話 / TeamPreviewAnalyst
odanado
PRO
July 15, 2017
Tweet
Share
More Decks by odanado
See All by odanado
@nestjs/bull の活用について
odanado
PRO
0
990
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
820
Vue.observable で状態管理 / vue-observable-state-management
odanado
PRO
4
1.8k
nuxtjs-axios-error-handling
odanado
PRO
0
260
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
280
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
170
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
410
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
PRO
1
2.1k
JavaScript + Dockerの知見 / knowledge-of-docker-in-javascript
odanado
PRO
9
53k
Other Decks in Programming
See All in Programming
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.6k
ONE WEDGE_company_guide
1wedge_one
0
330
ドメイン・ファーストで考える問題解決に役立つモデル設計 / Domain First Model Design
suzushin54
2
2.1k
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
25
7.7k
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.2k
本格ローグライク制作にEbitengineを選んでみた
nagainaganawa
0
290
プールにゆこう
irof
2
120
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
210
エンターテイメント業界で利用されるAWS
demuyan
0
200
Designing for tomorrow's programming workflows
honnibal
PRO
2
110
Git Lint
bkuhlmann
4
740
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
220
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
The Invisible Customer
myddelton
114
12k
BBQ
matthewcrist
79
8.7k
Building Flexible Design Systems
yeseniaperezcruz
318
37k
YesSQL, Process and Tooling at Scale
rocio
162
13k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Statistics for Hackers
jakevdp
789
220k
Ruby is Unlike a Banana
tanoku
95
10k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
A Tale of Four Properties
chriscoyier
150
22k
Code Review Best Practice
trishagee
54
15k
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ͷ࿈ܞΛ༻͍ͯϢʔβʔཧػೳͷ ࣮Λߦ͍͍ͨ