Cordova3によるAndroidアプリ開発の流れ

いいね！Androidアプリ「Cordova3によるAndroidアプリ作成」でCordovaのインストールからアプリ作成の概要を書きました。今回は、ソースコードの編集と動作確認の流れをまとめてみました。

[前提]作成済みのプロジェクト
--------------------------------------------
ディレクトリ「hello」
パッケージ名「papakingyo.application.hello」
プロジェクト名「HelloWorld」
--------------------------------------------
※プロジェクトの作成方法はいいね！Androidアプリ「Cordova3によるAndroidアプリ作成」で確認できます。

１．wwwディレクトリ配下のソースコードを編集

wwwディレクトリの構造は以下の通りです。

hello
+ .corova
+ merges
+ platforms
+ plugins
+ www
+ css
index.css
+ img
logo.png
+ js
index.js
config.xml
index.html

index.html、index.js、index.cssファイルを編集します。


２．プラットフォームへ反映

>cordova prepare android
Generating config.xml from defaults for platform "android"
Preparing android project

「１」で編集した内容が、プラットフォームのwwwディレクトリ配下にコピーされます。

hello
+ .corova
+ merges
+ platforms
+android
+assets
+www
+css
+img
+js
config.xml
cordova.js
cordova_plugins.js
index.html
+cordova
+CordovaLib
+libs
+platform_www
+res
+src
AndroidManifest.xml
build.xml
local.properties
proguard-project.txt
project.properties

その他、プラットフォームのjavaファイルやAndroidManifest.xmlなども、編集した内容に合わせて更新されます。

※プラットフォームのwwwディレクトリを直接編集した内容は、prepareコマンドによって上書きされて残りません。


３．アプリのコンパイル

>cordova compile android
Compiling app on platform "android" via command "cmd" /c xxx\hello\platforms\android\cordova\build
Platform "android" compiled successfully.

プラットフォームのソースコードがコンパイルされます。
コンパイルによって、プラットフォームにbin、genディレクトリが作成されて（初めてのcompile時）、ディレクトリ内にclassファイルなどが作成（2回目以降は更新）されます。

hello
+ .corova
+ merges
+ platforms
+android
+assets
+bin
+cordova
+CordovaLib
+gen
+libs
+platform_www
+res
+src
AndroidManifest.xml
build.xml
local.properties
proguard-project.txt
project.properties


※以下は、「２」「３」を続けて実行するコマンドです。

>cordova build android
Generating config.xml from defaults for platform "android"
Preparing android project
Compiling app on platform "android" via command "cmd" /c xxx\hello\platforms\android\cordova\build
Platform "android" compiled successfully.


４．動作の確認

>cordova emulate android

エミュレータで動作確認をします。
※エミュレータの使用方法はいいね！Androidアプリ「Cordova3によるAndroidアプリ作成」で確認できます。

「１」から「４」を繰り返してアプリを完成させます。

Cordovaインストールとプロキシエラーについて

プロキシ経由の環境に於いて、cordovaのインストール作業を実施すると、以下のようなエラーに遭遇することになります。

>npm install -g cordova

npm http GET https://registry.npmjs.org/cordova
npm http GET https://registry.npmjs.org/cordova
npm http GET https://registry.npmjs.org/cordova
npm ERR! network connect ETIMEDOUT
npm ERR! network This is most likely not a problem with npm itself
npm ERR! network and is related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'


エラーを回避するためには、npmに対して、以下の設定を行う必要があります。

npm config set proxy http://プロキシサーバのURL:ポート番号
npm config set https-proxy http://プロキシサーバのURL:ポート番号

(例)
>npm config set proxy http://xx.xx.xx.xx:xxxx
>npm config set https-proxy http://xx.xx.xx.xx:xxxx


以下で、設定値を確認します。

>npm config list
https-proxy = "http://xx.xx.xx.xx:xxxx/"
proxy = "http://xx.xx.xx.xx:xxxx/"


これで、プロキシ経由環境でcordovaをインストールすることができるようになります。

Cordova3によるAndroidアプリ作成

以前、いいね！Androidアプリ「PhoneGap (Cordova) によるAndroidアプリ作成」で、Cordovaによるアプリ作成について書きました。今回は、何が違うのかというと、Cordovaのバージョンが2.x.xから3.x.xになって、Cordovaの開発環境構築に、Node.jsを用いていることです。

それでは、環境構築、プロジェクトの作成、エミュレータでの実行までを、順を追って説明します。

■android開発環境の構築

androidの開発環境が構築されていない方は、
いいね！Androidアプリ「SDK ADT Bundle for Windows」による開発環境の構築①」を参照して構築してください。

■Antのインストール

いいね！Androidアプリ「ZXingでバーコードリーダーを作ってみよう①」の中で、Antのインストールについての記載があります。
こちらを参照して、インストールしてください。

■環境変数(path)の設定

以下のAndroid sdkとAntのディレクトリに対して、pathを通します。

[Android sdk root]\sdk\tools
[Android sdk root]\sdk\platform-tools
[Ant root]\bin

■node.jsのインストール

以下の手順に従って、node.jsをインストールしてください。

以下のnodejs公式サイトからダウンロードします。

http://nodejs.org/

[DOWNLOADS]をクリックします。

[Windows Installer(.msi)]から選択します。

[Next]をクリックします。

ライセンスに同意して、[Next]をクリックします。

[Next]をクリックします。

[Next]をクリックします。

[Install]をクリックします。

[Finish]をクリックします。

node.jsをインストールをすると、Node.jsとパッケージマネージャのnpmがインストールされます。

インストール完了の確認として、バージョンを表示してみます。

>node -v

v0.10.25

>npm -v

1.3.24

■cordovaのインストール

>npm install -g cordova

インストール完了の確認として、バージョンを表示してみます。

>cordova -v

3.3.1-0.1.2

■プロジェクトの作成

ディレクトリ「hello」

パッケージ名「papakingyo.application.hello」

プロジェクト名「HelloWorld」

として、プロジェクトを作成してみます。

>cordova create hello papakingyo.application.hello HelloWorld

Creating a new cordova project with name "HelloWorld" and id "masuoka.application.hello" at location "xxx\hello"

Installing cordova library for www...

Downloading cordova library for www...

Download complete

Installing cordova library for www...

■プラットフォームの追加

作成したプロジェクトhelloにandroidプラットフォームを追加します。

>cd hello

>cordova platform add android

Installing cordova library for android...

Downloading cordova library for android...

Download complete

Installing cordova library for android...

Creating android project...

Preparing android project

追加したプラットフォームを確認します。

>cordova platforms ls

Installed platforms: android 3.3.0

Available platforms: blackberry10, firefoxos, wp7, wp8, windows8

■エミュレータ

作成済みのエミュレータを確認する。

>android list avds

Available Android Virtual Devices:

    Name: 4.4

    Path: xxx\avd\4.4.avd

  Target: Android 4.4.2 (API level 19)

     ABI: armeabi-v7a

    Skin: 480x800

  Sdcard: 16M

エミュレータを起動する。

>emulator @4.4

作成したプロジェクトをエミュレータで実行する。

>cordova emulate android -d