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

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

Masahiko Sakakibara
July 09, 2018
4.4k

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

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

Masahiko Sakakibara

July 09, 2018
Tweet

More Decks by Masahiko Sakakibara

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