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
130
Vue.jsでiOSアプリを作る方法
Capacitorを使い、Vue.jsで開発したWebアプリをiOSアプリに移植する方法をまとめました。
Hal
January 16, 2025
Tweet
Share
More Decks by Hal
See All by Hal
VitePressを2週間使ってみた感想
hal_spidernight
0
110
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
4.4k
Other Decks in Programming
See All in Programming
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
100
Immutable ActiveRecord
megane42
0
130
はてなにおけるfujiwara-wareの活用やecspressoのCI/CD構成 / Fujiwara Tech Conference 2025
cohalz
3
4.6k
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
130
『品質』という言葉が嫌いな理由
korimu
0
130
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
ecspresso, ecschedule, lambroll を PipeCDプラグインとして動かしてみた (プロトタイプ) / Running ecspresso, ecschedule, and lambroll as PipeCD Plugins (prototype)
tkikuc
2
3.6k
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
540
時計仕掛けのCompose
mkeeda
1
260
Domain-Driven Transformation
hschwentner
2
1.9k
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
200
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Six Lessons from altMBA
skipperchong
27
3.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
250
Bash Introduction
62gerente
610
210k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Agile that works and the tools we love
rasmusluckow
328
21k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
1.9k
The Language of Interfaces
destraynor
156
24k
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のほうが良いかもしれない
ご清聴ありがとうございました!