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

Transcript

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

2. Vue͸޷͖Ͱ͔͢ʁ

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

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

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

   • ࿩୊Λฉ͔ͳ͍

6. େৎ෉ͳͷ͜Εʁ

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

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

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

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

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

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

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

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

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

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

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

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

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

17. デモりたかった気持ち

18. Ͱ΋೉͍͠ΜͰ͠ΐ͏ʁ

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

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

21. ２．Vue Routerを入れる

22. ３．Ionic Pluginを入れる

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

24. ５．npx ionic init する

25. ６．npx ionic capacitor add ios する

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

27. ８．npx cap open iosする

28. ９．ビルドをぽちっとな

29. ͜ɺ͍ͭ͜ɺ͏ͧ͘͝ʂ

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

    ڻ͘΄ͲVueͰ͢

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

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

33. Ionic/Vue΋͍͍ͧʂ