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
79
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
130
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
880
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
150
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
250
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
940
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
360
Other Decks in Technology
See All in Technology
SOC2取得の全体像
shonansurvivors
1
350
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
260
Goを使ってTDDを体験しよう!
chiroruxx
1
250
C# 14 / .NET 10 の新機能 (RC 1 時点)
nenonaninu
1
1.4k
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
120
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
270
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
180
データエンジニアがこの先生きのこるには...?
10xinc
0
430
BirdCLEF+2025 Noir 5位解法紹介
myso
0
180
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
160
Sidekiq その前に:Webアプリケーションにおける非同期ジョブ設計原則
morihirok
17
7.1k
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
360
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
A better future with KSS
kneath
239
17k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Thoughts on Productivity
jonyablonski
70
4.9k
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͍͍ͧʂ