この前、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がインストールされていないので、
 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]
この選択画面のAndroid4.2にチェックを入れて、install xx updateをクリックすると、利用規約のページに飛びます。それぞれの項目にたいして、規約を読んで、acceptにチェックを入れていきます。全部、チェックしたあと、installボタンをクリックするとインストールが始まります。結構時間かかりました。
インストールが終了したら、再々チャレンジ。
三回目チャレンジ
[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]
とすれば、調べられます。
再度挑戦。
できた！
まとめ
エラーを解決するために、えらいごちゃごちゃしましたが、簡単にいうと、次の流れになるようです。
- プロジェクトを作成(
cordova create xxx) - プラットフォームを追加(
cordova add platform xxx) - ビルド(
cordova build) - エミュレータで確認(
cordova emulate xxx)
あと、Androidのエミュレータがくそ重かったんですが、どうやら、[こちらの記事](http://www.webtech.co.jp/blog/developer-news/5966/ “Android SDK の高速エミュレータ、使ってますか？によると高速シミュレータがあるみたい。また、近いうちに、試してみます。
$cordova add platform xxxとなっていたのを$cordova platform add xxxに修正。ご指摘ありがとうございます！
プラットフォームを追加(cordova add platform xxx)
こちら、
cordova platform add xxx でした
あ、ホントですね。修正しました！
ご指摘ありがとうございます！
[…] と設定しました。JAVA_HOMEの場合はこちらの記事を参照PhoneGapの開発の流れを勉強してみた […]