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

vuenight.pdf

MasayaYoshino
July 12, 2018
550

 vuenight.pdf

MasayaYoshino

July 12, 2018
Tweet

Transcript

  1. Serverless+Nativescript-vueͰ
    ΞϓϦ࡞ͬͯΈͨ࿩

    ٢໺խ໹ !BZBTBNJOE

    View Slide

  2. ࣗݾ঺հ

    View Slide

  3. ࣗݾ঺հ
    ٢໺ խ໹ (23)
    (Masaya Yoshino)
    FusicΤϯδχΞ
    Geek StudioӡӦ
    ۝भΞΠυϧޫGENKI
    ʰՎͬͯགྷΕΔΤϯδχΞʱ
    Twitter: @ayasamind
    ࠷ۙͷؔ৺: Ethereum, NEM

    View Slide

  4. ࣗݾ঺հ
    ि1ษڧձͯ͠·͢
    ͓ؾܰʹ!!!

    View Slide

  5. ࠓճͷςʔϚ

    View Slide

  6. Serverless+Nativescript-vueͰ
    ΞϓϦ࡞ͬͯΈͨ࿩

    ٢໺խ໹ !BZBTBNJOE

    View Slide

  7. NativeScriptͬͯʁ

    View Slide

  8. NativeScriptͬͯʁ
    ɾJavaScriptͱCSSͰiOS,AndroidΞϓϦΛ࡞੒͢Δ͜ͱ͕
    Ͱ͖ΔϑϨʔϜϫʔΫɻ
    ɾWebViewͷUIϨϯμϦϯά͸࢖༻͍ͯ͠ͳ͍ɻ
    ɾAngularɺVueʹରԠɻ
    NativeScript

    View Slide

  9. NativeScript-Vue

    View Slide

  10. NativeScript-Vue

    View Slide

  11. NativeScript-Vue

    View Slide

  12. NativeScript-VueΛମݧ!

    View Slide

  13. https://play.nativescript.org/?
    template=play-vue

    View Slide

  14. NativeScript-Vueͷ࢝Ίํ

    View Slide

  15. NativeScript-Vueͷ࢝Ίํ
    ωΠςΟϒΞϓϦͷ։ൃ؀ڥΛߏங

    View Slide

  16. NativeScript-Vueͷ࢝Ίํ
    ωΠςΟϒΞϓϦͷ։ൃ؀ڥΛߏங
    tnsίϚϯυ͕ศརɻ
    $ tns doctor ։ൃ؀ڥ͕੔͍ͬͯΔ͔਍அ

    View Slide

  17. NativeScript-Vueͷ࢝Ίํ

    View Slide

  18. NativeScript-Vueͷ࢝Ίํ
    $ yarn install
    $ yarn run watch:
    (͸iOS͔android)

    View Slide

  19. NativeScript-Vueͷ࢝Ίํ

    View Slide

  20. όοΫΤϯυ͸?

    View Slide

  21. View Slide

  22. NativeScript-Vueͷॻ͖ํ

    View Slide

  23. NativeScript-Vueͷॻ͖ํ
    σΟϨΫτϦߏ੒
    IUUQTHJUIVCDPNBZBTBNJOE/&.&&5

    View Slide

  24. NativeScript-Vueͷॻ͖ํ
    JS෦෼
    WebͷVuejsͱ΄΅ಉ͡!

    View Slide

  25. NativeScript-Vueͷॻ͖ํ
    JS෦෼
    ɾVue-router΍Vuex͕શ͘ಉ͡Α͏ʹ࢖༻Ͱ͖Δɻ
    ɾhttpΫϥΠΞϯτ͸axios౳Ͱ͸ͳ͘ɺnativescriptͷhttpModuleɻ
    ɾiOSͰ͸SSLԽͯ͠ͳ͍URLʹΞΫηε͢ΔલʹઃఆΛ͍͡Δඞཁ༗ɻ
    etc…

    View Slide

  26. NativeScript-Vueͷॻ͖ํ
    HTML,CSS෦෼
    CSS͸Webͱಉ͡Α͏ʹهड़Մೳ
    HTML͸ಠࣗͷλά͕͋Δ

    View Slide

  27. NativeScript-Vueͷॻ͖ํ
    HTML,CSS෦෼

    View Slide

  28. ࣮ࡍʹNativeScript-VueͰΞϓϦ
    Λͭͬͯ͘Έͨ

    View Slide

  29. ࣮ࡍʹNativeScript-VueͰΞϓϦΛͭͬͯ͘Έͨ
    ͭ͘Δ΋ͷɹҐஔ৘ใ×ϒϩοΫνΣʔϯΞϓϦ
    ֓ཁɹɹ ۙ͘ʹ͍Δਓʹແ଄࡞ʹ౤͛મ͕Ͱ͖Δ

    View Slide

  30. ࣮ࡍʹNativeScript-VueͰΞϓϦΛͭͬͯ͘Έͨ
    Ͱ͖ͨ΋ͷ(·ͩग़དྷͯͳ͍)ɹ

    View Slide

  31. ࣮ࡍʹNativeScript-VueͰΞϓϦΛͭͬͯ͘Έͨ
    ओͳػೳ
    ɾҐஔ৘ใऔಘ
    ɾ౤͛મ(ೖۚɾૹۚ)
    ɾϝοηʔδ

    View Slide

  32. ࣮ࡍʹNativeScript-VueͰΞϓϦΛͭͬͯ͘Έͨ
    όοΫΤϯυ
    ɾnativescript-nodeify
    npm,yarnϞδϡʔϧΛ͍͍ײ͡ʹnativescriptͰ
    ࢖͑ΔΑ͏ʹͯ͘͠ΕΔɻ
    ɾaws-amplify
    aws-sdkΛػೳΛߜͬͯ࢖͍΍ͨ͘͢͠Α͏ͳ΋ͷ

    View Slide

  33. ࣮ࡍʹNativeScript-VueͰΞϓϦΛͭͬͯ͘Έͨ
    όοΫΤϯυ
    ΢ΥϨοτ৘ใ
    Ϣʔβʔ৘ใ
    Ґஔ৘ใ
    ೝূ
    $PHOJUP
    "84-BNCEB
    "84-BNCEB

    View Slide

  34. ࣮ࡍʹNativeScript-VueͰΞϓϦΛͭͬͯ͘Έͨ
    ೝূ

    View Slide

  35. ࣮ࡍʹNativeScript-VueͰΞϓϦΛͭͬͯ͘Έͨ
    Ґஔ৘ใऔಘ

    View Slide

  36. ࣮ࡍʹNativeScript-VueͰΞϓϦΛͭͬͯ͘Έͨ
    Ґஔ৘ใऔಘ

    View Slide

  37. σϞ

    View Slide

  38. IUUQTXXXZPVUVCFDPNXBUDI WF324NGSYI6

    View Slide

  39. ͭͬͯ͘Έͨײ૝

    View Slide