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.jsでiOSアプリを作る方法
Search
Hal
January 16, 2025
Programming
0
310
Vue.jsでiOSアプリを作る方法
Capacitorを使い、Vue.jsで開発したWebアプリをiOSアプリに移植する方法をまとめました。
Hal
January 16, 2025
Tweet
Share
More Decks by Hal
See All by Hal
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
450
VitePress & MCPでアプリ仕様のオープン化に挑戦する
hal_spidernight
0
470
VitePressを2週間使ってみた感想
hal_spidernight
0
620
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
5.8k
Other Decks in Programming
See All in Programming
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.6k
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
220
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.1k
CSC509 Lecture 05
javiergs
PRO
0
290
Le côté obscur des IA génératives
pascallemerrer
0
120
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
220
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3k
Advance Your Career with Open Source
ivargrimstad
0
330
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.1k
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
350
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Faster Mobile Websites
deanohume
310
31k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
It's Worth the Effort
3n
187
28k
KATA
mclloyd
32
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Producing Creativity
orderedlist
PRO
347
40k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Transcript
Vue.jsでiOSアプリを 作る方法 Hal
Webアプリをそのまま iOS・Androidのネイティブアプリに 移植したい! 🍎👾
React→ React Native Vue→?
昔はNativeScriptやVueNative。 今は?
WebViewベースで素早く移植 →Capacitor ネイティブコンポーネントで開発 →NativeScript
Capacitorを使ってみる
Capacitorとは... WebアプリをWebViewベースのネイティブアプリとして ビルドするライブラリ。 Cordovaの後継ライブラリなのでプラグイン互換性が高 い。 PWAのビルドもできる。
Capacitorにできること • WebViewベースでの素早い移植 • 多様な公式プラグインの利用
早速導入してみる
1.既存のVueプロジェクトに Capacitor Core,CLIをインストール 導入手順 yarn add @capacitor/core yarn add -D
@capacitor/cli 2.capacitorのiOSプラグインをインストール yarn add @capacitor/ios //Web側のコードを変更した時は以下を実行して同期 npx cap sync
3.iOS用テンプレートの追加・ビルド実行 導入手順 npx add cap ios 4.XCode・シミュレータで動作チェック npx cap open
ios //XCodeで開く npx cap run ios //シミュレータを起動
プラグインで機能を拡張できる!
1.任意のプラグインをインストール プラグインの利用方法 yarn add @capacitor/geolocation //位置情報プラグイン npx cap sync 2.Info.plist
に必要な権限を追記する iOSではInfo.plistに記載しなければ利用できない機能が 複数存在する。
バックグラウンドタスクやプッシュ通知のような ネイティブアプリならではのプラグインも提供されている。
1.WebViewベースのアプリは構造によってストア審査落ちの可能性がある 注意点 2.ネイティブアプリでは Info.plist等利用する機能権限の記載も必要 →AndoirdならAndroidManifest.xml 3. 機能によってはパフォーマンスがやや低くなる、動きがもっさりする →Capacitorでは一部のみネイティブコンポーネントを利用できる →利用シーンによっては NativeScriptのほうが良いかもしれない
ご清聴ありがとうございました!