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
#ionic_jp 同人誌即売会の回線事情をIonic + PWAで手軽に解決してみる
Search
potato4d(Hanatani Takuma)
January 28, 2018
Programming
0
320
#ionic_jp 同人誌即売会の回線事情をIonic + PWAで手軽に解決してみる
2018/01/28 に #ionic_jp のLTにて発表したスライドです。
potato4d(Hanatani Takuma)
January 28, 2018
Tweet
Share
More Decks by potato4d(Hanatani Takuma)
See All by potato4d(Hanatani Takuma)
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
1.7k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.6k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.5k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
980
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.3k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
3.6k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
25k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.1k
気軽な Node.js バックエンド開発には TypeORM がちょうどいい #kng7 / introduce-typeorm
potato4d
9
4.2k
Other Decks in Programming
See All in Programming
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
Netty Chicago Java User Group 2024-04-17
sullis
0
130
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
340
Elm Form Validation
bkuhlmann
0
510
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
3.6k
puregoの活用例
aethiopicuschan
0
220
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
100
本格ローグライク制作にEbitengineを選んでみた
nagainaganawa
0
290
ゆるい個人開発のススメ
kuroppe1819
10
940
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
170
Designing for tomorrow's programming workflows
honnibal
PRO
2
110
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
59
3.9k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
A Tale of Four Properties
chriscoyier
150
22k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
It's Worth the Effort
3n
180
27k
Bash Introduction
62gerente
604
210k
How GitHub (no longer) Works
holman
304
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Raft: Consensus for Rubyists
vanstee
132
6.2k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
Transcript
ಉਓࢽଈചձͷճઢࣄΛ*POJD 18"Ͱखܰʹղܾͯ͠ΈΔ ɹ#ionic_jp 2018.01.27 HANATANI Takuma LT 5#'0⒐JOF7JFXFSΛ ࢧ͑Δٕज़ ࣌ؒͰ࡞ͬͨ1SPHSFTTJWF8FC"QQMJDBUJPOͷཪଆ
ࠓճͷLT͕ Կ͔Βͳ͍ਓ͕͠·͢
ࣗݾհ • Ֆ୩ຏ a.k.a. @potato4d • ϑϦʔϥϯεͷϑϩϯτΤϯυΤϯδχΞ • ීஈຆͲVue.js/Nuxt.jsͰࣄͯ͠·͢ •
Vue.js jpελοϑ, FRONTEND CONFERENCE 2017࣮ߦҕһ, etc… • PWAʹڧ͍Nuxt.jsͷهࣄͱ͔ॻ͍ͯ·͢ • https://html5experts.jp/potato4d/24346/
None
None
@potato4d ࠓ͙͢ϑΥϩʔʂʂʂ
ͬͨ͜ͱ
IonicͰಉਓΠϕϯτͷ ϏϡʔΞʔΛ࡞ͬͨ
None
ࣗدߘͨ͠
࣍ࣗͰग़͢
TBF03 Offline Viewer • ٕज़ॻయ03ͷΦϑϥΠϯϏϡʔΞʔ • ͷαʔΫϧҰཡͷදࣔػೳ • ๚༧ఆͷαʔΫϧͷϒοΫϚʔΫػೳ •
αʔΫϧҰཡͷΦϑϥΠϯӾཡػೳ
Կނ͜ΕΛ࡞ͬͨͷ͔
͍ͭίϛέߦ͚͘Ͳ ճઢऴΘΔʢࢮ͵ʣΑͳ
ٕज़ॻయࠞࡶ૿ͯ͠Δ͠ কདྷతʹ͋Δ͔͠Εͳ͍
ͳΒ͜Ε͔Β͑Δ ʮଈചձ͚ͷΦϑϥΠϯΞϓϦͷ࡞Γํʯ Λ͓֮͑ͯ͜͏
ͳʹΛ͔͓ͭ͏ʁ
ී௨ͳΒ ΦϑϥΠϯʹΞϓϦ
͚Ͳ
ࠓͳΒ PWAͱ͍͏બࢶ
Ͱ͖ΕϥΠτʹ࡞Γ͍ͨ
ͦΕͳΒWebٕज़Ͱ
PoCͳͷͰUIαΫοͱ
ͦΜͳ࣌ʹ
None
IonicͰͰ͖ͦ͏ͳ͜ͱ
ָʹUI͕Ίͦ͏
PWAରԠ͕ڧͯ͘SWʹڧͦ͏
Service Worker
Service Worker
Service WorkerͰͰ͖Δ͜ͱ
WebαΠτΛ
ωΠςΟϒΞϓϦͷΑ͏ʹ
Service WorkerͰͰ͖Δ͜ͱ
Service WorkerͰͰ͖Δ͜ͱ • HTTPϦΫΤετΛΩϟονͯ͠ଞͷॲཧΛड͚࣋ͭ • ྫ͑WebαΠτͷભҠઌͷ༰ΛઌʹͱͬͯരͰಈ͔͢ • ΦϑϥΠϯ࣌ʹαʔόʔͷΘΓʹίϯςϯπΛฦ٫͢Δ • Push
Nofication API Λୟ͘ʢWebϓογϡ௨ͷ࣮͕Մೳʣ • ͦͷଞ༷ʑͳʮWebΞϓϦΛωΠςΟϒΞϓϦͷΑ͏ʹ͑Δॲཧʯ
ࣗͰॻ͘ͱμϧ͍
https://github.com/potato4d/potato4d.me/blob/423a064d9f54131f93b57ca22c5d5d57bdc4edc7/static/service-worker.js
ຊʹࣗͰॻ͘ͱμϧ͍
IonicσϑΥϧτͰ ͍ͭͯΔͷͰઃఆΛॻ͚ͩ͘
ྑͦ͞͏ʂ
ͬͯΈΑ͏
in ϧϊΞʔϧ
ͦͷ··ϧϊΞʔϧͰॻ͘͜ͱ 3࣌ؒ…
ʂ
None
IonicͳΒαΫοͱ ϓϩτλΠϓΛ࡞ΕΔ
طଘͷ֓೦ͱPWAͷϚονΛ ࢼ͢ͷʹΦεεϝ
ͬͯΈΔϝϦοτ
ྫ͑ಉਓࢽଈചձͷ߹……
ΠϕϯτެࣜαΠτΘΓʹ ؾܰʹ࡞ΕΔ ӡӦऀ͕……
αʔΫϧҰཡϖʔδͷΘΓʹ ίϛϡχέʔγϣϯͷʹ ӡӦऀ͕……
ಛʹΞχϝܥͷ߹ ݸਓͷझຯझΦϑϥΠϯͰอ࣋ ࢀՃऀͱͯ͠……
ϥΠτʹࢼͤΔPWAڥ
None
࠷ޙʹIonicࣗମΛͬͨॴײ
ྑ͞ॻ͍ͨͷͰͦΕҎ֎
ͭΒ͔ͬͨ͜ͱ
2ͭ͋ͬͨ
1ͭΊ
service-worker.jsͷ σϑΥઃఆͰ٧Μͩ
ઃఆΛnetworkFirstʹ͠ͳ͍ͱͩΊ https://github.com/potato4d/tbf03-offline/commit/031900744a63a3e192b83f0b91957484f8425e2f#diff-e81c54751ff186bde816ffd37408c102
2ͭΊ
ʢݸਓͷײͰ͢ʣ
Angularґଘ
ʢݸਓͷײͰ͢ʣ
IonicͰϥΠτʹ࡞Γ͍ͨ
Angularී௨ʹେ͖͍
ʢݸਓͷײͰ͢ʣ
ͭΒ͍
ผʹViewer࡞Δ࣌ʹRx͍Βͳ͍
ʢݸਓͷײͰ͢ʣ
ͭΒ͍
Macbook͍ͳͷͰ Angular + IonicϥΠϒϦϩʔυ͕2
ͭΒ͍
ࡶͳΞϓϦ ୯ҰͷStoreͱaxios͕͋Ε͍͍
ʢݸਓͷײͰ͢ʣ
IonicָͳͷͰ ࡶͳΞϓϦͰ͍͍ͨ
ʢݸਓͷײͰ͢ʣ
ແବʹͰ͔͍ͷͰͭΒ͍
ʢݸਓͷײͰ͢ʣ
UIίϯϙʔωϯτ͚ͩ΄͍͠
ʢݸਓͷײͰ͢ʣ
ଞͷFw൛ͷIonicൃల్্ͬΆ͍͠ Ionic wayͰͳͦ͞͏
͜͏͍͏ͭҰ൪ਪͯ͠Δͷʹ ͔ͬΔͷ͕ਖ਼ղ
Ionic + Reactͱ͔Ionic + VueͰ ແཧ͢Δͳ
ʢݸਓͷײͰ͢ʣ
࠷ڧʹ͍ͨ͠ͳΒSwiftΛॻ͚
ʢݸਓͷײͰ͢ʣ
૯ධ
• WebϕʔεͷΞϓϦΛ࡞ΔͨΊʹඞཁͳͷ͕ຊͷҙຯͰἧ͍ͬͯΔ • ී௨ͷʮϑϧελοΫͳ։ൃηοτʯ։ൃΑΓͷ͕ଟ͘ɺࢼ͠ʹ࡞ ΔʹͭΒ͍͚ͲɺIonicUI·Ͱἧ͍ͬͯΔͷͰ୯ମͰ։ൃͰ͖Δ • PWAͷΑ͏ͳ৽͍ٕ͠ज़ʹόονϦରԠ͍ͯͯ͠৽͍͜͠ͱΛΔʹ ྑͦ͞͏ • ΞϓϦԽ͍ͨ͠߹ΞϓϦԽͰ͖Δͷྑͦ͞͏ɻͨͩɺPWAͰͬͯ
͍͘ͷʹྑ͍ͷͩͱ͍͏ҹ
• ׂΓͱϥΠτʹ͑Δ͚ΕͲཪʹ͋Δͷ͕େ͖͍ؾ͕͢Δɻ • WebΞϓϦΛ࡞Δ࣌ʹ͍͖ͳΓʮRails͡Ί·ͨ͠ʂʯͷۭؾײͱಉ͡ ͷΛײ͡Δ • มʹΞϓϦ͕ਪ͞Εؾຯͳ෩ைͲ͏ͳΜͩΖ͏ɻRNΈ͍ͨͳωΠςΟ ϒίʔυ͕ಈ͘ڧྗͳڝ߹͕ଟ͍தɺͦ͜ओઓ͡Όͳ͍ؾ͕͢Δ • গͳ͘ͱIonicͰຊ֨తͳΞϓϦΛ։ൃ͍ͨ͠ͳ͊ͱࢥ͏͔ͱݴΘΕΔͱ
ඍົ
• Ionic + ҙͷϑϨʔϜϫʔΫͰ࡞ΕΔͱͬͱྑ͍͔ • Service Workerɺॻ͖͡Όͳͯ͘Ӆṭ͞ΕΔͱͪΐͬͱϋϚΓ͕Θ͔Γ ͮΒ͍ͷͰ࣮֬ʹωοτϫʔΫ༏ઌͰ͋ͬͯ΄͔͔ͬͨ͠ • ͪΐͬͱ࡞ͬͯΈΔʹྑ͍ͱࢥ͏ʢσβΠϯΛͪΌΜͱ͍ͨ͠ͳΒී௨
ʹࣗͰSPAΛΜͩ΄͏͕ྑͦ͞͏ʣͷͰϓϩτλΠϐϯά࿏ઢͰͬ ͱྲྀߦΔͱྑ͍͔
গ͠લͷະདྷΛ
ΠϚͷٕज़ͱͯ͠ؾܰʹ͏
͕ͦ͜Ionic
એ
Service WorkerόϦόϦͳ αʔϏε։ൃखͬͯ·͢
Service WorkerͰͷ ϓογϡ௨Λ3ͰಋೖͰ͖Δʂ
Push7
ͪΌΜͱߟ͑ͯಋೖ͠ͳ͍ͱ ʮअѱͳϓογϡ௨ʯʹͳΔͷͰҙʂ
※Push7વΔ͖λΠϛϯά ͰͷߪಡڐΛਪ͍ͯ͠·͢
None
͏·͘׆༻ͯ͠ Progressive Enhancement ͍ͯ͜͠͏
Thanks!