アプリ開発からお金の節約まで幅広く気になったネタを記録していきます

さくらいらぼ

android

PhoneGap3.2をMavericksにインストールしたときのまとめ

スポンサードリンク

投稿日:2013/12/15 更新日:

PhoneGap Home

PhoneGap3.2をMavericksにインストールしたときのまとめ
しばらくアップデートしてなかったら3.2になっていて、インストール方法が変わっていました。

環境

Mac OX 10.9
PhoneGap 3.2
Xcode 5.0.2

[1]PhoneGap3.2をインストール

PhoneGap | Install PhoneGap

インストールはnode.jsを使う。
インストールされていない場合にはサイトへ行きnode.jsをダウンロードする。

インストール後ターミナルを開き、以下のコマンドを実行。

phonegapがローカルにインストールされる。

[2]phonegapのプロジェクトフォルダを作成。

■詳細URL
PhoneGap API Documentation

適当な階層へ移動して、以下のコマンドを実行。

「my-app」という名前のフォルダができ、フォルダの中に
merges,platforms,plugins,wwwのフォルダが作成される。

スポンサードリンク

[3]iOSアプリをビルドする

my-appフォルダへ移動。

以下コマンドを実行。

※フォルダ名、プロジェクト名を指定するときの例
フォルダ名:foldername
id:com.helloworld
プロジェクト名:project helloworld

successfully compiled iOS appがでたら完了。
ビルド後のファイルが/my-app/platforms/ios/以下に作成される。
Xcodeで開くときは /my-app/platforms/ios/****.xcodeprojを開く。

Xcode左上の再生ボタンを押してiOSシュミレーターで画面確認。
iphone-2

[4]Androidアプリをビルドする。

Android SDKをダウンロードして適当な階層へ解凍。
Android SDK | Android Developers

今回はアプリケーションフォルダに移動させた。
/Applications/adt-bundle-mac-x86_64-20131030/

[5]Android SDK Toolsのパスを通す。

3A. PATH 環境変数の設定 (Mac OS) より
PhoneGap API Documentation

ターミナルを開く。
.bash_profileにパスを記載。以下を実行

テキストエディタにAndroid SDK Toolsのパスを書く。

.bash_profileを保存。

ターミナルでAndroidコマンドをうつ。

successfully compiled Android appが出たら、
ビルド後のファイルが/my-app/android/以下に作成される。

Android Sdkで開く。

/Applications/adt-bundle-mac-x86_64-20131030/eclipse/Eclipse.appを起動。

File > New > project > Android > Android Project from Existing Code を選択。

Adb 2

Adb 3

Root Directory 右側にあるBrowseのボタンを押し、
/my-app/platforms/android/の階層を開き、Finish.

USBでAndroid実機を接続して、
メニュー > Run > Run as > Android Applicationから実機に転送。

[6]html編集

/my-app/www/に実際に編集するhtml,css,jsを置く。

初期画面で表示されているのは/my-app/www/index.html

編集後、ターミナルを開きビルドすると
iOS,androidフォルダに編集したhtmlが反映する。

作業中に出たエラー

Android SDKのパスが通し忘れ。

準備だけでしんどーい。

■参照URL

Error executing command 'ant' on Mac OS X 10.9 Mavericks when building for Android with PhoneGap - Stack Overflow

スポンサードリンク

-android
-, ,

Copyright© さくらいらぼ , 2019 All Rights Reserved.