この前、PhoneGapのインストールするとこまでできたので、PhoneGapの開発の流れが分かるまで勉強してみました。

前回はphonegapをインストールしたんですが、公式ドキュメントに合わせて次のコマンドでインストールし直してます。

[code lang=text]
$ npm install -g cordova
[/code]

たぶん、中身的にはほとんど変わらないもんだと思います。

プロジェクトを作成

さて、とりあえず、作業ディレクトリ内で

[code lang=text]
$ cordova create test com.inter-arteq.app test
[/code]

そしたら、testフォルダができて、その中に必要なファイル群ができます。

iOSのプラットフォーム追加

まず、プロジェクトにiOSのプラットフォームを追加してやります。

[code lang=text]
$ cd test
$ cordova platform add ios
[/code]

ここで、エラー出る人はたぶん、ios sdkがインストールされていないので、
![この辺](http://www.atmarkit.co.jp/ait/articles/1211/07/news017.html “iOSアプリ開発初心者に捧ぐ開発環境Xcodeの概要とインストール”を参考にXCodeをインストールしてみてください。

Androidのプラットフォーム追加

次はandroid。基本はさっきと同じです。

一回目チャレンジ

[code lang=text]
$ cordova platform add android
Downloading cordova library for android…
Download complete
Checking Android requirements…
[Error: The command ´android´ failed. Make sure you have the latest Android SDK installed, and the ´android´; command (inside the tools/ folder) added to your path. Output: ]
[/code]

エラーが出た。どうやら、SDKがインストールされてないみたいなので、brewを使ってインストール。

[code lang=text]
$ brew install android
[/code]

よし、これでたぶんOK。再チャレンジ。

二回目チャレンジ

[code lang=text]
$ cordova platform add android
Checking Android requirements…
[Error: Please install Android target 17 (the Android 4.2 SDK). Make sure you have the latest Android tools installed as well. Run ´android´ from your command-line to install/update any missing SDKs or tools.]
[/code]

またエラーがでた。調べてみたら、SDK Toolをインストールしただけじゃだめよ、ってことらしいので次のコマンドを打って、AndroidのSDKマネージャを立ち上げ、Android 4.2 SDKをインストールします。

[code lang=text]
$ android
[/code]

Android SDKインストール

この選択画面のAndroid4.2にチェックを入れて、install xx updateをクリックすると、利用規約のページに飛びます。それぞれの項目にたいして、規約を読んで、acceptにチェックを入れていきます。全部、チェックしたあと、installボタンをクリックするとインストールが始まります。結構時間かかりました。

Android SDKインストール

インストールが終了したら、再々チャレンジ。

三回目チャレンジ

[code lang=text]
$ cordova platform add android
Checking Android requirements…
Creating android project…
[Error: An error occured during creation of android sub-project.
[Error: ERROR : Make sure JAVA_HOME is set, as well as paths to your JDK and JRE for java.]
]
[/code]

またエラった。$JAVA_HOMEを作ってなかったっぽいです。。。
ここを参考に前回同様、.profile

[code lang=text]
# for java[s]
export JAVA_HOME=/usr/libexec/java_home
# for java[e]
[/code]

を追記してsource bashします。次こそ四度目の正直!

四回目チャレンジ

[code lang=text]
$ cordova platform add android
Checking Android requirements…
Creating android project…
Preparing android project
[/code]

上手くいった!

プラットフォームが追加されてるか確認

ちゃんとできてるか、再度確認。

[code lang=text]
$ cordova platforms ls
Installed platforms: android 3.2.0, ios 3.2.0
Available platforms: blackberry10, firefoxos
[/code]

ちゃんと、androidとiosが使えるようになってます。

ビルド

さて、次はとりあえず、初期状態のものをコンパイルしてみます。

[code lang=text]
$ cordova build
Generating config.xml from defaults for platform "android"
Preparing android project

Compiling app on platform "ios" via command "/path/to/phonegap_workspace/test/platforms/ios/cordova/build"
Platform "android" compiled successfully.
Platform "ios" compiled successfully.
[/code]

上手くいったみたい。

iOSのエミュレータで実行

ビルドは上手くいったみたいなので、エミュレータで実行します。まずはiOSから。

[code lang=text]
$ cordova emulate ios
Generating config.xml from defaults for platform "ios"
Preparing ios project

[Error: An error occurred while emulating/deploying the ios project. Error: ios-sim was not found. Please download, build and install version 1.7 or greater from https://github.com/phonegap/ios-sim into your path. Or 'npm install -g ios-sim' using node.js: http://nodejs.org/
]
[/code]

エミュレータがインストールされてないみたいなので、brewでインストール。

[code lang=text]
$ sudo npm install -g ios-sim
[/code]

再度挑戦。

起動

いけた!

Androidのエミュレータで実行

次にandroid

[code lang=text]
$ cordova emulate android
Generating config.xml from defaults for platform "android"
Preparing android project
Running on emulator for platform "android" via command

Or run 'android create avd –name <name> –target <targetID>
in on the command line.
]
[/code]

エラーメッセージにしたがって、

[code lang=text]
android create avd –name test –target 2
[/code]

と入力。ここで、targetのidは

[code lang=text]
$ android list targets
[/code]

とすれば、調べられます。

再度挑戦。

Android Simulator

できた!

まとめ

エラーを解決するために、えらいごちゃごちゃしましたが、簡単にいうと、次の流れになるようです。

  1. プロジェクトを作成(cordova create xxx)
  2. プラットフォームを追加(cordova add platform xxx)
  3. ビルド(cordova build)
  4. エミュレータで確認(cordova emulate xxx)

あと、Androidのエミュレータがくそ重かったんですが、どうやら、[こちらの記事](http://www.webtech.co.jp/blog/developer-news/5966/ “Android SDK の高速エミュレータ、使ってますか?によると高速シミュレータがあるみたい。また、近いうちに、試してみます。

$cordova add platform xxxとなっていたのを$cordova platform add xxxに修正。ご指摘ありがとうございます!