Ionic/VueでCapacitorってぶっちゃけどうなの？/How about Ionic-Vue with Capatitor?

「そこのVueのお姉さん！Ionic/VueでCapacitorする（ネイティブアプリつくる）のってぶっちゃけどうなの？」
「なにそれしらない。うーん、ちょっとやってみるね」

・VueでのNativeを取り巻く現状
・Ionic/VueでWebをやる
・Capacitorしてみる
・感想と余談

Transcript

1. Ionic/Vueで
 Capacitorって
 ぶっちゃけどうなの？ Ռ෺Ϧϯ@FruitRiin גࣜձࣾΏΊΈ 2019/6/2 Ionic Meetup #11 Tokyo
2. ! Ionic/Angular ͥΜͥΜΘ͔ΒΜ
3. 自己紹介 • Ռ෺Ϧϯ@FruitRiin • גࣜձࣾΏΊΈ - ೖࣾ̐ϲ݄ • Vue/NuxtͷΤϯδχΞɺνʔϜϦʔμʔɺPMʁ • Ionic v3৮ͬͯ1ճ࠳ં͠·ͨ͠ ! • Vue͸͍͍ͧ
4. あじぇんだ • VueͰͷNativeΛऔΓר͘ݱঢ় • Ionic/VueͰWebΛ΍ͬͯΈΑ͏ • Capacitorͯ͠ΈΑ͏ • ײ૝ͱ༨ஊ
5. VueでのNativeを 取り巻く現状
6. 前提１．Ionic/VueでWebは結構イケる • ઌۦऀ͕͍·͢ • ଟ෼݄̎ͷIonic UG • ΊͬͪΌࢀߟʹͳΔ
7. લఏ̎ɽVue͸Nativeۤख
8. VueެࣜNativeͱ͍͑͹Weex
9. Weex • VueνʔϜ͕ެࣜʹαϙʔτ͍ͯ͠Δ • apache͕ϗετͯ͠Δʢͳͥʁ • ࠷৽ϦϦʔελά͸ v1.0.26 (2018/12/29) • ҰԠϚτϞʹಈ͘Β͍͕͠ͱʹ͔͘࿩୊ʹͳΒͳ͍ • Ή͠ΖࢮΜͰΔͱࢥͬͯͨΒੜ͖ͯͯϏϏΔ
10. Weex Weeks • DOMͰ͸ͳ͘Nativeίʔυʹม׵͢ΔΒ͍͠ • DOMґଘͷίʔυ͕શ໓͢Δ • eg: document.querySelector() • BOM(Browser Object Model)͕ͳ͍ • document, window, screen ΦϒδΣΫτ͕ͳ͍ • WXEnvironment ͳΔΦϒδΣΫτ͕͋ΔΒ͍͠ • ͦͷଞɺNativeσόΠεΛίʔϧ͢ΔAPI͕ੜ͍͑ͯΔ໛༷
11. ͱʹ͔͘ࣄྫগͳ͍
12. 200X೥ɺੈքʹ Vue Native͕ݱΕͨ
14. Vue Native • ͳΜͱReact NativeΛ
 VueͰϥοϓͨ͠େ୾ͳઃܭʂ • Expoͱ͔͍ͭͯ͘Δ • ࠷৽ϦϦʔελά͸v0.0.1(2018/8/1)
15. ґଘϥΠϒϥϦͷ
 όʔδϣϯࢦఆʹ໰୊͋Γ
 ʢpackage.jsonΛमਖ਼͠ͳ͍ͱىಈ͠ͳ͍ʣ
16. Vue NativeͳΜͯͳ͔ͬͨ
17. զΒ͕Ionic/Vue
 with Capatitor
18. Ionic/Vue with Capacitor • օ͞Μ͝ଘ஌Ionicʂ • ωΠςΟϒ෩UIίϯϙʔωϯτͱϒϦοδ
 ͱ͍͏ίϯηϓτ͕Vueͱ΋૬ੑྑ͠ʁ • @ionic/vueͷ࠷৽όʔδϣϯ͸ v0.0.4 (2019/4/3͘Β͍) • Webٕज़ͰϞόΠϧΞϓϦΛ࡞Δ
