Tweet
Tweet

Slide 1

Slide 1 text

Ionic/Vueで
 Capacitorって
 ぶっちゃけどうなの？ Ռ෺Ϧϯ@FruitRiin גࣜձࣾΏΊΈ 2019/6/2 Ionic Meetup #11 Tokyo

Slide 2

Slide 2 text

! Ionic/Angular ͥΜͥΜΘ͔ΒΜ

Slide 3

Slide 3 text

自己紹介 • Ռ෺Ϧϯ@FruitRiin • גࣜձࣾΏΊΈ - ೖࣾ̐ϲ݄ • Vue/NuxtͷΤϯδχΞɺνʔϜϦʔμʔɺPMʁ • Ionic v3৮ͬͯ1ճ࠳ં͠·ͨ͠ ! • Vue͸͍͍ͧ

Slide 4

Slide 4 text

あじぇんだ • VueͰͷNativeΛऔΓר͘ݱঢ় • Ionic/VueͰWebΛ΍ͬͯΈΑ͏ • Capacitorͯ͠ΈΑ͏ • ײ૝ͱ༨ஊ

Slide 5

Slide 5 text

VueでのNativeを 取り巻く現状

Slide 6

Slide 6 text

前提１．Ionic/VueでWebは結構イケる • ઌۦऀ͕͍·͢ • ଟ෼݄̎ͷIonic UG • ΊͬͪΌࢀߟʹͳΔ

Slide 7

Slide 7 text

લఏ̎ɽVue͸Nativeۤख

Slide 8

Slide 8 text

VueެࣜNativeͱ͍͑͹Weex

Slide 9

Slide 9 text

Weex • VueνʔϜ͕ެࣜʹαϙʔτ͍ͯ͠Δ • apache͕ϗετͯ͠Δʢͳͥʁ • ࠷৽ϦϦʔελά͸ v1.0.26 (2018/12/29) • ҰԠϚτϞʹಈ͘Β͍͕͠ͱʹ͔͘࿩୊ʹͳΒͳ͍ • Ή͠ΖࢮΜͰΔͱࢥͬͯͨΒੜ͖ͯͯϏϏΔ

Slide 10

Slide 10 text

Weex Weeks • DOMͰ͸ͳ͘Nativeίʔυʹม׵͢ΔΒ͍͠ • DOMґଘͷίʔυ͕શ໓͢Δ • eg: document.querySelector() • BOM(Browser Object Model)͕ͳ͍ • document, window, screen ΦϒδΣΫτ͕ͳ͍ • WXEnvironment ͳΔΦϒδΣΫτ͕͋ΔΒ͍͠ • ͦͷଞɺNativeσόΠεΛίʔϧ͢ΔAPI͕ੜ͍͑ͯΔ໛༷

Slide 11

Slide 11 text

ͱʹ͔͘ࣄྫগͳ͍

Slide 12

Slide 12 text

200X೥ɺੈքʹ Vue Native͕ݱΕͨ

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Vue Native • ͳΜͱReact NativeΛ
 VueͰϥοϓͨ͠େ୾ͳઃܭʂ • Expoͱ͔͍ͭͯ͘Δ • ࠷৽ϦϦʔελά͸v0.0.1(2018/8/1)

Slide 15

Slide 15 text

ґଘϥΠϒϥϦͷ
 όʔδϣϯࢦఆʹ໰୊͋Γ
 ʢpackage.jsonΛमਖ਼͠ͳ͍ͱىಈ͠ͳ͍ʣ

Slide 16

Slide 16 text

Vue NativeͳΜͯͳ͔ͬͨ

Slide 17

Slide 17 text

զΒ͕Ionic/Vue
 with Capatitor

Slide 18

Slide 18 text

Ionic/Vue with Capacitor • օ͞Μ͝ଘ஌Ionicʂ • ωΠςΟϒ෩UIίϯϙʔωϯτͱϒϦοδ
 ͱ͍͏ίϯηϓτ͕Vueͱ΋૬ੑྑ͠ʁ • @ionic/vueͷ࠷৽όʔδϣϯ͸ v0.0.4 (2019/4/3͘Β͍) • Webٕज़ͰϞόΠϧΞϓϦΛ࡞Δ

