Cordovaの環境構築


**下記は「Cordova5.1.1」で行っています。
Cordova5.0.0未満の場合は、コマンドの書式に違いがある場合があります。**


# 前提
1.MacOSXであること ※1 
2.AndroidSDKがインストール済みであり、Android仮想デバイス(AVD)の設定ができていること
[Mac OS X 上に Android 開発環境を構築する](http://kzy52.com/entry/2014/11/08/220810) 等を参照

※1 iOS Simulator が起動できるのがMaxOSのみのため
iOS Simulator は App Store から Xcode を インストールすると同時にインストールされます。

# 各種インストールとPATHの設定
## Node.jsのインストール
http://nodejs.org

cordovaコマンドを導入するために Node.js をインストールします。
上記のサイトにアクセスし表示に従ってインストールします。

インストールしたら、インストールが成功しているか確認するためにバージョンを表示するコマンドを実行。

```
node -v
```
実行結果例) v0.12.3

Node.js をインストールするとnpmも同時にインストールされるためこちらもインストールが成功しているか確認するためにバージョンを表示するコマンドを実行。

```
npm -v
```
実行結果例) 2.9.1

## cordovaコマンドラインツールのインストール

```
sudo npm install -g cordova
```
※-g オプションはグローバルな領域にインストールするためのオプションです。

インストールが成功しているか確認するためにバージョンを表示するコマンドを実行。

```
cordova -v
```
実行結果例) 5.1.1

## AndroidSDKのPATHを通す
.bash_profile に下記のPATHを追加する。
※.bash_profile がない場合は、新規作成

```
export PATH=$PATH:/Applications/(AndroidSDK展開フォルダ)/sdk/tools/
export PATH=$PATH:/Applications/(AndroidSDK展開フォルダ)/sdk/platform-tools/
```

又は

```
echo "export PATH=$PATH:/Applications/(AndroidSDK展開フォルダ)/sdk/tools/" >> ~/.bash_profile
echo "export PATH=$PATH:/Applications/(AndroidSDK展開フォルダ)/sdk/platform-tools/" >> ~/.bash_profile
```

反映させるために下記コマンドを実行

```
source ~/.bash_profile
```

反映されたか確認するためにAndroidコマンドとadbコマンドが実行できるか確認します。

```
android -h
```
実行すると Help の内容（オプション）が複数行にわたって表示されます。
（実行結果は省略）

```
adb version
```
実行結果例) Android Debug Bridge version 1.0.32

# プロジェクトの新規作成とプラットフォームの追加
## プロジェクトの新規作成
プロジェクトを作成したいディレクトリに移動して下記のコマンドを実行します。

```
cordova create hello com.example.hello HelloWorld -d
```

・hello ディレクトリを作成し
・com.example.hello という識別子で(Andoroidで必要)
・HelloWorld というアプリ名

作成するというコマンドになります。
※-d オプションは途中経過を表示するオプションです。

## プラットフォームの追加

### iOS

```
cordova platform add ios
```

### Android

```
cordova platform add android
```

その他に下記のプラットフォームの追加もできます。

```
cordova platform add wp8
cordova platform add windows
cordova platform add amazon-fireos
cordova platform add blackberry10
cordova platform add firefoxos
```

## プラットフォームの確認

```
cordova platform ls
```
実行結果例) 
Installed platforms: android 4.0.2, ios 3.8.0
Available platforms: amazon-fireos, blackberry10, browser, firefoxos

## プラットフォームの削除
プラットフォームを外すには下記のコマンドをそれぞれ外したいプラットフォームに置き換えて実行します。
例）Andoroidの場合

```
cordova platform remove android
```
又は

```
cordova platform rm android
```

# シミュレータで確認
## iOS

```
cordova emulate ios -d
```
実行すると実行結果がつらつらと表示され
「** BUILD SUCCEEDED **」
と表示されてシミュレータが立ち上がり、続いてアプリが立ち上がってきます。

## Andoroid

```
cordova emulate android -d
```
実行すると実行結果がつらつらときて
Waiting for emulator... としばらく表示されますがあせらずしばらく待ちます。

※ 開発環境のマシンスペックによって立ち上がるまでに時間に差があるでしょう。
※ ストレージを結構食うのであらかじめ数GBの空きをあけておくの望ましいかも...
※ MacBook Air Core i5 メモリ 4GB で下記のような時間がかかります。

ーーーー
（略）

BUILD SUCCESSFUL

Total time: 16.678 secs

（略）
ーーーー
と表示されてシミュレータが立ち上がり、続いてアプリが立ち上がってきます。

### 補足
ant がないと言われた場合

```
brew install ant 
```

---------------------------------------

以下のようなエラーが出る場合

```
Starting emulator for AVD 'MYAVD'
emulator: ERROR: x86 emulation currently requires hardware acceleration!
Please ensure Intel HAXM is properly installed and usable.
CPU acceleration status: HAX is not installed on this machine (/dev/HAX is missing).
```
以下のサイトからAndroidのエミュレータを高速にするために、Intel Hardware Accelerated Execution Manager（HAXM)というソフト [ haxm-macosx_r05.zip ] をダウンロードしてインストールする。

[Intel® Hardware Accelerated Execution Manager](https://software.intel.com/en-us/android/articles/intel-hardware-accelerated-execution-manager)


## ブラウザ

```
cordova serve android
```
実行結果例）
Static file server running on port 8000 (i.e. http://localhost:8000)
CTRL + C to shut down

http://localhost:8000 にアクセスすると確認ができます。

# 実機で確認
## iOS
上記「プロジェクトの新規作成」の例で作成した場合
[ cordova emulate ios -d ] を実行した後に
hello > platforms > ios > HelloWorld.xcodeproj に Xcode のプロジェクトファイルがあるので、それを Xcode で起動してネイティブアプリの開発の手法に則って実機でテストすることができます。

**※実機で確認すには「[Apple Developer Program](https://developer.apple.com/jp/programs/)」 (有料)が必要になります**


[iPhone(iOS)アプリを実機でテストする方法【初心者向け】](http://techacademy.jp/magazine/2521)等を参照

## Andoroid
MacにUSBでAndroidの実機を接続して下記のコマンドを実行します。

```
cordova run android
```


# おまけ
## cordovaコマンドラインツールのアップデート

```
sudo npm update -g cordova
```

---------------------------------------
[参考サイト]
[Apache Cordova Documentation (5.1.1) ](http://cordova.apache.org/docs/en/5.1.1/guide_cli_index.md.html#The%20Command-Line%20Interface)
[HTML5ハイブリッドアプリ（Cordova）の環境構築](http://ayumu-homes.hateblo.jp/entry/2015/02/22/111955)
[Mac OS X 上に Android 開発環境を構築する](http://kzy52.com/entry/2014/11/08/220810)