Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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

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

Windowsマシンの環境構築

まずは、node.jsをダウンロードしてインストール。難しいこと考えずに、[INSTALL]ボタン押してダウンロードされたモノを実行すればOK。

スクリーンショット 2014-10-08 21.13.04.png
 ↑ インストーラー起動したところ。

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

スクリーンショット 2014-10-08 21.24.03.png
 ↑ インストール終わったところ

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

アプリ作ってみる

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

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

スクリーンショット 2014-10-08 21.43.13.png
 ↑ ここでは、phonegapフォルダを作成して、その中で実行しました。

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

スクリーンショット 2014-10-08 21.44.57.png

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

リモートデバッグ

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

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

PhoneGap Developer App サイト

2014-10-08 21.37.16.png
 ↑ こんなアイコンです。(右上のキャラじゃないですよー)

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

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

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

スクリーンショット 2014-10-08 21.56.09.png
 ↑ 警告でたら「許可」

スクリーンショット 2014-10-08 21.57.32.png

listening on 192.168.100.102:3000

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

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

2014-10-08 22.02.32.png
 ↑ 入力したところ

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

2014-10-08 22.04.15.png
 ↑ Androidだと、アイコン小さすぎ。

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

141008-1.GIF
 ↑ 34行目のタイトルを変えて保存してみると・・・

2014-10-08 22.13.05.png
 ↑ 実機にすぐに反映される!

141008-2.GIF
 ↑ 28行目のmetaタグをコメントアウトして保存してみると・・・

2014-10-08 22.18.15.png
 ↑ でかくなった!

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

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

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

スクリーンショット 2014-11-14 02.46.01.png
 ↑ 失敗したらもう一度試す。

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

Adobe PhoneGap Build サイト へブラウザからアクセスし、サインインします。

スクリーンショット 2014-11-14 02.50.11.png
 ↑ アプリができていて、apkをダウンロードできます。

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

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

スクリーンショット 2014-11-14 02.54.56.png

スクリーンショット 2014-11-14 02.56.46.png
 ↑ キャプチャは設定済の状態です。

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

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

環境変数1.PNG

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

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

環境変数2.PNG

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

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

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

環境変数3.PNG

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

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

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

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

スクリーンショット 2014-11-14 03.14.14.png

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

以上。

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

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

続編

WindowsでPhoneGapアプリ開発 Google Playリリース用apkの書き出し

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away