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
3k
SEO のためにエンジニアができること
ka2jun8
2
1.3k
制約と誓約
ka2jun8
6
3.1k
エンジニアになろう
ka2jun8
0
430
Other Decks in Programming
See All in Programming
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
8
3.1k
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
560
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
CSC305 Summer Lecture 04
javiergs
PRO
1
100
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
State of CSS 2025
benjaminkott
1
120
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
200
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
460
Constant integer division faster than compiler-generated code
herumi
2
690
AIエージェント開発、DevOps and LLMOps
ymd65536
1
340
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
960
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Unsuck your backbone
ammeep
671
58k
RailsConf 2023
tenderlove
30
1.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Building an army of robots
kneath
306
46k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Navigating Team Friction
lara
189
15k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
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ΑΓ໘ന͍ͱࢥ͏ʣɻ • Πϯϓοτ͢Δ͚ͩͰͳ͘ɺ͜ΕΒͷใΛੜ ͔ͯ͠Ξτϓοτ͍͖͍ͯͨ͠ɻ