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

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

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

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

69b4dadef85efe143ac825b62d36ed7c?s=128

果物リン

June 02, 2019
Tweet

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. 前提1.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͕ݱΕͨ

  13. None
  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͕දࣔ͞Εͳ͍
  38. None
  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ೖΕΕ͹େৎ෉ͳͷ͔ͳʁ
 ΍ͬͯΈͳ͍ͱΑ͘Θ͔Βͳ͍Ͱ͢ʂ • ΋͏Ұݸ࣭໰͚͋ͬͨͲࣦ೦ʂ