19. ຊ౰ʹಈ͘ͷʁ ৮Γ৺஍͸ʁ
20. Let’s Tryʂ
21. Ionic/Vueで
 Webをやってみよう
22. 大まかな流れ • ී௨ͷVueͷϓϩδΣΫτΛ࡞Δ←ॏཁ • @Ionic/VueΛ௥Ճͯ͠ΰχϣΔ • ίʔυΛॻ͘ • ionic capatitor add • npx cap copy xxx, npx cap open xxx • Xcodeͱ͔ͰϏϧυͯ͠υϯʂ
23. Ionic cli ͷstart ίϚϯυʹ typeࢦఆ͋Δͷ஌Βͳ͔ͬͨͷͰ
24. Vueのプロジェクトを作る
25. Vueのプロジェクトを作る • ࠓճ͸Vue CLI v3(UI)ͰϓϩδΣΫτΛ࡞Δ • ύοέʔδϚωʔδϟ͸npmΛબΜͰ͓͘ͱΑ͍ • yarnͰ࡞ͬͯ΋npm install @ionic/vue ͞ΕΔ • ଞ͸͓޷ΈͰઃఆͯ͠࡞੒ͯ͠׬ྃʂ
26. vue-cli-plugin-ionicを追加する
27. vue-cli-plugin-ionicを追加する • Ionic team͕࡞ͬͨϓϥάΠϯ • @ionic/vue ͕Πϯετʔϧ͞ΕΔ • Vueʹ@ionic/vueΛΠϯϙʔτ͢ΔͨΊͷ
 jsϑΝΠϧΛࣗಈੜ੒ͳͲ
28. vue-routerを追加する • @ionic/vue ͕ґଘ͍ͯ͠ΔͷͰΠϯετʔϧඞਢ • router.js ͷத਎͸ @ionic/vue ͷ IonicVueRouter ʹࠩ͠ସ͑Δ
29. Ionic Vue Router • Vue RouterΛIonic͕Wrapͨ͠΋ͷ • NativeͬΆ͍ભҠΞχϝʔγϣϯ͕ൃੜ͢Δ • VueRouterͷ୅ΘΓʹIonic Vue RouterΛ஫ೖ͢Δ • <vue-router> Λ <ion-vue-router> ʹஔ͖׵͑Δ • <router-link>͸ͦͷ·· • ৄࡉ͸ޙड़ͷࢀߟจݙݟͯ
30. Լ४උOK ίʔυॻ͍͍͖ͯ
31. Ionic/Vueのコーディングについて • <ion-app>Ͱ࢝ΊΔ • <ion-header>, <ion-content>͋ͨΓΛΑ͠ͳʹ • AngularͰ΍Δ͜ͱͱ͍͍ͩͨҰॹ
32. ਆࢿྉ͋Δ͔ΒͦͬͪΈͯ
33. 神資料 • Announcing the Ionic Vue Beta | The Ionic Blog
 https://ionicframework.com/blog/announcing-the-ionic-vue- beta/ • @ionic/vue Ͱ Web ΞϓϦΛ࡞ͬͯΈΔ - Speaker Deck
 https://speakerdeck.com/mikakane/vue-de-web-apuriwozuo- tutemiru
34. ಈ͍ͨʂ
35. ちょっとごにょった
36. 感想：驚くほどVueそのまま • VueͷγϯλοΫε͕ͦͷ··௨༻͢Δ • templateͷγϯλοΫεɺ
 scriptͷॻ͖ํͳͲͳͲຊ౰ʹVueͦͷ·· • IonicͷίϯϙʔωϯτΛ࢖͏ײ৮͸
 UIϑϨʔϜϫʔΫΛ࢖͏ײ֮ͳͷͰී௨
