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
700
ポケモンの選出画面を解析する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
3.5k
@nestjs/bull の活用について
odanado
PRO
0
1.3k
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
1.1k
Vue.observable で状態管理 / vue-observable-state-management
odanado
PRO
4
2k
nuxtjs-axios-error-handling
odanado
PRO
0
320
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
370
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
210
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
460
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
PRO
1
2.2k
Other Decks in Programming
See All in Programming
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
260
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
2
220
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
190
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
130
Unity Android XR入門
sakutama_11
0
160
Pulsar2 を雰囲気で使ってみよう
anoken
0
240
GoとPHPのインターフェイスの違い
shimabox
2
190
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
140
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
480
Featured
See All Featured
Unsuck your backbone
ammeep
669
57k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
GitHub's CSS Performance
jonrohan
1030
460k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Docker and Python
trallard
44
3.3k
Why Our Code Smells
bkeepers
PRO
336
57k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Documentation Writing (for coders)
carmenintech
67
4.6k
It's Worth the Effort
3n
184
28k
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ͷ࿈ܞΛ༻͍ͯϢʔβʔཧػೳͷ ࣮Λߦ͍͍ͨ