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

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

Transcript

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. %FW
   4VQQPSU
8. ϋΠϒϦουΞϓϦͱ͸ 888
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
    /BUJWF
    GPS
    8FC
18. $PSEPWB1IPOF(BQ 888
19. $PSEPWB1IPOF(BQ )5.-
 $
    +BWB
    "QBDIF
    'PVOEBUJPO 
    )5.-ΛωΠςΟϒΞϓϦͷΑ͏ʹ࢖͑ΔΑ͏ʹ͢Δ
    
20. *POJD
    'SBNFXPSL
    
    $PSEPWB1IPOF(BQ
21. 0OTFO
    6*
    
    
    $PSEPWB1IPOF(BQ
22. <SFGFS>
    .POBDB
    
    $PSEPWB1IPOF(BQ
23. $BQBDJUPS 888
24. )5.-
 $
    +BWB
    4XJGU
    ,PUMJO
    *POJD
    UFBN 
    /BUJWF
    1SPHSFTTJWF
    8FC
    "QQT
     $BQBDJUPS
25. Cordova → Cordova Plugin → Obj-c/Java → Native API
 Capacitor → Swift/Kotlin → Native API $BQBDJUPS
26. $BQBDJUPS /BUJWF
    6*
    4IFMMʢ/BUJWFͱ8FC
    7JFXͷ༥߹ʣ
    .JYJOH
    /BUJWF
    6*
    BOE
    8FC
    X
    B
    DSPTT
    QMBUGPSN
    6*
27. 1SPHSFTTJWF
    8FC
    "QQT 888
28. 1SPHSFTTJWF
    8FC
    "QQT
29. 1SPHSFTTJWF
    8FC
    "QQT  ΦϑϥΠϯදࣔ
     #BDLHSPVOE
    4ZOD
     1VTI௨஌
     ϗʔϜը໘ʹ௥Ճ
     (14΍ΧϝϥͳͲͷ
 /BUJWFػೳ΁ͷΞΫηε
30. 1SPHSFTTJWF
    8FC
    "QQT wϞόΠϧͷར༻࣌ؒ͸૿Ճ܏޲
    wεϚϗΞϓϦͷ৽نΠϯετʔϧ
 ͸͸ʢϲ݄ʣ
    w͔ͭεϚϗΞϓϦ͸501͕ಠ઎
    wεϚϗΞϓϦʹൺ΂ͯɺ8&#͸ഒͷτϥϑΟοΫ
    w͍Ζ͍Ζͳ8&#ʹ๚໰͞ΕΔ
31. 1SPHSFTTJWF
    8FC
    "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制作者がアプリをつくる世界に。