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
AbemaTV ホンネテレビ の本音
Search
Kenichi Kato
March 09, 2018
Programming
4
3.8k
AbemaTV ホンネテレビ の本音
2018/03/09 Frontrend Vol.11 - 2017年度フロントエンド大反省会
Kenichi Kato
March 09, 2018
Tweet
Share
More Decks by Kenichi Kato
See All by Kenichi Kato
AbemaTVブラウザ版のCDN移行とその活用
ktknest
2
600
AbemaTVはただのSSR じゃねぇんだよ
ktknest
11
6.9k
Other Decks in Programming
See All in Programming
CSC509 Lecture 06
javiergs
PRO
0
130
現場から考えるソフトウェアエンジニアリングの価値と実験
nomuson
1
140
Honoの来た道とこれから
yusukebe
14
2.2k
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
160
Prompt Engineering for Developers @ AWS Community Day Adria 2024
slobodan
0
100
Modern Functional Fluent CFML REST by Luis Majano
ortus24
0
160
【YAPC::Hakodate 2024】TypeScriptエンジニアが感じたPerlのここが面白い
kimitashoichi
1
480
いかにして不足・不整合なくデータ移行したか
tjmtmmnk
1
910
sqlcを利用してsqlに型付けを
kamiyam
0
250
実践サーバーレスパフォーマンスチューニング ~その実力に迫る~ / Practical Serverless Performance Tuning ~A Close Look at its Power~
seike460
PRO
2
230
Golang と Erlang
taiyow
7
1.8k
perl for shell, awk and sed programmers
mackee
2
1k
Featured
See All Featured
How GitHub (no longer) Works
holman
311
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
It's Worth the Effort
3n
183
27k
Why Our Code Smells
bkeepers
PRO
334
57k
A designer walks into a library…
pauljervisheath
202
24k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
5
130
How STYLIGHT went responsive
nonsquared
95
5.1k
Transcript
AbemaTV #ϗϯωςϨϏ ͷຊԻ 2018/03/09 Frontrend Vol.11 - 2017ϑϩϯτΤϯυେলձ @ktknest
גࣜձࣾαΠόʔΤʔδΣϯτ גࣜձࣾ"CFNB57։ൃຊ෦ Ճ౻ݡҰ ϓϩϑΟʔϧ த్ೖࣾ ओʹঁੑ͚ϝσΟΞαʔϏεͷ্ཱͪ͛Λ୲ "CFNB57ʹग़
AbemaTV ແྉͰָ͠ΊΔΠϯλʔωοτςϨϏہ ΦϦδφϧͷੜ์ૹίϯςϯπɺχϡʔεɺ ԻָɺεϙʔπɺυϥϚͳͲଟ࠼ͳ൪ָ͕͠ ΊΔνϟϯωϧΛશͯແྉͰఏڙ͍ͯ͠ ·͢ɻ ʮ"CFNBϏσΦʯͰɺ"CFNB57ͷ์ૹͰ ݟಀͨ͠൪ΛҰఆظ͍ؒͭͰɺ͖ͳ࣌ ʹݟ์ʹͳΔ΄͔ɺΦϦδφϧ੍࡞ͷ൪ Λ͡ΊɺҰ෦ͷ൪ొ͢Δ͜ͱͳ͘ແ
ྉͰָ͓͠Έ͍͚ͨͩ·͢ɻ
2017 ࠷େͷল ʊਓਓਓਓਓਓਓਓਓਓʊ ʼɹαʔόʔμϯɹʻ ʉ:?:?:?:?:?:?:?:ʉ ʰُాڵؽʹউͬͨΒສԁʱ
2017 ৼΓฦΓ
"CFNB57։ہ "CFNBϏσΦϦϦʔε ʰُాڵؽʹউͬͨΒສԁʱ์ૹ ʰୈظཽԦઓܾউτʔφϝϯτࠤʑ༐ؾޒஈର౻Ҫ૱ଠ࢛ஈʱ์ૹ ʰ࣌ؒϗϯωςϨϏʱ์ૹܾఆ ʰ࣌ؒϗϯωςϨϏʱ์ૹ ৭ʑͳ࢝ಛ൪
ࠓճ͜ͷল͔Βɺ ϗϯωςϨϏ࢝Λແࣄʹաͨ͢͝Ίʹߦͬͨ ෛՙରࡦΛத৺ʹ͓͠͠·͢ɻ
ରࡦ 8FCαʔόʔΛࢮͳͤͳ͍ "1*৴αʔόʔΛࢮͳͤͳ͍ Τϥʔൃੜ࣌ʹదͳදࣔΛ͢Δ
લஔ͖ɿWebߏ ($1্ʹߏங #''ʢ/HJOY/PEFKTʣ "1*ผυϝΠϯ 41"ʢඇ443ʣ ˞ࠨਤෛՙରࡦޙͷߏ
લஔ͖ɿ͋ΘͤͯಡΈ͍ͨ .JDSPTFSWJDFTԼʹ͓͚Δ8FCͷෛՙରࡦ"CFNB57%&7&-01&3$0/'&3&/$& IUUQTTQFBLFSEFDLDPNBTVLBMFJEPBCFNBUWEFWFMPQFSDPOGFSFODF IUUQTGSFTIMJWFUWUFDIDPOGFSFODFࠒ͔Β ࣌ؒϗϯω57ɺΫϥΠΞϯταΠυෛՙରࡦ $"TXJGU IUUQTTQFBLFSEFDLDPNSJOPWEJIVJDBTXJGU ϗϯωςϨϏͷෛՙରࡦ৴ฤ IUUQTRJJUBDPNNJZVLLJJUFNTGEDC "CFNB57Λࢧ͑ΔΞϓϦͷ༏͠͞"CFNB57%&7&-01&3$0/'&3&/$&
IUUQTTQFBLFSEFDLDPNPHBDMFKBQBOBCFNBUWEFWDPO IUUQTGSFTIMJWFUWUFDIDPOGFSFODFࠒ͔Β ϗϯωςϨϏͷෛՙରࡦϓϩϚωͷϗϯω IUUQTEFWFMPQFSTDZCFSBHFOUDPKQCMPHBSDIJWFT
ରࡦɿWebαʔόʔΛࢮͳͤͳ͍ μϯ࣌ʹͷ͋ͬͨՕॴͷݟ͠ $%/Խ
ରࡦɿWebαʔόʔΛࢮͳͤͳ͍ μϯ࣌ʹͷ͋ͬͨՕॴͷݟ͠ ෦ͷH31$௨৴ͰλΠϜΞτ࣌ͷߟྀ࿙Ε Ԡ͕ͳ͍ঢ়ଶ͕ଓ͍ͯ͠·͏ʢ-#ଆλΠϜΞτʣ ίωΫγϣϯͬͨ··ͷͨΊɺੵΈॏͳΔͱίωΫγϣϯͷݶքಥഁ (PPHMF$MPVE1MBUGPSN /PEFKT ใऔಘઌͷ
ϚΠΫϩαʔϏε H31$ ϝλใΛ༩ͨ͠)5.-
ରࡦɿWebαʔόʔΛࢮͳͤͳ͍ CDNԽ )5.-ؚΊͨ੩తϑΝΠϧશͯ(PPHMF$MPVE$%/ܦ༝ʹ͢Δ ΦϦδϯαʔόʔʢ/HJOY/PEFKTʣͷϦΫΤετΛ࠷খݶʹͰ͖Δ 6"ʹΑΔ৴ͷৼΓ͚͕Ͱ͖ͳ͍ͨΊɺ6"ґଘՕॴΛमਖ਼ ݱࡏɺ͞Βʹ'BTUMZҠߦΛݕ౼த
ରࡦɿAPI/৴αʔόʔΛࢮͳͤͳ͍ ৴ͷ$%/ʢ"LBNBJʣԽ ࢹௌ·Ͱʹඞਢͳ"1*Λ৽ ʢෆཁͳcෆཁͳλΠϛϯάͰͷʣϦΫΤετΛݮ ղ૾ͷίϯτϩʔϧ
ରࡦɿAPI/৴αʔόʔΛࢮͳͤͳ͍ ৴ͷCDNʢAkamaiʣԽ )-4.1&(%"4)ͷϓϨΠϦετΛ$%/͔Βฦ͢ ηάϝϯτطʹ$%/͔Β৴ࡁΈ ࢹௌͷଟ͍൪ͰΦϦδϯαʔόʔͷϦΫΤετ͕εύΠΫͯ͠͠·͏ $%/Խʹ͋ͨͬͯɺϢʔβʔݻ༗ใͷຒΊࠐΈϩά͕औಘͰ͖ͳ͘ͳΔ
ϥΠηϯεղܾɺࢹௌʹؔ͢ΔϝτϦΫεૹ৴Λվम ग़యɿϑϩϯτΤϯυΤϯδχΞͷͨΊͷಈըετϦʔϛϯάٕज़جૅ https://ygoto3.com/posts/streaming-technology-basics-for-frontend-engineers/
ରࡦɿAPI/৴αʔόʔΛࢮͳͤͳ͍ ࢹௌ·ͰʹඞਢͳAPIΛ৽ ͋ΒΏΔՕॴͰ൪දΛ࢘Δڊେͳ"1*ʹґଘ νϟϯωϧҰཡ൪ใͷࢀরʹར༻ ࢹௌ͢Δ͚ͩͳΒ͜͜·Ͱඞཁͳ͍ ෛՙͷߴ͍Ϣʔβʔࢀরܥͷোʹר͖ࠐ·Ε͔Ͷͳ͍ νϟϯωϧҰཡ൪ใɺࢹௌΛऔಘ͢Δ"1*Λ৽
͜ΕΒʹಛԽͨ͠ϚΠΫϩαʔϏεΛ࡞ ඞཁ࠷খݶͷใΛݸผʹऔಘ
ରࡦɿAPI/৴αʔόʔΛࢮͳͤͳ͍ ʢෆཁͳ|ෆཁͳλΠϛϯάͰͷʣϦΫΤετΛݮ ςϨϏͷࢹௌ·Ͱඞཁ࠷ݶͷϦΫΤετͰߏ͢Δ τοϓϖʔδɿνϟϯωϧҰཡͷදࣔ ςϨϏɿ൪ͷࢹௌɺνϟϯωϧͷΓସ͑ ڊେͳ൪ද"1*ͷґଘΛఫڈ ͦͷଞ৭ʑ
ࢹௌίϝϯτͷऔಘ৽"1*ʹҠߦ ϙʔϦϯάִؒ࠷దԽ ཪ൪දίϝϯτҰཡͷऔಘλΠϛϯάΛௐ
ରࡦɿAPI/৴αʔόʔΛࢮͳͤͳ͍ ղ૾ͷίϯτϩʔϧ ଳҬͷ͍͗͢μϝ ςϨϏฒΈͷࢹௌऀºߴϏοτϨʔτˠ૬ͷଳҬΛ༗ͯ͠͠·͏ ϓϨΠϠʔαΠζʹ߹Θͤͯղ૾ΛՄมʹ͢Δ ΞϓϦͰॳ͔Βಋೖ͞Ε͍ͯͨΈΛɺ8FCʹಋೖ QʙQ૬ͰΓସ͑
ରࡦɿΤϥʔൃੜ࣌ͷదͳରԠ ΤϥʔϋϯυϦϯάͷݟ͠ ϝϯςφϯεը໘ͷදࣔ
ରࡦɿΤϥʔൃੜ࣌ͷదͳରԠ ΤϥʔϋϯυϦϯάͷݟ͠ ਖ਼ৗʹऔಘͰ͖Δ͜ͱ͕લఏͷॲཧ͕ଟ͔ͬͨ ϨεϙϯεΤϥʔͷ߹ͰదͳදࣔΛ͢ΔΑ͏ʹશ໘తʹݟ͠ ҟৗܥΛ2"νʔϜͰ؆୯ʹ࠶ݱͰ͖ΔΑ͏ɺςετ༻ͷϓϩΩγπʔϧΛ࡞ 4FSWJDF8PSLFSΛհ͠ɺҙͷ"1*ΛYYঢ়ଶͱͯ͠࠶ݱ
ରࡦɿΤϥʔൃੜ࣌ͷదͳରԠ ϝϯςφϯεը໘ͷදࣔ ࠷ѱμϝͩͬͨ߹Ͱɺϝϯςφϯεը໘Λදࣔͤ͞Δ ʮԿදࣔ͞Εͳ͍ʯઈରʹճආͯ͠ɺެࣜใͷऔಘઌΛҊ ඞਢͳ"1*ϦΫΤετ͕ࣦഊɺ͘͠λΠϜΞτͨ͠߹ 8FC͕μϝͱஅ͞Εͨ߹ʹɺଈ࠲ʹϝϯςφϯεೖΕΔ४උ
݁Ռ https://www.sponichi.co.jp/entertainment/news/2017/11/05/kiji/20171105s00041000500000c.html
ͦͷଞɾࡶײ ϗϯωςϨϏͷ์ૹܾఆΛੈؒͱಉ࣌ʹΔ͜ͱʹ ใ౷੍͋ͬͯɺࣄલʹΒ͞Ε͍ͯͨͷۃҰ෦ ݩʑɺ࢝ఆͰෛՙରࡦΛ࣮ࢪ͢Δ༧ఆͩͬͨͨΊɺલ͠ʹͯ͠ᬏਐ ์ૹத࣌ؒʴЋͷγϑτମ੍Ͱࢹ ൃੜͤͣʹฏʹա͝͠·ͨ͠ -
͜ΕΒͷରࡦͷ͓͔͛Ͱɺ࢝ͷ1000ສاըฏʹա͝͠·ͨ͠ ෦తʹ৭ʑͱݟ͕͠ਤΕ͍͍ͯػձʹ $%/Խඞཁͷͳ͍"1*ݮͰύϑΥʔϚϯεվળ
<hiring/> એɿAbemaTVͰҰॹʹಇ͘ਓΛืू͓ͯ͠Γ·͢ ҎԼͷΑ͏ͳਓʹ͍͍ͯΔ৬Ͱ͢ ɾΰπ͍41"Λ࡞Γ͍ͨਓ ɾ41" 443ͷଟॏߏʹ೩͑Δਓ ɾඦສϢʔβʔͷ͏ಈըΫϥΠΞϯτΛ࡞Γ͍ͨਓ ɾΫϥΠΞϯτ͚ͩ͡Όͳ͘/PEFKTॻ͖͍ͨਓ
͋Γ͕ͱ͏͍͟͝·ͨ͠ 2018/03/09 Frontrend Vol.11 - 2017ϑϩϯτΤϯυେলձ @ktknest AbemaTV #ϗϯωςϨϏ ͷຊԻ