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





コメント

コメントを投稿

このブログの人気の投稿

プロキシ設定 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...
続きを読む