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
98
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
4.4k
Other Decks in Programming
See All in Programming
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
280
Pulsar2 を雰囲気で使ってみよう
anoken
0
190
2025.01.17_Sansan × DMM.swift
riofujimon
3
690
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
180
traP の部内 ISUCON とそれを支えるポータル / PISCON Portal
ikura_hamu
0
240
asdf-ecspresso作って 友達が増えた話 / Fujiwara Tech Conference 2025
koluku
0
2.5k
Package Traits
ikesyo
2
230
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
12
6.1k
Linux && Docker 研修/Linux && Docker training
forrep
23
4.2k
Lookerは可視化だけじゃない。UIコンポーネントもあるんだ!
ymd65536
1
150
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.2k
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.1k
Featured
See All Featured
KATA
mclloyd
29
14k
A Philosophy of Restraint
colly
203
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
620
RailsConf 2023
tenderlove
29
980
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
230
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
380
Into the Great Unknown - MozCon
thekraken
34
1.6k
Typedesign – Prime Four
hannesfritz
40
2.5k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
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のほうが良いかもしれない
ご清聴ありがとうございました!