Chrome Dev Summit 2019振り返り

Transcript

1. Chrome Dev Summit 2019ৼΓฦΓ @ka2jun8 PWA Night vol.13 2020/02/19
2. ࣗݾ঺հ ## @ka2jun8 / J / ͔ʹ ### ܦྺͱॴଐ
 - 2014೥4݄ ৽ଔ F ͔Β͸͡·ΔձࣾʢR&Dʣ
 - 2018೥4݄ த్ R ͔Β͸͡·ΔձࣾʢWeb FEʣ ### ΍ͬͯΔ͜ͱ
 - WebαʔϏεͷ৽ن্ཱͪ͛/ϑϧϦϓϨΠε
 - ࠷ۙ͸ AMP Λ࢖ͬͨ։ൃ ### ޷͖ͳ΋ͷ
 - ೫໦ࡔ46 / Dead by Daylight / HUNTER x HUNTER
3. ΞδΣϯμ • CDSͱ͸ • CDSৼΓฦΓ • ࠷ۙ΍ͬͯΔ͜ͱ • ·ͱΊ ϒϩάʹॻ͍ͨ಺༰Λ࿩͚ͩ͢ʜ
4. PWA Night ॳࢀઓ ͓ͯ΍ΘΒ͔ʹ 'JSFGPY
   ։ൃऀͰ8$ͷϝϯόʔͷํͷޙͷൃදͰ਒͑ͯΔʜ
5. PWA Night ͚ͩͲ
6. PWAͷ࿩͸(΄΅)͠ͳ͍ ͝ΊΜͶˑ
7. CDSͱ͸ https://developer.chrome.com/devsummit/faqs/#about
8. CDSͱ͸ https://developer.chrome.com/devsummit/faqs/#about $ISPNF
   %FW
   4VNNJU
   ͸೥ʹҰ౓ͷ։ൃऀ͕ $ISPNFϒϥ΢βʹ͍ͭͰͷ࠷৽ͷπʔϧ΍Ξοϓ σʔτΛֶͿ͜ͱ͕Ͱ͖ΔΧϯϑΝϨϯεͰ͢ɻ
9. ৔ॴ • αϯϑϥϯ
 γεί
10. ೔ఔ • 2019೥11݄11೔, 12೔
11. ೔ఔ • 2019೥11݄11೔, 12೔ ͿͬͪΌ͚ ͋Μ·Γ֮͑ͯͳ͍
12. CDS2019αϚϦ https://developers-jp.googleblog.com/2019/12/chrome-dev-summit-2019.html https://www.youtube.com/playlist?list=PLNYkxOF6rcIDA1uGhqy45bqlul0VcvKMr • ͔ͯ͜ΕݟΕ͹Θ͔ΔΑͬͯ࿩
13. CDSͱ͸ͭ·Γ Google͕ߟ͑ΔWebͷ࠷ઌ ୺ͷٕज़Λൃද͢Δ৔
14. CDS2019ৼΓฦΓ ݸਓతʹؾʹͳͬͨൃදΛ঺հ ײ૝෇͖
15. Keynote • ઌཱͬͯ̎೔ؒͷશମͷαϚϦʔͱ͍͏ײ͡ɻ Chrome ʹ৽͘͠௥Ճ͞ΕΔػೳ΍APIͳͲ͕ ͬ͟ͱ঺հ͞Εͨɻ
16. Keynote
17. Keynote ϥΠϒͰͷSpeed hackathon ͸img Λ data-src ʹ௥Ճ͚ͨͩͩͬͨ͠͠༻ҙͯͨ͠ͱࢥ͏͚Ͳɺͦ Εʹͯ͠΋͍͢͝ͳͱࢥΘͤΔ΋ͷ͕͋ͬͨɻ
18. Protecting users on a thriving web • ϒϥ΢βηΩϡϦςΟؔ࿈ͷτʔΫ
19. Protecting users on a thriving web
20. Protecting users on a thriving web
21. Protecting users on a thriving web ʹର͢Δॴײ • Same Site Cookie ݫ͍͠ؾ࣋ͪ͸Θ͔Δ • ϚʔέςΟϯά෦ॺ͔Β͢ΔͱɺύʔιφϥΠζ͍ͨ͠ͷ΋Θ͔Δ • Θ͔ΔΜ͚ͩͲɺɺɺ • ͔͠͠ɺ΋͏ͦ͏͍͏࣌୅͡Όͳ͍ɻ • ։ൃऀ͕ϓϥΠόγʔݒ೦Λਖ਼͘͠ཧղ͢Δɻ
 Ϛʔέ΍ଞͷ෦ୂͷਓͨͪʹཧղΛͯ͠΋Β͏ɻ • …೉͍͠ΑͶɺΘ͔Δɻ
