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

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/
4. None
5. None

6. @potato4d ࠓ͙͢ϑΥϩʔʂʂʂ

7. ΍ͬͨ͜ͱ

8. IonicͰಉਓΠϕϯτͷ ϏϡʔΞʔΛ࡞ͬͨ

9. None

10. ࣗ෼΋دߘͨ͠

11. ࣍͸ࣗ෼Ͱग़͢

12. TBF03 Offline Viewer • ٕज़ॻయ03ͷΦϑϥΠϯϏϡʔΞʔ • ౰೔ͷαʔΫϧҰཡͷදࣔػೳ • ๚໰༧ఆͷαʔΫϧͷϒοΫϚʔΫػೳ •

    αʔΫϧҰཡͷΦϑϥΠϯӾཡػೳ

13. Կނ͜ΕΛ࡞ͬͨͷ͔

14. ͍ͭ΋ίϛέߦ͚͘Ͳ ճઢऴΘΔʢࢮ͵ʣΑͳ

15. ٕज़ॻయ΋ࠞࡶ౓૿ͯ͠Δ͠ কདྷతʹ͋Δ͔΋͠Εͳ͍

16. ͳΒ͜Ε͔Β࢖͑Δ ʮଈചձ޲͚ͷΦϑϥΠϯΞϓϦͷ࡞Γํʯ Λ͓֮͑ͯ͜͏

17. ͳʹΛ͔͓ͭ͏ʁ

18. ී௨ͳΒ ΦϑϥΠϯʹΞϓϦ

19. ͚Ͳ

20. ࠓͳΒ PWAͱ͍͏બ୒ࢶ

21. Ͱ͖Ε͹ϥΠτʹ࡞Γ͍ͨ

22. ͦΕͳΒWebٕज़Ͱ

23. PoCͳͷͰUI΋αΫοͱ

24. ͦΜͳ࣌ʹ

25. None

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. ׬੒ʂ

45. None

46. IonicͳΒαΫοͱ ϓϩτλΠϓΛ࡞ΕΔ

47. طଘͷ֓೦ͱPWAͷϚονΛ ࢼ͢ͷʹΦεεϝ

48. ΍ͬͯΈΔϝϦοτ

49. ྫ͑͹ಉਓࢽଈചձͷ৔߹……

50. ΠϕϯτެࣜαΠτ୅ΘΓʹ ؾܰʹ࡞ΕΔ ӡӦऀ͕……

51. αʔΫϧҰཡϖʔδͷ୅ΘΓʹ ίϛϡχέʔγϣϯͷ৔ʹ ӡӦऀ͕……

52. ಛʹΞχϝܥͷ৔߹ ݸਓͷझຯझ޲͸ΦϑϥΠϯͰอ࣋ ࢀՃऀͱͯ͠͸……

53. ϥΠτʹࢼͤΔPWA؀ڥ

54. None

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͸વΔ΂͖λΠϛϯά Ͱͷߪಡڐ୚Λਪ঑͍ͯ͠·͢

102. None

103. ͏·͘׆༻ͯ͠ Progressive Enhancement ͍ͯ͜͠͏

104. Thanks!