Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Edbee6089620d92f417d03963f1775d9?s=128

Yui Sakamoto

May 26, 2017
Tweet

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