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

by 果物リン

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Vue͸޷͖Ͱ͔͢ʁ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

େৎ෉ͳͷ͜Εʁ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

͸͸͸ɺ·ͨ·ͨ͝৑ஊΛ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

自己紹介 • Ռ෺Ϧϯ@FruitRiin • ϑϩϯτΤϯδχΞ • גࣜձࣾΏΊΈ • ͍ͭͷ·ʹ͔ϦʔυΤϯδχΞ • Vue͸͍͍ͧ • ࠷ۙIonic/Vue͸͍͍ͧΛ͍ͯ͠Δ

Slide 13

Slide 13 text

Ionicとは • Webͷٕज़ͰωΠςΟϒΞϓϦΛ࡞Δ • iOS, Android, Electron • શ෦WebView্ͰΑ͠ͳʹ͢Δ • Ionic͸ϞόΠϧωΠςΟϒ෩UIίϯϙʔωϯτηοτ • v4͔Β Web Components • ωΠςΟϒAPIͱͷϒϦοδΛCapacitorͱ͔Cordova͕΍Δ

Slide 14

Slide 14 text

Ionicとフロントエンドフレームワーク • v3·Ͱ͸Angularͱζο༑ͩͬͨ • v4ͰWeb ComponentsʹҠߦɺ  ϑϨʔϜϫʔΫΛબ͹ͳ͘ͳͬͨ • Ionic/Vue ͸ v0.0.1, βͱ͍͏Ґஔ͚͚ͮͩͲָ͍͠ • Ionic/React ͸ v0.0.4

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

デモりたかった気持ち

Slide 18

Slide 18 text

Ͱ΋೉͍͠ΜͰ͠ΐ͏ʁ

Slide 19

Slide 19 text

iOSΞϓϦΛ࡞ΔྲྀΕΛ֓આ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

２．Vue Routerを入れる

Slide 22

Slide 22 text

３．Ionic Pluginを入れる

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

５．npx ionic init する

Slide 25

Slide 25 text

６．npx ionic capacitor add ios する

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

８．npx cap open iosする

Slide 28

Slide 28 text

９．ビルドをぽちっとな

Slide 29

Slide 29 text

͜ɺ͍ͭ͜ɺ͏ͧ͘͝ʂ

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Ionic/Vue΋͍͍ͧʂ