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

PWA, Cordova, Capacitor, ReactNative Dom の比較からみる、これからのHTML5 アプリ/feacture_of_html5app

7ce46cdba50db99f3403024fe2519c91?s=47 Masahiko Sakakibara
July 09, 2018
3.9k

PWA, Cordova, Capacitor, ReactNative Dom の比較からみる、これからのHTML5 アプリ/feacture_of_html5app

HTML5アプリは、Webをプラットフォームとする Progressive Web Apps とそれをiOS/Androidアプリとするための Cordova が有名ですが、それだけではなく Capacitor ReactNative Dom という新しいアプローチが生まれようとしています。これらを比較することからそれぞれの特徴を明らかにして、これからのHTML5アプリはどうなっていくのかを考えていければと思います。  

7ce46cdba50db99f3403024fe2519c91?s=128

Masahiko Sakakibara

July 09, 2018
Tweet

Transcript

  1. None
  2. Ұൠࣾஂ๏ਓϦϨʔγϣϯσβΠϯݚڀॴ
 ୅දཧࣄɹࡗݪণ඙ 18" $PSEPWB $BQBDJUPS  3FBDU/BUJWF%PNͷൺֱ͔ΒΈΔɺ ͜Ε͔Βͷ)5.-ΞϓϦ

  3. ࣗݾ঺հ ࡗݪণ඙ Ұൠࣾஂ๏ਓϦϨʔγϣϯσβΠϯ
 ݚڀॴ୅දཧࣄ Ұൠࣾஂ๏ਓΤϦΞɾ
 ΠϊϕʔγϣϯɾΞϥΠΞϯε$50 *POJD+BQBO୅ද
 *POJDίΞίϯτϦϏϡʔλʔ

  4. <1SPEVDU>"SFB*OOPWBUJPO3FWJFX

  5. <1SPEVDU>UJQTZT

  6. $POUSJCVUF ionic-team/ionic ionic-team/starters ionic-team/ionic-cli

  7. %FW4VQQPSU

  8. ϋΠϒϦουΞϓϦͱ͸ 888

  9. None
  10. ϋΠϒϦουΞϓϦઓࠃ࣌୅

  11. 9BNBSJO

  12. 9BNBSJO $ .JDSPTPGU ೥ΑΓແঈ $Ͱશ෦ॻ͘

  13. 3FBDU/BUJWF

  14. 3FBDU/BUJWF JavaScriptCore経由にNativeコードを実行 3FBDUͰ/BUJWF։ൃ

  15. 3FBDU/BUJWF ※ 図はNative Script

  16. 3FBDU/BUJWF%0.

  17. 3FBDU/BUJWFGPS8FC

  18. $PSEPWB1IPOF(BQ 888

  19. $PSEPWB1IPOF(BQ )5.-
 $ +BWB "QBDIF'PVOEBUJPO )5.-ΛωΠςΟϒΞϓϦͷΑ͏ʹ࢖͑ΔΑ͏ʹ͢Δ

  20. *POJD'SBNFXPSL$PSEPWB1IPOF(BQ

  21. 0OTFO6*$PSEPWB1IPOF(BQ

  22. <SFGFS>.POBDB$PSEPWB1IPOF(BQ

  23. $BQBDJUPS 888

  24. )5.-
 $ +BWB 4XJGU ,PUMJO *POJDUFBN /BUJWF1SPHSFTTJWF8FC"QQT $BQBDJUPS

  25. Cordova → Cordova Plugin → Obj-c/Java → Native API
 Capacitor

    → Swift/Kotlin → Native API $BQBDJUPS
  26. $BQBDJUPS /BUJWF6*4IFMMʢ/BUJWFͱ8FC7JFXͷ༥߹ʣ .JYJOH/BUJWF6*BOE8FCXBDSPTTQMBUGPSN6*

  27. 1SPHSFTTJWF8FC"QQT 888

  28. 1SPHSFTTJWF8FC"QQT

  29. 1SPHSFTTJWF8FC"QQT  ΦϑϥΠϯදࣔ  #BDLHSPVOE4ZOD  1VTI௨஌  ϗʔϜը໘ʹ௥Ճ 

    (14΍ΧϝϥͳͲͷ
 /BUJWFػೳ΁ͷΞΫηε
  30. 1SPHSFTTJWF8FC"QQT wϞόΠϧͷར༻࣌ؒ͸૿Ճ܏޲ wεϚϗΞϓϦͷ৽نΠϯετʔϧ
 ͸͸ʢϲ݄ʣ w͔ͭεϚϗΞϓϦ͸501͕ಠ઎ wεϚϗΞϓϦʹൺ΂ͯɺ8&#͸ഒͷτϥϑΟοΫ w͍Ζ͍Ζͳ8&#ʹ๚໰͞ΕΔ

  31. 1SPHSFTTJWF8FC"QQT ΞϓϦΛར༻͢ΔͷʹɺϢʔβ͸ ̍ɽΞϓϦετΞʹભҠͯ͠
 ̎ɽΞϓϦΛΠϯετʔϧͯ͠
 ̏ɽΞϓϦΛىಈ͠ͳ͍ͱ͍͚ͳ͍


  32. ͦΕͧΕͷϋΠϒϦουΞϓϦ UI Native Web View 直接 Native言語経由 Native First Web

    First
  33. ͦΕͧΕͷϋΠϒϦουΞϓϦ 再利用性高 再利用性低い

  34. ͦΕͧΕͷϋΠϒϦουΞϓϦ デザインの表現力 表現力低い

  35. ͦΕͧΕͷϋΠϒϦουΞϓϦ 処理速度 処理速度低い

  36. 8FC'JSTU͔ͩΒɺΞϓϦͱͯ͠͸͍·͍ͪʁ やっぱり、Swift/Kotlinで書くのが王道?

  37. 'BTUCPPL https://vimeo.com/55486684

  38. )5.-ΞϓϦΛલ޲͖ʹ mobile remains the killer platform, and web is the

    future.
  39. )5.-ΞϓϦΛ͸͡ΊΔ͓͢͢Ίύοέʔδ $-* %FTJHO 4VQQPSU

  40. )5.-ΞϓϦΛ͸͡ΊΔ͓͢͢Ίύοέʔδ

  41. )5.-ΞϓϦΛ͸͡ΊΔ͓͢͢Ίύοέʔδ

  42. )5.-ΞϓϦΛ͸͡ΊΔ͓͢͢Ίύοέʔδ

  43. )5.-ΞϓϦΛ͸͡ΊΔ͓͢͢Ίύοέʔδ

  44. )5.-ΞϓϦΛ͸͡ΊΔ͓͢͢Ίύοέʔδ

  45. )5.-ΞϓϦΛ͸͡ΊΔ͓͢͢Ίύοέʔδ

  46. ॻ੶ʮ*POJDͰ࡞ΔϞόΠϧΞϓϦ੍࡞ೖ໳ʯ IUUQTBN[OUP[I$QQ[

  47. ͜Ε͔Βͷ)5.-ΞϓϦ ೥લʹΛ઎ΊͨωΠςΟ ϒ։ൃऀ͸ɺʹݮΓ· ͨ͠ɻ·ͨɺࠓޙ೥ؒͰ ͸ωΠςΟϒ։ൃΛഁ غ͢Δ͜ͱʹͳΔͩͱ͏ͱճ ౴͍ͯ͠·͢ɻ

  48. ͜Ε͔Βͷ)5.-ΞϓϦ

  49. ͜Ε͔Βͷ)5.-ΞϓϦ

  50. ͜Ε͔Βͷ)5.-ΞϓϦ Web制作者がアプリをつくる世界に。

  51. None