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

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

この記事を読むのに必要な時間:およそ 4 分

ターミナル上からコマンドを実行することで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です。

著者プロフィール

富田宏昭(とみだひろあき)

株式会社キクミミでFileMaker/SQLiteを使ったWebアプリ開発に従事しながら,オープンソースソフトウェアのハウツー記事執筆を行う。趣味は横乗り系スポーツ,美術館めぐり,高速ジャンクション鑑賞。

コメント

コメントの記入