Cordova(PhoneGap)の3系で開発環境の構築方法がガラっと変わったんで備忘録。
【目的】Windows7でAndroid+Cordova3系の開発環境を構築すること。
【前提】Androidの開発環境は構築済み。(SDK、ant)
目次
- Node.jsのインストール
- Cordovaのコマンドラインツールをインストール
- Android SDKのパスを通す
- プロジェクトを作成する
- プロジェクトにプラットフォームを追加する
- エミュレーターで確認する
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
成功すれば、こんな画面が表示されます。