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(Takuma HANATANI)
January 28, 2018
Programming
0
420
#ionic_jp 同人誌即売会の回線事情をIonic + PWAで手軽に解決してみる
2018/01/28 に #ionic_jp のLTにて発表したスライドです。
potato4d(Takuma HANATANI)
January 28, 2018
Tweet
Share
More Decks by potato4d(Takuma HANATANI)
See All by potato4d(Takuma HANATANI)
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
potato4d
3
400
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.3k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.9k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.9k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.3k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.7k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4.1k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
27k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.5k
Other Decks in Programming
See All in Programming
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
PicoRuby on Rails
makicamel
2
130
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
610
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
240
PipeCDのプラグイン化で目指すところ
warashi
1
270
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
760
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
110
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
790
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
670
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
6
2.6k
VS Code Update for GitHub Copilot
74th
2
630
ニーリーにおけるプロダクトエンジニア
nealle
0
800
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
The Invisible Side of Design
smashingmag
301
51k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Designing for humans not robots
tammielis
253
25k
Faster Mobile Websites
deanohume
307
31k
Being A Developer After 40
akosma
90
590k
Why Our Code Smells
bkeepers
PRO
337
57k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
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!