Log in

PhoneGap でアプリ開発 - PhoneGap のインストール(Android)

目次へ戻る

PhoneGap とは

PhoneGap は、スマートフォンアプリ用のオープンソースなプラットフォームです。一つのソースコードから Android、iPhone、iPad、Windows Phone 用のアプリを作成できるのが大きな特徴です。
アプリは HTML + CSS + JavaScript で作成します。こう書けば感の良い方はわかると思いますが、PhoneGap は WebView(Android)、UIWebView(iOS)、WebBrowser コントロール(Wihdows Phone)の中に HTML を表示することによってクロスプラットフォームな環境を実現しています。もちろん単に WebView を貼り付けただけではスマートフォンの持つカメラや GPS、ジャイロといった機能が使えませんから、これらをオブジェクトとして公開し JavaScript から使用できるようにしています。このような仕組みになっているため、実効速度はネイティブアプリに比べると遅くなります。

このように、PhoneGap を使うとソースコードを共通化できますが、アプリのビルドは各プラットフォーム用に行う必要があります。Android は eclipse なりを使って、iOS は XCode で、Windows Phone は Visual Studio を使って、といった感じでプラットフォームごとの開発環境が必要になります。もちろん、アプリを公開するには Android、iOS、Windows Phone それぞれで開発者登録が必要です。Adobe PhoneGap Build というクラウド上でアプリがビルドできるサービスもあります。私は使ったことないので詳細はわかりませんが、たとえば iOS 用にビルドするには Mac で証明書やプロビジョニングプロファイルを設定しておいてそれの署名を登録しなくちゃいけないようなので、Mac や iOS Developer Program への登録などは必要なようです。

なお、ここでは PhoneGap と呼んでいますが、正確には Apache Cordova が元々で、それを Adobe 社がリリースしているのが PhoneGap という関係だそうです。

PhoneGap のインストール

Windows に PhoneGap をインストールし Android 用の開発環境を作成します。(iOS 用の開発環境については後日書くつもりです)
まず、前提として Java で Android アプリを作れる環境が必要です。必要であれば「metaio SDK で AR してみた - Android 開発環境の構築」などを参照してください。

PhoneGap のインストール方法は ここ にあるとおりなんですが、どうやら PhoneGap 3.0 以降では Windows でも npm を使うようになったようです。(と言っても、私は npm のことは全然わかってません)
まず、npm を使うために node.js を入れます。これは msi ファイルをダウンロードしてインストールするだけです。
node.js を入れると npm が使えるようになっていますから、コマンドプロンプトを開き

C:\> npm install -g phonegap

とします。これで phonegap コマンドに必要なものがダウンロードされてインストールされます。
(どうやら %APPDATA%\npm\node_modules\phonegap にファイルが入るようです)

続いて、Android 用プロジェクトを作成します。
その前に Android Platform Guide に書いてあるように環境を整える必要があります。(このページではコマンド名が cordova になっていたりと、どうも phonegap コマンドを使うときとは異なるところもあるようですが、環境自体は同じようにすればいいようです)
具体的に必要なのは、

  • Ant をインストールしておく。(Ant のインストールはダウンロードした zip を解凍するだけ)
  • 環境変数 PATH に Ant\bin へのパスを追加。
  • 環境変数 PATH に %LOCALAPPDATA%\Android\android-sdk\platform-tools;%LOCALAPPDATA%\Android\android-sdk\tools を追加。
  • Android SDK マネージャーで Android 4.2(API 17)をインストール。(4.2 が入っていないと phonegap local run android のときに 入れろと言われて止まってしまう)

Ant が入っていなかったり必要なツールへのパスが通っていなかったりすると phonegap local run android のときに “[error] missing app data.” や “[error] An error occured during creation of android sub-project.” などと表示されて止まってしまいます。エラーメッセージだけでは原因がとてもわかりにくいので注意が必要です。

準備ができていればプロジェクトを作成できます。コマンドプロンプトを開き

C:\> phonegap create C:\MyProjects\MyApp1
C:\> cd C:\MyProjects\MyApp1
C:\> phonegap local run android

と言った感じで作成します。
3行目はドキュメントにあるように phonegap run android とすると GitHub につながろうとしてしまいます。local を指定してやると GitHub ではなくローカルに作成してくれました。また、run にするとビルドして Android 機で実行するところまで一気に進みます。単にプロジェクトを作成するだけのときは phonegap local install android でいいと思ったんですが、これではエラーが出てうまくいきませんでした。run の場合はうまくいきます。私のやり方がまずいだけかもしれませんが、どうするのがいいのかよくわかりません。

Eclipse でプロジェクトを読み込む

Eclipse の「ファイル」-「新規」-「プロジェクト」の「Android」-「既存コードからの Android プロジェクト」でルート・ディレクトリーに PhoneGap プロジェクトを指定します。(上の例だと C:\MyProjects\MyApp1)これだけで特に問題なくプロジェクトを開くことができました。

目次へ戻る