Slide 19

Slide 19 text

ຊ౰ʹಈ͘ͷʁ ৮Γ৺஍͸ʁ

Slide 20

Slide 20 text

Let’s Tryʂ

Slide 21

Slide 21 text

Ionic/Vueで
 Webをやってみよう

Slide 22

Slide 22 text

大まかな流れ • ී௨ͷVueͷϓϩδΣΫτΛ࡞Δ←ॏཁ • @Ionic/VueΛ௥Ճͯ͠ΰχϣΔ • ίʔυΛॻ͘ • ionic capatitor add • npx cap copy xxx, npx cap open xxx • Xcodeͱ͔ͰϏϧυͯ͠υϯʂ

Slide 23

Slide 23 text

Ionic cli ͷstart ίϚϯυʹ typeࢦఆ͋Δͷ஌Βͳ͔ͬͨͷͰ

Slide 24

Slide 24 text

Vueのプロジェクトを作る

Slide 25

Slide 25 text

Vueのプロジェクトを作る • ࠓճ͸Vue CLI v3(UI)ͰϓϩδΣΫτΛ࡞Δ • ύοέʔδϚωʔδϟ͸npmΛબΜͰ͓͘ͱΑ͍ • yarnͰ࡞ͬͯ΋npm install @ionic/vue ͞ΕΔ • ଞ͸͓޷ΈͰઃఆͯ͠࡞੒ͯ͠׬ྃʂ

Slide 26

Slide 26 text

vue-cli-plugin-ionicを追加する

Slide 27

Slide 27 text

vue-cli-plugin-ionicを追加する • Ionic team͕࡞ͬͨϓϥάΠϯ • @ionic/vue ͕Πϯετʔϧ͞ΕΔ • Vueʹ@ionic/vueΛΠϯϙʔτ͢ΔͨΊͷ
 jsϑΝΠϧΛࣗಈੜ੒ͳͲ

Slide 28

Slide 28 text

vue-routerを追加する • @ionic/vue ͕ґଘ͍ͯ͠ΔͷͰΠϯετʔϧඞਢ • router.js ͷத਎͸ @ionic/vue ͷ IonicVueRouter ʹࠩ͠ସ͑Δ

Slide 29

Slide 29 text

Ionic Vue Router • Vue RouterΛIonic͕Wrapͨ͠΋ͷ • NativeͬΆ͍ભҠΞχϝʔγϣϯ͕ൃੜ͢Δ • VueRouterͷ୅ΘΓʹIonic Vue RouterΛ஫ೖ͢Δ • Λ ʹஔ͖׵͑Δ • ͸ͦͷ·· • ৄࡉ͸ޙड़ͷࢀߟจݙݟͯ

Slide 30

Slide 30 text

Լ४උOK ίʔυॻ͍͍͖ͯ

Slide 31

Slide 31 text

Ionic/Vueのコーディングについて • Ͱ࢝ΊΔ • , ͋ͨΓΛΑ͠ͳʹ • AngularͰ΍Δ͜ͱͱ͍͍ͩͨҰॹ

Slide 32

Slide 32 text

ਆࢿྉ͋Δ͔ΒͦͬͪΈͯ

Slide 33

Slide 33 text

神資料 • 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

Slide 34

Slide 34 text

ಈ͍ͨʂ

Slide 35

Slide 35 text

ちょっとごにょった

Slide 36

Slide 36 text

感想：驚くほどVueそのまま • VueͷγϯλοΫε͕ͦͷ··௨༻͢Δ • templateͷγϯλοΫεɺ
 scriptͷॻ͖ํͳͲͳͲຊ౰ʹVueͦͷ·· • IonicͷίϯϙʔωϯτΛ࢖͏ײ৮͸
 UIϑϨʔϜϫʔΫΛ࢖͏ײ֮ͳͷͰී௨

Slide 37

Slide 37 text

Yak：ページコンポーネントとion-app • ion-vue-routerΛ࣋ͭϧʔτίϯϙʔωϯτɺ
 ֤ϖʔδίϯϙʔωϯτ૒ํ ion-app ͕ඞཁͬΆ͍ • ϧʔτίϯϙʔωϯτʹͳ͍ͱͳʹ΋දࣔ͞Εͳ͍ • ϖʔδίϯϙʔωϯτʹͳ͍ͱ ion-content͕දࣔ͞Εͳ͍

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Capacitorしてみよう