37. Yak：ページコンポーネントとion-app • ion-vue-routerΛ࣋ͭϧʔτίϯϙʔωϯτɺ
 ֤ϖʔδίϯϙʔωϯτ૒ํ ion-app ͕ඞཁͬΆ͍ • ϧʔτίϯϙʔωϯτʹͳ͍ͱͳʹ΋දࣔ͞Εͳ͍ • ϖʔδίϯϙʔωϯτʹͳ͍ͱ ion-content͕දࣔ͞Εͳ͍
39. Capacitorしてみよう
40. Ionicͩ͠ ࣋ͬͯΔͷiPhoneͩ͠ ͱΓ͋͑ͣiOSͰಈ͘Α͏ʹ͍ͨ͠ʂ
41. 罠：こいつは中身がないので使っちゃ駄目
42. 備考：中身のないVue CLI Plugin • Vue CLI UIͷPlugin͸
 vue-cli-.* ͳnpm package͔Βݕࡧ͍ͯ͠Δ • ಛʹϑΟϧλϦϯάػೳͳͲͳ͠ • ໊લ͚ͩ֬อͨ͠ϓϥάΠϯଟ਺ • Vue-cli-plugin-capacitor ΋ͦͷͻͱͭ
43. టष͘ʁ͍͖·͠ΐ͏ `ionic capacitor add`͢Ε͹͓̺
44. IonicでNative Applicationを作るには • Ionic/Vueͷ Readme.mdࢀর
45. ionic capacitor add したい • ionic.config.json ͕ͳͯ͘ίέΔʁ • ionic init ͢Δ • @ionic/vue ͷυΩϡϝϯτʹݟ͔ͭΒͳ͍͚Ͳ
 ionic.config.jsonੜ੒ʹඞཁͬΆ͍ʁ
46. ionic capacitor add したい • ࣮ߦ͢Δͱ npm i --save -E @capacitor/core ͢Δ • yarn projectͰ΋ npm I ͞ΕΔ…… • wwwσΟϨΫτϦ͕ͳͯ͘͠͵ • VueͷσϑΥϧτϏϧυઌ͸dist • ͱΓ· capacitor.config.json͕ੜ੒͞ΕΔ
47. capatitor.config.json の修正 • VueͷσϑΥϧτϏϧυઌ͸ www Ͱ͸ͳ͘dist • capatitor.config.jsonͷ
 webDir Λ www → dist ʹมߋ උߟʣVueͷConfigͰϏϧυઌΛwwwʹͯ͠΋Α͍
48. ionic capacitor add する • ઌʹ npm run build ͰVueϓϩδΣΫτΛϏϧυ • ionic capacitor add ੒ޭʂ • Ҏ߱͸ VueͷϏϧυˠ npx cap copy xxxͰΑ͍ • `npm run build; npx cap copy ios` Λ
 scriptʹొ࿥ͱ͔͢Δͱศར
49. npx cap open iosする • Xcode্ཱ͕͕ͪΔͷͰϏϧυͯ͠ΈΔ • CocoaPods͕ೖͬͯͳ͔ͬͨΒΠϯετʔϧ • ݹ͍ͱΞοϓσʔτ͕ཁΔ͔΋
50. ಈ͍ͨʂ
51. Μʁ
52. εςʔλεόʔ؏௨͠ͱΔ…… ηʔϑΤϦΞͱ͸ͳΜͩͬͨͷ͔ ʢiPhone Xܥ͸ϑολʔ΋؏௨ʣ
53. Yak:Status Bar 貫通問題 • <meta name=“viewport”>ͷ໰୊Β͍͠ • VueϓϩδΣΫτͷpublic/index.html Λमਖ਼ • content="viewport-fit=cover, width= … • https://github.com/ionic-team/ionic/issues/ 13294#issuecomment-341086964
54. ௚ͬͨʂ
55. Yak:Status Bar 貫通とヘッダー • metaࢦఆ͋ͬͯ΋
 <ion-header> ͕ͳ͍ͱ؏௨͢ΔͬΆ͍ʁ
