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

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

Vueでネイティブアプリの作り方ってご存知ですか?
今回はWebの技術でネイティブアプリを作れるIonic/Vueってやつをご紹介!

69b4dadef85efe143ac825b62d36ed7c?s=128

果物リン

June 24, 2019
Tweet

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. 1.Vueのプロジェクトを作る

  21. 2.Vue Routerを入れる

  22. 3.Ionic Pluginを入れる

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

  24. 5.npx ionic init する

  25. 6.npx ionic capacitor add ios する

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

  27. 8.npx cap open iosする

  28. 9.ビルドをぽちっとな

  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΋͍͍ͧʂ