Slide 40

Slide 40 text

Ionicͩ͠ ࣋ͬͯΔͷiPhoneͩ͠ ͱΓ͋͑ͣiOSͰಈ͘Α͏ʹ͍ͨ͠ʂ

Slide 41

Slide 41 text

罠：こいつは中身がないので使っちゃ駄目

Slide 42

Slide 42 text

備考：中身のないVue CLI Plugin • Vue CLI UIͷPlugin͸
 vue-cli-.* ͳnpm package͔Βݕࡧ͍ͯ͠Δ • ಛʹϑΟϧλϦϯάػೳͳͲͳ͠ • ໊લ͚ͩ֬อͨ͠ϓϥάΠϯଟ਺ • Vue-cli-plugin-capacitor ΋ͦͷͻͱͭ

Slide 43

Slide 43 text

టष͘ʁ͍͖·͠ΐ͏ `ionic capacitor add`͢Ε͹͓̺

Slide 44

Slide 44 text

IonicでNative Applicationを作るには • Ionic/Vueͷ Readme.mdࢀর

Slide 45

Slide 45 text

ionic capacitor add したい • ionic.config.json ͕ͳͯ͘ίέΔʁ • ionic init ͢Δ • @ionic/vue ͷυΩϡϝϯτʹݟ͔ͭΒͳ͍͚Ͳ
 ionic.config.jsonੜ੒ʹඞཁͬΆ͍ʁ

Slide 46

Slide 46 text

ionic capacitor add したい • ࣮ߦ͢Δͱ npm i --save -E @capacitor/core ͢Δ • yarn projectͰ΋ npm I ͞ΕΔ…… • wwwσΟϨΫτϦ͕ͳͯ͘͠͵ • VueͷσϑΥϧτϏϧυઌ͸dist • ͱΓ· capacitor.config.json͕ੜ੒͞ΕΔ

Slide 47

Slide 47 text

capatitor.config.json の修正 • VueͷσϑΥϧτϏϧυઌ͸ www Ͱ͸ͳ͘dist • capatitor.config.jsonͷ
 webDir Λ www → dist ʹมߋ උߟʣVueͷConfigͰϏϧυઌΛwwwʹͯ͠΋Α͍

Slide 48

Slide 48 text

ionic capacitor add する • ઌʹ npm run build ͰVueϓϩδΣΫτΛϏϧυ • ionic capacitor add ੒ޭʂ • Ҏ߱͸ VueͷϏϧυˠ npx cap copy xxxͰΑ͍ • `npm run build; npx cap copy ios` Λ
 scriptʹొ࿥ͱ͔͢Δͱศར

Slide 49

Slide 49 text

npx cap open iosする • Xcode্ཱ͕͕ͪΔͷͰϏϧυͯ͠ΈΔ • CocoaPods͕ೖͬͯͳ͔ͬͨΒΠϯετʔϧ • ݹ͍ͱΞοϓσʔτ͕ཁΔ͔΋

Slide 50

Slide 50 text

ಈ͍ͨʂ

Slide 51

Slide 51 text

Μʁ

Slide 52

Slide 52 text

εςʔλεόʔ؏௨͠ͱΔ…… ηʔϑΤϦΞͱ͸ͳΜͩͬͨͷ͔ ʢiPhone Xܥ͸ϑολʔ΋؏௨ʣ

Slide 53

Slide 53 text

Yak:Status Bar 貫通問題 • ͷ໰୊Β͍͠ • VueϓϩδΣΫτͷpublic/index.html Λमਖ਼ • content="viewport-fit=cover, width= … • https://github.com/ionic-team/ionic/issues/ 13294#issuecomment-341086964

Slide 54

Slide 54 text

௚ͬͨʂ

Slide 55

Slide 55 text

Yak:Status Bar 貫通とヘッダー • metaࢦఆ͋ͬͯ΋
 ͕ͳ͍ͱ؏௨͢ΔͬΆ͍ʁ

Slide 56

Slide 56 text

σϞΕΔ͔ͳʁ

Slide 57

