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アプリ作成」で確認できます。

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

コメント

コメントを投稿

このブログの人気の投稿

プロキシ設定 Android Studio

イメージ
プロキシ経由の環境で、Android Studioを利用するための設定です。 ■Android Studioのプロキシ設定 1.「Welcome to Android Studio」画面から[Configure] ⇒ [Settings]を選択します。 ※または、プロジェクト作成画面から[File]-[Settings]を選択します。 2.「Settings」画面の左ペインの[HTTP Proxy]を選択します。 3.「Settings」画面の右ペインで、以下の設定を行います。 ・Manual proxy configuration にチェックを入れます。 ・HTTP にチェックを入れます。 ・Host name にプロキシサーバーのドメインまたは、IPアドレスを設定します。 ・Port number にプロキシサーバーのポート番号を設定します。 ■Android SDK のプロキシ設定 1.「Welcome to Android Studio」画面から[Configure] ⇒ [SDK Manager]を選択します。 ※または、プロジェクト作成画面から[Tools]-[Android]-[SDK Manager]を選択します。 2.「Android SDK Manager」画面から[Tools]-[Options]を選択します。 3.「Android SDK Manager - Settings」画面で、以下の設定を行います。 ・HTTP Proxy Server にプロキシサーバーのドメインまたは、IPアドレスを設定します。 ・HTTP Proxy Port にプロキシサーバーのポート番号を設定します。
続きを読む

Android SDK　アップデート後のエラー対応

イメージ
今回は、Android SDKのアップデート後のエラー対応についてまとめてました。 Android SDK Managerで利用可能なアップデート（Update available）があったので、アップデートを行います。 「The Android SDK and AVD Manageer that you are currently using has been updated. It is recommended that you now close the manager window and re-open it. If you use Eclipse,please run Help > Check for Updates to see if the Android plug-in needs to be updated.」のインフォメーションダイアログが表示されます。 インフォメーションの指示に従い、[OK]をクリックした後、AVD Managerを再オープンします。 そして、Help > Check for Updateからソフトウェアのアップデートをチェックします。 アップデートした後に、Eclipseを再起動すると以下のエラーが表示されます。 「This Android SDK requires Android Developer Toolkit version 21.1.0 or above. Current version is 21.0.1.2012-12-6-2-58.Please update ADT to the latest version.」 ADTを最新バージョンに更新してくださいとのメッセージなので、[Check for Updates]をクリックすると、「No updates were found.」が表示されてしまいます。 そこで、どうしたらよいのか色々調べてみたところ、以下の対応をすればよいみたいです。 Help > install New Software からAvailable Software を開き[Add]をクリックして表示されるダイアログに名前と...
続きを読む

FragmentとActivityの連携について

WEB上でFragmentについて検索すると、関連する内容がたくさんヒットするのですが、残念なことに、日本語による関連サイトが余りにも少ないのが現状です。 そこで、今回は、今更の感はございますが、Fragmentについて、その中でも特に情報が少ないFragmentとActivityの連携についてまとめてみました。 ■Fragmentから特定のActivityと連携する場合 ①FragmentからActionBarを操作する まず、FragmentクラスのgetActivity()メソッドによって、Fragmentが関連付けられているActivityのインスタンスを取得します。 public final Activity getActivity () -------------------- [Returns] Return the Activity this fragment is currently associated with. -------------------- 次に、ActivityクラスのgetActionBar ()メソッドによって、ActionBarのインスタンスを取得します。 public ActionBar getActionBar () -------------------- [Returns] The Activity's ActionBar, or null if it does not have one. -------------------- 以下のようなメソッドを用意しておくと便利です。 private ActionBar getActionBar() {     return getActivity().getActionBar(); } ActionBarクラスのメソッドで、以下のような操作が出来ます。 ・アプリアイコンをHomeボタンとする。 actionBar.setHomeButtonEnabled(true); ・アプリアイコンの左に戻るアイコンを追加する。 actionBar.setDisplayHomeAsUpEnabled(true); ・タイトル（サブタイトル）を表示する。 actionBar.setDispla...
続きを読む