Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

A54b31d4ebbce222dff88a5c42bac033?s=128

Potato4d(Hanatani Takuma)

January 28, 2018
Tweet

Transcript

  1. ಉਓࢽଈചձͷճઢࣄ৘Λ*POJD 18"Ͱखܰʹղܾͯ͠ΈΔ ɹ#ionic_jp 2018.01.27 HANATANI Takuma LT 5#'0⒐JOF7JFXFSΛ ࢧ͑Δٕज़ ࣌ؒͰ࡞ͬͨ1SPHSFTTJWF8FC"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!