Google I/O 2017 注目のmobile Web技術

by Yui Sakamoto

Slide 1

Slide 1 text

Google I/O 2017 ஫໨ͷMobile Webٕज़ Yui Sakamoto

Slide 2

Slide 2 text

• ࡔຊ ݁ҥ(@yui_tang) • Software Engineer • Mercari, inc. • ೖࣾ3೥໨ʹಥೖ • αʔόʔαΠυɺϑϩϯτΤϯυɺϓϩδΣΫ τΦʔφʔ౳ʑ • ༷ʑͳϓϩδΣΫτʹؔΘΓͳ͕Β΋ɺೖࣾҎ དྷWebΛ୲౰͍ͯ͠Δ About Me

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

͓඼ॻ͖ • Google I/O 2017 ࡶײ • Webʹؔ࿈͢Δ࿩୊

Slide 5

Slide 5 text

Google I/O 2017 ࡶײ • ࡢ೥ݴΘΕ͍ͯͨΑ͏ͳ఺(ޱ಄ʹͯ)͕େ͖͘վ ળ‼3೔ؒ௨ͯ͠ͱͯ΋ա͝͠΍͍͢ՆFesʹ❗ • ೔ӄ΋ଟ͍͠ɺηογϣϯ༻ͷςϯτ΋ۭௐ׬උɻ ேன൩ͷ৯ࣄ΋ग़Δ͠ɺ☕΍໷ͷ΋‼ • Mobile First ➡ AI First

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Google I/O ‘17Ͱ ͋ͬͨ101ͷൃද • Google Assistant and Google Home • AI, ML and Cloud • Google Photos • Android and Google Play • VR and AR • YouTube All 101 announcements from Google I/O ‘17 https://blog.google/topics/developers/all-io17-announcements/

Slide 9

Slide 9 text

Google I/O 2017 Web-sideɹ • ѹ౗తʹAMP + PWAਪ͠ • ͍Α͍Αಋೖɾਁಁظʹ☝ • PolymerͱWebAssembly΋͋ΔΑ • PRPL - Push, Render, Pre-cache, Lazy-load • ৽τϐοΫ͸গͳΊ͔ͳ • ΧϯϑΝϨϯεͷࡉ෼Խ܏޲

Slide 10

Slide 10 text

Google I/O 2017 Web-sideɹ • AMP & PWA • Polymer • WebAssembly • Others 8FCʹؔΘΔηογϣϯ਺

Slide 11

Slide 11 text

Google I/O 2017 Web-sideɹ • AMP & PWA 12 ⤴ • Polymer 2 • WebAssembly 1 • Others 8FCʹؔΘΔηογϣϯ਺

Slide 12

Slide 12 text

AMP + PWA

Slide 13

Slide 13 text