56. σϞΕΔ͔ͳʁ
57. ࠓճ͸͜͜·Ͱʂ ࢲʹ΋ωΠςΟϒΞϓϦ͕࡞ΕͨϠολʔʂ
58. 備考）ionic capacitor copy • npx cap copy xxx ͱҰॹʁ
59. 備考）ionic capacitor run • ಈ͖·ͤΜ • ionic:build ͳΜͯͳ͍Αʂ
60. 宿題：今回やらなかったこと • v-bindͷόΠϯσΟϯά΋ͪΌΜͱͰ͖ΔΒ͍͠ • γϣʔτϋϯυʹ͸ରԠ͍ͯ͠ͳ͍ͱͷ͜ͱ • Vuex΋࢖͑Δͦ͏Ͱ͢ • Πϕϯτॲཧͱ͔΋୺ંΓ·ͨ͠
61. 感想と余談
62. Ionic/Vueすごい！！ • Ionic೉͍͠ͱࢥ͚ͬͯͨͲ
 Angular͕೉͔ͬͨ͠໛༷ • ͭ·Γࢲ͕ΫιࡶڕφϝΫδ • ׳ΕͯΔϑϨʔϜϫʔΫͷύϥμΠϜͰ
 ωΠςΟϒΞϓϦ͕࡞ΕΔͷຊ౰ʹ࠷ߴ
63. 余談：プッシュ通知という題材悪かった説 • ϓογϡ௨஌ͬͯ΋͔ͯ͠͠ҙ֎ͱςΫ͍ʁ • v3ͷͱ͖ʹ௅ઓͯ͠࠳ંͨ͠ͷ͸
 @firebase/messaging? fcm? ܕνΣοΫ͔͕ͩ߹Θͳͯ͘
 ͦ΋ͦ΋ϏϧυͰ͖ͳ͔ͬͨ • cordovaϓϥάΠϯ͸͋Δ͚Ͳ
 capacitorͷϓϥάΠϯ͸·ͩͳ͍ͬΆ͍ʁ
64. Firebase Cloud Messagingと私 • ϓϩϏδϣχϯάͷొ࿥ͱ͔ΊͪΌͪ͘Όେม • υΩϡϝϯτΛಡΈͭͭͲ͏ʹ͔͜͏ʹ͔ • AppDelegate.swiftΛΰϦΰϦͬͱ • firebase/messaging Λ pod installͨ͠Γͱ͔΋ͨ͠ • τʔΫϯొ࿥·Ͱ͸Ͱ͖ͨ • ςετૹ৴ͯ͠΋ड৴Ͱ͖ͣ……
65. @ionic-native/firebaseとVue • ͦΕ͸ͦΕͱͯ͠@ionic-native/firebase@4 ͕
 Angular/core ʹґଘͯ͠Δʁ • ionic/vue೿ͱͯ͠͸೗Կͱ΋͠೉͍
66. 続：Push通知と私 • ࠷ऴతʹׂͱݪ࢝తͳίʔυʹͯ͠
 Pusher.app͔ΒΆͪͬͱ
67. …t…tada!!!
68. Vue΋͍͍ͧʂ
69. 会場からの補足：CapacitorのPush通知 • CapacitorͷPush௨஌͸؆୯ͩΑʂ • https://capacitor.ionicframework.com/docs/apis/push- notifications/ • https://capacitor.ionicframework.com/docs/guides/push- notifications-firebase
70. Q&Aタイム • Q.Angular͸rx-js ʹґଘͯ͠Δ͚ͲVueͩͱͲ͏ͳΔʁ • A.rx-jsೖΕΕ͹େৎ෉ͳͷ͔ͳʁ
 ΍ͬͯΈͳ͍ͱΑ͘Θ͔Βͳ͍Ͱ͢ʂ • ΋͏Ұݸ࣭໰͚͋ͬͨͲࣦ೦ʂ