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のほうが良いかもしれない

ご清聴ありがとうございました！