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
750
ポケモンの選出画面を解析するWebアプリを作った話 / TeamPreviewAnalyst
odanado
PRO
July 15, 2017
Tweet
Share
More Decks by odanado
See All by odanado
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
3
4.7k
@nestjs/bull の活用について
odanado
PRO
0
1.5k
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
1.2k
Vue.observable で状態管理 / vue-observable-state-management
odanado
PRO
4
2.1k
nuxtjs-axios-error-handling
odanado
PRO
0
350
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
420
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
240
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
510
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
PRO
1
2.3k
Other Decks in Programming
See All in Programming
XP, Testing and ninja testing ZOZ5
m_seki
3
650
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.3k
CSC509 Lecture 03
javiergs
PRO
0
340
チームの境界をブチ抜いていけ
tokai235
0
170
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
230
株式会社 Sun terras カンパニーデック
sunterras
0
300
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
580
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
560
ALL CODE BASE ARE BELONG TO STUDY
uzulla
18
3.5k
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
110
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2.4k
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.6k
Featured
See All Featured
Site-Speed That Sticks
csswizardry
11
900
Faster Mobile Websites
deanohume
310
31k
Code Review Best Practice
trishagee
72
19k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Making Projects Easy
brettharned
119
6.4k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
RailsConf 2023
tenderlove
30
1.2k
Six Lessons from altMBA
skipperchong
28
4k
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ͷ࿈ܞΛ༻͍ͯϢʔβʔཧػೳͷ ࣮Λߦ͍͍ͨ