Vue.jsでiOSアプリを作る方法

Capacitorを使い、Vue.jsで開発したWebアプリをiOSアプリに移植する方法をまとめました。

Transcript

1. Vue.jsでiOSアプリを 作る方法 Hal
2. Webアプリをそのまま iOS・Androidのネイティブアプリに 移植したい！ 🍎👾
3. React→ React Native Vue→?
4. 昔はNativeScriptやVueNative。 今は？
5. WebViewベースで素早く移植 →Capacitor ネイティブコンポーネントで開発 →NativeScript
6. Capacitorを使ってみる
7. Capacitorとは... WebアプリをWebViewベースのネイティブアプリとして ビルドするライブラリ。 Cordovaの後継ライブラリなのでプラグイン互換性が高 い。 PWAのビルドもできる。
8. Capacitorにできること • WebViewベースでの素早い移植 • 多様な公式プラグインの利用
9. 早速導入してみる
10. 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
11. 3.iOS用テンプレートの追加・ビルド実行 導入手順 npx add cap ios 4.XCode・シミュレータで動作チェック npx cap open ios //XCodeで開く npx cap run ios //シミュレータを起動
12. プラグインで機能を拡張できる！
13. 1.任意のプラグインをインストール プラグインの利用方法 yarn add @capacitor/geolocation //位置情報プラグイン npx cap sync 2.Info.plist に必要な権限を追記する iOSではInfo.plistに記載しなければ利用できない機能が 複数存在する。
14. バックグラウンドタスクやプッシュ通知のような ネイティブアプリならではのプラグインも提供されている。
15. 1.WebViewベースのアプリは構造によってストア審査落ちの可能性がある 注意点 2.ネイティブアプリでは Info.plist等利用する機能権限の記載も必要 →AndoirdならAndroidManifest.xml 3. 機能によってはパフォーマンスがやや低くなる、動きがもっさりする →Capacitorでは一部のみネイティブコンポーネントを利用できる →利用シーンによっては NativeScriptのほうが良いかもしれない
16. ご清聴ありがとうございました！