Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Chrome Dev Summit 2019振り返り
Junya
February 19, 2020
Programming
0
260
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
1.7k
SEO のためにエンジニアができること
ka2jun8
2
1k
制約と誓約
ka2jun8
6
2.4k
エンジニアになろう
ka2jun8
0
270
Other Decks in Programming
See All in Programming
脱オブジェクト指向講座(5分LT資料)
kishida
8
11k
Architectural practices for greater scalability and innovation
otaviojava
0
140
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
4
670
UI State Modeling 어떤게 좋을까?
laco2951
1
250
Licences open source : entre guerre de clochers et radicalité
pylapp
2
380
atama plusがプロダクトの品質を大事にする上で 守ってきたこと、変えてきたこと
atamaplus
0
100
Introducing Kotlin Multiplatform in an existing project | Kotlin Dev Day Amsterdam
prof18
0
310
ソフトウェアテストなんて他人事! だと思っていた私が始めた小さな取り組み
izumii19
0
470
You may not need JavaScript
simas
0
340
モバイルファーストデザインの爆速実装を考える
tanabee8
0
180
アプリのログをチーム外で活用してもらうためにやったこと
shotakashihara
0
200
読みやすいコードを書こう
yutorin
0
440
Featured
See All Featured
What's new in Ruby 2.0
geeforr
336
30k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
21
15k
Building a Scalable Design System with Sketch
lauravandoore
447
30k
How to name files
jennybc
39
59k
Navigating Team Friction
lara
175
11k
Designing for humans not robots
tammielis
241
23k
The Cult of Friendly URLs
andyhume
68
4.7k
Code Reviewing Like a Champion
maltzj
506
37k
Bash Introduction
62gerente
596
210k
Atom: Resistance is Futile
akmur
255
20k
It's Worth the Effort
3n
172
25k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
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ΑΓ໘ന͍ͱࢥ͏ʣɻ • Πϯϓοτ͢Δ͚ͩͰͳ͘ɺ͜ΕΒͷใΛੜ ͔ͯ͠Ξτϓοτ͍͖͍ͯͨ͠ɻ