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
290
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
440
VitePressを2週間使ってみた感想
hal_spidernight
0
600
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
5.7k
Other Decks in Programming
See All in Programming
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
420
楽して成果を出すためのセルフリソース管理
clipnote
0
180
個人軟體時代
ethanhuang13
0
330
Swift Updates - Learn Languages 2025
koher
2
490
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
540
🔨 小さなビルドシステムを作る
momeemt
4
690
為你自己學 Python - 冷知識篇
eddie
1
350
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
旅行プランAIエージェント開発の裏側
ippo012
2
920
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
1.9k
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
460k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Designing for Performance
lara
610
69k
How to Ace a Technical Interview
jacobian
279
23k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
For a Future-Friendly Web
brad_frost
180
9.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
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のほうが良いかもしれない
ご清聴ありがとうございました!