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
21
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
76
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
710
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
99
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
220
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/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
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
120
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
470
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
740
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.6k
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
現地でMeet Upをやる場合の注意点〜反省点を添えて〜
shotashiratori
0
530
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
21
3.4k
신뢰할 수 있는 AI 검색 엔진을 만들기 위한 Liner의 여정
huffon
0
350
AIを駆使したゲーム開発戦略: 新設AI組織の取り組み / sge-ai-strategy
cyberagentdevelopers
PRO
1
130
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
470
「視座」の上げ方が成人発達理論にわかりやすくまとまってた / think_ perspective_hidden_dimensions
shuzon
2
4.1k
Featured
See All Featured
Being A Developer After 40
akosma
86
590k
How to train your dragon (web standard)
notwaldorf
88
5.7k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
Building Adaptive Systems
keathley
38
2.2k
What's in a price? How to price your products and services
michaelherold
243
12k
Building an army of robots
kneath
302
42k
How STYLIGHT went responsive
nonsquared
95
5.2k
How GitHub (no longer) Works
holman
311
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
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͍͍ͧʂ