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
490
VitePress & MCPでアプリ仕様のオープン化に挑戦する
hal_spidernight
0
490
VitePressを2週間使ってみた感想
hal_spidernight
0
640
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
5.9k
Other Decks in Programming
See All in Programming
Software Architecture
hschwentner
6
2.3k
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
740
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
190
Le côté obscur des IA génératives
pascallemerrer
0
150
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
CSC509 Lecture 07
javiergs
PRO
0
240
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
350
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
100
EMこそClaude Codeでコード調査しよう
shibayu36
0
300
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
130
Developer Joy - The New Paradigm
hollycummins
1
330
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Done Done
chrislema
185
16k
Building Applications with DynamoDB
mza
96
6.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Designing for humans not robots
tammielis
254
26k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
RailsConf 2023
tenderlove
30
1.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
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のほうが良いかもしれない
ご清聴ありがとうございました!