K-NOTE

ポイ活とかスマホアプリ開発とか気の向くままに

当ブログの内容等の正確性は保証しません。ご利用は自己責任で!

Cordova(PhoneGap)3系のインストール

Cordova(PhoneGap)の3系で開発環境の構築方法がガラっと変わったんで備忘録。

 

【目的】Windows7でAndroid+Cordova3系の開発環境を構築すること。

【前提】Androidの開発環境は構築済み。(SDK、ant)

 

 

目次

  1. Node.jsのインストール
  2. Cordovaのコマンドラインツールをインストール
  3. Android SDKのパスを通す
  4. プロジェクトを作成する
  5. プロジェクトにプラットフォームを追加する
  6. エミュレーターで確認する

 

1.Node.jsのインストール

Cordova3.0からNode.js製のコマンドラインツールが導入されました。

このツールによって、コマンドプロンプトでCordovaコマンドが利用できるようになります。

 

まずはNode.jsのWEBサイトに行って、Node.jsをインストールします。

http://nodejs.org/


Node.jsをインストールすると、Node.jsのパッケージマネージャであるnpmも同時にインストールされます。


このnpmを通じて、Cordovaのコマンドラインツールをインストールします。

 

きちんとインストールされたか、コマンドプロンプトでバージョンを確認してみます。

バージョンが表示されたらインストール成功です。

 

c:\>node -v
v0.10.32

 

c:\>npm -v
1.4.28

 

2.Cordovaのコマンドラインツールをインストール

コマンドプロンプトで以下のコマンドを実行し、Cordovaのコマンドラインツールをインストールします。

c:\>npm install cordova -g

 

しばらく待つと↓のような結果が出力されます。

C:\Users\xxx\AppData\Roaming\npm\cordova -> C:\Users\xxx\AppData\Roaming\npm\node_modules\cordova\bin\cordova
cordova@3.6.3-0.2.13 C:\Users\xxx\AppData\Roaming\npm\node_modules\cordova
├── q@0.9.7
├── underscore@1.4.4
├── nopt@2.2.1 (abbrev@1.0.5)
└── cordova-lib@0.21.13 (osenv@0.0.3, properties-parser@0.2.3, bplist-parser@0.0.5, mime@1.2.11,unorm@1.3.3, semver@2.0.11, shelljs@0.1.4, dep-graph@1.1.0, xcode@0.6.7, elementtree@0.1.5, rc@0.3.0, npmconf@0.1.16, glob@3.2.11, tar@0.1.20, request@2.22.0, npm@1.3.4, plist@1.0.1, cordova-js@3.6.4)

 

きちんとインストールされたか、コマンドプロンプトでバージョンを確認してみます。

C:\>cordova -v
3.6.3-0.2.13

 

3.Android SDKのパスを通す

Cordovaコマンドは、Android SDKのコマンドを内部で使用します。

そのため、次の2つのパスを通す必要がありますので、環境変数に追加します。

  • (Android SDKのルート)\sdk\tools
  • (Android SDKのルート)\sdk\platform-tools

 

パスが通っているかコマンドプロンプトで確認してみます。

C:\>android -h

Usage:
android [global options] action [action options]
Global options:
(以下省略・・・)

 

C:\>adb version
Android Debug Bridge version 1.0.31

 

4.プロジェクトを作成する

ここまでで環境の構築は終わりました。

次はCordovaコマンドを使ってプロジェクトを作成します。

 

c:\>cordova create c:\hello com.example.hello HelloWorld -d

 

このコマンドによって、「c:\hello」フォルダに、識別子が「com.example.hello」で、アプリ名称が「HelloWorld」というプロジェクトが作成されます。


ここで注意点。

アプリ名称には半角英数字のみを指定しないといけません。

このアプリ名称はMainActivityのクラス名にも使われるからです。

日本語アプリ名の場合は、面倒ですがあとでstrings.xmlの内容を書きかえましょう。

 

5.プロジェクトにプラットフォームを追加する

プロジェクトの作成が終わったら、Android用のプロジェクトファイルを追加します。

c:\>cd c:\hello
c:\hello>cordova platform add android

 

こんなような結果が出力されます。

npm http GET https://registry.npmjs.org/cordova-android/3.6.3
npm http 200
https://registry.npmjs.org/cordova-android/3.6.3
npm http GET https://registry.npmjs.org/cordova-android/-/cordova-android-3.6.3.tgz
npm http 200 https://registry.npmjs.org/cordova-android/-/cordova-android-3.6.3.tgz
Creating android project...
Creating Cordova project for the Android platform:
Path: platforms\android
Package: com.example.hello
Name: HelloWorld
Android target: android-19
Copying template files...
Project successfully created.

 

6.エミュレーターで確認する

cordova emulateコマンドで、Androidエミュレータを起動できます。

c:\hello>cordova emulate android -d

 

成功すれば、こんな画面が表示されます。

f:id:kforce_ueda:20141003163509j:plain