黒猫のWeb的開発

Webやスマートフォンアプリ開発未経験者が何かを勉強して作っていくためのメモです。

MacでPhone Gapを動かしてみた(iPhone&Androidのローカルビルド)

MonacaでiPhoneアプリとAndroidアプリを作ってみたが、ローカル環境にも開発環境がないとなんだか不安。
ということで、PhoneGapの開発環境をMac上に構築
http://monaca.mobi/ja/Monaca - HTML5モバイルアプリ開発プラットフォーム

PhoneGapのインストールガイドは以下から参照できる。
使ったことがないけど、3.0系以降は今までより簡単になっているらしい。
http://phonegap.com/install/

node.js&PhoneGapのインストール

$ brew install node
$ sudo npm install -g phonegap


プロジェクトの作成

$ phonegap create phonegap-sample
$ cd phonegap-sample

まずはiOSでアプリを起動

$ phonegap run ios

エラー発生!
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/

エラーメッセージにしたがって以下のコマンドを実行。

$ npm install -g ios-sim

再挑戦!

$ phonegap run ios 

起動したよ!
f:id:blackcatdelta:20131220145004j:plain

iOSのビルドは以下のコマンドで実行できそう。

$ phonegap build ios

上記のコマンドだとローカルビルドになるようである。
リモートでビルドするには以下のコマンドを実行する。

$ phonegap remote build ios

次はAndroidアプリとして起動

Androidアプリの開発環境は、ADTバンドル版をインストール済みである。
ADTバンドル版のおかげでAndroid開発環境のインストールが簡単になりました。

おそらくであるが、ローカルの開発環境が正しく設定されていないと、自動的にAdobeのPhoneGap Buildでリモートビルドしようとする。

$ phonegap build android

以下のエラーを解決し、ローカルビルド可能になったらデフォルトのビルドがローカルビルドになったようである。
リモートビルドを使おうとするとgithubのアカウントではアクセスできないから、以下でPhoneGap用のアカウントを作るように言われた(気がする・・・)
https://build.phonegap.com/people/sign_up

上記で作成したアカウント&パスワードを入力すると、リモートでビルドし、ローカルエミュレータを動作させることができる。

しかし今回の目的は、ローカルで開発する環境を構築するので、ローカル開発環境を整える。

すでにプロジェクトは作成済みであるため、以下のコマンドを実行。

$ phonegap run android

エラーが多発。
メモとして、発生エラーと対応策を書く。

エラー発生。その1

GitHub accounts are unsupported
https://build.phonegap.com/

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:

androidコマンドへのパスが通っていないみたいだったので、以下のパスを環境変数PATHに追加する。
/Applications/adt-bundle-mac/sdk/tools

エラー発生。その2

[phonegap] adding the Android platform...
[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.

Android target 17を入れてくださいと言われたので、AndroidSDKからtarget 17をインストールする。
最新のADTバンドル版をインストールしたらtarget 18しか入ってなかった。

エラー発生。その3

[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.]

JAVA_HOMEの環境変数が設定されていなかったため、以下のサイトを参考にしてい解決。
参考サイトhttp://qiita.com/seri_k/items/e978c1339ce51f13e297
export JAVA_HOME=`/usr/libexec/java_home`

エラー発生。その4

[error] An error occurred while emulating/deploying the android project.
/Users/hoge/Development/android/phonegap-sample/platforms/android/cordova/node_modules/q/q.js:126
throw e;
^
Error executing "adb devices": /bin/sh: adb: command not found

今度はadbコマンドへパスが通ってないとおこられたため、PATH変数に以下のパスを追加。
/Applications/adt-bundle-mac/sdk/platform-tools/
source ~/.bashrc
有効化するのも忘れずに!

$ phonegap remote run android

f:id:blackcatdelta:20131220145009j:plain

ちなみに明示的にローカルビルドするには以下のコマンドを実行する。

$ phonegap local build android