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
260
Vue.jsでiOSアプリを作る方法
Capacitorを使い、Vue.jsで開発したWebアプリをiOSアプリに移植する方法をまとめました。
Hal
January 16, 2025
Tweet
Share
More Decks by Hal
See All by Hal
VitePress & MCPでアプリ仕様のオープン化に挑戦する
hal_spidernight
0
420
VitePressを2週間使ってみた感想
hal_spidernight
0
550
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
5.5k
Other Decks in Programming
See All in Programming
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
420
Flutterと Vibe Coding で個人開発!
hyshu
1
230
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
100
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
akatsukigames_tech
0
110
Go製CLIツールをnpmで配布するには
syumai
2
1.1k
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
230
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
120
What's new in Adaptive Android development
fornewid
0
140
kiroでゲームを作ってみた
iriikeita
0
150
Reactの歴史を振り返る
tutinoko
1
170
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
120
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
880
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Music & Morning Musume
bryan
46
6.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Fireside Chat
paigeccino
38
3.6k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
750
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
A Modern Web Designer's Workflow
chriscoyier
695
190k
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のほうが良いかもしれない
ご清聴ありがとうございました!