HTML5とPhoneGapで作る、iPhone/Androidアプリ開発TIPS

第3回コマンドプロンプトからAndroidプロジェクトを作成─Jasmineテストをエミュレータ上で実施

ターミナル上からコマンドを実行することでiOSプロジェクトを簡単に作成する手順と同じ要領で、Windows環境下でもコマンドプロンプト上でコマンドを実行することでAndroidプロジェクトを簡単に作成することができます。PhoneGap 2.0.0以降に同梱されているJasmineを組み合わせて、ターミナルからシミュレータ・エミュレータ上でテストを行う方法を紹介します。

コマンドプロンプトからAndroidプロジェクトを作成

Windows環境でPhoneGapを使用してAndroidプロジェクトを作成する場合、次のような手順を踏みます。

  1. Eclipseを起動
  2. Android Projectを作成
  3. libs/フォルダにCordovaのJavaアーカイブを配置
  4. asses/フォルダの下にwwwフォルダを作成し、WebアプリとCordovaのJavaScriptファイルを配置
  5. ビルドパスの構成を追加
  6. src/フォルダのアクティビティ用Javaファイルを開き、コードを修正

PhoneGapでAndroidプロジェクトを作成するもう1つの手順は、コマンドプロンプトからAndroidプロジェクトを作成する方法です。この手順は、iOSプロジェクトを作成するcreateコマンドと同じように、create.batを使用します。

コマンドプロンプトからcreate.batを使用してAndroidプロジェクトを作成する手順は次のとおりです。

  1. コマンドプロンプトを起動
  2. createコマンド(バッチファイル)で、Androidプロジェクトを作成
  3. AndroidManifest.xmlを開き、android:targetSdkVersionを修正

Eclipseを使用して1からAndroidプロジェクトを作成するよりも、わずかな手順でPhoneGap Androidプロジェクトを作成することが可能になります。

また、iOSと同様、コマンドプロンプトからAndroidエミュレータを起動したり、作成したアプリケーションをビルドしてエミュレータ上で起動させるコマンド(バッチ/CScriptファイル)群も用意されています。

今回は、

  • コマンドプロンプトからPhoneGap Androidプロジェクトを作成する手順(Windows)
  • Jasmineを使用したテストをエミュレータ上で行う方法(Windows, Mac)

の2点をご紹介します。

動作環境は次のとおりです。

OSWindows 7 Professional(32bit)
Android4.1.2(Emulator)
OSMac OS X 10.8.2(Mountain Lion)
iOSiOS 6.0(Simulator)

createコマンドのセットアップ手順

コマンドプロンプト上でAndroidプロジェクトを作成したり、ビルドを行うためには各種ファイルのデプロイのほか、環境変数の準備が必要になります。あらかじめAndroid SDKJDK/JREApache Antのインストールを行ってください。

http://phonegap.com/download#より、最新のPhoneGapパッケージをダウンロードします。パッケージを解凍すると、各モバイルOS向けのファイル一式が作成されます。このうち、androidフォルダの中身一式が必要です。ここではandroidフォルダを[phonegap_android]にリネームし、Cドライブ直下に配置しました。

PhoneGapパッケージを解凍。androidフォルダをphonegap_androidにリネームし、Cドライブ直下に配置
PhoneGapパッケージを解凍。androidフォルダをphonegap_androidにリネームし、Cドライブ直下に配置

続いて、環境変数[PATH]と、[JAVA_HOME]の設定・確認を行います。システムのプロパティから環境変数を開き、システム環境変数の[PATH]に、次のパスを追加します。

C:\phonegap_android\bin

続けて、[JAVA_HOME]にJDKをインストールしたディレクトリが設定されているかを確認してください。JAVA_HOME環境変数が定義されていない場合、プロジェクトを作成する際のcreateバッチが動作しません。

ここまでの設定で、コマンドプロンプト上でcreateコマンドが使用できるようになりました。コマンドプロンプトを起動し、Androidプロジェクトを作成してみましょう。書式は次のとおりです。

> create <パス> <パッケージ名> <アクティビティ名>

プロジェクトの作成~ビルドまで

