Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Google I/O 2017 注目のmobile Web技術
Search
Yui Sakamoto
May 26, 2017
Programming
7
5.9k
Google I/O 2017 注目のmobile Web技術
Goolgle I/O 2017で発表された内容の中からWebに関連する内容をまとめました。
Yui Sakamoto
May 26, 2017
Tweet
Share
More Decks by Yui Sakamoto
See All by Yui Sakamoto
Modular Monolith Monorepo ~シンプルさを保ちながらmonorepoのメリットを最大化する~
yuisakamoto
12
5.6k
Google I/O '18 Overview @わいわい報告会
yuisakamoto
3
4.3k
PWA+AMPの話
yuisakamoto
25
23k
アプリファーストの影で頑張るWebの話
yuisakamoto
8
6.4k
Other Decks in Programming
See All in Programming
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
250
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
37
14k
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
2
280
昭和の職場からアジャイルの世界へ
kumagoro95
1
380
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
100
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
160
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
190
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
2
420
Amazon Bedrock Multi Agentsを試してきた
tm2
1
290
Lottieアニメーションをカスタマイズしてみた
tahia910
0
130
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
120
Featured
See All Featured
Done Done
chrislema
182
16k
YesSQL, Process and Tooling at Scale
rocio
172
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Code Reviewing Like a Champion
maltzj
521
39k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
The Cult of Friendly URLs
andyhume
78
6.2k
Writing Fast Ruby
sferik
628
61k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Transcript
Google I/O 2017 ͷMobile Webٕज़ Yui Sakamoto
• ࡔຊ ݁ҥ(@yui_tang) • Software Engineer • Mercari, inc. •
ೖࣾ3ʹಥೖ • αʔόʔαΠυɺϑϩϯτΤϯυɺϓϩδΣΫ τΦʔφʔʑ • ༷ʑͳϓϩδΣΫτʹؔΘΓͳ͕ΒɺೖࣾҎ དྷWebΛ୲͍ͯ͠Δ About Me
None
͓ॻ͖ • Google I/O 2017 ࡶײ • Webʹؔ࿈͢Δ
Google I/O 2017 ࡶײ • ࡢݴΘΕ͍ͯͨΑ͏ͳ(ޱ಄ʹͯ)͕େ͖͘վ ળ‼3ؒ௨ͯ͠ͱͯա͍͢͝͠ՆFesʹ❗ • ӄଟ͍͠ɺηογϣϯ༻ͷςϯτۭௐඋɻ ேன൩ͷ৯ࣄग़Δ͠ɺ☕ͷ‼
• Mobile First ➡ AI First
None
None
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/
Google I/O 2017 Web-sideɹ • ѹతʹAMP + PWAਪ͠ • ͍Α͍Αಋೖɾਁಁظʹ☝
• PolymerͱWebAssembly͋ΔΑ • PRPL - Push, Render, Pre-cache, Lazy-load • ৽τϐοΫগͳΊ͔ͳ • ΧϯϑΝϨϯεͷࡉԽ
Google I/O 2017 Web-sideɹ • AMP & PWA • Polymer
• WebAssembly • Others 8FCʹؔΘΔηογϣϯ
Google I/O 2017 Web-sideɹ • AMP & PWA 12 ⤴
• Polymer 2 • WebAssembly 1 • Others 8FCʹؔΘΔηογϣϯ
AMP + PWA
The AMP Keynote (Google I/O '17) https://youtu.be/BGyF5Uh3w1M?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
Accelerated Mobile Pages Project - AMP https://www.ampproject.org/ AMP Conf 2017ߦ͖ͬͯ·ͨ͠
#AMPConf http://tech.mercari.com/entry/2017/03/16/130113
From AMP to PWA: Progressive Web AMPs (Google I/O '17)
https://youtu.be/xF6mjl-wOqU?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
From AMP to PWA: Progressive Web AMPs (Google I/O '17)
https://youtu.be/xF6mjl-wOqU?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
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/
AMP on e-commerce Turbocharging AMP https://www.ampproject.org/latest/blog/turbocharging-amp/
Progressive Web Apps https://developers.google.com/web/progressive-web-apps/
Progressive Web Apps • ϗʔϜը໘ʹΞΠίϯΛՃͰ͖Δ • Service WorkerʹΑΔߴԽΦϑϥΠϯΩϟο γϡ •
Web Push • Native AppͷΑ͏ͳfull screen UI • ࠓேliveͷrebuild.fmͰʹɻ 8FCϖʔδͰ"QQͷΑ͏ͳ69Λ࣮ݱ͢Δ
Building for Your Next Billion Users (Google I/O ’17) https://youtu.be/wD3rpdiLMyY?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
Building for Your Next Billion Users (Google I/O ’17) https://youtu.be/wD3rpdiLMyY?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
AMP as PWA AMP to PWA AMP in PWA
".1Ͱߏங͞ΕͨϖʔδͰɺ 18"ͷػೳΛར༻͢Δɻ AMP as PWA
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
AMP to PWA
AMP to PWA
AMP to PWA
None
AMP in PWA
AMP in PWA
AMP in PWA
None
ڧྗͳService WorkerػೳΛ׆༻͠ɺఆܕίʔυΛഉআ͠ɺService WorkerͷੜΛࣗಈԽ͢Δ͜ͱͰɺ։ൃΛ؆ૉԽ͢Δ Workbox https://workboxjs.org
Workbox https://workboxjs.org
Lighthouse https://developers.google.com/web/tools/lighthouse/
Polymer
None
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
Polymer + PWA sample Polymer sample https://shop.polymer-project.org/
WebAssembly
Compiling for the Web with WebAssembly (Google I/O ’17) https://youtu.be/6v4E6oksar0?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
Compiling for the Web with WebAssembly (Google I/O ’17) https://youtu.be/6v4E6oksar0?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
Compiling for the Web with WebAssembly (Google I/O ’17) https://youtu.be/6v4E6oksar0?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
Compiling for the Web with WebAssembly (Google I/O ’17) https://youtu.be/6v4E6oksar0?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
͓ΘΓ