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
WordPressユーザーのためのAngular & Progressive Web Appsの話
Search
Yosuke Onoue
October 09, 2016
Technology
1
940
WordPressユーザーのためのAngular & Progressive Web Appsの話
Yosuke Onoue
October 09, 2016
Tweet
Share
More Decks by Yosuke Onoue
See All by Yosuke Onoue
ネットワーク可視化の世界
likr
7
6.5k
Think About Front-end Web Development with Rust
likr
2
540
Yewにおけるoff-the-main-thread
likr
1
770
行政事業レビューデータの可視化 / Visualization of Japan's National Budget with JUDGIT!
likr
1
230
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
likr
24
11k
Web-based Data Visualization with Rust and WebAssembly
likr
4
5.8k
Introduction to Graph Drawing
likr
0
510
20190707Ionic_Meetup.pdf
likr
0
450
About the end of the web
likr
2
530
Other Decks in Technology
See All in Technology
Claude Codeから我々が学ぶべきこと
oikon48
10
2.8k
AIのグローバルトレンド 2025 / ai global trend 2025
kyonmm
PRO
1
160
[kickflow]20250319_少人数チームでのAutify活用
otouhujej
0
130
アカデミーキャンプ 2025 SuuuuuuMMeR「燃えろ!!ロボコン」 / Academy Camp 2025 SuuuuuuMMeR "Burn the Spirit, Robocon!!" DAY 1
ks91
PRO
0
150
[OCI Technical Deep Dive] OCIで生成AIを活用するためのソリューション解説(2025年8月5日開催)
oracle4engineer
PRO
0
110
Kiro と Q Dev で 同じゲームを作らせてみた
r3_yamauchi
PRO
1
110
Exadata Database Service on Dedicated Infrastructure セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
0
290
Rubyの国のPerlMonger
anatofuz
3
750
リリース2ヶ月で収益化した話
kent_code3
1
310
o11yツールを乗り換えた話
tak0x00
2
1.6k
薬屋のひとりごとにみるトラブルシューティング
tomokusaba
0
380
九州の人に知ってもらいたいGISスポット / gis spot in kyushu 2025
sakaik
0
180
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
338
57k
A designer walks into a library…
pauljervisheath
207
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Invisible Side of Design
smashingmag
301
51k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Making Projects Easy
brettharned
117
6.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Scaling GitHub
holman
462
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Agile that works and the tools we love
rasmusluckow
329
21k
Documentation Writing (for coders)
carmenintech
73
5k
Transcript
WordPressϢʔβʔͷͨΊͷ Angular & Progressive Web Appsͷ ͓ͷ͏͑ (@_likr)
ࣗݾհ • ͓ͷ͏͑ (@_likr) • ژେֶ ֶࡍ༥߹ڭҭݚڀਪਐηϯλʔ ࡦͷͨΊͷՊֶϢχοτ ಛఆॿڭ •
ng-kyotoΦʔΨφΠβʔɺGDGਆށελοϑ • ՄࢹԽɺ࠷దԽɺΞϧΰϦζϜͷݚڀ • WordPressॳ৺ऀ
ng-kyoto • ژΛத৺ʹ׆ಈ͢ΔAngularͷϢʔβʔίϛϡχςΟ • https://ng-kyoto.github.io/ • 2.0.0-alpha.31ͩͬͨͷͰͦΖͦΖߋ৽͍ͨ͠…
ࠓͷ • WP REST APIͷԬຊ͞Μ͕͍ͯ͠Δͣ… • ϑϨʔϜϫʔΫͷ͍ํطʹઆ໌͞Ε͍ͯΔͣ… • Progressive Web
AppsͱAngularͷΛ௨ͯ͡ɺ ࡢࠓͷϑϩϯτΤϯυٕज़͕ɺࠓͲ͔͓͜͏ͱ ͍ͯ͠Δͷ͔Λͬ͘͟Γհ͢Δ • ͜Ε͔ΒϑϩϯτΤϯυΛ࢝ΊΔਓ͕͙͢ʹ࠷৽ͷ τϨϯυΛऔΓೖΕΔͨΊͷπʔϧհ
࣍ • Progressive Web Appsͷ • Angularͷ • Blog࡞ͬͯΈͨ •
·ͱΊ
࣍ • Progressive Web Appsͷ • Angularͷ • Blog࡞ͬͯΈͨ •
·ͱΊ
Progressive Web Apps • https://developers.google.com/web/progressive- web-apps/ • WebαΠτͱωΠςΟϒΞϓϦͷ ͍͍ͱ͜औΓΛͨ͠WebΞϓϦ •
Progressive Enhancement • ߴ͍ϢʔβϏϦςΟͷ࣮ݱ • ϏδωεϑϨϯυϦʔ
PWAͰͰ͖Δ͜ͱ • ΦϑϥΠϯԽ • Πϯλʔωοτଓͳ͠Ͱͷར༻ • දࣔͷߴԽ • Push௨ •
ΞϓϦͷ࠶๚Λଅਐ • App Install Banner • ϗʔϜը໘ͷγϣʔτΧοτՃ • ঃʑʹΞϓϦͷΑ͏ʹͳΔʂ
PWAͷProgressive Enhancement • WebαΠτʹΞΫηε ˠ ΩϟογϡʹΑΔදࣔͷߴԽ ˠ γϣʔτΧοτͷՃ ˠ Push௨
ͳͥPWAʁ • Ϣʔβʔ͕ϞόΠϧΞϓϦΛ༻͢Δ࣌ؒݶΒΕ͍ͯ Δ͕ɺۃҰ෦ͷਓؾΞϓϦʹׂ͔ΕΔ͕࣌ؒଟ͍ ˠ ΄ͱΜͲͷϞόΠϧΞϓϦͷ༻ඇৗʹ͍ ˠ Ϣʔβʔ͕ΑΓଟ͘ར༻͢ΔWebαΠτʹ ɹωΠςΟϒΞϓϦͷརΛऔΓࠐΉ
PWAΛࢧ͑ΔWebٕज़ • Service Worker https://www.w3.org/TR/service-workers/ • Web App Manifest https://www.w3.org/TR/appmanifest/
ؔ࿈Ωʔϫʔυ • Responsive Design • RAIL Performance Model • Web
Storage / IndexedDB • ϞδϡʔϧγεςϜ • webpackɺSystemJSɺrollup.jsɺ… • ϑϩϯτΤϯυϑϨʔϜϫʔΫɺϥΠϒϥϦ • AngularɺPolymerɺReactɺ…
Service Workerͱ • Webϖʔδ(ϝΠϯεϨουɺUIεϨου)ͱ ಠཱͯ͠εΫϦϓτΛಈ࡞ͤ͞ΔΈ • ωοτϫʔΫϦΫΤετΛϑοΫ • ΩϟογϡΛͬͯϨεϙϯε •
ϦΫΤετΛमਖ਼ • αʔόʔPushΛड͚ͯ௨Λදࣔ • postMessageͰϝΠϯεϨουͱ௨৴ • HTTPSͰͷΈಈ࡞ (localhostΛআ͘)
ͳͥΦϑϥΠϯWebΞϓϦʁ • ϞόΠϧڥͷରԠ • ௨৴ͷෆ҆ఆ͞ • ௨৴ͷޮԽ • ޫෆมʂ •
ΦϑϥΠϯɾϑΝʔετͷࢥͱ࣮ફ by നੴढ़ฏ http://www.slideshare.net/shumpei/thought-and- practice-of-offline-first
Fetchઓུ • The offline cookbook https://jakearchibald.com/2014/offline-cookbook/ • Cache only •
Network only • Cache, falling back to network (cache first) • Cache & network race (fastest) • Network falling back to cache (network first) • …
sw-precache • https://github.com/GoogleChrome/sw-precache • JavaScript·ͨઃఆϑΝΠϧ͔Β Service WorkerίʔυΛੜ • Α͘͏Fetchઓུ͕࣮ࡁΈ •
networkFirst • cacheFirst • fastest • cacheOnly • networkOnly
ࢀߟࢿྉ • PWAϋϯζΦϯษڧձ @ GDGਆށ 2016/7/30 https://speakerdeck.com/likr/gdgshen-hu- progressive-web-apphanzuonmian-qiang-hui • Codelabs
https://codelabs.developers.google.com/pwa-dev- summit
࣍ • Progressive Web Appsͷ • Angularͷ • Blog࡞ͬͯΈͨ •
·ͱΊ
Angular • Google͕த৺ʹ։ൃ͢ΔΦʔϓϯιʔεͷ ϑϩϯτΤϯυϑϨʔϜϫʔΫ • https://angular.io/ • Angular 2.0 ϦϦʔε
Angular 2.0ͷಛ • ύϑΥʔϚϯε • ޮྑ͍มߋݕ • AoTίϯύΠϧ • ҆શੑ
• TypeScript࠾༻ʹΑΔܕαϙʔτ • ςετϑϨϯυϦʔͳAPI (DI) • ੜ࢈ੑ • ϑϧελοΫϑϨʔϜϫʔΫ
Կނ Angular ? • εέʔϥϒϧ • ϋΠύϑΥʔϚϯεɺνʔϜ։ൃ • ް͍ίϛϡχςΟ •
׆ൃͳ։ൃɺଟͷϢʔβʔ • Webඪ४Λҙࣝͨ͠API • ShadowDOMɺObservableɺZonesɺ… • ઌઓ͑Δٕज़Λʹ͚ͭΔʂ
Angular CLI • CLI tool for Angular2 • https://github.com/angular/angular-cli •
Ͱ͖Δ͜ͱ • ComponentServiceͷੜ • Ϗϧυ • ϩʔΧϧαʔόʔͷىಈ • σϓϩΠ(GitHub Pages) • …
Hello World $ npm install -g angular-cli $ ng new
hello-angular $ cd hello-angular $ ng serve
ࢀߟใ • ng-japan Slack https://ng-japan-invite.herokuapp.com/ • Angular 2 ϋϯζΦϯ https://github.com/ng-japan/ng2-hands-on-seed
࣍ • Progressive Web Appsͷ • Angularͷ • Blog࡞ͬͯΈͨ •
·ͱΊ
ͬͯΈͨ • Angular & WordPress.com APIͰ࣮ͨ͠ϒϩά • https://likr.github.io/blog • https://github.com/likr/blog
• ͬͨ͜ͱ • Service WorkerʹΑΔΦϑϥΠϯରԠ • sw-precache༻ • هࣄnetwork firstͰऔಘ • ϗʔϜεΫϦʔϯͷՃ
ߏ • Angular 2.0 & Angular CLI • WordPress.com REST
API • https://developer.wordpress.com/docs/api/ • Pure.css • http://purecss.io/ • sw-precache • https://github.com/GoogleChrome/sw-precache • GitHub Pages
σϞ https://likr.github.io/blog/#/posts/62 https://likr.github.io/blog/#/posts
ࢀߟใ • for Angular 1 https://github.com/likr/wpapi-angular-example • for Angular 2
https://github.com/likr/wpapi-angular2-example https://github.com/likr/blog
࣍ • Progressive Web Appsͷ • Angularͷ • Blog࡞ͬͯΈͨ •
·ͱΊ
·ͱΊ • WP(or WordPress.com) REST APIʹڵຯΛ࣋ͬͨਓɺ AngularΛࢼͯ͠ཉ͍͠ʂ • কདྷΛݟਾ͑ͯɺઌઓ͑Δٕज़Λʹ͚Α͏ •
Angular CLIͱsw-precacheศར