El Capitan環境下でCordovaをインストール


##インストール環境
・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をインストール

http://nodejs.org/

上記URLより、node.jsをインストールしてください。
node.jsをインストールすると、パッケージ管理ツールのnpmもインストールされます。

インストールの確認

```terminal
$ node -v
v5.0.0
$ npm -v
3.3.6
```

####3. Cordovaインストール

管理者権限付き`sudo`でcordovaをインストールします。

```terminal
$ sudo npm install cordova -g
```

インストールの確認

```terminal
$ cordova -v 
5.4.0
```

####4. Android SDKをダウンロード

- GUI用にJDKをインストール


http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

上記URLより、Java SE Development Kitをインストールしてください。

- Android SDKをダウンロード

http://developer.android.com/intl/ja/sdk/index.html#Other

上記URLより、SDK Toolsをインストールしてください。

解凍後、フォルダ名をsdkに変更して`~/Library/Android/`に置く 
(SDKの置き場所は、他の場所でも構わない)

- SDKのパスを通す

```~/.bash_profile
export PATH=$PATH:/Users/(User_name)/Library/Android/sdk/platform-tools
export PATH=$PATH:/Users/(User_name)/Library/Android/sdk/tools
```

上記のような感じでパスを通しておきます。

- Androidライブラリの追加

```terminal
$ android sdk
```


SDK Managerを起動し、Toolsの全てと、必要なAndroidのバージョンを選びます。

####5. iOS-simをインストール

ios-simは、Homebrewからインストールします。Homebrewは、Mac OS X用のパッケージ管理ツールです。Homebrewを通じて様々なツールやライブラリをインストールできます。

http://brew.sh

Homebrewをインストールしていない場合には、ターミナルから以下のコマンドを実行してHomebrewをインストールしてください。

```terminal
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

次に、Homebrewからios-simをインストールしてください。

```terminal
$ brew install ios-sim
```


##プロジェクト新規作成
```terminal
$ cordova create hello com.example.hello HelloWorld
```
「hello」ディレクトリに、「HelloWorld」プロジェクトを作成しました。
com.example.helloは識別子として、ドメインを後ろから記述しています。

プロジェクトの作成後、iOSとAndroidの環境ファイルを設置します。

helloフォルダに移動

```terminal
$ cd hello
```

- 環境ファイルを設置

```terminal
$ cordova platform add ios
$ cordova platform add android
```

- プロジェクトをbuild

Androidの場合

```terminal
$ cordova build android
```

iOSの場合

```terminal
$ cordova build ios
```

- エミュレータを起動

Androidの場合

```terminal
$ cordova emulate android
```

iOSの場合

```terminal
$ cordova emulate ios
```

##プラグインをインストール

cordova plugin addコマンドは、プラグインのコードのリポジトリを指定する必要があります。CLI を使用アプリに機能を追加する方法の例を示します。

基本的なデバイス情報 (デバイス API):

```terminal
$ cordova plugin add cordova-plugin-device
```

ネットワーク接続とバッテリーのイベント:

```terminal
$ cordova plugin add cordova-plugin-network-information
$ cordova plugin add cordova-plugin-battery-status
```

デバッグ コンソール：

```terminal
$ cordova plugin add cordova-plugin-console
```

カメラ、メディアの再生とキャプチャ：

```terminal
$ cordova plugin add cordova-plugin-camera
$ cordova plugin add cordova-plugin-media-capture
$ cordova plugin add cordova-plugin-media
```

など

- プラグインの確認方法

```terminal
$ cordova plugin ls
```

- プラグインの削除方法

```terminal
$ 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を起動し設定を行う。


```terminal
$ android avd
```

Createボタンをクリック。

<img src="https://qiita-image-store.s3.amazonaws.com/0/89348/c811975c-1229-5242-a809-8b2df1ae87a5.png"  width="60%">

以下のように記入しOKをクリック。

<img src="https://qiita-image-store.s3.amazonaws.com/0/89348/9fa442df-1a93-ec62-90bd-f0841aa78bc5.png"  width="60%">

以上で再ビルドすればエミュレータが起動するはずです。

####- 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を確認します。

![スクリーンショット 2015-11-08 19.15.03.png](https://qiita-image-store.s3.amazonaws.com/0/89348/ccd271d6-f1d4-ce88-5678-6f6f3a7dab50.png "スクリーンショット 2015-11-08 19.15.03.png")

今回インストールされている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`にライブラリがインストールされます。同時に同ディレクトリにパスが通るようになり、どこからでもコマンドが呼び出せるようになります。

```terminal
$ sudo npm install express -g
```

-gオプションを指定してインストールすると、expressコマンドを直接実行できるようになります。

- -gオプションを指定しない場合

-gオプションを指定しない場合はローカルインストールと呼ばれ、カレントディレクトリ配下にnode_modulesというディレクトリが作成され、その配下にライブラリがインストールされるようになります。

```terminal
$ sudo npm install express
```