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
40
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
86
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
770
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
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
120
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
230
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
890
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Other Decks in Technology
See All in Technology
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
730
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
880
All you need to know about InnoDB Primary Keys
lefred
0
120
Bounded Context: Problem or Solution?
ewolff
1
210
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
5.8k
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
Featured
See All Featured
Visualization
eitanlees
146
15k
A Tale of Four Properties
chriscoyier
158
23k
KATA
mclloyd
29
14k
Designing Experiences People Love
moore
139
23k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Speed Design
sergeychernyshev
25
780
Typedesign – Prime Four
hannesfritz
40
2.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Producing Creativity
orderedlist
PRO
343
39k
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͍͍ͧʂ