PhoneGap Fan

プラットフォームの選択

• iOS
• Android(Mac編)
• Android(Windows編)

必要なツール

• JDK(Java SE Development Kit)
• Android SDK
• Eclipse Classic
• ADT Plugin
• PhoneGap

それぞれ、最新版をダウンロードし、インストールします。これから、インストール方法を紹介します。

JDKのインストール

【1】JDKのダウンロード
Java SE Development Kitダウンロード画面から、使用しているOSに合わせた最新の「Java SE Development Kit」をダウンロードします。

【2】JDKのインストール
ダウンロードしたインストーラーを開き、画面に従ってインストールを行います。

Android SDKのインストール

【1】Android SDKのダウンロード
Android Developersサイトから、最新の「Android SDK」をダウンロードします。EXE形式のインストーラーを推奨します。

【2】Android SDKのインストール
ダウンロードした「installer_r10-windows.exe」のアイコンをダブルクリックして、インストールを開始します。画面に従って、インストール処理を行ってください。
途中で設定する「Destination Folder」は「C:\android-sdk」に変更してください。
最後に、「Finish」を押すと、Android SDK Managerが立ち上がります。

Android SDKの設定

1.Android SDK Managerが起動してすぐは、更新パッケージを検索しているので、しばらく待ちます。検索が終了すると、ウィンドウは自動的に閉じられます。
2.「Available packages」を選択し、「Android Repositry」「Third party Add-ons」をチェックして、「Install Selected」を押します。
3.「Accept All」をチェックして、「Install」を押します。
4.インストールが終了したら、「Close」を押し、ウィンドウを閉じます。

環境変数の設定

【1】コントロール パネル ホームを開く
「スタート」→「コンピューター」を右クリック→「プロパティ」

【2】「コントロール パネル ホーム」
「システムの詳細設定」を押します。

【3】「システムのプロパティ」の設定
「環境変数」を押します。

【4】「環境変数」の設定
「システム環境変数」の中にある「Path」を選択し、「編集」を押します。

【5】Pathの設定
「変数値」の最後尾に、「C:\android-sdk\tools\;C:\android-sdk\platform-tools\;」を追加し、「OK」を押します。

Eclipseのインストール

【1】Eclipseのダウンロード
下記より、最新の「Eclipse Classic」をダウンロードしてください。
http://www.eclipse.org/downloads/

【2】ダウンロードしたファイルを解凍する
Eclipseにはインストーラーがないので、解凍するだけで使用できるようになります。
「eclipse」フォルダはデスクトップや「アプリケーション」フォルダ内など好きな場所に置いてください。

【3】Eclipseを起動する
解凍した「eclipse」フォルダ内にある「Eclipse.exe」をダブルクリックして、Eclipseを起動させます。

【2】Workspaceフォルダを作成する
「Workspace」を「c:\workspace」に変更します。こちらも好きな場所を選択して問題ありません。「Use this as the default and do not ask again」をチェックします。「OK」を押します。

【3】Eclipseの起動
以上で、初期設定が完了し、Eclipseが起動します。

【4】プラグインの追加
1.Eclipseが起動したら、「Help」→「Install New Sofware...」。
2.「Add」を押します。
3.Nameに「ADT Plugin」、Locationに「https://dl-ssl.google.com/android/eclipse/」と入力し、「OK」を押します。
4.「Pending...」が「Developer Tools」に変化したら、「Select All」→「Next」。
5.「Next」を押します。
6.「I accept the terms of the license agreement」をチェックし、「Finish」を押します。
7.Security Warning画面が出てきた場合、「OK」を押します。
8. 「Restart Now」を押して、Exlipseを再起動させます。

【7】Android SDKの設定
1.「Window」→「Preference」。
2.「Android」→「SDK Location」で「Browse」を押します。
3.「C:\android-sdk」を選択し、「OK」を押します。
4.「Apply」を押すと、Android SDKが読み込まれます。　「OK」を押します。

【8】　エミュレーターの設定
1.「Window」→「Android SDK and AVD Manager」。
2.「Virtual devices」タブを選択後、「New」を押します。
3.「Name」に「Android2.1」を入力、「Target」を「Android 2.1-update1 - API Level 7」にします。「Create AVD」を押します。
4.リストに「Android2.1」が表示されていることを確認します。

Androidプロジェクトのセットアップ

Eclipseを起動し、「Window」→「Preference」を選択します。「Android」→「SDK Location」で「Browse」を押します。「C:\android-sdk」を選択し、「OK」を押します。「Apply」を押すと、Android SDKが読み込まれます。

「File」→「New」→「Project」を選択してください。さらに「Android」→「Android Project」を選択してください。



workspaceとして設定した「HelloPhoneGap」ディレクトリの中に以下の二つのディレクトリを新規に作成してください。

/libs
/assets/www

ダウンロードしたPhoneGapフォルダの中にある「phonegap.js」ファイルを「/assets/www」へ、「phonegap.jar」ファイルを「/libs」へ、それぞれコピーしてください。
Eclipse内の「src」フォルダの中にある「「Activity」.java」に変更を加えてください。（詳細は画像参照）



import com.phonegap.*;
を追加します。

public class App extends Activity {
↓
public class App extends DroidGap {
に変更します。

setContentView(R.layout.main);
↓
super.loadUrl("file:///android_asset/www/index.html");
に変更します。

ここで、Eclipse が phonegap-0.9.2.jar を見つけられないことによるエラーが発生する可能性があります。
その場合は、「libs」フォルダを右クリックし「Build Path」→「Configure Build Path」を選択し、「Libraries」タブ内で「Add JARs...」→「libs」→「phonegap-0.9.2.jar」を選択し「OK」を押します。最後にプロジェクトを更新（F5）してください。

「AndroidManifest.xml」を右クリックして、「Open with」→「Text Editor」を選択します。
versionNameの下に以下のpermissionsを貼り付けます。（詳細は画像参照）

index.htmlの新規作成・編集

「/assets/www」ディレクトリ内に「index.html」ファイルを作成し下記のコードを貼り付けます。

シミュレーターで実行する

プロジェクトを右クリックし、「Run as」→「Android Application」を選択してください。
この時、ADVを選ぶようにダイアログが出ます。もしADVを作成していない場合は新規作成してください。

デバイスで実行する

デバイス上でUSBデバッギングが有効になっていることを確認し、コンピュータに接続します。
プロジェクトを右クリックし、「Run as」→「Android Application」を選択してください。