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

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

Transcript

1. DISPNF
   EFW
   TVNNJU
   
   CSJFpOH
   TFTTJPO Frontrend Vol.13 on Dec 19th, 2018 @nodaguti Chrome νʔϜͷਪ͢ ͜Ε͔Β͘Δ৽͍͠ Web API
2. About me DISPNF
   EFW
   TVNNJU
   
   CSJFpOH
   TFTTJPO Tadahiro Noguchi / ໺ޱ ௚׮ @nodaguti • CyberAgent, Inc. 2018೥৽ଔೖࣾ • AbemaTV ։ൃຊ෦ Web νʔϜॴଐ • ࠷ۙ͸ϞόΠϧ΢Σϒ൛ͷػೳ௥ՃΛߦ͍ͬͯ·͢
3. DISPNF
   EFW
   TVNNJU
   
   CSJFpOH
   TFTTJPO 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. DISPNF
   EFW
   TVNNJU
   
   CSJFpOH
   TFTTJPO 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. DISPNF
   EFW
   TVNNJU
   
   CSJFpOH
   TFTTJPO Picture-in-picture (PiP) • ӈԼͷը૾ͷΑ͏ʹը໘ͷ୺ʹ࠶ੜதͷಈըΛ float ͓͚ͤͯ͞Δٕज़ • Android 8+, iOS 10+ (iPad), Chrome 70+ • Chrome 70+ Ͱ JS ͔Β੍ޚͰ͖Δ API Λ౥ࡌ • PiP Ϟʔυ΁ͷ enter / leave • ্هʹؔ͢ΔΠϕϯτ • PiP Ϟʔυͷ
 ΢Οϯυ΢αΠζऔಘ
6. DISPNF
   EFW
   TVNNJU
   
   CSJFpOH
   TFTTJPO Media Capture and Streams API ͱͷ૊Έ߹Θͤ ΢ΣϒΧϝϥ͔Β ͷө૾Λ PiP ͰදࣔͰ͖Δ
7. DISPNF
   EFW
   TVNNJU
   
   CSJFpOH
   TFTTJPO AV1 • Open-source, royalty-free ͳ৽͍͠ಈըίʔσοΫ • VP9 ΑΓ΋ 30% খ͍͞ϏοτϨʔτͰಉը࣭Λ࣮ݱ • ϑϩϯτΤϯυؔ࿈ͷ࿩୊ͱͯ͠͸: • Media Source Extensions: SourceBuffer.changeType • ࠶ੜதʹಈతʹίϯςφ/ίʔσοΫΛ੾Γସ͑Β ΕΔΑ͏ʹ͢Δ API • ΫϥΠΞϯταΠυͰ AV1 ͷ࠶ੜ͕ݫ͍͠৔߹ ʹ VP9 ʹϑΥʔϧόοΫ͢ΔͳͲͷ੍ޚ͕Ͱ͖Δ
8. DISPNF
   EFW
   TVNNJU
   
   CSJFpOH
   TFTTJPO ॴײ • AbemaTV Ͱ΋༗๬ͳٕज़ͱͯ͠஫໨͍ͯ͠Δ • PiP • PiP ͸ video ཁૉ͝ͱͷద༻ • DRM ༗ແͷ੾ΓସΘΓͳͲͰετϦʔϜ͕มΘΔ ͱ video ཁૉ͕࠶ੜ੒͞ΕΔɽ͜͏ͨ͠Τοδέʔ ε΁ͷରԠΛߦ͏ඞཁ͕͋Δ • AV1 • ಛʹϚϧνσόΠεͰల։͍ͯ͠Δ৔߹ʹ͸ɼσ ίʔμʔ͕Ͳ͜·Ͱීٴ͢Δ͔ʁ͕ΧΪ
9. DISPNF
   EFW
   TVNNJU
   
   CSJFpOH
   TFTTJPO 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. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO 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. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO • Client-side rendering ͳϖʔδͷ SEO ʹ͍ͭͯ • લఏ1: ݱࡏͷ Googlebot ͸ɼJS-heavy ͳϖʔδͷ index ԽΛ࠷େ1िؒ஗Ԇͤ͞Δ • લఏ2: ݱࡏͷ Googlebot ͸ Chrome 41 ૬౰ ෛՙ͕͔͔Δϖʔδ͸
    3FOEFS
    2VFVF
    Ͱ
    ஗Ԇ͞Εͯ͠·͏
12. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO Workaround: Dynamic Rendering • SPA ͱ SSR ͷதؒ • Web αʔό͕ฦͨ͠ SPA Λ Dynamic Renderer Ͱॲཧͯ͠ static HTML ʹม׵͠ɼ Ϋϩʔϥʔʹฦ͢ • Puppeteer, Rendertron ͳͲ͕࢖͑Δ
13. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO • Google Mobile-Friendly Test • JS ͷΤϥʔͳͲΛݟΒΕΔΑ͏ʹ Google Search Console ͷΞοϓσʔτ
14. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO • Rich Results Test • ίʔυΛೖྗͯͦ͠ͷ৔ͰςετͰ͖ΔΑ͏ʹ Google Search Console ͷΞοϓσʔτ
15. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO ॴײ • Dynamic Rendering • SPA ͷ SEO ରࡦ͸ҎԼͷͲͷखஈΛऔΔ͔ͷબ ୒ʹͳΓͦ͏ • SSR ͢Δ • Chrome 41 ޲͚ͷϏϧυΛ࡞ͬͯ഑৴͢Δ • Dynamic Rendering ΛηοτΞοϓΛ͢Δ • ΋͠؆қʹ૊ΈࠐΊΔ full-managed ͳαʔϏε͕ ग़ͯ͘Ε͹ workaround ͱͯ͠࢖͏ͷ͸Αͦ͞͏
16. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO 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. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO 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. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO Feature Policy ΢ΣϒϖʔδΛ࡞Δࡍͷ best practices ʹԊ͍ͬͯΔ ͔ɼCSP ͱಉ͡Α͏ͳܗͰ validate Ͱ͖Δ࢓૊Έ
19. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO Feature Policy ΢ΣϒϖʔδΛ࡞Δࡍͷ best practices ʹԊ͍ͬͯΔ ͔ɼCSP ͱಉ͡Α͏ͳܗͰ validate Ͱ͖Δ࢓૊Έ
20. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO Reporting API • CSP, FP, Τϥʔ, Ϋϥογϡ, ඇਪ঑ػೳͷ࢖༻ͳͲͱ ͍ͬͨ warnings/errors Λ௨஌͢ΔҰݩతͳ࢓૊Έ • ίϯιʔϧ͕ϝοηʔδͰຒ΋Εͯ͠·͍͕ͪͩͬͨ ͷΛղফ͢Δ
21. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO ॴײ • Feature Policy • ศརͦ͏͕ͩɼຊ֨తͳରԠɾ׆༻͸೉ͦ͠͏ • Best practices ܥͱ permissions ܥͷೋछྨ͕ࠞ ͍ͬͯ͟Δ͕ɼࠓޙͲ͏͍͏ํ޲ʹͳΔͷ͔ • Best practices: oversized-images, etc. • Permissions: geolocations, fullscreen, etc. • ະରԠͷ৔߹͸ແࢹ͞ΕΔ͚ͩͳͷͰɼͱΓ͋͑ ͣ report-only Ͱ༗ޮʹ͓ͯ͘͠ͷ͸͋Γ
22. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO ॴײ • Reporting API • Reporting API Ͱ౷Ұ͢Δʹ͸ɼϢʔβʔϕʔε ʹ઎ΊΔΧόϨοδ͕ߴ·ͬͯर͑ΔΤϥʔ͸શ ͯ͜ͷ API Ͱ handling Ͱ͖ΔΑ͏ʹͳΔඞཁ͕ ͋Δ • ීٴ཰͕ߴ·Βͳ͍ͱ࣮ઓʹ౤ೖ͢Δͷ͸ݫ͠ ͍ʁ
23. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO 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. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO 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. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO Virtual Scroll as a high-level API • Virtual Scroll • දࣔྖҬ֎ͷཁૉΛϨϯμ Ϧϯά͠ͳ͍Α͏ʹ͢Δ ʢvirtualisationʣ͜ͱͰύ ϑΥʔϚϯεΛߴΊΔ • ωΠςΟϒΞϓϦ΍ React/ Vue/Angular ͷϑϨʔϜ ϫʔΫͰ͸Α͘࢖ΘΕ͍ͯ Δ
26. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO طଘΞϓϩʔνͷ໰୊఺ͱରࡦ • ໰୊఺ɿӅΕ͍ͯΔ෦෼ʹؔͯ͠ • ϦϯΫΛషΕͳ͍ • ϖʔδ಺ݕࡧ͕Ͱ͖ͳ͍ • SEO తʹ΋໰୊͕͋Δ • High-level API ͱͯ͠ϒϥ΢βͷ native ࣮૷Λ௥Ճ͢ Δ͜ͱͰɼ্ه໰୊Λղܾ͢Δ • ύϑΥʔϚϯεʹ༏Ε࣮ͨ૷ΛϑϨʔϜϫʔΫબఆ ͳͲͳ͠ʹ؆୯ʹѻ͑ΔΑ͏ʹͳΔ
27. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO "Layered API" ʹجͮ͘ࡦఆ • ଞϓϥοτϑΥʔϜͷ࣮૷΍ϑϨʔϜϫʔΫ͔ΒϢʔ εέʔεΛूΊɼաෆ଍ͳ͍ API ʹ·ͱΊΔ • ଞͷϒϥ΢βϕϯμɼϑϨʔϜϫʔΫ࡞ऀɼ։ൃ ऀ͔ΒώΞϦϯάͨ͠Γ GitHub Ͱٞ࿦ΛਂΊͨ Γͨ͠ • low-level API Ͱ଍Γ͍ͯͳ͍΋ͷ͕͋Ε͹௥Ճ͢Δ • Invisible DOM • ͦͷ··Ͱे෼࢖͑ɼ͔֦ͭு΋Մೳͳ࢓༷Λࡦఆ
28. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO ॴײ • high-level API ͕௥Ճ͞ΕΔ͜ͱ͸ૉ௚ʹخ͍͠ • ن໛͕େ͖͘ͳͬͯ͘Δͱඞਢʹ͍ٕۙज़͕ native ࣮ ૷͞ΕΔͷ͸େ͖͍ʢlazyload, virtualisation, etc...) • Google ͸ύϑΥʔϚϯεʹྗΛೖΕ͍ͯΔͷͰɼ͜͜ Ͱͷਐาʹ͸ظ଴Ͱ͖ͦ͏ • Layered APIs ϞσϧʹԊͬͯɼ޿͘ҙݟΛืΓͳ͕Βࡦ ఆ͍ͯ͠Δͷʹ҆৺ײ͕͋Δ • ͕͢͞ʹ high-level API ͷࡦఆʹ͸৻ॏʹͳ͍ͬͯΔ໛ ༷
29. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO 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. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO 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. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO Web Packaging Signed Exchanges & Bundled Exchanges
32. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO Web Packaging Signed Exchanges & Bundled Exchanges w63-
    ͕഑৴ݩ
    PSJHJO
    ͷυϝΠϯʹͳΔ
    w".1
    CBS
    ͕ඇදࣔʹͳΔ
33. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO
34. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO w".1
    ͸
    (PPHMF
    ͷαʔό͔Β഑৴͞ΕΔͨΊɼϒϥ΢β ͸
    PSJHJO
    ͷ৘ใΛ͔֬ΊΔज़͕ͳ͘ɼΞυϨεόʔʹ
    (PPHMF
    ͷυϝΠϯΛදࣔͤ͟ΔΛಘͳ͍
    wPSJHJO
    ͷ৘ใΛॺ໊Ͱ༩͑Δ͜ͱͰɼϒϥ΢β͸
    PSJHJO
    ͷυϝΠϯΛΞυϨεόʔʹ
    TFDVSF
    ʹදࣔ͢Δ͜ͱ͕Մ ೳʹͳΔ
35. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO Portals
36. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO Portals wΫϩευϝΠϯͷભҠͰ͋ͬͯ΋ɼ41"
    ͷΑ͏ʹ׈Β͔ ͳϖʔδભҠΛՄೳʹ͢Δٕज़
    wJGSBNF
    ͱಉ͡Α͏ʹ
    QPSUBM
    ΛຒΊࠐΉ͜ͱͰ࢖༻ Ͱ͖Δ
37. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO ॴײ • Signed Exchange • AMP ରԠαΠτͰ͸ඞਢͷٕज़ͱͳ͍͖ͬͯͦ͏ • Cloudflare ͕ AMP Packager ͱ͍͏αʔϏεΛग़͍ͯ͠ ΔΑ͏ͳͷͰɼͦ͏ͨ͠ managed service Λ࢖͏ͷ΋Ұ ͭͷख͔ • Portals • ϩάΠϯϖʔδ, ΩϟϯϖʔϯϖʔδͳͲυϝΠϯΛ෼͚ Δ৔߹ʹ࢖͑ͦ͏ • ڊେͳαΠτʹͯ JS ͷ entry point Λ෼͚ɼmicro frontend Խ͢Δͱ͖ʹ΋࢖͑Δ͔΋
38. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO 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. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO 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. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO What is Houdini? • Style → Layout → Paint → Composite ͷ֤ϨϯμϦϯ άϓϩηεʹ hook ͯ͠ॲཧΛߦ͑Δٕज़ • CSS ϓϩύςΟ, animation-timing-function, display value ͳͲΛಠࣗʹఆٛՄೳ • low-level / high-level API ͷ྆ํΛࡦఆத
41. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO ར఺ • Auto-repaint • Auto-sized • Off-the-main-thread • No DOM overhead
42. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO ॴײ
43. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO ॴײ • ࣮૷ঢ়گ͸ݫ͍͠ • polyfill ΍ϑϨʔϜϫʔΫք۾Ͱ͸༗༻ͳٕज़ʹͳΔͷ Ͱ͸ͳ͍͔ • ಛʹैདྷෆՄೳͩͬͨ CSS ͷ polyfill Λ࡞ΕΔΑ͏ ʹͳΔ • ࣮຿ͰͷϢʔεέʔε͕͋Δ͔Ͳ͏͔͸...
44. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO 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. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO 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. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO WebVR / WebXR Device API (for VR and AR) • Web ͸ install-free Ͱͦͷ৔Ͱ࢖͏͜ͱ͕Ͱ͖Δͷ͕ େ͖ͳར఺ • ಛʹ AR ͸ڭҭ, e-commerce ͳͲ
 ͷ෼໺Ͱ༗༻
47. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO • polyfill Ͱ CardboardVR ΍ݹ͍ WebVR ޲͚ʹಈ͔͢ ͜ͱ͕Մೳ • three.js ͱ૊Έ߹Θͤͯͷ։ൃ͕͓͢͢Ί • XRSession.requestHitTest (ࢹઢͱڥք໘ͱͷަ఺Λ ࢉग़Ͱ͖Δ API) ͳͲͱڠௐͤ͞ΒΕΔ • model-viewer ͱ͍͏ Web component ΋։ൃ͍ͯ͠Δ • 3D Programming ʹৄ͘͠ͳͯ͘΋࢖͑Δ
48. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO ॴײ • ࣗ෼ͷपΓͰ͸ XR ≒ Unity engineer ͱ͍͏งғؾͳ ͷͰɼ Web ٕज़Ͱ࡞Δҙ͕ٛߴ·Ε͹ීٴͦ͠͏ • install-free, interoperability, طଘαΠτͱͷ༥߹ • install-free ͱ͍͏఺Ͱ͸ e-commerce ͱͷ਌࿨ੑ͸ߴ ͦ͏ • ͋ͱ͸σόΠεͷීٴ࣍ୈʁ
49. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO Wrapping Up
50. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO • ৽͍͠ Web API ͷ঺հʹؔ͢Δηογϣϯͷ಺༰Λ ͬ͟ͱ঺հ • Progressive ʹ࢖͑ͦ͏ͳ΋ͷ / ֤ϒϥ΢βͷ࣮૷͕ਐ ·ͳ͍ͱ࢖͑ͳͦ͞͏ͳ΋ͷ • ݕ౼ͷ୺ॹʹͳΕ͹... • R.I.P Edge
 →Chrome νʔϜͷ API ࡦఆྗ͕໰ΘΕΔ࣌୅ʹ
51. DISPNF
    EFW
    TVNNJU
    
    CSJFpOH
    TFTTJPO Thank you!