Slide 57 text

ࠓճ͸͜͜·Ͱʂ ࢲʹ΋ωΠςΟϒΞϓϦ͕࡞ΕͨϠολʔʂ

Slide 58

Slide 58 text

備考）ionic capacitor copy • npx cap copy xxx ͱҰॹʁ

Slide 59

Slide 59 text

備考）ionic capacitor run • ಈ͖·ͤΜ • ionic:build ͳΜͯͳ͍Αʂ

Slide 60

Slide 60 text

宿題：今回やらなかったこと • v-bindͷόΠϯσΟϯά΋ͪΌΜͱͰ͖ΔΒ͍͠ • γϣʔτϋϯυʹ͸ରԠ͍ͯ͠ͳ͍ͱͷ͜ͱ • Vuex΋࢖͑Δͦ͏Ͱ͢ • Πϕϯτॲཧͱ͔΋୺ંΓ·ͨ͠

Slide 61

Slide 61 text

感想と余談

Slide 62

Slide 62 text

Ionic/Vueすごい！！ • Ionic೉͍͠ͱࢥ͚ͬͯͨͲ
 Angular͕೉͔ͬͨ͠໛༷ • ͭ·Γࢲ͕ΫιࡶڕφϝΫδ • ׳ΕͯΔϑϨʔϜϫʔΫͷύϥμΠϜͰ
 ωΠςΟϒΞϓϦ͕࡞ΕΔͷຊ౰ʹ࠷ߴ

Slide 63

Slide 63 text

余談：プッシュ通知という題材悪かった説 • ϓογϡ௨஌ͬͯ΋͔ͯ͠͠ҙ֎ͱςΫ͍ʁ • v3ͷͱ͖ʹ௅ઓͯ͠࠳ંͨ͠ͷ͸
 @firebase/messaging? fcm? ܕνΣοΫ͔͕ͩ߹Θͳͯ͘
 ͦ΋ͦ΋ϏϧυͰ͖ͳ͔ͬͨ • cordovaϓϥάΠϯ͸͋Δ͚Ͳ
 capacitorͷϓϥάΠϯ͸·ͩͳ͍ͬΆ͍ʁ

Slide 64

Slide 64 text

Firebase Cloud Messagingと私 • ϓϩϏδϣχϯάͷొ࿥ͱ͔ΊͪΌͪ͘Όେม • υΩϡϝϯτΛಡΈͭͭͲ͏ʹ͔͜͏ʹ͔ • AppDelegate.swiftΛΰϦΰϦͬͱ • firebase/messaging Λ pod installͨ͠Γͱ͔΋ͨ͠ • τʔΫϯొ࿥·Ͱ͸Ͱ͖ͨ • ςετૹ৴ͯ͠΋ड৴Ͱ͖ͣ……

Slide 65

Slide 65 text

@ionic-native/firebaseとVue • ͦΕ͸ͦΕͱͯ͠@ionic-native/firebase@4 ͕
 Angular/core ʹґଘͯ͠Δʁ • ionic/vue೿ͱͯ͠͸೗Կͱ΋͠೉͍

Slide 66

Slide 66 text

続：Push通知と私 • ࠷ऴతʹׂͱݪ࢝తͳίʔυʹͯ͠
 Pusher.app͔ΒΆͪͬͱ

Slide 67

Slide 67 text

…t…tada!!!

Slide 68

Slide 68 text

Vue΋͍͍ͧʂ

Slide 69

Slide 69 text

会場からの補足：CapacitorのPush通知 • CapacitorͷPush௨஌͸؆୯ͩΑʂ • https://capacitor.ionicframework.com/docs/apis/push- notifications/ • https://capacitor.ionicframework.com/docs/guides/push- notifications-firebase

Slide 70

Slide 70 text

Q&Aタイム • Q.Angular͸rx-js ʹґଘͯ͠Δ͚ͲVueͩͱͲ͏ͳΔʁ • A.rx-jsೖΕΕ͹େৎ෉ͳͷ͔ͳʁ
 ΍ͬͯΈͳ͍ͱΑ͘Θ͔Βͳ͍Ͱ͢ʂ • ΋͏Ұݸ࣭໰͚͋ͬͨͲࣦ೦ʂ