Save 37% off PRO during our Black Friday Sale! »

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

8f77b55e0b7f5a2a51199b9e1578a88f?s=47 nodaguti
December 19, 2018

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

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

8f77b55e0b7f5a2a51199b9e1578a88f?s=128

nodaguti

December 19, 2018
Tweet

Transcript

  1. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Frontrend Vol.13 on Dec 19th, 2018 @nodaguti Chrome νʔϜͷਪ͢

    ͜Ε͔Β͘Δ৽͍͠ Web API
  2. About me DISPNFEFWTVNNJUCSJFpOHTFTTJPO Tadahiro Noguchi / ໺ޱ ௚׮ @nodaguti •

    CyberAgent, Inc. 2018೥৽ଔೖࣾ • AbemaTV ։ൃຊ෦ Web νʔϜॴଐ • ࠷ۙ͸ϞόΠϧ΢Σϒ൛ͷػೳ௥ՃΛߦ͍ͬͯ·͢
  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 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
  5. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Picture-in-picture (PiP) • ӈԼͷը૾ͷΑ͏ʹը໘ͷ୺ʹ࠶ੜதͷಈըΛ float ͓͚ͤͯ͞Δٕज़ • Android 8+,

    iOS 10+ (iPad), Chrome 70+ • Chrome 70+ Ͱ JS ͔Β੍ޚͰ͖Δ API Λ౥ࡌ • PiP Ϟʔυ΁ͷ enter / leave • ্هʹؔ͢ΔΠϕϯτ • PiP Ϟʔυͷ
 ΢Οϯυ΢αΠζऔಘ
  6. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Media Capture and Streams API ͱͷ૊Έ߹Θͤ ΢ΣϒΧϝϥ͔Β ͷө૾Λ PiP

    ͰදࣔͰ͖Δ
  7. DISPNFEFWTVNNJUCSJFpOHTFTTJPO AV1 • Open-source, royalty-free ͳ৽͍͠ಈըίʔσοΫ • VP9 ΑΓ΋ 30%

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

    video ཁૉ͝ͱͷద༻ • DRM ༗ແͷ੾ΓସΘΓͳͲͰετϦʔϜ͕มΘΔ ͱ video ཁૉ͕࠶ੜ੒͞ΕΔɽ͜͏ͨ͠Τοδέʔ ε΁ͷରԠΛߦ͏ඞཁ͕͋Δ • AV1 • ಛʹϚϧνσόΠεͰల։͍ͯ͠Δ৔߹ʹ͸ɼσ ίʔμʔ͕Ͳ͜·Ͱීٴ͢Δ͔ʁ͕ΧΪ
  9. 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
  10. 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
  11. DISPNFEFWTVNNJUCSJFpOHTFTTJPO • Client-side rendering ͳϖʔδͷ SEO ʹ͍ͭͯ • લఏ1: ݱࡏͷ

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

    Web αʔό͕ฦͨ͠ SPA Λ Dynamic Renderer Ͱॲཧͯ͠ static HTML ʹม׵͠ɼ Ϋϩʔϥʔʹฦ͢ • Puppeteer, Rendertron ͳͲ͕࢖͑Δ
  13. DISPNFEFWTVNNJUCSJFpOHTFTTJPO • Google Mobile-Friendly Test • JS ͷΤϥʔͳͲΛݟΒΕΔΑ͏ʹ Google Search

    Console ͷΞοϓσʔτ
  14. DISPNFEFWTVNNJUCSJFpOHTFTTJPO • Rich Results Test • ίʔυΛೖྗͯͦ͠ͷ৔ͰςετͰ͖ΔΑ͏ʹ Google Search Console

    ͷΞοϓσʔτ
  15. DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ • Dynamic Rendering • SPA ͷ SEO ରࡦ͸ҎԼͷͲͷखஈΛऔΔ͔ͷબ

    ୒ʹͳΓͦ͏ • SSR ͢Δ • Chrome 41 ޲͚ͷϏϧυΛ࡞ͬͯ഑৴͢Δ • Dynamic Rendering ΛηοτΞοϓΛ͢Δ • ΋͠؆қʹ૊ΈࠐΊΔ full-managed ͳαʔϏε͕ ग़ͯ͘Ε͹ workaround ͱͯ͠࢖͏ͷ͸Αͦ͞͏
  16. 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
  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 Feature Policy ΢ΣϒϖʔδΛ࡞Δࡍͷ best practices ʹԊ͍ͬͯΔ ͔ɼCSP ͱಉ͡Α͏ͳܗͰ validate

    Ͱ͖Δ࢓૊Έ
  19. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Feature Policy ΢ΣϒϖʔδΛ࡞Δࡍͷ best practices ʹԊ͍ͬͯΔ ͔ɼCSP ͱಉ͡Α͏ͳܗͰ validate

    Ͱ͖Δ࢓૊Έ
  20. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Reporting API • CSP, FP, Τϥʔ, Ϋϥογϡ, ඇਪ঑ػೳͷ࢖༻ͳͲͱ ͍ͬͨ

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

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

    ͯ͜ͷ API Ͱ handling Ͱ͖ΔΑ͏ʹͳΔඞཁ͕ ͋Δ • ීٴ཰͕ߴ·Βͳ͍ͱ࣮ઓʹ౤ೖ͢Δͷ͸ݫ͠ ͍ʁ
  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 Virtual Scroll as a high-level API • Virtual Scroll

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

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

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

    ૷͞ΕΔͷ͸େ͖͍ʢlazyload, virtualisation, etc...) • Google ͸ύϑΥʔϚϯεʹྗΛೖΕ͍ͯΔͷͰɼ͜͜ Ͱͷਐาʹ͸ظ଴Ͱ͖ͦ͏ • Layered APIs ϞσϧʹԊͬͯɼ޿͘ҙݟΛืΓͳ͕Βࡦ ఆ͍ͯ͠Δͷʹ҆৺ײ͕͋Δ • ͕͢͞ʹ 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 Web Packaging Signed Exchanges & Bundled Exchanges

  32. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Web Packaging Signed Exchanges & Bundled Exchanges w63-͕഑৴ݩ PSJHJO

    ͷυϝΠϯʹͳΔ w".1CBS͕ඇදࣔʹͳΔ
  33. DISPNFEFWTVNNJUCSJFpOHTFTTJPO

  34. DISPNFEFWTVNNJUCSJFpOHTFTTJPO w".1͸(PPHMFͷαʔό͔Β഑৴͞ΕΔͨΊɼϒϥ΢β ͸PSJHJOͷ৘ใΛ͔֬ΊΔज़͕ͳ͘ɼΞυϨεόʔʹ (PPHMFͷυϝΠϯΛදࣔͤ͟ΔΛಘͳ͍ wPSJHJOͷ৘ใΛॺ໊Ͱ༩͑Δ͜ͱͰɼϒϥ΢β͸PSJHJO ͷυϝΠϯΛΞυϨεόʔʹTFDVSFʹදࣔ͢Δ͜ͱ͕Մ ೳʹͳΔ

  35. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Portals

  36. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Portals wΫϩευϝΠϯͷભҠͰ͋ͬͯ΋ɼ41"ͷΑ͏ʹ׈Β͔ ͳϖʔδભҠΛՄೳʹ͢Δٕज़ wJGSBNFͱಉ͡Α͏ʹQPSUBMΛຒΊࠐΉ͜ͱͰ࢖༻ Ͱ͖Δ

  37. DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ • Signed Exchange • AMP ରԠαΠτͰ͸ඞਢͷٕज़ͱͳ͍͖ͬͯͦ͏ • Cloudflare

    ͕ AMP Packager ͱ͍͏αʔϏεΛग़͍ͯ͠ ΔΑ͏ͳͷͰɼͦ͏ͨ͠ managed service Λ࢖͏ͷ΋Ұ ͭͷख͔ • Portals • ϩάΠϯϖʔδ, ΩϟϯϖʔϯϖʔδͳͲυϝΠϯΛ෼͚ Δ৔߹ʹ࢖͑ͦ͏ • ڊେͳαΠτʹͯ JS ͷ entry point Λ෼͚ɼmicro frontend Խ͢Δͱ͖ʹ΋࢖͑Δ͔΋
  38. 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
  39. 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
  40. DISPNFEFWTVNNJUCSJFpOHTFTTJPO What is Houdini? • Style → Layout → Paint

    → Composite ͷ֤ϨϯμϦϯ άϓϩηεʹ hook ͯ͠ॲཧΛߦ͑Δٕज़ • CSS ϓϩύςΟ, animation-timing-function, display value ͳͲΛಠࣗʹఆٛՄೳ • low-level / high-level API ͷ྆ํΛࡦఆத
  41. DISPNFEFWTVNNJUCSJFpOHTFTTJPO ར఺ • Auto-repaint • Auto-sized • Off-the-main-thread • No

    DOM overhead
  42. DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ

  43. DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ • ࣮૷ঢ়گ͸ݫ͍͠ • polyfill ΍ϑϨʔϜϫʔΫք۾Ͱ͸༗༻ͳٕज़ʹͳΔͷ Ͱ͸ͳ͍͔ • ಛʹैདྷෆՄೳͩͬͨ

    CSS ͷ polyfill Λ࡞ΕΔΑ͏ ʹͳΔ • ࣮຿ͰͷϢʔεέʔε͕͋Δ͔Ͳ͏͔͸...
  44. 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
  45. 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
  46. DISPNFEFWTVNNJUCSJFpOHTFTTJPO WebVR / WebXR Device API (for VR and AR)

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

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

    Web ٕज़Ͱ࡞Δҙ͕ٛߴ·Ε͹ීٴͦ͠͏ • install-free, interoperability, طଘαΠτͱͷ༥߹ • install-free ͱ͍͏఺Ͱ͸ e-commerce ͱͷ਌࿨ੑ͸ߴ ͦ͏ • ͋ͱ͸σόΠεͷීٴ࣍ୈʁ
  49. DISPNFEFWTVNNJUCSJFpOHTFTTJPO Wrapping Up

  50. DISPNFEFWTVNNJUCSJFpOHTFTTJPO • ৽͍͠ Web API ͷ঺հʹؔ͢Δηογϣϯͷ಺༰Λ ͬ͟ͱ঺հ • Progressive ʹ࢖͑ͦ͏ͳ΋ͷ

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