MacでCordova開発環境（iOS・Android）構築

2020年9月25日

1. Cordovaのインストール
2. ブラウザで実行
3. iOS
4. 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