それでは実際にプロジェクトを作成してみましょう。ユーザプロファイルフォルダ直下にCordovaProjectsフォルダを作成し、その下にPhoneGap Androidプロジェクトを作成します。

  • パス:HelloCordova210
  • パッケージ名:jp.gihyo.HelloCordova210
  • アクティビティ名:HelloCordova210
createコマンドでプロジェクトを作成
createコマンドでプロジェクトを作成
createコマンドで作成したプロジェクトをエクスプローラで確認
createコマンドで作成したプロジェクトをエクスプローラで確認

createコマンド実行時に次のようなメッセージが表示された場合、必要なソフトウェアがインストールされていないか、環境変数JAVA_HOMEが定義されていない可能性があります。

Missing one of the following:
JDK: http://java.oracle.com
Android SDK: http://developer.android.com
Apache ant: http://ant.apache.org

次の3点を確認しましょう。

  • JDK, SDK, Apache antがインストールされているか
  • 環境変数PATHに、java.exe, ant.bat, android.batが配置されているフォルダへのパスが記述されているか
  • 環境変数JAVA_HOMEが定義されているか

プロジェクトの作成成功後、AndroidManifest.xmlの修正を行います。お使いのエディタでファイルを開き、android:targetSdkVersionを修正します。

android:targetSdkVersionの__APILEVEL__の部分を修正
android:targetSdkVersionの__APILEVEL__の部分を修正

これでビルドの準備が整いました。プロジェクト作成時にデプロイされたコマンドを使用して、ビルドを行います。ツールはプロジェクトフォルダのcordova以下に配置されています。

  • emulate.bat:Androidエミュレータを起動します
  • debug.bat:ビルドを行い、エミュレータ上でアプリケーションを起動します
  • clean.bat:プロジェクトのクリーンを行います
  • BOOM.bat:プロジェクトのクリーン後、ビルドを行い、エミュレータ上でアプリケーションを起動します
  • log.bat:ログを監視します

debugコマンド、BOOMコマンドはあらかじめエミュレータが起動している必要があります。

コマンドプロンプトからPhoneGap Androidプロジェクトをビルドしてエミュレータで表示
コマンドプロンプトからPhoneGap Androidプロジェクトをビルドしてエミュレータで表示

各種コマンドはエラー表示が行われません。各コマンドを起動してもエミュレータが反応せずにすぐにコマンドプロンプトに操作が戻る場合、必要なファイルが揃っていない可能性があります。次の点を確認してみましょう。

  • 必要なソフトウェア(JDK/JRE, Apache Ant)がインストールされているか
  • 環境変数PATHに、tools.jar、javac.exe、antが配置されているパスが追加されているか

各バッチで使用されているのは、cordova\cordova.jsに記述されているCScriptです。記述されているコマンドをコマンドプロンプト上で実行し、正常に処理が行われているかを確認することで動作の切り分けが可能です。

なお、この手順で作成したAndroid PhoneGapプロジェクトをEclipseで開く場合は、新規プロジェクトで「Android Project from Existing Code」を選択してインポートすればOKです。

Jasmineとは

Jasmineとは、Behavior-Driven Development(BDD)に基づいたJavaScript用のテスティングフレームワークです。Pivotal Labsが開発・公開しており、The MIT Licenseのもとで公開されています。

Rubyの著名テストフレームワーク「RSpec」の記法に似ており、自然言語のようにテストを記述することが可能です。

PhoneGapでは、バージョン2.0.0からスタンドアロン版のJasmineライブラリと、テスト用のHTML/JavaScriptファイルが同梱されるようになりました。使用するにあたり、あたらしくソフトウェアをインストールする必要はありません。createコマンドでPhoneGapプロジェクトを作成後、spec.htmlをWebブラウザで開けばテストが行われます。

createコマンドで作成したPhoneGapプロジェクトのspec.htmlを、Webブラウザで開いてテスト実行
createコマンドで作成したPhoneGapプロジェクトのspec.htmlを、Webブラウザで開いてテスト実行

PhoneGapアプリケーションでは、起動するとwwwディレクトリ以下のindex.htmlファイルが最初に表示されます。この定義は、各ファイルの内容を修正することで任意のファイル名に変更することが可能です。

OSファイル名内容
iOSAppDelegate.mself.viewController.startPage
Androidアクティビティ用のJavaファイルsuper.loadUrl

