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

Goolgle I/O 2017で発表された内容の中からWebに関連する内容をまとめました。

Transcript

1. Google I/O 2017 ஫໨ͷMobile Webٕज़ Yui Sakamoto
2. • ࡔຊ ݁ҥ(@yui_tang) • Software Engineer • Mercari, inc. • ೖࣾ3೥໨ʹಥೖ • αʔόʔαΠυɺϑϩϯτΤϯυɺϓϩδΣΫ τΦʔφʔ౳ʑ • ༷ʑͳϓϩδΣΫτʹؔΘΓͳ͕Β΋ɺೖࣾҎ དྷWebΛ୲౰͍ͯ͠Δ About Me
4. ͓඼ॻ͖ • Google I/O 2017 ࡶײ • Webʹؔ࿈͢Δ࿩୊
5. Google I/O 2017 ࡶײ • ࡢ೥ݴΘΕ͍ͯͨΑ͏ͳ఺(ޱ಄ʹͯ)͕େ͖͘վ ળ‼3೔ؒ௨ͯ͠ͱͯ΋ա͝͠΍͍͢ՆFesʹ❗ • ೔ӄ΋ଟ͍͠ɺηογϣϯ༻ͷςϯτ΋ۭௐ׬උɻ ேன൩ͷ৯ࣄ΋ग़Δ͠ɺ☕΍໷ͷ΋‼ • Mobile First ➡ AI First
8. 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/
9. Google I/O 2017 Web-sideɹ • ѹ౗తʹAMP + PWAਪ͠ • ͍Α͍Αಋೖɾਁಁظʹ☝ • PolymerͱWebAssembly΋͋ΔΑ • PRPL - Push, Render, Pre-cache, Lazy-load • ৽τϐοΫ͸গͳΊ͔ͳ • ΧϯϑΝϨϯεͷࡉ෼Խ܏޲
10. Google I/O 2017 Web-sideɹ • AMP & PWA • Polymer • WebAssembly • Others 8FCʹؔΘΔηογϣϯ਺
11. Google I/O 2017 Web-sideɹ • AMP & PWA 12 ⤴ • Polymer 2 • WebAssembly 1 • Others 8FCʹؔΘΔηογϣϯ਺
12. AMP + PWA
13. The AMP Keynote (Google I/O '17) https://youtu.be/BGyF5Uh3w1M?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
14. Accelerated Mobile Pages Project - AMP https://www.ampproject.org/ AMP Conf 2017΁ߦ͖ͬͯ·ͨ͠ #AMPConf http://tech.mercari.com/entry/2017/03/16/130113
15. From AMP to PWA: Progressive Web AMPs (Google I/O '17) https://youtu.be/xF6mjl-wOqU?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
16. From AMP to PWA: Progressive Web AMPs (Google I/O '17) https://youtu.be/xF6mjl-wOqU?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
17. 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/
18. AMP on e-commerce Turbocharging AMP https://www.ampproject.org/latest/blog/turbocharging-amp/
19. Progressive Web Apps https://developers.google.com/web/progressive-web-apps/
20. Progressive Web Apps • ϗʔϜը໘ʹΞΠίϯΛ௥ՃͰ͖Δ • Service WorkerʹΑΔߴ଎Խ΍ΦϑϥΠϯΩϟο γϡ • Web Push • Native AppͷΑ͏ͳfull screen UI • ࠓேliveͷrebuild.fmͰ΋࿩୊ʹɻ 8FCϖʔδͰ"QQͷΑ͏ͳ69Λ࣮ݱ͢Δ
21. Building for Your Next Billion Users (Google I/O ’17) https://youtu.be/wD3rpdiLMyY?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
22. Building for Your Next Billion Users (Google I/O ’17) https://youtu.be/wD3rpdiLMyY?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
23. AMP as PWA AMP to PWA AMP in PWA
24. ".1Ͱߏங͞ΕͨϖʔδͰɺ
    18"ͷػೳΛར༻͢Δɻ
    AMP as PWA
25. 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
26. AMP to PWA
27. AMP to PWA
28. AMP to PWA
30. AMP in PWA
31. AMP in PWA
32. AMP in PWA
34. ڧྗͳService WorkerػೳΛ׆༻͠ɺఆܕίʔυΛഉআ͠ɺService Workerͷੜ੒ΛࣗಈԽ͢Δ͜ͱͰɺ։ൃΛ؆ૉԽ͢Δ Workbox https://workboxjs.org
35. Workbox https://workboxjs.org
36. Lighthouse https://developers.google.com/web/tools/lighthouse/
37. Polymer
39. 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
40. Polymer + PWA sample Polymer sample https://shop.polymer-project.org/
41. WebAssembly
42. Compiling for the Web with WebAssembly (Google I/O ’17) https://youtu.be/6v4E6oksar0?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
43. Compiling for the Web with WebAssembly (Google I/O ’17) https://youtu.be/6v4E6oksar0?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
44. Compiling for the Web with WebAssembly (Google I/O ’17) https://youtu.be/6v4E6oksar0?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
45. Compiling for the Web with WebAssembly (Google I/O ’17) https://youtu.be/6v4E6oksar0?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
46. ͓ΘΓ