Tweet
Tweet

Slide 1

Slide 1 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO Frontrend Vol.13 on Dec 19th, 2018 @nodaguti Chrome νʔϜͷਪ͢ ͜Ε͔Β͘Δ৽͍͠ Web API

Slide 2

Slide 2 text

About me DISPNFEFWTVNNJUCSJFpOHTFTTJPO Tadahiro Noguchi / ໺ޱ ௚׮ @nodaguti • CyberAgent, Inc. 2018೥৽ଔೖࣾ • AbemaTV ։ൃຊ෦ Web νʔϜॴଐ • ࠷ۙ͸ϞόΠϧ΢Σϒ൛ͷػೳ௥ՃΛߦ͍ͬͯ·͢

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO Picture-in-picture (PiP) • ӈԼͷը૾ͷΑ͏ʹը໘ͷ୺ʹ࠶ੜதͷಈըΛ float ͓͚ͤͯ͞Δٕज़ • Android 8+, iOS 10+ (iPad), Chrome 70+ • Chrome 70+ Ͱ JS ͔Β੍ޚͰ͖Δ API Λ౥ࡌ • PiP Ϟʔυ΁ͷ enter / leave • ্هʹؔ͢ΔΠϕϯτ • PiP Ϟʔυͷ
 ΢Οϯυ΢αΠζऔಘ

Slide 6

Slide 6 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO Media Capture and Streams API ͱͷ૊Έ߹Θͤ ΢ΣϒΧϝϥ͔Β ͷө૾Λ PiP ͰදࣔͰ͖Δ

Slide 7

Slide 7 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO AV1 • Open-source, royalty-free ͳ৽͍͠ಈըίʔσοΫ • VP9 ΑΓ΋ 30% খ͍͞ϏοτϨʔτͰಉը࣭Λ࣮ݱ • ϑϩϯτΤϯυؔ࿈ͷ࿩୊ͱͯ͠͸: • Media Source Extensions: SourceBuffer.changeType • ࠶ੜதʹಈతʹίϯςφ/ίʔσοΫΛ੾Γସ͑Β ΕΔΑ͏ʹ͢Δ API • ΫϥΠΞϯταΠυͰ AV1 ͷ࠶ੜ͕ݫ͍͠৔߹ ʹ VP9 ʹϑΥʔϧόοΫ͢ΔͳͲͷ੍ޚ͕Ͱ͖Δ

Slide 8

Slide 8 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ • AbemaTV Ͱ΋༗๬ͳٕज़ͱͯ͠஫໨͍ͯ͠Δ • PiP • PiP ͸ video ཁૉ͝ͱͷద༻ • DRM ༗ແͷ੾ΓସΘΓͳͲͰετϦʔϜ͕มΘΔ ͱ video ཁૉ͕࠶ੜ੒͞ΕΔɽ͜͏ͨ͠Τοδέʔ ε΁ͷରԠΛߦ͏ඞཁ͕͋Δ • AV1 • ಛʹϚϧνσόΠεͰల։͍ͯ͠Δ৔߹ʹ͸ɼσ ίʔμʔ͕Ͳ͜·Ͱීٴ͢Δ͔ʁ͕ΧΪ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO • Client-side rendering ͳϖʔδͷ SEO ʹ͍ͭͯ • લఏ1: ݱࡏͷ Googlebot ͸ɼJS-heavy ͳϖʔδͷ index ԽΛ࠷େ1िؒ஗Ԇͤ͞Δ • લఏ2: ݱࡏͷ Googlebot ͸ Chrome 41 ૬౰ ෛՙ͕͔͔Δϖʔδ͸ 3FOEFS2VFVFͰ ஗Ԇ͞Εͯ͠·͏

Slide 12

Slide 12 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO Workaround: Dynamic Rendering • SPA ͱ SSR ͷதؒ • Web αʔό͕ฦͨ͠ SPA Λ Dynamic Renderer Ͱॲཧͯ͠ static HTML ʹม׵͠ɼ Ϋϩʔϥʔʹฦ͢ • Puppeteer, Rendertron ͳͲ͕࢖͑Δ

Slide 13

Slide 13 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO • Google Mobile-Friendly Test • JS ͷΤϥʔͳͲΛݟΒΕΔΑ͏ʹ Google Search Console ͷΞοϓσʔτ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ • Dynamic Rendering • SPA ͷ SEO ରࡦ͸ҎԼͷͲͷखஈΛऔΔ͔ͷબ ୒ʹͳΓͦ͏ • SSR ͢Δ • Chrome 41 ޲͚ͷϏϧυΛ࡞ͬͯ഑৴͢Δ • Dynamic Rendering ΛηοτΞοϓΛ͢Δ • ΋͠؆қʹ૊ΈࠐΊΔ full-managed ͳαʔϏε͕ ग़ͯ͘Ε͹ workaround ͱͯ͠࢖͏ͷ͸Αͦ͞͏

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO Reporting API • CSP, FP, Τϥʔ, Ϋϥογϡ, ඇਪ঑ػೳͷ࢖༻ͳͲͱ ͍ͬͨ warnings/errors Λ௨஌͢ΔҰݩతͳ࢓૊Έ • ίϯιʔϧ͕ϝοηʔδͰຒ΋Εͯ͠·͍͕ͪͩͬͨ ͷΛղফ͢Δ

