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
Chrome Dev Summit 2019振り返り
Search
Junya
February 19, 2020
Programming
0
370
Chrome Dev Summit 2019振り返り
Junya
February 19, 2020
Tweet
Share
More Decks by Junya
See All by Junya
AMP キャッシュを超えるシステムを自社ドメインで実現する方法 / How to implement a system that goes beyond amp-caching on your domain
ka2jun8
3
2.9k
SEO のためにエンジニアができること
ka2jun8
2
1.3k
制約と誓約
ka2jun8
6
3.1k
エンジニアになろう
ka2jun8
0
430
Other Decks in Programming
See All in Programming
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
950
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
21
10k
QA x AIエコシステム段階構築作戦
osu
0
240
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1.1k
Reactの歴史を振り返る
tutinoko
1
170
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
2
730
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
1
250
Understanding Kotlin Multiplatform
l2hyunwoo
0
250
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
660
DataformでPythonする / dataform-de-python
snhryt
0
150
TypeScriptでDXを上げろ! Hono編
yusukebe
4
930
What's new in Adaptive Android development
fornewid
0
130
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
Side Projects
sachag
455
43k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
540
RailsConf 2023
tenderlove
30
1.2k
A Modern Web Designer's Workflow
chriscoyier
695
190k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Facilitating Awesome Meetings
lara
54
6.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Transcript
Chrome Dev Summit 2019ৼΓฦΓ @ka2jun8 PWA Night vol.13 2020/02/19
ࣗݾհ ## @ka2jun8 / J / ͔ʹ ### ܦྺͱॴଐ -
20144݄ ৽ଔ F ͔Β͡·ΔձࣾʢR&Dʣ - 20184݄ த్ R ͔Β͡·ΔձࣾʢWeb FEʣ ### ͬͯΔ͜ͱ - WebαʔϏεͷ৽ن্ཱͪ͛/ϑϧϦϓϨΠε - ࠷ۙ AMP Λͬͨ։ൃ ### ͖ͳͷ - ೫ࡔ46 / Dead by Daylight / HUNTER x HUNTER
ΞδΣϯμ • CDSͱ • CDSৼΓฦΓ • ࠷ۙͬͯΔ͜ͱ • ·ͱΊ ϒϩάʹॻ͍ͨ༰Λ͚ͩ͢ʜ
PWA Night ॳࢀઓ ͓ͯΘΒ͔ʹ 'JSFGPY։ൃऀͰ8$ͷϝϯόʔͷํͷޙͷൃදͰ͑ͯΔʜ
PWA Night ͚ͩͲ
PWAͷ(΄΅)͠ͳ͍ ͝ΊΜͶˑ
CDSͱ https://developer.chrome.com/devsummit/faqs/#about
CDSͱ https://developer.chrome.com/devsummit/faqs/#about $ISPNF%FW4VNNJUʹҰͷ։ൃऀ͕ $ISPNFϒϥβʹ͍ͭͰͷ࠷৽ͷπʔϧΞοϓ σʔτΛֶͿ͜ͱ͕Ͱ͖ΔΧϯϑΝϨϯεͰ͢ɻ
ॴ • αϯϑϥϯ γεί
ఔ • 201911݄11, 12
ఔ • 201911݄11, 12 ͿͬͪΌ͚ ͋Μ·Γ֮͑ͯͳ͍
CDS2019αϚϦ https://developers-jp.googleblog.com/2019/12/chrome-dev-summit-2019.html https://www.youtube.com/playlist?list=PLNYkxOF6rcIDA1uGhqy45bqlul0VcvKMr • ͔ͯ͜ΕݟΕΘ͔ΔΑͬͯ
CDSͱͭ·Γ Google͕ߟ͑ΔWebͷ࠷ઌ ͷٕज़Λൃද͢Δ
CDS2019ৼΓฦΓ ݸਓతʹؾʹͳͬͨൃදΛհ ײ͖
Keynote • ઌཱͬͯ̎ؒͷશମͷαϚϦʔͱ͍͏ײ͡ɻ Chrome ʹ৽͘͠Ճ͞ΕΔػೳAPIͳͲ͕ ͬ͟ͱհ͞Εͨɻ
Keynote
Keynote ϥΠϒͰͷSpeed hackathon img Λ data-src ʹՃ͚ͨͩͩͬͨ͠͠༻ҙͯͨ͠ͱࢥ͏͚Ͳɺͦ Εʹ͍ͯ͢͠͝ͳͱࢥΘͤΔͷ͕͋ͬͨɻ
Protecting users on a thriving web • ϒϥβηΩϡϦςΟؔ࿈ͷτʔΫ
Protecting users on a thriving web
Protecting users on a thriving web
Protecting users on a thriving web ʹର͢Δॴײ • Same Site
Cookie ݫ͍͠ؾ࣋ͪΘ͔Δ • ϚʔέςΟϯά෦ॺ͔Β͢ΔͱɺύʔιφϥΠζ͍ͨ͠ͷΘ͔Δ • Θ͔ΔΜ͚ͩͲɺɺɺ • ͔͠͠ɺ͏ͦ͏͍͏࣌͡Όͳ͍ɻ • ։ൃऀ͕ϓϥΠόγʔݒ೦Λਖ਼͘͠ཧղ͢Δɻ Ϛʔέଞͷ෦ୂͷਓͨͪʹཧղΛͯ͠Β͏ɻ • …͍͠ΑͶɺΘ͔Δɻ
Protecting users on a thriving web ʹର͢Δॴײ https://speakerdeck.com/yosuke_furukawa/zui-xin-falseburauzadebian-warucookiefalsequ-rixi-iyaprivacyfalsekao-efang ࢀߟ
What’s new in sign-up and sign-in • SMS Ͱ 2FA͢Δͱ͖ʹɺೖྗΛαϙʔτ͢Δ
• Yahoo!JAPAN ͩͱ re-auth Ͱ ͷࢦೝূͱ͔Λ2FA Ͱ͑ΔΑ͏ʹͳͬͯΔɻFIDO͔ɻ
What’s new in sign-up and sign-in • SMS Ͱ 2FA͢Δͱ͖ʹɺೖྗΛαϙʔτ͢Δ
• Yahoo!JAPAN ͩͱ re-auth Ͱ ͷࢦೝূͱ͔Λ2FA Ͱ͑ΔΑ͏ʹͳͬͯΔɻFIDO͔ɻ
Speed tooling evolutions: 2019 and beyond • ύϑΥʔϚϯεͷϝτϦΫε͕v6ͰมΘΔɻ Largest Contentful
Paint ͕ॏཁࢹ͞ΕΔɻ͜ Ε·ͰҎ্ʹେ͖ͳཁૉ࡞ͬͪΌͩΊɻ • Lighthouse CI ͷհ
Speed tooling evolutions: 2019 and beyond https://www.suzukikenichi.com/blog/highlights-of-web-performance/
Lighthouse CI URL path͝ͱʹਪҠ͕ݟΒΕΔ PR͕Ϛʔδ͞ΕΔͨͼʹڥσϓϩΠͯ֬͠ೝͯ͠Δ
Lighthouse CI
Lighthouse CI MIDJEFWMIDJ JNBHFNBSLIPCTPOOPEFDISPNF FOWJSPONFOU "11@&/7EFW 5"3(&5EFW -)$*@50,&/YYYYYYY DPNNBOET OQNJOTUBMMH!MIDJDMJ!
c MIDJDPMMFDUDPOpHMJHIUIPVTFSDKT MIDJVQMPBEDPOpHMJHIUIPVTFSDKT MIDJBTTFSUDPOpHMJHIUIPVTFSDKTccFDIP-)$* GBJMFE XIFO FWFOUQVTI CSBODIEFWFMPQ • LHCIͷdockerΛࣗલͰཱ ͯΔͷͪΐͬͱେม • droneͷCIλεΫ ͜Μͳײ͡ˠ • CIͰσϓϩΠޙʹLHCIΛ ୟ͘ɺͱ͍͏ύΠϓϥΠϯ ͳͷͰɺ࿈ଓͰσϓϩΠͬ ͯͷͰ͖ͳ͘ͳͬͨɻ
Adoptive Loading - Improving the user- experience for millions on
low-end devices • ΘΕΔʹΑͬͯεϖοΫʹ͕ࠩ͋ΔͷͰɺεϖοΫ͕ ͍ํʹ߹Θͤͯ࡞Δํ͕͍͍ˠऑ͍ͳΒී௨ɺ͍͍ ͳΒ͘ͳΔ • ͷstatus network ͷ status Ͱ adaptive ʹ ඳը͢Δ ͷΛมߋ͢Δʢڧ͚ΕϦονʹ͢Δ͠ɺऑ͚Εը࣭ ͩͬͨΓػೳΛΔʣ • ͰɺLow ͱ high Ͱ webpack chunk ໊͚ͭͯɺ chunk ͚͠ ͯɺͦΕͧΕʹରͯ͠ෆཁͳίʔυམͱ͞ͳ͍Α͏ʹ͢Δɻ
Adoptive Loading ͷॴײ • ʮ·͔͡Αɻʯ • Ϋι࡞Δͷେมͦ͏͚ͩͲɺ·͋ͬͨΒͦΓΌ͍͍ͷ Θ͔Δ • ϨϯμϦϯά͚ͩͰϢʔβΠϕϯτΛϒϩοΫ͠ͳ͍Α
͏ʹͨ͠ΓɺϑϨʔϜϨʔτΛࣗͰ͍ͬͨ͡ΓͰ͖ ΔͷͰɺ׆͔ͤΕ͍͚͢͝Ͳɺ࣮ࡍͷϓϩμΫτͷݱ Ͱ͜͜·ͰϦονʹରԠͰ͖Δݱͳ͔ͳ͔ͳͦ͞͏
The main thread is overworked & underpaid • UIΛඳը͢ΔҎ֎ͷϩδοΫWorker Λ͓͏
• Worker ʹରͯ͠ૢ࡞͢Δ໊લ͚ͭͯ switch ͢Δͱ͔େม ͔ͩΒ comlinik ͕ศར • Main thread UI thread ͩʂ • ProxxΛࢀߟʹ https://github.com/GoogleChromeLabs/proxx
Next generation web styling • ໊ͷ௨Γ࣍ੈCSSʹ͍ͭͯͷൃද • Prefer theme Ͱ
ςʔϚΧϥʔΛม͑ΕΔ (Dark | light) • Margin-inline-start ͱ͔Ͱ Japanese ͩͬͨΒॎॻ͖ͱ͔Λ ࠶ݱͰ͖ΔΑ͏ʹͳΔ • Filter css Ͱը૾ʹϑΟϧλʔ͔͚ΒΕΔ etc…
Next generation web styling https://qiita.com/yk_irsw/items/c3834b07e34bfecef002 ࢀߟ
PWA and the installable web • PWA ͷݪଇ “Don’t be.
Annoying” • Ϣʔβʔʹརӹ͕ͳ͍ͳΒΒͳ͍ɻ • ຊʹՁΛ͔͍ͬͯΔϢʔβͷͨΊʹ͏ͷ • OYO Ͱ OYO lite ͱͯͬͯ͠͏·͍ͬͯ͘Δɻ • PWAͱΓ͋͑ͣೖΕΕ͍͍ͬͯͷͰͳ͍ɻ • ͖ͪΜͱҙͯ͑͠Αɺͱ͍͏આ໌ʹͳ͍ͬͯͨͷ͕Α͔ͬͨɻख์ ͠ʹೖΕͯྑ͍ͷͰͳ͍ɻ
Bridging the native app • Share API, contacts API, ϑΝΠϧૢ࡞APIͳ
ͲɺωΠςΟϒʹ͍ۙAPI ͕͑ΔΑ͏ʹͳΔ • Project FUGU
̍ऴྃ ͜͜Ͱ12, 3ͳΒྑ͍ϖʔε
Intent to explain: demystifying the Blink shipping process • ৽͍͠ػೳΛChrome
ʹಋೖ༷͠ࡦఆʹ͍ͬͯ͘·Ͱͷ ɻ ·ͣΛௐࠪ͠ɺͦΕʹର͢Δ prototype Λ։ൃ ͢Δɻ experimental ͳ flag Ͱػೳͷग़͚͠ΛՄೳʹͨ͠ ঢ়ଶͰ։ൃऀ͔ΒͷϑΟʔυόοΫΛಘͯ iteratable ʹػೳ Λվળ͢Δɻ ͦͯ͠࠷ऴతʹ ship / unship ΛܾΊΔɻ
HTML isn’t done!
HTML isn’t done! • selectλά͕ݏ͍
HTML isn’t done! https://qiita.com/yk_irsw/items/4659fa0af747ddf1dd72 ࢀߟ
Advancing the web framework ecosystem • Chrome ΛऔΓר͘ WebϑϨʔϜϫʔΫͷɻ
Advancing the web framework ecosystem ͷॴײ • React ͳΒ·ͩ͠ɺ Next.js
+ Chrome ͷ ͕݁ߏଟΊʹ͋ͬͨͷ͕͖͢ɻ • Vue Ұॠग़͖͍͕ͯͯͨɺΓੈքతʹ React Ұڧͱ͍͏ײ͕ͨ͡͠ɻ
Advancing the web framework ecosystem ͷॴײ • next.js ʹରͯ͠ Google
ͷ։ൃऀ͕ͨͪ contribution ͠ ͍ͯΔͱͷ͜ͱɻ ͜͏͍͏Λฉ͘ͱɺ next.js Λ͏ ͷ͕σϑΝΫτʹͳΓͦ͏ͩͳͱײ͟͡ΔΛಘͳ͍ɻ
In which we make loading disappear with and friends •
Portals, Periodic Background Sync, Web bundles ͳͲɺ ৽ͨʹࢼ༻తʹ։ൃ͞Ε͍ͯ Δ Chrome ͷػೳͨͪʹؔ͢Δ༰ɻ
In which we make loading disappear with and friends Portals
؆୯ʹݴͬͯ͠·͑ iframe Ͱදࣔͨ͠ next page ΛγʔϜϨεʹը໘ ભҠՄೳʹ͢Δͷɻ URL γʔϜϨεʹมߋ͞ΕΔͷͰɺ MPA Ͱ SPA ͬΆ͍ UX ΛఏڙՄೳʹͳΔɻ ͨͩ experimental ͳͷͰɺ chrome Ͱ flag Λ true ʹ͠ ͳ͍ͱར༻Ͱ͖ͳ͍ɻ
In which we make loading disappear with and friends https://blog.uskay.io/article/002-hands-on-portals
In which we make loading disappear with and friends Web
bundles ɺWeb page Λ bundle ͯ͠ 1 ͭͷϑΝΠϧͱͯ͠μϯϩʔ υɺ৴ɺల։ՄೳʹͳΔͷɻ Web bundles ɺnetwork ͕མ͍ͪͯͯ bundle ͞ΕͨϑΝΠϧΛԣల։Ͱ৴Ͱ͖Εɺಉ͡ΣϒΞϓϦΛಈ͔͢͜ͱ ͕Ͱ͖Δɻ Signed exchange Λར༻Ͱ͖ΕͦͷϑΝΠϧ͕ਖ਼͍͠৴པ͞Εͨ ͷͰ͋Δͱ chrome ͕อূͯ͘͠ΕΔɻ
How to make your content shine on Google Search •
Google bot ʹؔ͢Δ࠷৽ঢ়گͷɻ
How to make your content shine on Google Search •
100% JS ͷϖʔδͰ indexing ͞Ε͍ͯΔ࣮͕͋Δɻ CSR ͷϖʔδ Ͱʢेʹ͚ΕʣͪΌΜͱΠϯσΫγϯά͞ΕΔͱ͍͏հɻ
How to make your content shine on Google Search •
ϨϯμϦϯά5ඵ͕தԝɻ 90%1ҎʹϨϯμϦϯά͞ΕΔɻ Ұ ํɺϩʔσΟϯά͕ "done" ͷঢ়ଶ͕͍͠ɺͱ͍͏͕͋ͬͨɻ มʹ ଓɾ௨৴͕ଓ͍ͨঢ়ଶʹͳͬͯ͠·͍ͬͯΔͱ͍ͱஅ͞Ε͔Ͷͳ͍ͷͰ ҙͯ͠΄͍͠ͱͷ͜ͱɻ(networkidle0ʹ͢Δ)
࠷ۙͬͯΔ͜ͱ
AMP!!!! • AMP + Next.js + TypeScript + styled-components ։ൃத
• AMP ɹamp-img, amp-story, amp-sidebar, … • PWA(+SW) Ὅ • Renovate bot • Lighthouse CI • Storybook + reg-suitʢVRTʣ
AMP!!!! • AMP + Next.js + TypeScript + styled-components ։ൃத
• AMP ɹamp-img, amp-story, amp-sidebar, … • PWA(+SW) Ὅ • Renovate bot • Lighthouse CI • Storybook + reg-suitʢVRTʣ ϦϦʔεؒۙʂ
·ͱΊ
·ͱΊ • Chrome Dev Summit 2019Ͱฉ͍ͨ༰ΛৼΓ ฦΓհɻ • Webͷ࠷ઌͳͷͰΓ໘ന͍ʢݸਓతʹ Google
I/OΑΓ໘ന͍ͱࢥ͏ʣɻ • Πϯϓοτ͢Δ͚ͩͰͳ͘ɺ͜ΕΒͷใΛੜ ͔ͯ͠Ξτϓοτ͍͖͍ͯͨ͠ɻ