22. Protecting users on a thriving web ʹର͢Δॴײ https://speakerdeck.com/yosuke_furukawa/zui-xin-falseburauzadebian-warucookiefalsequ-rixi-iyaprivacyfalsekao-efang ࢀߟ
23. What’s new in sign-up and sign-in • SMS Ͱ 2FA͢Δͱ͖ʹɺೖྗΛαϙʔτ͢Δ • Yahoo!JAPAN ͩͱ re-auth Ͱ ୺຤ͷࢦ໲ೝূͱ͔Λ2FA Ͱ࢖͑ΔΑ͏ʹͳͬͯΔɻFIDO͔ɻ
24. What’s new in sign-up and sign-in • SMS Ͱ 2FA͢Δͱ͖ʹɺೖྗΛαϙʔτ͢Δ • Yahoo!JAPAN ͩͱ re-auth Ͱ ୺຤ͷࢦ໲ೝূͱ͔Λ2FA Ͱ࢖͑ΔΑ͏ʹͳͬͯΔɻFIDO͔ɻ
25. Speed tooling evolutions: 2019 and beyond • ύϑΥʔϚϯεͷϝτϦΫε͕v6ͰมΘΔɻ Largest Contentful Paint ͕ॏཁࢹ͞ΕΔɻ͜ Ε·ͰҎ্ʹେ͖ͳཁૉ͸࡞ͬͪΌͩΊɻ • Lighthouse CI ͷ঺հ
26. Speed tooling evolutions: 2019 and beyond https://www.suzukikenichi.com/blog/highlights-of-web-performance/
27. Lighthouse CI URL path͝ͱʹਪҠ͕ݟΒΕΔ PR͕Ϛʔδ͞ΕΔͨͼʹ؀ڥσϓϩΠͯ֬͠ೝͯ͠Δ
28. Lighthouse CI
29. Lighthouse CI
    
    MIDJEFW
    MIDJ
    
    
    
    
    JNBHF
    NBSLIPCTPOOPEFDISPNF
    
    
    
    
    FOWJSPONFOU
    
    
    
    
    
    
    
    "11@&/7EFW
    
    
    
    
    
    
    
    5"3(&5EFW
    
    
    
    
    
    
    
    -)$*@50,&/YYYYYYY
    
    
    
    
    DPNNBOET
    
    
    
    
    
    
    
    OQN
    JOTUBMM
    H
    !MIDJDMJ!
    
    
    
    
    
    
    
    c
    
    
    
    
    
    
    
    
    MIDJ
    DPMMFDU
    DPOpHMJHIUIPVTFSDKT
    
    
    
    
    
    
    
    MIDJ
    VQMPBE
    DPOpHMJHIUIPVTFSDKT
    
    
    
    
    
    
    
    MIDJ
    BTTFSU
    DPOpHMJHIUIPVTFSDKT
    cc
    FDIP
    -)$*
    GBJMFE
    
    
    
    
    XIFO
    
    
    
    
    
    
    FWFOU
    QVTI
    
    
    
    
    
    
    CSBODI
    EFWFMPQ
    • LHCIͷdockerΛࣗલͰཱ ͯΔͷ͸ͪΐͬͱେม • droneͷCIλεΫ͸
 ͜Μͳײ͡ˠ • CIͰσϓϩΠޙʹLHCIΛ ୟ͘ɺͱ͍͏ύΠϓϥΠϯ ͳͷͰɺ࿈ଓͰσϓϩΠͬ ͯͷ͸Ͱ͖ͳ͘ͳͬͨɻ
