Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Chrome チームの推すこれからくる新しい Web API / Upcoming Web A...

nodaguti
December 19, 2018

Chrome チームの推すこれからくる新しい Web API / Upcoming Web APIs advocated by the Chrome team

Frontrend Vol.13 (https://frontrend.connpass.com/event/110449) での発表資料です.
アップロード用に,口頭で説明した内容を補足で追加してあります.

nodaguti

December 19, 2018
Tweet

More Decks by nodaguti

Other Decks in Technology

Transcript

  1. About me DISPNFEFWTVNNJUCSJFpOHTFTTJPO Tadahiro Noguchi / ໺ޱ ௚׮ @nodaguti •

    CyberAgent, Inc. 2018೥৽ଔೖࣾ • AbemaTV ։ൃຊ෦ Web νʔϜॴଐ • ࠷ۙ͸ϞόΠϧ΢Σϒ൛ͷػೳ௥ՃΛߦ͍ͬͯ·͢
  2. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Sessions • Building Modern Web Media Experiences: Picture-in- Picture

    and AV1 • Making Modern Web Content Discoverable for Search • Feature Policy & the Well-Lit Path for Web Development • virtual-scroller: Let there be less (DOM) • From Low Friction to Zero Friction with Web Packaging and Portals • State of Houdini • Building Engaging Immersive Experiences
  3. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Sessions • Building Modern Web Media Experiences: Picture-in- Picture

    and AV1 • Making Modern Web Content Discoverable for Search • Feature Policy & the Well-Lit Path for Web Development • virtual-scroller: Let there be less (DOM) • From Low Friction to Zero Friction with Web Packaging and Portals • State of Houdini • Building Engaging Immersive Experiences
  4. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Picture-in-picture (PiP) • ӈԼͷը૾ͷΑ͏ʹը໘ͷ୺ʹ࠶ੜதͷಈըΛ float ͓͚ͤͯ͞Δٕज़ • Android 8+,

    iOS 10+ (iPad), Chrome 70+ • Chrome 70+ Ͱ JS ͔Β੍ޚͰ͖Δ API Λ౥ࡌ • PiP Ϟʔυ΁ͷ enter / leave • ্هʹؔ͢ΔΠϕϯτ • PiP Ϟʔυͷ
 ΢Οϯυ΢αΠζऔಘ
  5. DISPNFEFWTVNNJUCSJFpOHTFTTJPO AV1 • Open-source, royalty-free ͳ৽͍͠ಈըίʔσοΫ • VP9 ΑΓ΋ 30%

    খ͍͞ϏοτϨʔτͰಉը࣭Λ࣮ݱ • ϑϩϯτΤϯυؔ࿈ͷ࿩୊ͱͯ͠͸: • Media Source Extensions: SourceBuffer.changeType • ࠶ੜதʹಈతʹίϯςφ/ίʔσοΫΛ੾Γସ͑Β ΕΔΑ͏ʹ͢Δ API • ΫϥΠΞϯταΠυͰ AV1 ͷ࠶ੜ͕ݫ͍͠৔߹ ʹ VP9 ʹϑΥʔϧόοΫ͢ΔͳͲͷ੍ޚ͕Ͱ͖Δ
  6. DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ • AbemaTV Ͱ΋༗๬ͳٕज़ͱͯ͠஫໨͍ͯ͠Δ • PiP • PiP ͸

    video ཁૉ͝ͱͷద༻ • DRM ༗ແͷ੾ΓସΘΓͳͲͰετϦʔϜ͕มΘΔ ͱ video ཁૉ͕࠶ੜ੒͞ΕΔɽ͜͏ͨ͠Τοδέʔ ε΁ͷରԠΛߦ͏ඞཁ͕͋Δ • AV1 • ಛʹϚϧνσόΠεͰల։͍ͯ͠Δ৔߹ʹ͸ɼσ ίʔμʔ͕Ͳ͜·Ͱීٴ͢Δ͔ʁ͕ΧΪ
  7. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Sessions • Building Modern Web Media Experiences: Picture-in- Picture

    and AV1 • Making Modern Web Content Discoverable for Search • Feature Policy & the Well-Lit Path for Web Development • virtual-scroller: Let there be less (DOM) • From Low Friction to Zero Friction with Web Packaging and Portals • State of Houdini • Building Engaging Immersive Experiences
  8. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Sessions • Building Modern Web Media Experiences: Picture-in- Picture

    and AV1 • Making Modern Web Content Discoverable for Search • Feature Policy & the Well-Lit Path for Web Development • virtual-scroller: Let there be less (DOM) • From Low Friction to Zero Friction with Web Packaging and Portals • State of Houdini • Building Engaging Immersive Experiences
  9. DISPNFEFWTVNNJUCSJFpOHTFTTJPO • Client-side rendering ͳϖʔδͷ SEO ʹ͍ͭͯ • લఏ1: ݱࡏͷ

    Googlebot ͸ɼJS-heavy ͳϖʔδͷ index ԽΛ࠷େ1िؒ஗Ԇͤ͞Δ • લఏ2: ݱࡏͷ Googlebot ͸ Chrome 41 ૬౰ ෛՙ͕͔͔Δϖʔδ͸ 3FOEFS2VFVFͰ ஗Ԇ͞Εͯ͠·͏
  10. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Workaround: Dynamic Rendering • SPA ͱ SSR ͷதؒ •

    Web αʔό͕ฦͨ͠ SPA Λ Dynamic Renderer Ͱॲཧͯ͠ static HTML ʹม׵͠ɼ Ϋϩʔϥʔʹฦ͢ • Puppeteer, Rendertron ͳͲ͕࢖͑Δ
  11. DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ • Dynamic Rendering • SPA ͷ SEO ରࡦ͸ҎԼͷͲͷखஈΛऔΔ͔ͷબ

    ୒ʹͳΓͦ͏ • SSR ͢Δ • Chrome 41 ޲͚ͷϏϧυΛ࡞ͬͯ഑৴͢Δ • Dynamic Rendering ΛηοτΞοϓΛ͢Δ • ΋͠؆қʹ૊ΈࠐΊΔ full-managed ͳαʔϏε͕ ग़ͯ͘Ε͹ workaround ͱͯ͠࢖͏ͷ͸Αͦ͞͏
  12. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Sessions • Building Modern Web Media Experiences: Picture-in- Picture

    and AV1 • Making Modern Web Content Discoverable for Search • Feature Policy & the Well-Lit Path for Web Development • virtual-scroller: Let there be less (DOM) • From Low Friction to Zero Friction with Web Packaging and Portals • State of Houdini • Building Engaging Immersive Experiences
  13. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Sessions • Building Modern Web Media Experiences: Picture-in- Picture

    and AV1 • Making Modern Web Content Discoverable for Search • Feature Policy & the Well-Lit Path for Web Development • virtual-scroller: Let there be less (DOM) • From Low Friction to Zero Friction with Web Packaging and Portals • State of Houdini • Building Engaging Immersive Experiences
  14. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Reporting API • CSP, FP, Τϥʔ, Ϋϥογϡ, ඇਪ঑ػೳͷ࢖༻ͳͲͱ ͍ͬͨ

    warnings/errors Λ௨஌͢ΔҰݩతͳ࢓૊Έ • ίϯιʔϧ͕ϝοηʔδͰຒ΋Εͯ͠·͍͕ͪͩͬͨ ͷΛղফ͢Δ
  15. DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ • Feature Policy • ศརͦ͏͕ͩɼຊ֨తͳରԠɾ׆༻͸೉ͦ͠͏ • Best practices

    ܥͱ permissions ܥͷೋछྨ͕ࠞ ͍ͬͯ͟Δ͕ɼࠓޙͲ͏͍͏ํ޲ʹͳΔͷ͔ • Best practices: oversized-images, etc. • Permissions: geolocations, fullscreen, etc. • ະରԠͷ৔߹͸ແࢹ͞ΕΔ͚ͩͳͷͰɼͱΓ͋͑ ͣ report-only Ͱ༗ޮʹ͓ͯ͘͠ͷ͸͋Γ
  16. DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ • Reporting API • Reporting API Ͱ౷Ұ͢Δʹ͸ɼϢʔβʔϕʔε ʹ઎ΊΔΧόϨοδ͕ߴ·ͬͯर͑ΔΤϥʔ͸શ

    ͯ͜ͷ API Ͱ handling Ͱ͖ΔΑ͏ʹͳΔඞཁ͕ ͋Δ • ීٴ཰͕ߴ·Βͳ͍ͱ࣮ઓʹ౤ೖ͢Δͷ͸ݫ͠ ͍ʁ
  17. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Sessions • Building Modern Web Media Experiences: Picture-in- Picture

    and AV1 • Making Modern Web Content Discoverable for Search • Feature Policy & the Well-Lit Path for Web Development • virtual-scroller: Let there be less (DOM) • From Low Friction to Zero Friction with Web Packaging and Portals • State of Houdini • Building Engaging Immersive Experiences
  18. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Sessions • Building Modern Web Media Experiences: Picture-in- Picture

    and AV1 • Making Modern Web Content Discoverable for Search • Feature Policy & the Well-Lit Path for Web Development • virtual-scroller: Let there be less (DOM) • From Low Friction to Zero Friction with Web Packaging and Portals • State of Houdini • Building Engaging Immersive Experiences
  19. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Virtual Scroll as a high-level API • Virtual Scroll

    • දࣔྖҬ֎ͷཁૉΛϨϯμ Ϧϯά͠ͳ͍Α͏ʹ͢Δ ʢvirtualisationʣ͜ͱͰύ ϑΥʔϚϯεΛߴΊΔ • ωΠςΟϒΞϓϦ΍ React/ Vue/Angular ͷϑϨʔϜ ϫʔΫͰ͸Α͘࢖ΘΕ͍ͯ Δ
  20. DISPNFEFWTVNNJUCSJFpOHTFTTJPO طଘΞϓϩʔνͷ໰୊఺ͱରࡦ • ໰୊఺ɿӅΕ͍ͯΔ෦෼ʹؔͯ͠ • ϦϯΫΛషΕͳ͍ • ϖʔδ಺ݕࡧ͕Ͱ͖ͳ͍ • SEO

    తʹ΋໰୊͕͋Δ • High-level API ͱͯ͠ϒϥ΢βͷ native ࣮૷Λ௥Ճ͢ Δ͜ͱͰɼ্ه໰୊Λղܾ͢Δ • ύϑΥʔϚϯεʹ༏Ε࣮ͨ૷ΛϑϨʔϜϫʔΫબఆ ͳͲͳ͠ʹ؆୯ʹѻ͑ΔΑ͏ʹͳΔ
  21. DISPNFEFWTVNNJUCSJFpOHTFTTJPO "Layered API" ʹجͮ͘ࡦఆ • ଞϓϥοτϑΥʔϜͷ࣮૷΍ϑϨʔϜϫʔΫ͔ΒϢʔ εέʔεΛूΊɼաෆ଍ͳ͍ API ʹ·ͱΊΔ •

    ଞͷϒϥ΢βϕϯμɼϑϨʔϜϫʔΫ࡞ऀɼ։ൃ ऀ͔ΒώΞϦϯάͨ͠Γ GitHub Ͱٞ࿦ΛਂΊͨ Γͨ͠ • low-level API Ͱ଍Γ͍ͯͳ͍΋ͷ͕͋Ε͹௥Ճ͢Δ • Invisible DOM • ͦͷ··Ͱे෼࢖͑ɼ͔֦ͭு΋Մೳͳ࢓༷Λࡦఆ
  22. DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ • high-level API ͕௥Ճ͞ΕΔ͜ͱ͸ૉ௚ʹخ͍͠ • ن໛͕େ͖͘ͳͬͯ͘Δͱඞਢʹ͍ٕۙज़͕ native ࣮

    ૷͞ΕΔͷ͸େ͖͍ʢlazyload, virtualisation, etc...) • Google ͸ύϑΥʔϚϯεʹྗΛೖΕ͍ͯΔͷͰɼ͜͜ Ͱͷਐาʹ͸ظ଴Ͱ͖ͦ͏ • Layered APIs ϞσϧʹԊͬͯɼ޿͘ҙݟΛืΓͳ͕Βࡦ ఆ͍ͯ͠Δͷʹ҆৺ײ͕͋Δ • ͕͢͞ʹ high-level API ͷࡦఆʹ͸৻ॏʹͳ͍ͬͯΔ໛ ༷
  23. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Sessions • Building Modern Web Media Experiences: Picture-in- Picture

    and AV1 • Making Modern Web Content Discoverable for Search • Feature Policy & the Well-Lit Path for Web Development • virtual-scroller: Let there be less (DOM) • From Low Friction to Zero Friction with Web Packaging and Portals • State of Houdini • Building Engaging Immersive Experiences
  24. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Sessions • Building Modern Web Media Experiences: Picture-in- Picture

    and AV1 • Making Modern Web Content Discoverable for Search • Feature Policy & the Well-Lit Path for Web Development • virtual-scroller: Let there be less (DOM) • From Low Friction to Zero Friction with Web Packaging and Portals • State of Houdini • Building Engaging Immersive Experiences
  25. DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ • Signed Exchange • AMP ରԠαΠτͰ͸ඞਢͷٕज़ͱͳ͍͖ͬͯͦ͏ • Cloudflare

    ͕ AMP Packager ͱ͍͏αʔϏεΛग़͍ͯ͠ ΔΑ͏ͳͷͰɼͦ͏ͨ͠ managed service Λ࢖͏ͷ΋Ұ ͭͷख͔ • Portals • ϩάΠϯϖʔδ, ΩϟϯϖʔϯϖʔδͳͲυϝΠϯΛ෼͚ Δ৔߹ʹ࢖͑ͦ͏ • ڊେͳαΠτʹͯ JS ͷ entry point Λ෼͚ɼmicro frontend Խ͢Δͱ͖ʹ΋࢖͑Δ͔΋
  26. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Sessions • Building Modern Web Media Experiences: Picture-in- Picture

    and AV1 • Making Modern Web Content Discoverable for Search • Feature Policy & the Well-Lit Path for Web Development • virtual-scroller: Let there be less (DOM) • From Low Friction to Zero Friction with Web Packaging and Portals • State of Houdini • Building Engaging Immersive Experiences
  27. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Sessions • Building Modern Web Media Experiences: Picture-in- Picture

    and AV1 • Making Modern Web Content Discoverable for Search • Feature Policy & the Well-Lit Path for Web Development • virtual-scroller: Let there be less (DOM) • From Low Friction to Zero Friction with Web Packaging and Portals • State of Houdini • Building Engaging Immersive Experiences
  28. DISPNFEFWTVNNJUCSJFpOHTFTTJPO What is Houdini? • Style → Layout → Paint

    → Composite ͷ֤ϨϯμϦϯ άϓϩηεʹ hook ͯ͠ॲཧΛߦ͑Δٕज़ • CSS ϓϩύςΟ, animation-timing-function, display value ͳͲΛಠࣗʹఆٛՄೳ • low-level / high-level API ͷ྆ํΛࡦఆத
  29. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Sessions • Building Modern Web Media Experiences: Picture-in- Picture

    and AV1 • Making Modern Web Content Discoverable for Search • Feature Policy & the Well-Lit Path for Web Development • virtual-scroller: Let there be less (DOM) • From Low Friction to Zero Friction with Web Packaging and Portals • State of Houdini • Building Engaging Immersive Experiences
  30. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Sessions • Building Modern Web Media Experiences: Picture-in- Picture

    and AV1 • Making Modern Web Content Discoverable for Search • Feature Policy & the Well-Lit Path for Web Development • virtual-scroller: Let there be less (DOM) • From Low Friction to Zero Friction with Web Packaging and Portals • State of Houdini • Building Engaging Immersive Experiences
  31. DISPNFEFWTVNNJUCSJFpOHTFTTJPO WebVR / WebXR Device API (for VR and AR)

    • Web ͸ install-free Ͱͦͷ৔Ͱ࢖͏͜ͱ͕Ͱ͖Δͷ͕ େ͖ͳར఺ • ಛʹ AR ͸ڭҭ, e-commerce ͳͲ
 ͷ෼໺Ͱ༗༻
  32. DISPNFEFWTVNNJUCSJFpOHTFTTJPO • polyfill Ͱ CardboardVR ΍ݹ͍ WebVR ޲͚ʹಈ͔͢ ͜ͱ͕Մೳ •

    three.js ͱ૊Έ߹Θͤͯͷ։ൃ͕͓͢͢Ί • XRSession.requestHitTest (ࢹઢͱڥք໘ͱͷަ఺Λ ࢉग़Ͱ͖Δ API) ͳͲͱڠௐͤ͞ΒΕΔ • model-viewer ͱ͍͏ Web component ΋։ൃ͍ͯ͠Δ • 3D Programming ʹৄ͘͠ͳͯ͘΋࢖͑Δ
  33. DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ • ࣗ෼ͷपΓͰ͸ XR ≒ Unity engineer ͱ͍͏งғؾͳ ͷͰɼ

    Web ٕज़Ͱ࡞Δҙ͕ٛߴ·Ε͹ීٴͦ͠͏ • install-free, interoperability, طଘαΠτͱͷ༥߹ • install-free ͱ͍͏఺Ͱ͸ e-commerce ͱͷ਌࿨ੑ͸ߴ ͦ͏ • ͋ͱ͸σόΠεͷීٴ࣍ୈʁ
  34. DISPNFEFWTVNNJUCSJFpOHTFTTJPO • ৽͍͠ Web API ͷ঺հʹؔ͢Δηογϣϯͷ಺༰Λ ͬ͟ͱ঺հ • Progressive ʹ࢖͑ͦ͏ͳ΋ͷ

    / ֤ϒϥ΢βͷ࣮૷͕ਐ ·ͳ͍ͱ࢖͑ͳͦ͞͏ͳ΋ͷ • ݕ౼ͷ୺ॹʹͳΕ͹... • R.I.P Edge
 →Chrome νʔϜͷ API ࡦఆྗ͕໰ΘΕΔ࣌୅ʹ