Slide 21

Slide 21 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ • Feature Policy • ศརͦ͏͕ͩɼຊ֨తͳରԠɾ׆༻͸೉ͦ͠͏ • Best practices ܥͱ permissions ܥͷೋछྨ͕ࠞ ͍ͬͯ͟Δ͕ɼࠓޙͲ͏͍͏ํ޲ʹͳΔͷ͔ • Best practices: oversized-images, etc. • Permissions: geolocations, fullscreen, etc. • ະରԠͷ৔߹͸ແࢹ͞ΕΔ͚ͩͳͷͰɼͱΓ͋͑ ͣ report-only Ͱ༗ޮʹ͓ͯ͘͠ͷ͸͋Γ

Slide 22

Slide 22 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ • Reporting API • Reporting API Ͱ౷Ұ͢Δʹ͸ɼϢʔβʔϕʔε ʹ઎ΊΔΧόϨοδ͕ߴ·ͬͯर͑ΔΤϥʔ͸શ ͯ͜ͷ API Ͱ handling Ͱ͖ΔΑ͏ʹͳΔඞཁ͕ ͋Δ • ීٴ཰͕ߴ·Βͳ͍ͱ࣮ઓʹ౤ೖ͢Δͷ͸ݫ͠ ͍ʁ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO Virtual Scroll as a high-level API • Virtual Scroll • දࣔྖҬ֎ͷཁૉΛϨϯμ Ϧϯά͠ͳ͍Α͏ʹ͢Δ ʢvirtualisationʣ͜ͱͰύ ϑΥʔϚϯεΛߴΊΔ • ωΠςΟϒΞϓϦ΍ React/ Vue/Angular ͷϑϨʔϜ ϫʔΫͰ͸Α͘࢖ΘΕ͍ͯ Δ

Slide 26

Slide 26 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO طଘΞϓϩʔνͷ໰୊఺ͱରࡦ • ໰୊఺ɿӅΕ͍ͯΔ෦෼ʹؔͯ͠ • ϦϯΫΛషΕͳ͍ • ϖʔδ಺ݕࡧ͕Ͱ͖ͳ͍ • SEO తʹ΋໰୊͕͋Δ • High-level API ͱͯ͠ϒϥ΢βͷ native ࣮૷Λ௥Ճ͢ Δ͜ͱͰɼ্ه໰୊Λղܾ͢Δ • ύϑΥʔϚϯεʹ༏Ε࣮ͨ૷ΛϑϨʔϜϫʔΫબఆ ͳͲͳ͠ʹ؆୯ʹѻ͑ΔΑ͏ʹͳΔ

Slide 27

Slide 27 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO "Layered API" ʹجͮ͘ࡦఆ • ଞϓϥοτϑΥʔϜͷ࣮૷΍ϑϨʔϜϫʔΫ͔ΒϢʔ εέʔεΛूΊɼաෆ଍ͳ͍ API ʹ·ͱΊΔ • ଞͷϒϥ΢βϕϯμɼϑϨʔϜϫʔΫ࡞ऀɼ։ൃ ऀ͔ΒώΞϦϯάͨ͠Γ GitHub Ͱٞ࿦ΛਂΊͨ Γͨ͠ • low-level API Ͱ଍Γ͍ͯͳ͍΋ͷ͕͋Ε͹௥Ճ͢Δ • Invisible DOM • ͦͷ··Ͱे෼࢖͑ɼ͔֦ͭு΋Մೳͳ࢓༷Λࡦఆ

Slide 28

Slide 28 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ • high-level API ͕௥Ճ͞ΕΔ͜ͱ͸ૉ௚ʹخ͍͠ • ن໛͕େ͖͘ͳͬͯ͘Δͱඞਢʹ͍ٕۙज़͕ native ࣮ ૷͞ΕΔͷ͸େ͖͍ʢlazyload, virtualisation, etc...) • Google ͸ύϑΥʔϚϯεʹྗΛೖΕ͍ͯΔͷͰɼ͜͜ Ͱͷਐาʹ͸ظ଴Ͱ͖ͦ͏ • Layered APIs ϞσϧʹԊͬͯɼ޿͘ҙݟΛืΓͳ͕Βࡦ ఆ͍ͯ͠Δͷʹ҆৺ײ͕͋Δ • ͕͢͞ʹ high-level API ͷࡦఆʹ͸৻ॏʹͳ͍ͬͯΔ໛ ༷

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO Web Packaging Signed Exchanges & Bundled Exchanges

