WindowsでPhoneGapアプリ開発＆デバッグ環境構築

Windows環境でPhoneGapアプリの開発環境から、リモートデバッグの環境までを構築する手順のまとめです。
Windows8.1環境で構築しています。

2014.11.14追記
正しくビルドするための環境構築手順まで追記しました。

2014.11.16追記
続編「WindowsでPhoneGapアプリ開発 Google Playリリース用apkの書き出し」を書きました。一番下にリンクあります。

#Windowsマシンの環境構築
まずは、node.jsを[ダウンロード](http://nodejs.org/)してインストール。難しいこと考えずに、［INSTALL］ボタン押してダウンロードされたモノを実行すればOK。

![スクリーンショット 2014-10-08 21.13.04.png](https://qiita-image-store.s3.amazonaws.com/0/24420/56014900-e942-6735-3e60-232f08fdcfb5.png)
　↑ インストーラー起動したところ。

インストールがおわったら、Windows PowerShell を立ち上げる。スタートメニューから検索すればでてきます。
コマンド ``npm install -g phonegap``を入力して、実行。

![スクリーンショット 2014-10-08 21.24.03.png](https://qiita-image-store.s3.amazonaws.com/0/24420/48c1117d-d0d8-17a5-9b2d-5160ac68434e.png)
　↑ インストール終わったところ

基本、これで完了。
（Windows PowerShellは、まだ立ち上げたままにしておきます。）

#アプリ作ってみる

さて、HelloWorldアプリをつくります！

Windows PowerShell をたちあげます。
開発用のフォルダーに移動して、``phonegap create hello``とコマンドを入力。（helloの部分がアプリ名です。）
※ フォルダーの移動コマンドは、``cd``です。

![スクリーンショット 2014-10-08 21.43.13.png](https://qiita-image-store.s3.amazonaws.com/0/24420/1fa2fc05-a684-1dc8-24f9-ebb5c7c61309.png)
　↑ ここでは、phonegapフォルダを作成して、その中で実行しました。

そうすると、hello フォルダができます。

![スクリーンショット 2014-10-08 21.44.57.png](https://qiita-image-store.s3.amazonaws.com/0/24420/6c16dcca-56fb-9d07-0838-057f0b5c6a73.png)

これで、アプリのプロジェクトができました！


#リモートデバッグ
同じネットワーク上にスマホ、タブレットがつながっていれば、同時に複数の実機で確認しながら開発・デバッグができます。

まず、開発実証する実機を準備します。
iOSの場合はApp Storeから、Androidの場合はGoogle Playから、Windows Phoneの場合はWindows Phone Storeから、「PhoneGap Developer」というアプリを探してインストールしておきます。

[PhoneGap Developer App サイト](http://app.phonegap.com/)

![2014-10-08 21.37.16.png](https://qiita-image-store.s3.amazonaws.com/0/24420/0140fc02-f220-1f8c-0bc5-198ce954baab.png)
　↑ こんなアイコンです。（右上のキャラじゃないですよー）

くり返しになりますが、実機検証をする機器は、開発環境をつくったWindows環境とおなじネットワークにWiFi接続しておくことを忘れずに！

アプリは、もう起動しておいてOKです。


Windows PowerShell画面に戻ります。
先ほど作成したアプリプロジェクトのフォルダに移動して、``phonegap serve``とコマンドを打ちます。
Windowsの警告がでたら、「許可」をします。

![スクリーンショット 2014-10-08 21.56.09.png](https://qiita-image-store.s3.amazonaws.com/0/24420/0db9954d-02d7-266c-19c3-adf136beb836.png)
　↑ 警告でたら「許可」

![スクリーンショット 2014-10-08 21.57.32.png](https://qiita-image-store.s3.amazonaws.com/0/24420/931d30f1-31c1-c6a8-bc26-3780eb13bb3e.png)

> listening on 192.168.100.102:3000

という感じで、IPとポート番号が表示されます。

実機で立ち上げていた PhoneGap Developer アプリで、上記のIP・ポート番号を入力します。

![2014-10-08 22.02.32.png](https://qiita-image-store.s3.amazonaws.com/0/24420/93504f32-ebac-1b20-5585-7ede8ef50451.png)
　↑ 入力したところ

Connect ボタンを押します。
PowerShellのほうが、どばばばばっと動きつつ、実機画面には、PhoneGapのアイコンが表示されます。
実機が複数台ある場合は、同時に繋いで確認できます。

![2014-10-08 22.04.15.png](https://qiita-image-store.s3.amazonaws.com/0/24420/914442fb-a294-d1d4-405d-834bab2acdf0.png)
　↑ Androidだと、アイコン小さすぎ。

この画面が、さきほどのプロジェクトフォルダ（helloフォルダ）の中の www\index.html が表示されている状態です。このまま、このファイルを編集すると、なんと、リアルタイムに画面に反映されます。

![141008-1.GIF](https://qiita-image-store.s3.amazonaws.com/0/24420/a04eb58e-c8a2-1735-c514-e942cecc87de.gif)
　↑ 34行目のタイトルを変えて保存してみると・・・

![2014-10-08 22.13.05.png](https://qiita-image-store.s3.amazonaws.com/0/24420/6e5f6edb-eaff-787b-b464-887f502ba076.png)
　↑ 実機にすぐに反映される！

![141008-2.GIF](https://qiita-image-store.s3.amazonaws.com/0/24420/0e18c9b0-f9d6-002c-ccf6-0c509cd8d6e1.gif)
　↑ 28行目のmetaタグをコメントアウトして保存してみると・・・

![2014-10-08 22.18.15.png](https://qiita-image-store.s3.amazonaws.com/0/24420/3cd05de9-db4a-2089-c653-5c36e63de9d6.png)
　↑ でかくなった！

デバッグ作業終わらせるには、PowerShellで、CTRL+C を押すと止まります。
PowerShellを終わらせるのは、``exit``コマンドです。

#[追記]アプリをビルド(PhoneGap Build)

Adobe Creative Cloud のアカウントがある場合は、ローカルに環境をつくらなくても、リモートでビルドできます。
PowerShellから、``phonegap remote build android`` とコマンドを打ちます。

![スクリーンショット 2014-11-14 02.46.01.png](https://qiita-image-store.s3.amazonaws.com/0/24420/720107ef-8030-ed15-9406-55c47d7f7664.png)
　↑　失敗したらもう一度試す。

上記キャプチャでは聞かれていませんが、Adobe Creative Cloud ログインID / PW を聞かれたら、入力します。

[Adobe PhoneGap Build サイト](https://build.phonegap.com/) へブラウザからアクセスし、サインインします。

![スクリーンショット 2014-11-14 02.50.11.png](https://qiita-image-store.s3.amazonaws.com/0/24420/eb06b346-aa84-4040-b148-668928e8daa4.png)
　↑　アプリができていて、apkをダウンロードできます。

#[追記]Androidアプリをビルドできる環境を構築（ローカル）

ちょっと面倒ですが、ローカルでビルドするためには、いろいろインストールする必要があります。
以下、環境変数の設定項目がでてきますが、Windows8.1の場合は、スタートボタンをおして「環境変数」と入力するとすぐ呼び出せます。

![スクリーンショット 2014-11-14 02.54.56.png](https://qiita-image-store.s3.amazonaws.com/0/24420/445cfcaf-1812-cc8f-8aad-7c9563f1da64.png)

![スクリーンショット 2014-11-14 02.56.46.png](https://qiita-image-store.s3.amazonaws.com/0/24420/d1c81862-9309-e933-c1fa-57275ee9b2bf.png)
　↑　キャプチャは設定済の状態です。

少し手順長いですが、まずは、Java JDKのインストール

http://www.oracle.com/technetwork/java/javase/downloads/index.html
最新のJDKをダウンロードしてインストール

![環境変数1.PNG](https://qiita-image-store.s3.amazonaws.com/0/24420/ce668e65-0ca2-2040-a4f3-61845766e435.png)

環境変数「JAVA_HOME」を新規追加。
環境変数「PATH」に、「%JAVA_HOME%\bin」を追記。区切り文字「;」を忘れずに。


次に、AndroidのSDKをダウンロードしてインストール
http://developer.android.com/sdk/installing/index.html?pkg=tools

![環境変数2.PNG](https://qiita-image-store.s3.amazonaws.com/0/24420/9bcff516-dffc-abad-71ed-ddd3443ceae7.png)

環境変数「ANDROID_HOME」を新規追加。
環境変数「PATH」に、「%ANDROID_HOME%\platform-tools」を追記。区切り文字「;」を忘れずに。


もう１つ、Apache Ant をインストール
http://ant.apache.org/bindownload.cgi

「Current Release of Ant」というところから、最新版をダウンロードしてインストール

![環境変数3.PNG](https://qiita-image-store.s3.amazonaws.com/0/24420/7d7930db-9cc1-d0eb-3377-e9043e3c533b.png)

環境変数「ANT_HOME」を新規追加。
環境変数「PATH」に、「%ANT_HOME%\bin」を追記。区切り文字「;」を忘れずに。


以上でやっと設定完了。PowerShellを再起動します。


#[追記]Androidアプリをビルド(ローカル)

PowerShellから、``phonegap build android`` とコマンドを打ちます。

![スクリーンショット 2014-11-14 03.14.14.png](https://qiita-image-store.s3.amazonaws.com/0/24420/dc2c7451-93db-db9a-0c43-f5cc47317205.png)

どどっと処理が流れますが、最後に「BUILD SUCCESSFUL」と表示されていたら成功。
表示された生成されたapkのパスが表示されています。


以上。

実際にアプリリリースまでには、もうすこしステップがありますが、今回は環境構築まで。

PhoneGapの環境構築方法いろいろなところに記事などありますが、
・PhoneGapのバージョンによって環境構築方法が全然違う（特に2.xと3.x）。
・PhoneGap Develop アプリを使ったリモートデバッグを紹介している記事があまりない。
ということで、自分メモもかねてまとめました。


##続編
[WindowsでPhoneGapアプリ開発 Google Playリリース用apkの書き出し](http://qiita.com/tsunet111/items/69b46744ba427670dfe1)