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

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

Transcript

1. View Slide

2. Ұൠࣾஂ๏ਓϦϨʔγϣϯσβΠϯݚڀॴ

   ୅දཧࣄɹࡗݪণ඙
   18" $PSEPWB $BQBDJUPS
   3FBDU/BUJWF%PNͷൺֱ͔ΒΈΔɺ
   ͜Ε͔Βͷ)5.-ΞϓϦ
   

   View Slide

3. ࣗݾ঺հ
   ࡗݪণ඙
   Ұൠࣾஂ๏ਓϦϨʔγϣϯσβΠϯ

   ݚڀॴ୅දཧࣄ
   Ұൠࣾஂ๏ਓΤϦΞɾ

   ΠϊϕʔγϣϯɾΞϥΠΞϯε$50
   *POJD+BQBO୅ද

   *POJDίΞίϯτϦϏϡʔλʔ
   

   View Slide

4. <1SPEVDU>"SFB*OOPWBUJPO3FWJFX
   

   View Slide

5. <1SPEVDU>UJQTZT
   

   View Slide

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

   View Slide

7. %FW4VQQPSU
   

   View Slide

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

   View Slide

9. View Slide

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

    View Slide

11. 9BNBSJO
    

    View Slide

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

    View Slide

13. 3FBDU/BUJWF
    

    View Slide

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

    View Slide

15. 3FBDU/BUJWF
    ※ 図はNative Script
    

    View Slide

16. 3FBDU/BUJWF%0.
    

    View Slide

17. 3FBDU/BUJWFGPS8FC
    

    View Slide

18. $PSEPWB1IPOF(BQ
    888
    

    View Slide

19. $PSEPWB1IPOF(BQ
    )5.-

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

    View Slide

20. *POJD'SBNFXPSL$PSEPWB1IPOF(BQ
    

    View Slide

21. 0OTFO6*$PSEPWB1IPOF(BQ
    

    View Slide

22. .POBDB$PSEPWB1IPOF(BQ
    

    View Slide

23. $BQBDJUPS
    888
    

    View Slide

24. )5.-

    $ +BWB 4XJGU ,PUMJO
    *POJDUFBN
    /BUJWF1SPHSFTTJWF8FC"QQT
    $BQBDJUPS
    

    View Slide

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

    Capacitor → Swift/Kotlin → Native API
    $BQBDJUPS
    

    View Slide

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

    View Slide

27. 1SPHSFTTJWF8FC"QQT
    888
    

    View Slide

28. 1SPHSFTTJWF8FC"QQT
    

    View Slide

29. 1SPHSFTTJWF8FC"QQT
    ΦϑϥΠϯදࣔ
    #BDLHSPVOE4ZOD
    1VTI௨஌
    ϗʔϜը໘ʹ௥Ճ
    (14΍ΧϝϥͳͲͷ

    /BUJWFػೳ΁ͷΞΫηε
    

    View Slide

30. 1SPHSFTTJWF8FC"QQT
    wϞόΠϧͷར༻࣌ؒ͸૿Ճ܏޲
    wεϚϗΞϓϦͷ৽نΠϯετʔϧ

    ͸͸ʢϲ݄ʣ
    w͔ͭεϚϗΞϓϦ͸501͕ಠ઎
    wεϚϗΞϓϦʹൺ΂ͯɺ8͸ഒͷτϥϑΟοΫ
    w͍Ζ͍Ζͳ8ʹ๚໰͞ΕΔ
    

    View Slide

31. 1SPHSFTTJWF8FC"QQT
    ΞϓϦΛར༻͢ΔͷʹɺϢʔβ͸
    ̍ɽΞϓϦετΞʹભҠͯ͠

    ̎ɽΞϓϦΛΠϯετʔϧͯ͠

    ̏ɽΞϓϦΛىಈ͠ͳ͍ͱ͍͚ͳ͍

    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

51. View Slide