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

Transcript

1. Google I/O 2017 ஫໨ͷMobile Webٕज़ Yui Sakamoto

2. • ࡔຊ ݁ҥ(@yui_tang) • Software Engineer • Mercari, inc. •

   ೖࣾ3೥໨ʹಥೖ • αʔόʔαΠυɺϑϩϯτΤϯυɺϓϩδΣΫ τΦʔφʔ౳ʑ • ༷ʑͳϓϩδΣΫτʹؔΘΓͳ͕Β΋ɺೖࣾҎ དྷWebΛ୲౰͍ͯ͠Δ About Me
3. None

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

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

   • Mobile First ➡ AI First
6. None
7. None

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

29. None

30. AMP in PWA

31. AMP in PWA

32. AMP in PWA

33. None

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

38. None

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. ͓ΘΓ