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

Vueでネイティブアプリの作り方ってご存知ですか？
今回はWebの技術でネイティブアプリを作れる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΋͍͍ͧʂ