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
2k
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
70
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
120
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
850
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
170
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
140
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
240
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
930
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Other Decks in Technology
See All in Technology
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
1
130
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
550
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
190
AIを使っていい感じにE2Eテストを書けるようになるまで / Trying to Write Good E2E Tests with AI
katawara
2
1.6k
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
0
130
スプリントレビューを効果的にするために
miholovesq
9
1.6k
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
310
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
1
680
AI工学特論: MLOps・継続的評価
asei
10
1.5k
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
helosshi
1
210
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.1k
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
11
3.2k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Cult of Friendly URLs
andyhume
79
6.5k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
GitHub's CSS Performance
jonrohan
1031
460k
Become a Pro
speakerdeck
PRO
29
5.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
990
Fireside Chat
paigeccino
37
3.5k
Building Adaptive Systems
keathley
43
2.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Producing Creativity
orderedlist
PRO
346
40k
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͍͍ͧʂ