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
740
ポケモンの選出画面を解析する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.5k
@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
2k
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
Swift Updates - Learn Languages 2025
koher
2
410
OSS開発者という働き方
andpad
5
1.7k
RDoc meets YARD
okuramasafumi
4
160
rage against annotate_predecessor
junk0612
0
160
🔨 小さなビルドシステムを作る
momeemt
3
650
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
25
9.7k
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
機能追加とリーダー業務の類似性
rinchoku
2
780
為你自己學 Python - 冷知識篇
eddie
1
340
AIでLINEスタンプを作ってみた
eycjur
1
220
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
260
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.2k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
It's Worth the Effort
3n
187
28k
Designing Experiences People Love
moore
142
24k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Building Adaptive Systems
keathley
43
2.7k
GitHub's CSS Performance
jonrohan
1032
460k
Bash Introduction
62gerente
615
210k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
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ͷ࿈ܞΛ༻͍ͯϢʔβʔཧػೳͷ ࣮Λߦ͍͍ͨ