The AMP Keynote (Google I/O '17) https://youtu.be/BGyF5Uh3w1M?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy

Slide 14

Slide 14 text

Accelerated Mobile Pages Project - AMP https://www.ampproject.org/ AMP Conf 2017΁ߦ͖ͬͯ·ͨ͠ #AMPConf http://tech.mercari.com/entry/2017/03/16/130113

Slide 15

Slide 15 text

From AMP to PWA: Progressive Web AMPs (Google I/O '17) https://youtu.be/xF6mjl-wOqU?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy

Slide 16

Slide 16 text

From AMP to PWA: Progressive Web AMPs (Google I/O '17) https://youtu.be/xF6mjl-wOqU?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy

Slide 17

Slide 17 text

AMP • Google Search͔Β2ഒͷ଎͞Ͱϩʔυ͞ΕΔվળ • AMPίϯϙʔωϯτͷαʔόʔαΠυϨϯμϦϯά • ਓ͕ೝࣝग़དྷͳ͍ϨϕϧͰը૾DLͷଳҬ࢖༻෯Λ50%࡟ݮ • ECαΠτͰ΋AMP͕࢖͑ΔΑ͏ʹͳͬͨ • amp-bind, amp-formΛ࢖༻͢Δ͜ͱʹΑΓ࣮ݱ • amp-adͷվળ Turbocharging AMP https://www.ampproject.org/latest/blog/turbocharging-amp/

Slide 18

Slide 18 text

AMP on e-commerce Turbocharging AMP https://www.ampproject.org/latest/blog/turbocharging-amp/

Slide 19

Slide 19 text

Progressive Web Apps https://developers.google.com/web/progressive-web-apps/

Slide 20

Slide 20 text

Progressive Web Apps • ϗʔϜը໘ʹΞΠίϯΛ௥ՃͰ͖Δ • Service WorkerʹΑΔߴ଎Խ΍ΦϑϥΠϯΩϟο γϡ • Web Push • Native AppͷΑ͏ͳfull screen UI • ࠓேliveͷrebuild.fmͰ΋࿩୊ʹɻ 8FCϖʔδͰ"QQͷΑ͏ͳ69Λ࣮ݱ͢Δ

Slide 21

Slide 21 text

Building for Your Next Billion Users (Google I/O ’17) https://youtu.be/wD3rpdiLMyY?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy

Slide 22

Slide 22 text

Building for Your Next Billion Users (Google I/O ’17) https://youtu.be/wD3rpdiLMyY?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy

Slide 23

Slide 23 text

AMP as PWA AMP to PWA AMP in PWA

Slide 24

Slide 24 text

".1Ͱߏங͞ΕͨϖʔδͰɺ 18"ͷػೳΛར༻͢Δɻ AMP as PWA

Slide 25

Slide 25 text

AMP to PWA ".1ϖʔδΛϥϯσΟϯάͯ͠18"΁ • amp-install-serviceworker • JSͷ࢖͑ͳ͍AMPϖʔδͰɺPWAͷ ServiceWorkerΛઌʹΠϯετʔϧ͢Δɻ amp-install-serviceworker https://www.ampproject.org/docs/reference/components/amp-install-serviceworker

Slide 26

Slide 26 text

AMP to PWA

Slide 27

Slide 27 text

AMP to PWA

Slide 28

Slide 28 text

AMP to PWA

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

AMP in PWA

Slide 31

Slide 31 text

AMP in PWA

Slide 32

Slide 32 text

AMP in PWA

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

ڧྗͳService WorkerػೳΛ׆༻͠ɺఆܕίʔυΛഉআ͠ɺService Workerͷੜ੒ΛࣗಈԽ͢Δ͜ͱͰɺ։ൃΛ؆ૉԽ͢Δ Workbox https://workboxjs.org

Slide 35

Slide 35 text

Workbox https://workboxjs.org

Slide 36

Slide 36 text

Lighthouse https://developers.google.com/web/tools/lighthouse/

Slide 37

Slide 37 text

Polymer

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Polymer 2.0 • ͍͔ͭ͘ͷAPIͷมߋ • Polymer.dom -> shadow DOM v1 • ESͷclassߏจΛ࢖͏ • and more ⤴ 8FC$PNQPOFOUTΛ ؆୯ɾखܰʹ࣮ݱ͢ΔϥΠϒϥϦ What's new in 2.0 - Polymer Project https://www.polymer-project.org/2.0/docs/about_20

Slide 40

Slide 40 text

Polymer + PWA sample Polymer sample https://shop.polymer-project.org/

Slide 41

Slide 41 text

WebAssembly

Slide 42

Slide 42 text

Compiling for the Web with WebAssembly (Google I/O ’17) https://youtu.be/6v4E6oksar0?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy

Slide 43

Slide 43 text

Compiling for the Web with WebAssembly (Google I/O ’17) https://youtu.be/6v4E6oksar0?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy

Slide 44

Slide 44 text

Compiling for the Web with WebAssembly (Google I/O ’17) https://youtu.be/6v4E6oksar0?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy

Slide 45

Slide 45 text

Compiling for the Web with WebAssembly (Google I/O ’17) https://youtu.be/6v4E6oksar0?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy

Slide 46

Slide 46 text

͓ΘΓ