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
360
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
3k
エンジニアになろう
ka2jun8
0
400
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
0
550
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
55
19k
ML.NETで始める機械学習
ymd65536
0
240
良いコードレビューとは
danimal141
7
2.2k
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
170
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
150
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.2k
GoとPHPのインターフェイスの違い
shimabox
2
210
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
160
SwiftUI Viewの責務分離
elmetal
PRO
2
280
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Side Projects
sachag
452
42k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
How to train your dragon (web standard)
notwaldorf
91
5.9k
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ΑΓ໘ന͍ͱࢥ͏ʣɻ • Πϯϓοτ͢Δ͚ͩͰͳ͘ɺ͜ΕΒͷใΛੜ ͔ͯ͠Ξτϓοτ͍͖͍ͯͨ͠ɻ