RSS

PhonegapでiOS/Androidアプリを出力してみる

27 5月

JavaScriptで作ったアプリをAndroid、iOSのネイティブアプリ化する際にphonegapを使用したので
忘れないようにメモ。

てかちょっと前にLive2Dとかログの見方とか投稿してたので、完全に投稿する順番を間違えた気がする。
TyranoScript + Live2D + phonegap でiOSアプリ化したらLive2Dが動かない
phonegapで作ったiOSアプリのログを見る

とりあえずAndroidはWindows環境で、iOSはMac環境で実行してます。
特に↑の組み合わせの理由はなく、目の前にあったPCで暇な時に各々環境作ってたらそういう組み合わせになってました。

■事前にインストールしておくもの、使うもの

・Node.js
・Apatch ANT
・JDK

■使った開発環境

・Brackets
…JavaScript部分実装用(今回の内容では使わない)
・Eclipse
…Androidアプリ実装用
・XCode
…iOSアプリ実装用

■phonegapダウンロードとインストール

・ダウンロード
↓こちらを参考に。
http://phonegap.com/install/

・インストール
コマンドプロンプトもしくはコンソールで以下のコマンドを叩いてインストールしてあげる。

npm install -g phonegap

・確認

phonegap -v

Command not found にならなければとりあえずOK

■phonegapプロジェクト作成

コンソール等でphonegapプロジェクトを作りたいパスに移動。
Ex)
/dev/phonegap

以下のコマンドでプロジェクトを作成。
ついでにプラグインもいれてみた。

phonegap create panda info.flyingpillow.panda "panda"
cd panda
phonegap plugin add org.apache.cordova.media

プロジェクトができる
Ex)
phonegap以下にpandaディレクトリができている
/dev/phonegap/panda/

■Androidプロジェクト作成

プロジェクトの中のパスに移動。
Ex)/dev/phonegap/panda/

以下のコマンドでAndroidプロジェクトを作成。

phonegap platform add android
phonegap build android

■iOSプロジェクト作成

プロジェクトの中のパスに移動。
Ex)/dev/phonegap/panda/

以下のコマンドでiOSプロジェクトを作成。

phonegap platform add ios
phonegap build ios

プロジェクトディレクトリ¥platforms に中にAndroidとiOSのプロジェクトが作られる。
Ex)
/dev/phonegap/panda/platforms/android
/dev/phonegap/panda/platforms/ios

■Androidプロジェクトとして実行

作成されたAndroidプロジェクトのパスをEclipse等でAndroidプロジェクトとしてインポートする。
/dev/phonegap/panda/platforms/android

■iosプロジェクトとして実行

作成されたiosプロジェクトの中にあるxcodeprojをXcodeで開く。
/dev/phonegap/panda/platforms/ios/panda.xcodeproj

■実行

通常の手順で各々の開発環境からアプリとして実行する。

■引っかかった。

Windows+Androidの時

1)そもそも phonegap build android が通らない。
・環境変数にJAVA_HOMEがなかった
・環境変数にANDROID_HOMEがなかった
・環境変数にANT_HOMEがなかった

→All in one Eclipse使ってたんで、とかそもそもAntをインストールしてなかったとかいう自分の残念っぷり。
環境変数にパスを通したらツルッと行けます。

2)それでも phonegap build android が通らない。
uses-sdk:minSdkVersion 7 cannot be smaller than version 10 declared in library XXXXXXXXX
Suggestion: use tools:overrideLibrary=”org.apache.cordova” to force usage
FAILED
→phonegapプロジェクト直下にあるconfig.xmlに定義されているAndroidのSDK最小バージョンを書き換える。
Ex)/dev/phonegap/panda/config.xml

こちらを参考にさせていただきました、ありがとうございます。
Phonegap Create and Build commands fail due to minSDK version

Mac+iOSの時
は、特に引っかからなかった(´ω`)

以上、お疲れ様でした。

広告
 
コメントする

投稿者: : 2015/05/27 投稿先 Android, iOS, Mac, phonegap, Windows

 

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

 
%d人のブロガーが「いいね」をつけました。