Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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ʣ • DOMBOMʢϒϥβɾΦϒδΣΫτɾϞσϧʣ͕ͳ͍ • ҰԠ࠷৽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
1.Vueのプロジェクトを作る
Slide 21
Slide 21 text
2.Vue Routerを入れる
Slide 22
Slide 22 text
3.Ionic Pluginを入れる
Slide 23
Slide 23 text
4.ビルド先をwwwに変えてビルド • ͜ͷ͋ͱ npm build ͢Δ
Slide 24
Slide 24 text
5.npx ionic init する
Slide 25
Slide 25 text
6.npx ionic capacitor add ios する
Slide 26
Slide 26 text
7.cocoapodsがなければインストール • iOSϥΠϒϥϦཧπʔϧʮCocoaPodsʯͷ༻ํ๏ - Qiita https://qiita.com/satoken0417/items/479bcdf91cff2634ffb1 • ↑ͱ͔ࢀߟʹదʹΠϯετʔϧ
Slide 27
Slide 27 text
8.npx cap open iosする
Slide 28
Slide 28 text
9.ビルドをぽちっとな
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͍͍ͧʂ