Slide 32

Slide 32 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO Web Packaging Signed Exchanges & Bundled Exchanges w63-͕഑৴ݩ PSJHJO ͷυϝΠϯʹͳΔ w".1CBS͕ඇදࣔʹͳΔ

Slide 33

Slide 33 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO Portals

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ • Signed Exchange • AMP ରԠαΠτͰ͸ඞਢͷٕज़ͱͳ͍͖ͬͯͦ͏ • Cloudflare ͕ AMP Packager ͱ͍͏αʔϏεΛग़͍ͯ͠ ΔΑ͏ͳͷͰɼͦ͏ͨ͠ managed service Λ࢖͏ͷ΋Ұ ͭͷख͔ • Portals • ϩάΠϯϖʔδ, ΩϟϯϖʔϯϖʔδͳͲυϝΠϯΛ෼͚ Δ৔߹ʹ࢖͑ͦ͏ • ڊେͳαΠτʹͯ JS ͷ entry point Λ෼͚ɼmicro frontend Խ͢Δͱ͖ʹ΋࢖͑Δ͔΋

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO What is Houdini? • Style → Layout → Paint → Composite ͷ֤ϨϯμϦϯ άϓϩηεʹ hook ͯ͠ॲཧΛߦ͑Δٕज़ • CSS ϓϩύςΟ, animation-timing-function, display value ͳͲΛಠࣗʹఆٛՄೳ • low-level / high-level API ͷ྆ํΛࡦఆத

Slide 41

Slide 41 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ར఺ • Auto-repaint • Auto-sized • Off-the-main-thread • No DOM overhead

Slide 42

Slide 42 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ

Slide 43

Slide 43 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ • ࣮૷ঢ়گ͸ݫ͍͠ • polyfill ΍ϑϨʔϜϫʔΫք۾Ͱ͸༗༻ͳٕज़ʹͳΔͷ Ͱ͸ͳ͍͔ • ಛʹैདྷෆՄೳͩͬͨ CSS ͷ polyfill Λ࡞ΕΔΑ͏ ʹͳΔ • ࣮຿ͰͷϢʔεέʔε͕͋Δ͔Ͳ͏͔͸...

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO WebVR / WebXR Device API (for VR and AR) • Web ͸ install-free Ͱͦͷ৔Ͱ࢖͏͜ͱ͕Ͱ͖Δͷ͕ େ͖ͳར఺ • ಛʹ AR ͸ڭҭ, e-commerce ͳͲ
 ͷ෼໺Ͱ༗༻

Slide 47

Slide 47 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO • polyfill Ͱ CardboardVR ΍ݹ͍ WebVR ޲͚ʹಈ͔͢ ͜ͱ͕Մೳ • three.js ͱ૊Έ߹Θͤͯͷ։ൃ͕͓͢͢Ί • XRSession.requestHitTest (ࢹઢͱڥք໘ͱͷަ఺Λ ࢉग़Ͱ͖Δ API) ͳͲͱڠௐͤ͞ΒΕΔ • model-viewer ͱ͍͏ Web component ΋։ൃ͍ͯ͠Δ • 3D Programming ʹৄ͘͠ͳͯ͘΋࢖͑Δ

Slide 48

Slide 48 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ॴײ • ࣗ෼ͷपΓͰ͸ XR ≒ Unity engineer ͱ͍͏งғؾͳ ͷͰɼ Web ٕज़Ͱ࡞Δҙ͕ٛߴ·Ε͹ීٴͦ͠͏ • install-free, interoperability, طଘαΠτͱͷ༥߹ • install-free ͱ͍͏఺Ͱ͸ e-commerce ͱͷ਌࿨ੑ͸ߴ ͦ͏ • ͋ͱ͸σόΠεͷීٴ࣍ୈʁ

Slide 49

Slide 49 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO Wrapping Up

Slide 50

Slide 50 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO • ৽͍͠ Web API ͷ঺հʹؔ͢Δηογϣϯͷ಺༰Λ ͬ͟ͱ঺հ • Progressive ʹ࢖͑ͦ͏ͳ΋ͷ / ֤ϒϥ΢βͷ࣮૷͕ਐ ·ͳ͍ͱ࢖͑ͳͦ͞͏ͳ΋ͷ • ݕ౼ͷ୺ॹʹͳΕ͹... • R.I.P Edge
 →Chrome νʔϜͷ API ࡦఆྗ͕໰ΘΕΔ࣌୅ʹ

Slide 51

Slide 51 text

DISPNFEFWTVNNJUCSJFpOHTFTTJPO Thank you!