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
280
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
430
VitePressを2週間使ってみた感想
hal_spidernight
0
580
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
5.7k
Other Decks in Programming
See All in Programming
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
300
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
1.4k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
210
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
18
9.8k
Testing Trophyは叫ばない
toms74209200
0
680
TDD 実践ミニトーク
contour_gara
1
290
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
150
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.3k
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
4
1.6k
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
110
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
110
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
270
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Fireside Chat
paigeccino
39
3.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
How STYLIGHT went responsive
nonsquared
100
5.8k
Visualization
eitanlees
148
16k
Designing for Performance
lara
610
69k
GitHub's CSS Performance
jonrohan
1032
460k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Thoughts on Productivity
jonyablonski
70
4.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
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のほうが良いかもしれない
ご清聴ありがとうございました!