いいね!Androidアプリ「Cordova3によるAndroidアプリ作成」でCordovaのインストールからアプリ作成の概要を書きました。今回は、ソースコードの編集と動作確認の流れをまとめてみました。
[前提]作成済みのプロジェクト
--------------------------------------------
ディレクトリ「hello」
パッケージ名「papakingyo.application.hello」
プロジェクト名「HelloWorld」
--------------------------------------------
※プロジェクトの作成方法はいいね!Androidアプリ「Cordova3によるAndroidアプリ作成」で確認できます。
1.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ファイルを編集します。
2.プラットフォームへ反映
>cordova prepare android
Generating config.xml from defaults for platform "android"
Preparing android project
「1」で編集した内容が、プラットフォームの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コマンドによって上書きされて残りません。
3.アプリのコンパイル
>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
※以下は、「2」「3」を続けて実行するコマンドです。
>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.
4.動作の確認
>cordova emulate android
エミュレータで動作確認をします。
※エミュレータの使用方法はいいね!Androidアプリ「Cordova3によるAndroidアプリ作成」で確認できます。
「1」から「4」を繰り返してアプリを完成させます。
2014年1月29日水曜日
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をインストールすることができるようになります。
>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をインストールすることができるようになります。
2014年1月26日日曜日
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/
それでは、環境構築、プロジェクトの作成、エミュレータでの実行までを、順を追って説明します。
■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
登録:
投稿 (Atom)