MacでCordova開発環境(iOS・Android)構築

Cordovaのインストール

npmが必要なので事前にNode.js環境を整えておく。
Cordova公式サイトの「Get Started」に沿って進める。
$ npm install -g cordova

$ cordova --version
10.0.0

$ cordova create MyApp
Creating a new cordova project.

$ cd MyApp

ブラウザで実行

プラットフォーム(Cordovaの実行環境)を追加して動かしてみます。
まずはブラウザで動かします。
$ cordova platform add browser
Using cordova-fetch for cordova-browser@^6.0.0
Adding browser project...
Creating Cordova project for cordova-browser:
    Path: /Users/Hoge/Desktop/MyApp/platforms/browser
    Name: HelloCordova
Installing "cordova-plugin-whitelist" for browser
6.0.0

$ cordova run browser
ブラウザが開いて「Hello World」アプリが実行されればOK。

iOS

事前準備

Xcodeをインストールしておく。

プラットフォーム追加

$ cordova platform add ios
Using cordova-fetch for cordova-ios@^6.1.0
Adding ios project...
Creating Cordova project for the iOS platform:
    Path: platforms/ios
    Package: io.cordova.hellocordova
    Name: HelloCordova
iOS project created with cordova-ios@6.1.1
Installing "cordova-plugin-whitelist" for ios

エミュレーター実行

$ cordova emulate ios

実機実行

Xcodeにアカウントを登録しておく。

実機にデプロイするために ios-deploy が必要なのでこれもインストールしておく。
$ npm install -g ios-deploy
USBでiPhoneを接続してコンピューターを信頼する。

MyApp/platforms/ios/HelloCordova.xcodeproj をXcodeで開く。
アプリに署名し、左上のデバイス選択から接続したiPhoneを選択する。
$ cordova run ios
ビルドが成功すれば、実機にアプリがインストールされる。

Android

事前準備

JDKのインストール

JDK(Java Development Kit)8をインストール。
https://www.oracle.com/jp/java/technologies/javase/javase-jdk8-downloads.html
$ javac -version
javac 1.8.0_261

Gradleをインストール

ビルドツールのGradleをインストール。
https://gradle.org/install/
$ brew install gradle

$ gradle -v
Welcome to Gradle 6.6.1!

Android Studioをインストール

Android SDKとエミュレーターを使うためにAndroid Studioをインストール。
https://developer.android.com/studio

SDKのライセンスに同意。
$ cd /Users/hoge/Library/Android/sdk/tools/bin
$ ./sdkmanager --licenses
パスはAndroid Studioの「Tools > SDK Manager」から調べる。

プラットフォーム追加

$ cordova platform add android
Using cordova-fetch for cordova-android@^9.0.0
Adding android project...
Creating Cordova project for the Android platform:
    Path: platforms/android
    Package: io.cordova.hellocordova
    Name: HelloCordova
    Activity: MainActivity
    Android target: android-29
Subproject Path: CordovaLib
Subproject Path: app
Android project created with cordova-android@9.0.0
Installing "cordova-plugin-whitelist" for android

エミュレーター実行

Android Studioの「Tools > AVD Manager」からAVDを構成。
エミュレーターを実行し、エミュレーターが立ちあがったら下記コマンドを実行。
$ cordova emulate android
ビルドが成功すれば、エミュレーターでアプリの実行が確認できる。

実機実行

Androidの実機端末をUSBで接続。
端末側で開発者向けオプションを有効化し、USBデバッグをオンにしておく。
$ cordova run android
ビルドが成功すれば、実機にアプリがインストールされる。