「Mac環境でPhoneGapを使ったアプリ開発をしよう！」

（私の主観：2014/4/14）
最初からCordovaをインストールしたほうがいろいろトラップにひっかからないで開発作業を楽しめるような気がしました。

＜環境つくりの前に＞

PhoneGap(Cordova)はほとんど同じものだそうです。でも、違いはあるそうです。詳しくは [Cordova/PhoneGap] CordovaとPhoneGapの違いとかをみてください。。ここでは、PhoneGapをインストールしていきます。
(追加)Cordovaも入れてく方法は一緒みたいですので追記していきます。
PhoneGap(Cordova)はNode.jsが入っていないと動きません。npmコマンドを使います。

PhoneGap(Cordova)みたいなのを、ハイブリッドアプリというんですね。

以下の手順で確認します。
1. AndroidStudioの確認（すでに環境があるため）
2. Node.jsの確認（すでに環境があるため）
3. PhoneGap(Cordova)のインストール（Node.jsが動かないとインストールできない。）

全体的な参考：
Apache Cordova チュートリアルやった
 PhoneGapを使ってみる(Android編)

PhoneGapについて参考にしたもの

PhoneGap Fan
PhoneGapとは出来ること出来ないことをもう少しくわしく

1.2は（すでに環境があるため）確認だけで詳細は省略。

環境構築は別の作業時に行ったのでそちらを参照してください。
1.AndroidStudioの確認

AndroidStudioの環境構築
MacにAndroidStudioをインストール（update）する

2.Node.jsの確認

Node.jsの環境構築
macでNode.jsの環境設定

3.PhoneGap(Cordova)のインストール（コマンドライン）

参考：PhoneGap 3のインストール
コマンドラインからインストールする場合

$ npm install -g phonegap

これだけでいいそうです。
＜私の環境下で失敗権限の問題のようです。＞

失敗するとこんな感じで止まります。

$ npm install -g phonegap
npm WARN deprecated lodash@1.0.2: lodash@<2.0.0 is no longer maintained. Upgrade to lodash@^3.0.0
npm WARN deprecated npmconf@2.1.2: this package has been reintegrated into npm and is now out of date with respect to npm
/Users/***/.nvm/versions/node/v0.12.8/bin/phonegap -> /Users/***/.nvm/versions/node/v0.12.8/lib/node_modules/phonegap/bin/phonegap.js

> bufferutil@1.2.1 install /Users/***/.nvm/versions/node/v0.12.8/lib/node_modules/phonegap/node_modules/bufferutil
> node-gyp rebuild

gyp WARN install got an error, rolling back install
gyp ERR! configure error 
gyp ERR! stack Error: node-v0.12.8.tar.gz local checksum 68e62185d7ff41ad6679bc80d0788b3011e982f6b24b9b3f8630fd05f7cc4ce3 not match remote e0c96a6702978e2ed7f031315bebeb86b042e2c80e66d99af8ad864dc0e56436
gyp ERR! stack     at deref (/Users/***/.nvm/versions/node/v0.12.8/lib/node_modules/npm/node_modules/node-gyp/lib/install.js:300:20)
gyp ERR! stack     at IncomingMessage.<anonymous> (/Users/***/.nvm/versions/node/v0.12.8/lib/node_modules/npm/node_modules/node-gyp/lib/install.js:339:13)
gyp ERR! stack     at IncomingMessage.emit (events.js:129:20)
gyp ERR! stack     at _stream_readable.js:908:16
gyp ERR! stack     at process._tickCallback (node.js:355:11)
gyp ERR! System Darwin 15.0.0
gyp ERR! command "node" "/Users/***/.nvm/versions/node/v0.12.8/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/***/.nvm/versions/node/v0.12.8/lib/node_modules/phonegap/node_modules/bufferutil
gyp ERR! node -v v0.12.8
gyp ERR! node-gyp -v v3.0.3
gyp ERR! not ok 
npm WARN install:bufferutil@1.2.1 bufferutil@1.2.1 install: `node-gyp rebuild`
npm WARN install:bufferutil@1.2.1 Exit status 1

> utf-8-validate@1.2.1 install /Users/***/.nvm/versions/node/v0.12.8/lib/node_modules/phonegap/node_modules/utf-8-validate
> node-gyp rebuild

＜このあと全く動作せず＞

sudoをつけて再実行してみると成功しました

成功

$ sudo npm install -g phonegap
Password:
npm WARN deprecated lodash@1.0.2: lodash@<2.0.0 is no longer maintained. Upgrade to lodash@^3.0.0
npm WARN deprecated npmconf@2.1.2: this package has been reintegrated into npm and is now out of date with respect to npm
/Users/***/.nvm/versions/node/v0.12.8/bin/phonegap -> /Users/***/.nvm/versions/node/v0.12.8/lib/node_modules/phonegap/bin/phonegap.js
/Users/***/.nvm/versions/node/v0.12.8/lib
└── phonegap@5.4.0 

npm WARN In phonegap@5.4.0 replacing bundled version of colors with colors@0.6.0-1
npm WARN In phonegap@5.4.0 replacing bundled version of minimist with minimist@0.1.0
npm WARN In phonegap@5.4.0 replacing bundled version of semver with semver@1.1.0
npm WARN In phonegap@5.4.0 replacing bundled version of pluralize with pluralize@0.0.4
 :
 :
npm WARN In phonegap@5.4.0 replacing bundled version of socket.io-client with socket.io-client@1.4.0
$

無事にインストールされていれば、こんな感じに入っているはず。

