インストール環境
・MAC OSX El Capitan 10.11.1
・Cordova ver 5.4.0
インストール手順
1. xcodeをインストール
https://developer.apple.com/jp/technologies/tools/
上記のURLよりXcodeをインストールしてください。
2. Node.jsをインストール
上記URLより、node.jsをインストールしてください。
node.jsをインストールすると、パッケージ管理ツールのnpmもインストールされます。
インストールの確認
$ node -v
v5.0.0
$ npm -v
3.3.6
3. Cordovaインストール
管理者権限付きsudo
でcordovaをインストールします。
$ sudo npm install cordova -g
インストールの確認
$ cordova -v
5.4.0
4. Android SDKをダウンロード
- GUI用にJDKをインストール
上記URLより、Java SE Development Kitをインストールしてください。
- Android SDKをダウンロード
上記URLより、SDK Toolsをインストールしてください。
解凍後、フォルダ名をsdkに変更して~/Library/Android/
に置く
(SDKの置き場所は、他の場所でも構わない)
- SDKのパスを通す
export PATH=$PATH:/Users/(User_name)/Library/Android/sdk/platform-tools
export PATH=$PATH:/Users/(User_name)/Library/Android/sdk/tools
上記のような感じでパスを通しておきます。
- Androidライブラリの追加
$ android sdk
SDK Managerを起動し、Toolsの全てと、必要なAndroidのバージョンを選びます。
5. iOS-simをインストール
ios-simは、Homebrewからインストールします。Homebrewは、Mac OS X用のパッケージ管理ツールです。Homebrewを通じて様々なツールやライブラリをインストールできます。
Homebrewをインストールしていない場合には、ターミナルから以下のコマンドを実行してHomebrewをインストールしてください。
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
次に、Homebrewからios-simをインストールしてください。
$ brew install ios-sim
プロジェクト新規作成
$ cordova create hello com.example.hello HelloWorld
「hello」ディレクトリに、「HelloWorld」プロジェクトを作成しました。
com.example.helloは識別子として、ドメインを後ろから記述しています。
プロジェクトの作成後、iOSとAndroidの環境ファイルを設置します。
helloフォルダに移動
$ cd hello
- 環境ファイルを設置
$ cordova platform add ios
$ cordova platform add android
- プロジェクトをbuild
Androidの場合
$ cordova build android
iOSの場合
$ cordova build ios
- エミュレータを起動
Androidの場合
$ cordova emulate android
iOSの場合
$ cordova emulate ios
プラグインをインストール
cordova plugin addコマンドは、プラグインのコードのリポジトリを指定する必要があります。CLI を使用アプリに機能を追加する方法の例を示します。
基本的なデバイス情報 (デバイス API):
$ cordova plugin add cordova-plugin-device
ネットワーク接続とバッテリーのイベント:
$ cordova plugin add cordova-plugin-network-information
$ cordova plugin add cordova-plugin-battery-status
デバッグ コンソール:
$ cordova plugin add cordova-plugin-console
カメラ、メディアの再生とキャプチャ:
$ cordova plugin add cordova-plugin-camera
$ cordova plugin add cordova-plugin-media-capture
$ cordova plugin add cordova-plugin-media
など
- プラグインの確認方法
$ cordova plugin ls
- プラグインの削除方法
$ cordova plugin rm cordova-plugin-console
addをrmに置き換えるだけで削除できます。
実際に起きたエラー
- No emulator images (avds) found.
ERROR : No emulator images (avds) found.
1. Download desired System Image by running: /Users/(User_name)/Library/Android/sdk/tools/android sdk
2. Create an AVD by running: /Users/(User_name)/Library/Android/sdk/tools/android avd
HINT: For a faster emulator, use an Intel System Image and install the HAXM device driver
Error: /Users/(User_name)/project/hello/platforms/android/cordova/run: Command failed with exit code 1
AVD Managerでエミュレータの定義がされてないのが原因。
- 回避策
AVD Managerを起動し設定を行う。
$ android avd
Createボタンをクリック。
以下のように記入しOKをクリック。
以上で再ビルドすればエミュレータが起動するはずです。
- ERROR: Error: Please install Android target: "android-xx"
Running command: /Users/(User_name)/project/hello/platforms/android/cordova/build
[Error: Please install Android target: "android-22".
Hint: Open the SDK manager by running: /Users/(User_name)/Library/Android/sdk/tools/android
You will require:
1. "SDK Platform" for android-22
2. "Android SDK Platform-tools (latest)
3. "Android SDK Build-tools" (latest)]
ERROR building one of the platforms: Error: /Users/(User_name)/project/hello/platforms/android/cordova/build: Command failed with exit code 2
You may not have the required environment or OS to build this project
Error: /Users/(User_name)/project/hello/platforms/android/cordova/build: Command failed with exit code 2
Cordovaでセットされたsdkターゲット番号と実際にAndroid SDKでセットされているSDKのバージョンが違うのが原因。
- 回避策
Cordovaの設定ファイルをAndroid SDKのバージョンに合わせます。
1.Android sdkのバージョンを確認
SDK Managerを起動してインストールされているSDKのバージョンがのAPI Levelを確認します。
今回インストールされているSDKはAndroid 6.0のみなのでAPI Levelは23です。
2.AndroidManifest.xmlの変更
以下のファイルを変更します。
/(project)/platforms/android/AndroidManifest.xml
Cordovaのプロジェクトフォルダはcordova createで作成済みのフォルダになります。
現状
<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="22" />
targetSdkVersionを23に変更
<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="23" />
3.project.propertiesの変更
以下のファイルを変更します。
/(project)/platforms/android/project.properties
現状
target=android-22
target=androidを23に変更
target=android-23
これで再ビルドすればCordovaのターゲットSDKのバージョンとセットされているAndroid SDKのバージョンが同じになるのでビルドに成功するはずです。
備考
npm install -gオプションの意味
npm installで-gオプションを指定した場合はグローバルインストールと呼ばれ、Mac OS X環境では/usr/local/lib/node_modules
にライブラリがインストールされます。同時に同ディレクトリにパスが通るようになり、どこからでもコマンドが呼び出せるようになります。
$ sudo npm install express -g
-gオプションを指定してインストールすると、expressコマンドを直接実行できるようになります。
- -gオプションを指定しない場合
-gオプションを指定しない場合はローカルインストールと呼ばれ、カレントディレクトリ配下にnode_modulesというディレクトリが作成され、その配下にライブラリがインストールされるようになります。
$ sudo npm install express