Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Avatar for 果物リン

果物リン

June 02, 2019
Tweet

More Decks by 果物リン

Other Decks in Technology

Transcript

  1. Weex • VueνʔϜ͕ެࣜʹαϙʔτ͍ͯ͠Δ • apache͕ϗετͯ͠Δʢͳͥʁ • ࠷৽ϦϦʔελά͸ v1.0.26 (2018/12/29) •

    ҰԠϚτϞʹಈ͘Β͍͕͠ͱʹ͔͘࿩୊ʹͳΒͳ͍ • Ή͠ΖࢮΜͰΔͱࢥͬͯͨΒੜ͖ͯͯϏϏΔ
  2. Weex Weeks • DOMͰ͸ͳ͘Nativeίʔυʹม׵͢ΔΒ͍͠ • DOMґଘͷίʔυ͕શ໓͢Δ • eg: document.querySelector() •

    BOM(Browser Object Model)͕ͳ͍ • document, window, screen ΦϒδΣΫτ͕ͳ͍ • WXEnvironment ͳΔΦϒδΣΫτ͕͋ΔΒ͍͠ • ͦͷଞɺNativeσόΠεΛίʔϧ͢ΔAPI͕ੜ͍͑ͯΔ໛༷
  3. Ionic Vue Router • Vue RouterΛIonic͕Wrapͨ͠΋ͷ • NativeͬΆ͍ભҠΞχϝʔγϣϯ͕ൃੜ͢Δ • VueRouterͷ୅ΘΓʹIonic

    Vue RouterΛ஫ೖ͢Δ • <vue-router> Λ <ion-vue-router> ʹஔ͖׵͑Δ • <router-link>͸ͦͷ·· • ৄࡉ͸ޙड़ͷࢀߟจݙݟͯ
  4. 神資料 • 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
  5. 備考:中身のないVue CLI Plugin • Vue CLI UIͷPlugin͸
 vue-cli-.* ͳnpm package͔Βݕࡧ͍ͯ͠Δ

    • ಛʹϑΟϧλϦϯάػೳͳͲͳ͠ • ໊લ͚ͩ֬อͨ͠ϓϥάΠϯଟ਺ • Vue-cli-plugin-capacitor ΋ͦͷͻͱͭ
  6. ionic capacitor add したい • ionic.config.json ͕ͳͯ͘ίέΔʁ • ionic init

    ͢Δ • @ionic/vue ͷυΩϡϝϯτʹݟ͔ͭΒͳ͍͚Ͳ
 ionic.config.jsonੜ੒ʹඞཁͬΆ͍ʁ
  7. ionic capacitor add したい • ࣮ߦ͢Δͱ npm i --save -E

    @capacitor/core ͢Δ • yarn projectͰ΋ npm I ͞ΕΔ…… • wwwσΟϨΫτϦ͕ͳͯ͘͠͵ • VueͷσϑΥϧτϏϧυઌ͸dist • ͱΓ· capacitor.config.json͕ੜ੒͞ΕΔ
  8. ionic capacitor add する • ઌʹ npm run build ͰVueϓϩδΣΫτΛϏϧυ

    • ionic capacitor add ੒ޭʂ • Ҏ߱͸ VueͷϏϧυˠ npx cap copy xxxͰΑ͍ • `npm run build; npx cap copy ios` Λ
 scriptʹొ࿥ͱ͔͢Δͱศར
  9. 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
  10. Firebase Cloud Messagingと私 • ϓϩϏδϣχϯάͷొ࿥ͱ͔ΊͪΌͪ͘Όେม • υΩϡϝϯτΛಡΈͭͭͲ͏ʹ͔͜͏ʹ͔ • AppDelegate.swiftΛΰϦΰϦͬͱ •

    firebase/messaging Λ pod installͨ͠Γͱ͔΋ͨ͠ • τʔΫϯొ࿥·Ͱ͸Ͱ͖ͨ • ςετૹ৴ͯ͠΋ड৴Ͱ͖ͣ……