#ionic_jp 同人誌即売会の回線事情をIonic + PWAで手軽に解決してみる

2018/01/28 に #ionic_jp のLTにて発表したスライドです。

Transcript

1. ಉਓࢽଈചձͷճઢࣄ৘Λ*POJD
   
   18"Ͱखܰʹղܾͯ͠ΈΔ ɹ#ionic_jp 2018.01.27 HANATANI Takuma LT 5#'
   0⒐JOF
   7JFXFSΛ
   ࢧ͑Δٕज़
   ࣌ؒͰ࡞ͬͨ1SPHSFTTJWF
   8FC
   "QQMJDBUJPOͷཪଆ
   
2. ࠓճͷLT͕ Կ෼࿮͔஌Βͳ͍ਓ͕࿩͠·͢
3. ࣗݾ঺հ • Ֆ୩୓ຏ a.k.a. @potato4d • ϑϦʔϥϯεͷϑϩϯτΤϯυΤϯδχΞ • ීஈ͸ຆͲVue.js/Nuxt.jsͰ࢓ࣄͯ͠·͢ • Vue.js jpελοϑ, FRONTEND CONFERENCE 2017࣮ߦҕһ௕, etc… • PWAʹ΋ڧ͍Nuxt.jsͷهࣄͱ͔ॻ͍ͯ·͢ • https://html5experts.jp/potato4d/24346/
6. @potato4d ࠓ͙͢ϑΥϩʔʂʂʂ
7. ΍ͬͨ͜ͱ
8. IonicͰಉਓΠϕϯτͷ ϏϡʔΞʔΛ࡞ͬͨ
10. ࣗ෼΋دߘͨ͠
11. ࣍͸ࣗ෼Ͱग़͢
12. TBF03 Offline Viewer • ٕज़ॻయ03ͷΦϑϥΠϯϏϡʔΞʔ • ౰೔ͷαʔΫϧҰཡͷදࣔػೳ • ๚໰༧ఆͷαʔΫϧͷϒοΫϚʔΫػೳ • αʔΫϧҰཡͷΦϑϥΠϯӾཡػೳ
13. Կނ͜ΕΛ࡞ͬͨͷ͔
14. ͍ͭ΋ίϛέߦ͚͘Ͳ ճઢऴΘΔʢࢮ͵ʣΑͳ
15. ٕज़ॻయ΋ࠞࡶ౓૿ͯ͠Δ͠ কདྷతʹ͋Δ͔΋͠Εͳ͍
16. ͳΒ͜Ε͔Β࢖͑Δ ʮଈചձ޲͚ͷΦϑϥΠϯΞϓϦͷ࡞Γํʯ Λ͓֮͑ͯ͜͏
17. ͳʹΛ͔͓ͭ͏ʁ
18. ී௨ͳΒ ΦϑϥΠϯʹΞϓϦ
19. ͚Ͳ
20. ࠓͳΒ PWAͱ͍͏બ୒ࢶ
21. Ͱ͖Ε͹ϥΠτʹ࡞Γ͍ͨ
22. ͦΕͳΒWebٕज़Ͱ
23. PoCͳͷͰUI΋αΫοͱ
24. ͦΜͳ࣌ʹ
26. IonicͰͰ͖ͦ͏ͳ͜ͱ
27. ָʹUI͕૊Ίͦ͏
28. PWAରԠ͕ڧͯ͘SWʹڧͦ͏
29. Service Worker
30. Service Worker
31. Service WorkerͰͰ͖Δ͜ͱ
32. WebαΠτΛ
33. ωΠςΟϒΞϓϦͷΑ͏ʹ
34. Service WorkerͰͰ͖Δ͜ͱ
35. Service WorkerͰͰ͖Δ͜ͱ • HTTPϦΫΤετΛΩϟονͯ͠ଞͷॲཧΛड͚࣋ͭ • ྫ͑͹WebαΠτͷભҠઌͷ಺༰Λઌʹͱͬͯര଎Ͱಈ͔͢ • ΦϑϥΠϯ࣌ʹαʔόʔͷ୅ΘΓʹίϯςϯπΛฦ٫͢Δ • Push Nofication API Λୟ͘ʢWebϓογϡ௨஌ͷ࣮૷͕Մೳʣ • ͦͷଞ༷ʑͳʮWebΞϓϦΛωΠςΟϒΞϓϦͷΑ͏ʹ࢖͑Δॲཧʯ
36. ࣗ෼Ͱॻ͘ͱμϧ͍
37. https://github.com/potato4d/potato4d.me/blob/423a064d9f54131f93b57ca22c5d5d57bdc4edc7/static/service-worker.js
38. ຊ౰ʹࣗ෼Ͱॻ͘ͱμϧ͍
39. Ionic͸σϑΥϧτͰ ͍ͭͯΔͷͰઃఆΛॻ͚ͩ͘
40. ྑͦ͞͏ʂ
41. ࢖ͬͯΈΑ͏
42. in ϧϊΞʔϧ
43. ͦͷ··ϧϊΞʔϧͰॻ͘͜ͱ 3࣌ؒ…
44. ׬੒ʂ
46. IonicͳΒαΫοͱ ϓϩτλΠϓΛ࡞ΕΔ
47. طଘͷ֓೦ͱPWAͷϚονΛ ࢼ͢ͷʹΦεεϝ
48. ΍ͬͯΈΔϝϦοτ
49. ྫ͑͹ಉਓࢽଈചձͷ৔߹……
50. ΠϕϯτެࣜαΠτ୅ΘΓʹ ؾܰʹ࡞ΕΔ ӡӦऀ͕……
51. αʔΫϧҰཡϖʔδͷ୅ΘΓʹ ίϛϡχέʔγϣϯͷ৔ʹ ӡӦऀ͕……
52. ಛʹΞχϝܥͷ৔߹ ݸਓͷझຯझ޲͸ΦϑϥΠϯͰอ࣋ ࢀՃऀͱͯ͠͸……
53. ϥΠτʹࢼͤΔPWA؀ڥ
55. ࠷ޙʹIonicࣗମΛ࢖ͬͨॴײ
56. ྑ͞͸ॻ͍ͨͷͰͦΕҎ֎
57. ͭΒ͔ͬͨ͜ͱ
58. 2ͭ͋ͬͨ
59. 1ͭΊ
60. service-worker.jsͷ σϑΥઃఆͰ٧Μͩ
61. ઃఆΛnetworkFirstʹ͠ͳ͍ͱͩΊ https://github.com/potato4d/tbf03-offline/commit/031900744a63a3e192b83f0b91957484f8425e2f#diff-e81c54751ff186bde816ffd37408c102
62. 2ͭΊ
63. ʢݸਓͷײ૝Ͱ͢ʣ
64. Angularґଘ
65. ʢݸਓͷײ૝Ͱ͢ʣ
66. IonicͰϥΠτʹ࡞Γ͍ͨ
67. Angular͸ී௨ʹେ͖͍
68. ʢݸਓͷײ૝Ͱ͢ʣ
69. ͭΒ͍
70. ผʹViewer࡞Δ࣌ʹRx͍Βͳ͍
71. ʢݸਓͷײ૝Ͱ͢ʣ
72. ͭΒ͍
73. Macbook࢖͍ͳͷͰ Angular + Ionic͸ϥΠϒϦϩʔυ͕2෼
74. ͭΒ͍
75. ࡶͳΞϓϦ͸ ୯ҰͷStoreͱaxios͕͋Ε͹͍͍
76. ʢݸਓͷײ૝Ͱ͢ʣ
77. Ionic͸ָͳͷͰ ࡶͳΞϓϦͰ࢖͍͍ͨ
78. ʢݸਓͷײ૝Ͱ͢ʣ
79. ແବʹͰ͔͍ͷͰͭΒ͍
80. ʢݸਓͷײ૝Ͱ͢ʣ
81. UIίϯϙʔωϯτ͚ͩ΄͍͠
82. ʢݸਓͷײ૝Ͱ͢ʣ
83. ଞͷFw൛ͷIonic͸ൃల్্ͬΆ͍͠ Ionic wayͰ͸ͳͦ͞͏
84. ͜͏͍͏΍ͭ͸Ұ൪ਪͯ͠Δͷʹ ৐͔ͬΔͷ͕ਖ਼ղ
85. Ionic + Reactͱ͔Ionic + VueͰ ແཧ͢Δͳ
86. ʢݸਓͷײ૝Ͱ͢ʣ
87. ࠷ڧʹ͍ͨ͠ͳΒSwiftΛॻ͚
88. ʢݸਓͷײ૝Ͱ͢ʣ
89. ૯ධ
90. • WebϕʔεͷΞϓϦΛ࡞ΔͨΊʹඞཁͳ΋ͷ͕ຊ౰ͷҙຯͰἧ͍ͬͯΔ • ී௨ͷʮϑϧελοΫͳ։ൃηοτʯ͸։ൃΑΓͷ෺͕ଟ͘ɺࢼ͠ʹ࡞ Δʹ͸ͭΒ͍͚ͲɺIonic͸UI·Ͱἧ͍ͬͯΔͷͰ୯ମͰ։ൃͰ͖Δ • PWAͷΑ͏ͳ৽͍ٕ͠ज़ʹ΋όονϦରԠ͍ͯͯ͠৽͍͜͠ͱΛ΍Δʹ͸ ྑͦ͞͏ • ΞϓϦԽ͍ͨ͠৔߹͸ΞϓϦԽͰ͖Δͷ΋ྑͦ͞͏ɻͨͩɺPWAͰ΍ͬͯ ͍͘ͷʹྑ͍΋ͷͩͱ͍͏ҹ৅
91. • ׂΓͱϥΠτʹ࢖͑Δ͚ΕͲཪʹ͋Δ΋ͷ͕େ͖͍ؾ͕͢Δɻ • WebΞϓϦΛ࡞Δ࣌ʹ͍͖ͳΓʮRails͸͡Ί·ͨ͠ʂʯͷۭؾײͱಉ͡ ΋ͷΛײ͡Δ • มʹΞϓϦ͕ਪ͞Εؾຯͳ෩ை͸Ͳ͏ͳΜͩΖ͏ɻRNΈ͍ͨͳωΠςΟ ϒίʔυ͕ಈ͘ڧྗͳڝ߹͕ଟ͍தɺͦ͜͸ओઓ৔͡Όͳ͍ؾ͕͢Δ • গͳ͘ͱ΋IonicͰຊ֨తͳΞϓϦΛ։ൃ͍ͨ͠ͳ͊ͱࢥ͏͔ͱݴΘΕΔͱ ඍົ
92. • Ionic + ೚ҙͷϑϨʔϜϫʔΫͰ࡞ΕΔͱ΋ͬͱྑ͍͔΋ • Service Workerɺ௚ॻ͖͡Όͳͯ͘Ӆṭ͞ΕΔͱͪΐͬͱϋϚΓ͕Θ͔Γ ͮΒ͍ͷͰ࣮֬ʹωοτϫʔΫ༏ઌͰ͋ͬͯ΄͔͔ͬͨ͠΋ • ͪΐͬͱ࡞ͬͯΈΔʹ͸ྑ͍ͱࢥ͏ʢσβΠϯΛͪΌΜͱ͍ͨ͠ͳΒී௨ ʹࣗ෼ͰSPAΛ૊Μͩ΄͏͕ྑͦ͞͏ʣͷͰϓϩτλΠϐϯά࿏ઢͰ΋ͬ ͱྲྀߦΔͱྑ͍͔΋
93. গ͠લͷະདྷΛ
94. ΠϚͷٕज़ͱͯ͠ؾܰʹ࢖͏
95. ͕ͦ͜Ionic
96. એ఻
97. Service WorkerόϦόϦͳ αʔϏε։ൃख఻ͬͯ·͢
98. Service WorkerͰͷ ϓογϡ௨஌Λ3෼ͰಋೖͰ͖Δʂ
99. Push7
100. ͪΌΜͱߟ͑ͯಋೖ͠ͳ͍ͱ ʮअѱͳϓογϡ௨஌ʯʹͳΔͷͰ஫ҙʂ
101. ※Push7͸વΔ΂͖λΠϛϯά Ͱͷߪಡڐ୚Λਪ঑͍ͯ͠·͢
103. ͏·͘׆༻ͯ͠ Progressive Enhancement ͍ͯ͜͠͏
104. Thanks!