Marvericks(10.9.4)上でPonegapを使ったAndroidアプリ開発の備忘録


とあることからMac上でPhonegapを利用したAndroidアプリ開発が出来ないかということで開発環境を構築したとき、ものすごく苦労したので備忘録を残します。

1.Android環境構築(Mac版)

まず用意するものはJAVA(JDK)、ecripse、Android sdk、エミュレータ(AVD)、ADT。
これは下記サイトを参考に構築した。
かなり詳しく書かれているので今回ははしょります。
(が、いつか消えてしまったら嫌なのでいつか書きます。)

Android SDKのダウンロードをする時はページがちょっと変わっているので注意が必要。

ここのページの「VIEW ALL DOWNLOADS AND SIZES」をクリックするとSDKのみダウンロードできます。
僕は先にecripseをインストールし、日本語化(pleiades)をしていたのでSDKのみインストールしました。

それと、Android SDKをインストールする時は、最新のAPI 19が必要になると思います。Android4.4.2というやつです。
これがないとあとでエラーが出ましたので。。。

2.Phonegapの準備

次にPhonegapのインストールです。
これも多数のサイトで紹介されていますが、Phonegap2とPhonegap3とでずいぶんやり方が変わっているので、間違わないように書いておきます。
(またいつか別途記事を書くかも)

2-1.node.jsのインストール

まず必要なのはnode.js

ここの「インストール」をクリックしてパッケージをダウンロードし、ダウンロードしたパッケージを展開してインストールする。
一応注意点としてはターミナルを閉じた状態でインストールすること。
その他は特に難しいことは無いのではしょります。
どうしても心配なら

ここの2〜7を見るとその簡単さが分かります。

2-2.PhoneGapのインストール

node.jsをインストールしたらターミナルを開いて次のコードを記入しEnter。

sudo npm install -g phonegap

すると何やらたくさん文字が出てきますが、最後にインストールしたライブラリの一覧が表示されたらインストール完了。
node.jsからphonegapのインストールまででおよそ5分で完了します。

2-3.プロジェクトの初期設定

そして下記を記述したらようやくプロジェクトの初期設定ができます。

phonegap create 任意のアプリケーション名

僕はとにかくテストだったので

phonegap create test-app

としました。
するとコマンドを実行したディレクトリにtest-appというディレクトリが作られ、その中に新規の初期状態のアプリケーションが生成されます。

3.Androidアプリのビルド

そして下記の記述によりAndroidアプリをビルド出来る。
・・・はずなのだがここで思いっきり大ゴケし、何時間も時間を費やしてしまった。

3-1.apache antのインストール

僕の環境でまず足りなかったのはapache ant。
取り急ぎ下記からインストール。

最初tar.gzファイルをダウンロードしたらなぜかantの認識をしてくれなかったので、zipをダウンロードし直しました。
そして僕は/usr/lib/apache-ant/ディレクトリを作成し、その中に展開したファイルを起きました。

3-2.PATHの設定

ここで必要になるのはPATHの設定です。
PATHの設定はJAVAとAndroid SDKも必要になるので合わせて行います。
ターミナルで下記を記述。.bash_profileをテキストエディットで開きます。

open -e .bash_profile

するとテキストエディットが起動して何も記述の無い.bash_profileが開くと思います。
そこに下記内容を記述します。

ANT_HOME=/Users/MD102JA/usr/lib/apache-ant/apache-ant-1.9.4
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_05.jdk/Contents/Home
PATH=$ANT_HOME/bin:$PATH
PATH=$JAVA_HOME/bin:$PATH
PATH=/Applications/android-sdk-macosx/tools:$PATH
PATH=/Applications/android-sdk-macosx/platform-tools:$PATH

順番に見ていくと、antのホームディレクトリを設定します。

ANT_HOME=/Users/MD102JA/usr/lib/apache-ant/apache-ant-1.9.4

今回ダウンロードしたのはapache-ant-1.9.4なのでそのようになっています。

次にJAVAのホームディレクトリを設定します。JAVAはたいていライブラリーの中にあると思いますので、上記の通りとなっています。

JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_05.jdk/Contents/Home

次にantのプログラムファイルのPATHを設定します。

PATH=$ANT_HOME/bin:$PATH

$ANT_HOMEは先に設定したantのホームディレクトリのことです。
antのプログラムファイルはantのホームディレクトリの中のbinディレクトリにありますので上記の通りになります。

次はJAVAのプログラムファイルのPATHを設定します。

PATH=$JAVA_HOME/bin:$PATH

JAVAのプログラムファイルはJAVAのホームディレクトリの中のbinディレクトリにありますので上記の通りになります。

次にandroid sdkのPATHを設定します。

PATH=/Applications/android-sdk-macosx/tools:$PATH
PATH=/Applications/android-sdk-macosx/platform-tools:$PATH

android sdkはhttp://techfun.cc/android/mac-android.html の設定でアプリケーションディレクトリに入れる事になってましたので上記の通りとなります。
toolsディレクトリとplatform-toolsディレクトリを設定する必要があるようです。

最後に上書き保存をした後、ターミナルに下記を記述してPATHを反映させます。

source ~/.bash_profile

この設定が出来たら確認をします。
ターミナルで下記を記述しEnterします。

ant -version

どうでしょう?

Apache Ant(TM) version 1.9.4 compiled on April 29 2014

と出たでしょうか?
エラーなどが出たらantをちゃんと認識していないので、PATHが間違っていないかなどをもう一度確認し、間違いが無ければantをもう一度ダウンロードし直してみましょう。

次にJAVAの確認です。

JAVA -version

こちらもちゃんと

java version "1.8.0_05"
Java(TM) SE Runtime Environment (build 1.8.0_05-b13)
Java HotSpot(TM) 64-Bit Server VM (build 25.5-b02, mixed mode)

このような感じででたら成功です。

そしてAndroidの確認は、バージョンとかは特にないので下記のようにして確認で良いと思います。

android

これをターミナルに記述してEnterすると、Android sdk managerが開きます。
無事開いたらPATHの設定は完了です。

3-3.アプリケーションのビルド

さて、いよいよビルドのお時間です。
ターミナルに下記を記述しEnterします。

cd test-app

これはもちろん「2.phonegapの準備」でやった、任意のアプリケーション名のディレクトリに移動すると言う事です。
そしてそこで下記を記述、Enterします。

phonegap build android

これで無事にビルド出来るはずです。
できなくてエラーが出たらPATHの部分などの確認をし直して下さい。

4.ecripseでアプリケーション編集

最後にecripseでアプリケーションを編集します。
ecripseを起動し、ファイル>新規>プロジェクト>既存コードからのAndroidプロジェクトを選択、次へをクリック。
ルートディレクトリーの参照をクリック、phonegapで作成したアプリケーションのandroidディレクトリを選択、開くをクリック。(僕の場合/test-app/platforms/android/を選択)

プロジェクト欄のproject to importにプロジェクトが表示されると思うので、チェックを入れて完了をクリック。
これでecripseを使って編集できるようになりました。
プロジェクトの中のwwwディレクトリ内にあるindex.htmlやcss、javascriptを編集してアプリケーションを作りましょう!

5.最後に

WordpressとJSON-APIを使えば、ブログをアップする感覚でアプリケーションの更新が出来そうです。
そちらの方法はまた勉強して備忘録を書こうと思います。