これらのファイルを修正し、⁠Jasmineでテストする際はspec.htmlが最初に表示されるようにし、シミュレータ・エミュレータ上でテストが行えるようにする」スクリプトを用意しておくことで、ターミナル・コマンドプロンプトからテストも実施できるようになります。

リスト1 コマンド spec(Mac OS X/iOS用)
#!/bin/bash

set -e

CORDOVA_PATH=$( cd "$( dirname "$0" )" && pwd )
PROJECT_PATH=$CORDOVA_PATH/..

for file in $PROJECT_PATH/*.xcodeproj; do
  PROJECT_NAME=$(basename "$file" .xcodeproj)
done;

cd $PROJECT_PATH/

sed -i.bk 's/index.html/spec.html/g' $PROJECT_NAME/Classes/AppDelegate.m

./cordova/debug
./cordova/emulate

sed -i.bk 's/spec.html/index.html/g' $PROJECT_NAME/Classes/AppDelegate.m

このシェルスクリプトではsedコマンドを用いて、AppDelegate.mファイル内の、最初に表示するHTMLファイルをspec.htmlに変更した上でビルドを行います。

specコマンドをPhoneGapプロジェクトのcordovaディレクトリ以下に配置し、実行権限を与えます。コマンドを実行すると、最初に表示するHTMLファイルをindex.htmlからspec.htmlに変更した上で、debugコマンドおよびemulateコマンドを実行し、シミュレータ上でJasmineのテストを実行します。

iOSシミュレータ上でJasmineテストを実行
iOSシミュレータ上でJasmineテストを実行

Windowsの場合、プロジェクトフォルダのcordova\cordova.jsファイルを修正した上で、コマンドとして起動するためのバッチファイルを用意します。

リスト2 CScriptファイル cordova.js(Windows/Android用)100行目に追記
function spec() {
    function read(filename) {
        var fso=WScript.CreateObject("Scripting.FileSystemObject");
        var f=fso.OpenTextFile(filename, 1);
        var s=f.ReadAll();
        f.Close();
        return s;
    }
    function write(filename, contents) {
        var fso=WScript.CreateObject("Scripting.FileSystemObject");
        var f=fso.OpenTextFile(filename, 2, true);
        f.Write(contents);
        f.Close();
    }
    function replaceInFile(filename, regexp, replacement) {
        write(filename, read(filename).replace(regexp, replacement));
    }

    var path = exec("%comspec% /c java -jar "+ROOT+"\\cordova\\appinfo.jar "+ROOT+"\\AndroidManifest.xml");
    path = path.replace(/\//g, ""); 
    path = path.replace(/\./g, "\\");
    path = ROOT + "\\src\\" + path + ".java";

    replaceInFile(path, "index.html", "spec.html");
    BOOM();
    replaceInFile(path, "spec.html", "index.html");
}
リスト3 バッチファイル spec.bat(Windows/Android用)
%~dp0\cordova.bat spec

追加したコードでは、プロジェクト内のアクティビティ用Javaファイルを特定し、最初に表示するHTMLファイルをspec.htmlに変更してBOOMコマンドを実行。その後、元のindex.htmlを開くように修正した内容を元に戻す処理を行っています。

spec.batファイルをプロジェクトフォルダのcordovaフォルダ以下に配置します。コマンドプロンプト上でcordova\specを実行すると、最初に表示するHTMLファイルをindex.htmlからspec.htmlに変更した上で、BOOMコマンドを実行し、エミュレータ上でJasmineのテストを実行します。

Androidエミュレータ上でJasmineテストを実行
Androidエミュレータ上でJasmineテストを実行

これらのファイルをあらかじめcreateコマンドと同階層に配置されているtemplatesディレクトリに展開しておくことで、createコマンドで作成したPhoneGapプロジェクトでspecコマンドが利用できるようになります。


各種IDEを使用せずにターミナル・コマンドプロンプトから操作を行うことで、開発開始までのデプロイ時間を大幅に短縮することが可能になります。また、自分の好みのエディタや開発環境でコーディングが行えるのも嬉しいところです。

外部ツールとして一連の操作を自動化することで、時間の節約やミスを減らすことにつながります。同じ操作を手動で頻繁に行っている場合は、ツールの作成を検討してみましょう。

おすすめ記事

記事・ニュース一覧