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
420
Other Decks in Programming
See All in Programming
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
500
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
570
GoのGenericsによるslice操作との付き合い方
syumai
3
690
Select API from Kotlin Coroutine
jmatsu
1
190
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
170
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
380
童醫院敏捷轉型的實踐經驗
cclai999
0
200
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
510
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
ニーリーにおけるプロダクトエンジニア
nealle
0
590
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.7k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
For a Future-Friendly Web
brad_frost
179
9.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Speed Design
sergeychernyshev
32
1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Fireside Chat
paigeccino
37
3.5k
Code Reviewing Like a Champion
maltzj
524
40k
Practical Orchestrator
shlominoach
188
11k
A Tale of Four Properties
chriscoyier
160
23k
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ΑΓ໘ന͍ͱࢥ͏ʣɻ • Πϯϓοτ͢Δ͚ͩͰͳ͘ɺ͜ΕΒͷใΛੜ ͔ͯ͠Ξτϓοτ͍͖͍ͯͨ͠ɻ