30. Adoptive Loading - Improving the user- experience for millions on low-end devices • ࢖ΘΕΔ୺຤ʹΑͬͯεϖοΫʹ͕ࠩ͋ΔͷͰɺεϖοΫ͕௿ ͍ํʹ߹Θͤͯ࡞Δํ͕͍͍ˠऑ͍୺຤ͳΒී௨ɺ͍͍୺຤ ͳΒ͸΍͘ͳΔ • ୺຤ͷstatus ΍ network ͷ status Ͱ adaptive ʹ ඳը͢Δ΋ ͷΛมߋ͢Δʢڧ͚Ε͹Ϧονʹ͢Δ͠ɺऑ͚Ε͹௿ը࣭ ͩͬͨΓػೳΛ࡟Δʣ • ͰɺLow ͱ high Ͱ webpack chunk ໊͚ͭͯɺ chunk ෼͚͠ ͯɺͦΕͧΕʹରͯ͠ෆཁͳίʔυ͸མͱ͞ͳ͍Α͏ʹ͢Δɻ
31. Adoptive Loading ͷॴײ • ʮ·͔͡Αɻʯ • Ϋι࡞Δͷେมͦ͏͚ͩͲɺ·͋΍ͬͨΒͦΓΌ͍͍ͷ ͸Θ͔Δ • ϨϯμϦϯά͚ͩͰϢʔβΠϕϯτΛϒϩοΫ͠ͳ͍Α ͏ʹͨ͠ΓɺϑϨʔϜϨʔτΛࣗ෼Ͱ͍ͬͨ͡Γ΋Ͱ͖ ΔͷͰɺ׆͔ͤΕ͹͍͚͢͝Ͳɺ࣮ࡍͷϓϩμΫτͷݱ ৔Ͱ͜͜·ͰϦονʹରԠͰ͖Δݱ৔ͳ͔ͳ͔ͳͦ͞͏
32. The main thread is overworked & underpaid • UIΛඳը͢ΔҎ֎ͷϩδοΫ͸Worker Λ࢖͓͏ • Worker ʹରͯ͠ૢ࡞͢Δ໊લ͚ͭͯ switch ͢Δͱ͔େม ͔ͩΒ comlinik ͕ศར • Main thread ͸ UI thread ͩʂ • ProxxΛࢀߟʹ https://github.com/GoogleChromeLabs/proxx
33. Next generation web styling • ໊ͷ௨Γ࣍ੈ୅CSSʹ͍ͭͯͷൃද • Prefer theme Ͱ ςʔϚΧϥʔΛม͑ΕΔ (Dark | light) • Margin-inline-start ͱ͔Ͱ Japanese ͩͬͨΒॎॻ͖ͱ͔Λ ࠶ݱͰ͖ΔΑ͏ʹͳΔ • Filter css Ͱը૾ʹϑΟϧλʔ͔͚ΒΕΔ etc…
34. Next generation web styling https://qiita.com/yk_irsw/items/c3834b07e34bfecef002 ࢀߟ
35. PWA and the installable web • PWA ͷݪଇ͸ “Don’t be. Annoying” • Ϣʔβʔʹརӹ͕ͳ͍ͳΒ΍Βͳ͍ɻ • ຊ౰ʹՁ஋Λ෼͔͍ͬͯΔϢʔβͷͨΊʹ࢖͏΋ͷ • OYO Ͱ OYO lite ͱͯ͠࢖ͬͯ͏·͍ͬͯ͘Δɻ • PWA͸ͱΓ͋͑ͣೖΕΕ͹͍͍ͬͯ΋ͷͰ͸ͳ͍ɻ • ͖ͪΜͱ஫ҙͯ͠࢖͑Αɺͱ͍͏આ໌ʹͳ͍ͬͯͨͷ͕Α͔ͬͨɻख์ ͠ʹೖΕͯྑ͍΋ͷͰ͸ͳ͍ɻ
36. Bridging the native app • Share API, contacts API, ϑΝΠϧૢ࡞APIͳ ͲɺωΠςΟϒʹ͍ۙAPI ͕࢖͑ΔΑ͏ʹͳΔ • Project FUGU
37. ̍೔໨ऴྃ ͜͜Ͱ12, 3෼ͳΒྑ͍ϖʔε
38. Intent to explain: demystifying the Blink shipping process • ৽͍͠ػೳΛChrome ʹಋೖ͠࢓༷ࡦఆʹ΋͍ͬͯ͘·Ͱͷ ࿩ɻ ·ͣ໰୊఺Λௐࠪ͠ɺͦΕʹର͢Δ prototype Λ։ൃ ͢Δɻ experimental ͳ flag Ͱػೳͷग़͠෼͚ΛՄೳʹͨ͠ ঢ়ଶͰ։ൃऀ͔ΒͷϑΟʔυόοΫΛಘͯ iteratable ʹػೳ Λվળ͢Δɻ ͦͯ͠࠷ऴతʹ ship / unship ΛܾΊΔɻ
39. HTML isn’t done!
40. HTML isn’t done! • selectλά͕ݏ͍
41. HTML isn’t done! https://qiita.com/yk_irsw/items/4659fa0af747ddf1dd72 ࢀߟ
42. Advancing the web framework ecosystem • Chrome ΛऔΓר͘ WebϑϨʔϜϫʔΫͷ࿩ɻ
43. Advancing the web framework ecosystem ͷॴײ • React ͳΒ·ͩ͠΋ɺ Next.js + Chrome ͷ࿩ ͕݁ߏଟΊʹ͋ͬͨͷ͕஫໨͢΂͖఺ɻ • Vue ΋Ұॠग़͖͍͕ͯͯͨɺ΍͸Γੈքతʹ ͸ React Ұڧͱ͍͏ײ͕ͨ͡͠ɻ
44. Advancing the web framework ecosystem ͷॴײ • next.js ʹରͯ͠ Google ͷ։ൃऀ͕ͨͪ contribution ͠ ͍ͯΔͱͷ͜ͱɻ ͜͏͍͏࿩Λฉ͘ͱɺ next.js Λ࢖͏ ͷ͕σϑΝΫτʹͳΓͦ͏ͩͳͱײ͟͡ΔΛಘͳ͍ɻ
45. In which we make loading disappear with and friends • Portals, Periodic Background Sync, Web bundles ͳͲɺ ৽ͨʹࢼ༻తʹ։ൃ͞Ε͍ͯ Δ Chrome ͷػೳͨͪʹؔ͢Δ಺༰ɻ
46. In which we make loading disappear with and friends Portals ͸؆୯ʹݴͬͯ͠·͑͹ iframe Ͱදࣔͨ͠ next page ΛγʔϜϨεʹը໘ ભҠՄೳʹ͢Δ΋ͷɻ URL ΋γʔϜϨεʹมߋ͞ΕΔͷͰɺ MPA Ͱ SPA ͬΆ͍ UX ΛఏڙՄೳʹͳΔɻ ͨͩ experimental ͳͷͰɺ chrome Ͱ flag Λ true ʹ͠ ͳ͍ͱར༻Ͱ͖ͳ͍ɻ
47. In which we make loading disappear with and friends https://blog.uskay.io/article/002-hands-on-portals
48. In which we make loading disappear with and friends Web bundles ͸ɺWeb page Λ bundle ͯ͠ 1 ͭͷϑΝΠϧͱͯ͠μ΢ϯϩʔ υɺ഑৴ɺల։ՄೳʹͳΔ΋ͷɻ Web bundles ͸ɺnetwork ͕མ͍ͪͯͯ΋ bundle ͞ΕͨϑΝΠϧΛԣల։Ͱ഑৴Ͱ͖Ε͹ɺಉ͡΢ΣϒΞϓϦΛಈ͔͢͜ͱ ͕Ͱ͖Δɻ Signed exchange Λར༻Ͱ͖Ε͹ͦͷϑΝΠϧ͕ਖ਼͍͠৴པ͞Εͨ΋ ͷͰ͋Δͱ chrome ͕อূͯ͘͠ΕΔɻ
49. How to make your content shine on Google Search • Google bot ʹؔ͢Δ࠷৽ঢ়گͷ࿩ɻ
50. How to make your content shine on Google Search • 100% JS ͷϖʔδͰ΋ indexing ͞Ε͍ͯΔ࣮੷͕͋Δɻ CSR ͷϖʔδ Ͱ΋ʢे෼ʹ଎͚Ε͹ʣͪΌΜͱΠϯσΫγϯά͞ΕΔͱ͍͏঺հɻ
51. How to make your content shine on Google Search • ϨϯμϦϯά͸5ඵ͕தԝ஋ɻ 90%͸1෼Ҏ಺ʹϨϯμϦϯά͞ΕΔɻ Ұ ํɺϩʔσΟϯά͕ "done" ͷঢ়ଶ͕೉͍͠ɺͱ͍͏࿩͕͋ͬͨɻ มʹ઀ ଓɾ௨৴͕ଓ͍ͨঢ়ଶʹͳͬͯ͠·͍ͬͯΔͱ஗͍ͱ൑அ͞Ε͔Ͷͳ͍ͷͰ ஫ҙͯ͠΄͍͠ͱͷ͜ͱɻ(networkidle0ʹ͢Δ)
52. ࠷ۙ΍ͬͯΔ͜ͱ
53. AMP!!!! • AMP + Next.js + TypeScript + styled-components ։ൃத • AMP
 ɹamp-img, amp-story, amp-sidebar, … • PWA(+SW) Ὅ஫໨ • Renovate bot • Lighthouse CI • Storybook + reg-suitʢVRTʣ
54. AMP!!!! • AMP + Next.js + TypeScript + styled-components ։ൃத • AMP
 ɹamp-img, amp-story, amp-sidebar, … • PWA(+SW) Ὅ஫໨ • Renovate bot • Lighthouse CI • Storybook + reg-suitʢVRTʣ ϦϦʔεؒۙʂ
55. ·ͱΊ
56. ·ͱΊ • Chrome Dev Summit 2019Ͱฉ͍ͨ಺༰ΛৼΓ ฦΓ঺հɻ • Webͷ࠷ઌ୺ͳͷͰ΍͸Γ໘ന͍ʢݸਓతʹ͸ Google I/OΑΓ໘ന͍ͱࢥ͏ʣɻ • Πϯϓοτ͢Δ͚ͩͰͳ͘ɺ͜ΕΒͷ৘ใΛੜ ͔ͯ͠Ξ΢τϓοτ͍͖͍ͯͨ͠ɻ