$ tree .npm/phone*
.npm/phonegap
└── 5.4.0
    ├── package
    │   └── package.json
    └── package.tgz
.npm/phonegap-build
└── 0.9.2
    ├── package
    │   └── package.json
    └── package.tgz
.npm/phonegap-build-api
└── 0.3.3
    ├── package
    │   └── package.json
    └── package.tgz

6 directories, 6 files

（追記）Cordovaのインストール

$ npm install -g cordova

sudoしなくてもインストールいけました。
同じようにtreeでみてみると、phonegapの時よりいろいろ入っていました。。

$ tree ~/.npm/cordova*
/Users/***/.npm/cordova
└── 5.4.1
    ├── package
    │   └── package.json
    └── package.tgz
/Users/***/.npm/cordova-app-hello-world
└── 3.10.0
    ├── package
    │   └── package.json
    └── package.tgz
/Users/***/.npm/cordova-js
└── 4.1.2
    ├── package
    │   └── package.json
    └── package.tgz
/Users/***/.npm/cordova-lib
└── 5.4.1
    ├── package
    │   └── package.json
    └── package.tgz
/Users/***/.npm/cordova-plugin-dialogs
└── 1.1.1
    ├── package
:
:
/Users/***/.npm/cordova-serve
└── 1.0.0
    ├── package
    │   └── package.json
    └── package.tgz

189 directories, 392 files

（訂正）Cordovaのインストール（20160920追記）

久々にCordovaを実行しようとしたときにちょっと引っかかったこと。

nodeバージョンを変えた場合、再度cordovaインストールが必要

$ cordova
-bash: cordova: command not found <-コマンドが打てなくなってる。
$ node -v
v6.1.0 <-以前との違い：nodeバージョンが変わった。このバージョンでのインストールが必要！
$ npm  install -g cordova
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
/Users/***/.nvm/versions/node/v6.1.0/bin/cordova -> /Users/***/.nvm/versions/node/v6.1.0/lib/node_modules/cordova/bin/cordova
/Users/***/.nvm/versions/node/v6.1.0/lib
└─┬ cordova@6.3.1 
:
:
    └── string-length@1.0.1 
$ which cordova
/Users/***/.nvm/versions/node/v6.1.0/bin/cordova

3.PhoneGapのインストール（アプリから）

アプリからのインストールもできるようです。
こちらは試していませんので、参考まで。
Adobe PhoneGap

AndroidStdioとの関係

AndroidStdioのエミュレータも重いのでうまいこと表示できていません。。

でも、重要なのはAndroidStudioでインストールするSDK関係のようです。
SDK関係が入っていないとコマンドラインからも実行できないようです。

参考：PhoneGapを使ってみる(Android編)

android用 platform追加(phonegap build)
cordovaの場合も同様にすすめて問題ない。

パスが通っていない

$ phonegap build android
-bash: $: command not found

パスを調べてパスを設定

$ which phonegap
/Users/***/.nvm/versions/node/v0.12.8/bin/phonegap

パスの設定は：.bash_profile　に記載。その後iterm起動し直す。

#phonegap
export PHONEGAP_PATH=/Users/***/.nvm/versions/node/v0.12.8/bin/phonegap

再度実行とりあえずパスは通った

$ phonegap build android
[phonegap] executing 'cordova build android'...
Error: Current working directory is not a Cordova-based project.

$ phonegap create test
Creating a new cordova project.
Downloading hello-world-template library for www...
Download complete
$ ls
test
$ cd test/
$ ls
config.xml  hooks       platforms   plugins     www

再度buildで何か動きました

$ phonegap build android
[phonegap] executing 'cordova platform add --save android'...
[phonegap] completed 'cordova platform add --save android'
[phonegap] executing 'cordova build android'...
[phonegap] completed 'cordova build android'

cordovaでbuildすると、見え方がちょっと違うみたいです。

$ cordova build android
cp: no such file or directory: /Users/***/PhoneGapTmp/test/icon.png

Running command: /Users/***/PhoneGapTmp/test/platforms/android/cordova/build 
ANDROID_HOME=/Users/***/Library/Android/sdk
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.7.0_79.jdk/Contents/Home
Running: /Users/***/PhoneGapTmp/test/platforms/android/gradlew cdvBuildDebug -b /Users/***/PhoneGapTmp/test/platforms/android/build.gradle -Dorg.gradle.daemon=true
:preBuild
:compileDebugNdk UP-TO-DATE
:preDebugBuild
:checkDebugManifest
  :
  :
:cdvBuildDebug UP-TO-DATE

BUILD SUCCESSFUL

Total time: 6.773 secs
Built the following apk(s):
    /Users/***/PhoneGapTmp/test/platforms/android/build/outputs/apk/android-debug.apk

コマンドラインからブラウザで確認

AndroidStudioに読み込んでエミュレータで実行するのもよいですが、ブラウザでとりあえず状態を確認することもできます。

$ phonegap emulate browser
[phonegap] executing 'cordova platform add --save browser'...
[phonegap] completed 'cordova platform add --save browser'
[phonegap] executing 'cordova emulate browser'...

 <ブラウザが起動して表示されます。待機状態なのでCtr+Cで強制的に終わらせて抜けます。>

cordovaでも同じように表示されました。

<気になるところ>
phonegap　でうまくいかないときはcordovaの何かが足りないのかもしれないです。
phonegapは結局cordovaを呼び出しているだけのようですしね。。

Mac+PhoneGap(Cordova)+AndroidStudioの環境つくり