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
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
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F96507%2Fae86f422-f497-f0ba-0528-cf7de5d72d3c.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=2ce85d12eff4eb137fb52d9908c89768)
実機実行
Xcodeにアカウントを登録しておく。実機にデプロイするために
ios-deploy
が必要なのでこれもインストールしておく。
$ npm install -g ios-deploy
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
プラットフォーム追加
$ 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
![](https://www.blog.danishi.net/wp-content/uploads/2020/09/image.png)
実機実行
Androidの実機端末をUSBで接続。端末側で開発者向けオプションを有効化し、USBデバッグをオンにしておく。
$ cordova run android
ディスカッション
コメント一覧
まだ、コメントがありません