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
930
WordPressユーザーのためのAngular & Progressive Web Appsの話
Yosuke Onoue
October 09, 2016
Tweet
Share
More Decks by Yosuke Onoue
See All by Yosuke Onoue
ネットワーク可視化の世界
likr
7
6k
Think About Front-end Web Development with Rust
likr
2
510
Yewにおけるoff-the-main-thread
likr
1
720
行政事業レビューデータの可視化 / Visualization of Japan's National Budget with JUDGIT!
likr
1
210
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
likr
24
11k
Web-based Data Visualization with Rust and WebAssembly
likr
4
5.6k
Introduction to Graph Drawing
likr
0
470
20190707Ionic_Meetup.pdf
likr
0
400
About the end of the web
likr
2
500
Other Decks in Technology
See All in Technology
分解して理解する Aspire
nenonaninu
2
1k
Iceberg Meetup Japan #1 : Iceberg and Databricks
databricksjapan
0
330
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
230
Raycast Favorites × Script Command で実現するお手軽情報チェック
smasato
1
140
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.2k
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
630
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
10
3.7k
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
150
【Findy】「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly by findy
i35_267
5
860
AIエージェント元年@日本生成AIユーザ会
shukob
1
200
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
540
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
110
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
It's Worth the Effort
3n
184
28k
Faster Mobile Websites
deanohume
306
31k
Facilitating Awesome Meetings
lara
52
6.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Agile that works and the tools we love
rasmusluckow
328
21k
Git: the NoSQL Database
bkeepers
PRO
427
65k
Bash Introduction
62gerente
611
210k
Gamification - CAS2011
davidbonilla
80
5.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
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ศར