Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vueでネイティブアプリを作る-Ionic_Vueの紹介/Invitation @Ionic_Vue
Search
果物リン
June 24, 2019
Technology
2
1.9k
Vueでネイティブアプリを作る-Ionic_Vueの紹介/Invitation @Ionic_Vue
Vueでネイティブアプリの作り方ってご存知ですか?
今回はWebの技術でネイティブアプリを作れるIonic/Vueってやつをご紹介!
果物リン
June 24, 2019
Tweet
Share
More Decks by 果物リン
See All by 果物リン
Electron+Vue+Swift=真のデスクトップアプリ / How to create "Really" desktop app using Electron
fruitriin
0
23
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
79
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
720
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.4k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
150
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
100
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
230
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
870
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Other Decks in Technology
See All in Technology
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
390
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
250
AWS Lambda のトラブルシュートをしていて思うこと
kazzpapa3
2
180
Terraform Stacks入門 #HashiTalks
msato
0
360
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
The Rise of LLMOps
asei
7
1.7k
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
390
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
1.3k
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
760
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Gamification - CAS2011
davidbonilla
80
5k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Building Applications with DynamoDB
mza
90
6.1k
Transcript
Vueでネイティブアプリ -Ionic Vueの紹介 ՌϦϯ@FruitRiin גࣜձࣾΏΊΈ 2019/06/24 Ginza.js #2
Vue͖Ͱ͔͢ʁ
VueͰNativie։ൃͬͯ Ͱ͖ͦ͏Ͱ͔͢ʁ
VueとNative • ReactʹReact Native͕͋Δ • VueʹWeex͍ͬͯ͏͕ͭެࣜͰ͋Δ • Vue Nativeϊʔνϟϯ͔ͩΒΕΑ͏
Weex is … • VueͷίʔυΛωΠςΟϒίʔυʹม͢Δ ʢWeex-Vue-Renderʣ • DOMBOMʢϒϥβɾΦϒδΣΫτɾϞσϧʣ͕ͳ͍ • ҰԠ࠷৽v1.0.26ʢ2018/12/09ʣ
• Λฉ͔ͳ͍
େৎͳͷ͜Εʁ
Ionic ܑ͓͞Μ ʮ࠷ۙIonic/Vueͬͯͷ͕ग़ͨΜ͚ͩͲ ͬͯΈͳΑʂʯ
ɺ·ͨ·ͨ͝ஊΛ
ʮͯ͜ͱͰొஃΑΖ͘͠Ͷʂʯ
ͳɺͳΜͩͬͯʔʂ ˎIonic Meetup ̎̌Γ·ͨ͠
VueͰωΠςΟϒΞϓϦΛ࡞Δ Ionic/Vueͷ͝հ
自己紹介 • ՌϦϯ@FruitRiin • ϑϩϯτΤϯδχΞ • גࣜձࣾΏΊΈ • ͍ͭͷ·ʹ͔ϦʔυΤϯδχΞ •
Vue͍͍ͧ • ࠷ۙIonic/Vue͍͍ͧΛ͍ͯ͠Δ
Ionicとは • Webͷٕज़ͰωΠςΟϒΞϓϦΛ࡞Δ • iOS, Android, Electron • શ෦WebView্ͰΑ͠ͳʹ͢Δ •
IonicϞόΠϧωΠςΟϒ෩UIίϯϙʔωϯτηοτ • v4͔Β Web Components • ωΠςΟϒAPIͱͷϒϦοδΛCapacitorͱ͔Cordova͕Δ
Ionicとフロントエンドフレームワーク • v3·ͰAngularͱζο༑ͩͬͨ • v4ͰWeb ComponentsʹҠߦɺ ϑϨʔϜϫʔΫΛબͳ͘ͳͬͨ • Ionic/Vue
v0.0.1, βͱ͍͏Ґஔ͚͚ͮͩͲָ͍͠ • Ionic/React v0.0.4
Web։ൃͷύϥμΠϜͦͷ·· ʴωΠςΟϒAPIίʔϧ
ネイティブAPIコールはこんな感じ
デモりたかった気持ち
Ͱ͍͠ΜͰ͠ΐ͏ʁ
iOSΞϓϦΛ࡞ΔྲྀΕΛ֓આ
1.Vueのプロジェクトを作る
2.Vue Routerを入れる
3.Ionic Pluginを入れる
4.ビルド先をwwwに変えてビルド • ͜ͷ͋ͱ npm build ͢Δ
5.npx ionic init する
6.npx ionic capacitor add ios する
7.cocoapodsがなければインストール • iOSϥΠϒϥϦཧπʔϧʮCocoaPodsʯͷ༻ํ๏ - Qiita https://qiita.com/satoken0417/items/479bcdf91cff2634ffb1 • ↑ͱ͔ࢀߟʹదʹΠϯετʔϧ
8.npx cap open iosする
9.ビルドをぽちっとな
͜ɺ͍ͭ͜ɺ͏ͧ͘͝ʂ
以降のポイント • UIίϯϙʔωϯτۃྗIonicͷίϯϙʔωϯτΛ͏ • ωΠςΟϒAPIΛίʔϧ͢Δͱ͖ Capacitor IonicͷυΩϡϝϯτΛಡΉ • εςʔλεόʔ؏௨͢ΔͷͰ͝ʹΐΔˎ •
ڻ͘΄ͲVueͰ͢
っていう記事を書きました • ڵຯ͕͋Εੋඇ͝ཡ͍ͩ͘͞ • Ionic/Vue ͰiOSΞϓϦέʔγϣϯΛ࡞Δ - Qiita https://qiita.com/fruitriin/items/ 8fe0865fc4ea548e5952
まとめ • Ionic/VueͰωΠςΟϒΞϓϦ࡞Δͷ؆୯ • v0.0.1͚ͩͲ݁ߏ໘ന͍͜ͱ͕Ͱ͖Δ • IonicͦͷͷͪΌΜͱྺ࢙͋Δ • WebΤϯδχΞ͕ωΠςΟϒAPIΛ ͍ͨ͘ͳͬͨͱ͖ͷબࢶͱͯ͠Ͳ͏ͧ
Ionic/Vue͍͍ͧʂ