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
220
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
270
VitePressを2週間使ってみた感想
hal_spidernight
0
500
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
5.4k
Other Decks in Programming
See All in Programming
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
190
生成AIで日々のエラー調査を進めたい
yuyaabo
0
650
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
690
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
410
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.6k
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
260
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
190
Gleamという選択肢
comamoca
6
760
VS Code Update for GitHub Copilot
74th
1
390
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
360
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Music & Morning Musume
bryan
46
6.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
GitHub's CSS Performance
jonrohan
1031
460k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.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のほうが良いかもしれない
ご清聴ありがとうございました!