Vueでネイティブアプリを作る-Ionic_Vueの紹介/Invitation @Ionic_Vue

Transcript

1. 1.

   Vueでネイティブアプリ -Ionic Vueの紹介 Ռ෺Ϧϯ@FruitRiin גࣜձࣾΏΊΈ 2019/06/24 Ginza.js #2

2. 2.

   Vue͸޷͖Ͱ͔͢ʁ

3. 3.

   VueͰNativie։ൃͬͯ
 Ͱ͖ͦ͏Ͱ͔͢ʁ

4. 4.

   VueとNative • Reactʹ͸React Native͕͋Δ • Vueʹ΋Weex͍ͬͯ͏΍͕ͭެࣜͰ͋Δ • Vue Native͸ϊʔνϟϯ͔ͩΒ๨ΕΑ͏

5. 5.

   Weex is … • VueͷίʔυΛωΠςΟϒίʔυʹม׵͢Δ
 ʢWeex-Vue-Renderʣ • DOM΍BOMʢϒϥ΢βɾΦϒδΣΫτɾϞσϧʣ͕ͳ͍ • ҰԠ࠷৽͸v1.0.26ʢ2018/12/09ʣ

   • ࿩୊Λฉ͔ͳ͍
6. 6.

   େৎ෉ͳͷ͜Εʁ

7. 7.

   Ionic ܑ͓͞Μ ʮ࠷ۙIonic/Vueͬͯͷ͕ग़ͨΜ͚ͩͲ ΍ͬͯΈͳΑʂʯ

8. 8.

   ͸͸͸ɺ·ͨ·ͨ͝৑ஊΛ

9. 9.

   ʮͯ͜ͱͰొஃΑΖ͘͠Ͷʂʯ

10. 10.

    ͳɺͳΜͩͬͯʔʂ ˎIonic Meetup ̎̌෼஻Γ·ͨ͠

11. 11.

    VueͰωΠςΟϒΞϓϦΛ࡞Δ Ionic/Vueͷ͝঺հ

12. 12.

    自己紹介 • Ռ෺Ϧϯ@FruitRiin • ϑϩϯτΤϯδχΞ • גࣜձࣾΏΊΈ • ͍ͭͷ·ʹ͔ϦʔυΤϯδχΞ •

    Vue͸͍͍ͧ • ࠷ۙIonic/Vue͸͍͍ͧΛ͍ͯ͠Δ
13. 13.

    Ionicとは • Webͷٕज़ͰωΠςΟϒΞϓϦΛ࡞Δ • iOS, Android, Electron • શ෦WebView্ͰΑ͠ͳʹ͢Δ •

    Ionic͸ϞόΠϧωΠςΟϒ෩UIίϯϙʔωϯτηοτ • v4͔Β Web Components • ωΠςΟϒAPIͱͷϒϦοδΛCapacitorͱ͔Cordova͕΍Δ
14. 14.

    Ionicとフロントエンドフレームワーク • v3·Ͱ͸Angularͱζο༑ͩͬͨ • v4ͰWeb ComponentsʹҠߦɺ
 ϑϨʔϜϫʔΫΛબ͹ͳ͘ͳͬͨ • Ionic/Vue ͸

    v0.0.1, βͱ͍͏Ґஔ͚͚ͮͩͲָ͍͠ • Ionic/React ͸ v0.0.4
15. 15.

    Web։ൃͷύϥμΠϜͦͷ·· ʴωΠςΟϒAPIίʔϧ

16. 16.

    ネイティブAPIコールはこんな感じ

17. 17.

    デモりたかった気持ち

18. 18.

    Ͱ΋೉͍͠ΜͰ͠ΐ͏ʁ

19. 19.

    iOSΞϓϦΛ࡞ΔྲྀΕΛ֓આ

20. 20.

    １．Vueのプロジェクトを作る

21. 21.

    ２．Vue Routerを入れる

22. 22.

    ３．Ionic Pluginを入れる

23. 23.

    ４．ビルド先をｗｗｗに変えてビルド • ͜ͷ͋ͱ npm build ͢Δ

24. 24.

    ５．npx ionic init する

25. 25.

    ６．npx ionic capacitor add ios する

26. 26.

    ７．cocoapodsがなければインストール • iOSϥΠϒϥϦ؅ཧπʔϧʮCocoaPodsʯͷ࢖༻ํ๏ - Qiita https://qiita.com/satoken0417/items/479bcdf91cff2634ffb1 • ↑ͱ͔ࢀߟʹద౰ʹΠϯετʔϧ

27. 27.

    ８．npx cap open iosする

28. 28.

    ９．ビルドをぽちっとな

29. 29.

    ͜ɺ͍ͭ͜ɺ͏ͧ͘͝ʂ

30. 30.

    以降のポイント • UIίϯϙʔωϯτ͸ۃྗIonicͷίϯϙʔωϯτΛ࢖͏ • ωΠςΟϒAPIΛίʔϧ͢Δͱ͖͸
 Capacitor IonicͷυΩϡϝϯτΛಡΉ • εςʔλεόʔ͸؏௨͢ΔͷͰ͝ʹΐΔˎ •

    ڻ͘΄ͲVueͰ͢
31. 31.

    っていう記事を書きました • ڵຯ͕͋Ε͹ੋඇ͝ཡ͍ͩ͘͞ • Ionic/Vue ͰiOSΞϓϦέʔγϣϯΛ࡞Δ - Qiita https://qiita.com/fruitriin/items/ 8fe0865fc4ea548e5952

32. 32.

    まとめ • Ionic/VueͰωΠςΟϒΞϓϦ࡞Δͷ؆୯ • v0.0.1͚ͩͲ݁ߏ໘ന͍͜ͱ͕Ͱ͖Δ • Ionicͦͷ΋ͷ͸ͪΌΜͱྺ࢙΋͋Δ • WebΤϯδχΞ͕ωΠςΟϒAPIΛ
 ࢖͍ͨ͘ͳͬͨͱ͖ͷબ୒ࢶͱͯ͠Ͳ͏ͧ

33. 33.

    Ionic/Vue΋͍͍ͧʂ