PhoneGap とは?
ネイティブアプリを JavaScript だけで実装できる Apache Cordova
をラップしたプラットフォームです。
ビルドされたアプリはネイティブアプリの WebView 上で実行されますが、プラグインを通してネイティブ機能とやりとりができます。
PhoneGap と Cordova の違いはあまり詳しくないので触れませんが、PhoneGap は Cordova + α みたいな感覚で問題ないと思います。開発用の便利ツールやビルド環境、テスト環境などのエコシステムがついてきます。
Cordova のいいところは、開発時にはブラウザでほぼすべての挙動が確認できることです。
JavaScript の膨大なエコシステムの恩恵を受けられるため、例えば jest
を使ったテスト、dayjs
, axios
といったライブラリや Web Font, Icon Font、CSS によるスタイリングなど Web で培った技術がそのまま使えます。
手順概要
- Vue の新規プロジェクトを作成 (
vue
コマンドで普通に作成)。 - PhoneGap の新規プロジェクトを作成 (
phonegap
コマンドで普通に作成)。 - Vue プロジェクトと PhoneGap プロジェクトをマージ。
- Vue の設定を PhoneGap 用に修正。
- ブラウザとエミュレータでの動作確認。
- vue-cordova の導入と plugins のテスト。
手順詳細
Github にボイラープレートリポジトリを作成したのでそちらを参照してください。