PhoneGapでAndroidアプリを作るための基礎知識：PhoneGapで始めるWeb→スマホアプリ制作入門（1）（2/3 ページ）

[鴨田健次，アシアル株式会社]

■ Eclipse 3.7のインストール

　Androidアプリ開発を行う場合の一般的な統合開発環境（IDE）である「Eclipse Classic」もインストールしておきましょう。2011年7月現在の最新版は、3.7です。実際のソースコードを編集する際は、Dreamweaverなどを用いても構いません。

Eclipse Downloads via kwout

Eclipseのダウンロードページから、「Eclipse Classic 3.7」をダウンロードします。インストーラではないので、ダウンロードしたアーカイブを展開するだけです。展開した「eclipse」フォルダは好きな場所に格納し、Eclipseを起動します。

　起動直後に、プロジェクトの保管場所（ワークスペース）を選択できるので、分かりやすい場所を選択しましょう。後で直接フォルダを操作することもあります。

■ ADTのインストール

　EclipseにADT（Android Development Tool）プラグインを導入し、Android SDKをEclipseで利用できるようにします。

　Eclipseのメニューから［Help］→［Install New Software］を選択します。［Install］ウィンドウが開いたら、［Add］ボタンをクリック。［Name］に「ADT Plugin」、［Location］に「https://dl-ssl.google.com/android/eclipse/」と入力して、［OK］を押します。

　「Pending...」が「Developer Tools」に変化したら、［Select All］→［Next］。その後は、流れに沿って、インストールを進めます。最後に、「Restart Now］を押して、Eclipseを再起動すれば、ADTプラグインのインストールは完了です。メニューの［Window］内に、［Android SDK and AVD Manager］が追加されているはずです。

■ AVDの設定

　AVD（Android Virtual Devices）はAndorid OSのシミュレータです。

　Eclipseのメニューから、［Window］→［Preference］を選択します。左カラムで［Android］を選択し、右画面の［SDK Location］で［Browse」を押します。先ほど、Andorid SDKをインストールしたフォルダ（例えば、「C:\Program Files\Android\android-sdk」）を選択し、［OK］を押します。［Apply］を押すと、Android SDKが読み込まれます。

　続けて、［Window］→［Android SDK and AVD Manager］を選択します。左カラムで［Virtual devices］タブを選択後、［New］を押します。［Name］に「Android2.1」、［Target］を「Android 2.1-update1 - API Level 7」にし（Android OS 2.1以上が対象になります）、［SD Card］を「100」Mib、［Skin］の［Built in］は自分のディスプレイ環境に合わせてセットしてください。シミュレータが大きくて画面からはみ出るときは「QVGA」などにします。

　最後に、［Create AVD］を押し、リストに「Android2.1」が表示されれば、AVDの設定は終了です。

PhoneGapを使うプロジェクトを作成

　Eclipseのメニューから、［File］→［New］→［Project］を選択してください。さらに、［Android］→［Android Project］として進めます。

　プロジェクト作成画面になったら、［Project name］を「HelloWorld」、［Build Target］を「Android 2.1-update」、［Application name］を「Hello」、［Package name］を「com.example.hello」、［Create Activity］を「HelloActivity」とします。［Min SDK Version］は空白で構いません。［Finish］を押すと、プロジェクトが作成されます。

　［Window］→［Open Perspective］→［Other］を選択後、［Java（default）］として、［OK］を押します。［Welcome］タブが開いている場合、タブを閉じると、Javaの一般的な開発画面が現れます。

　［Package Explorer］で、「HelloWorld」を右クリックし、［Properties］を選択します。左カラムで［Resouce］を選択し、［Text file encoding］部分で［Other］にチェックし、「UTF-8」にします。この設定を行わないと、文字化けすることがあるので、注意しましょう。

■ PhoneGapの導入

　ここで、PhoneGapのサイトからPhoneGapをダウンロードしましょう。2011年7月現在の最新バージョンは0.9.6です。

　先ほど作成したワークスペースに、「HelloWorld」フォルダが作成されているので、その直下に「libs」フォルダを新規作成し、ダウンロードしたPhoneGapアーカイブの「Android」フォルダの中にある「phonegap.0.9.6.jar」を「libs」フォルダの中にコピーします。

　同様に、「aseets」フォルダの中に「www」フォルダを作成し、その中に「index.html」を作成した後、「Android」フォルダの中にある「phonegap.0.9.6.min.js」をコピーします。

　ここまでで、「Helloworld」プロジェクト内の階層構造は以下のようになります。

Helloworld
┣ src
┣ gen
┣ Android 2.1-update1
┣ assets
┃┗ www
┃　┣ index.html
┃　┗ phonegap.0.9.6.min.js
┣ libs
┃┗ phonegap.0.9.6.jar
┣ AndroidManifest.xml
┣ default.properties
┗ proguard.cfg

　Eclipseの［Package Explorer］で、「HelloWorld」を右クリックして、［Refresh］を行います。先ほどのファイルコピーの結果がプロジェクトに反映されます。「/libs/phonegap.0.9.6.jar」を右クリックして、［Build Path］→［Add to Build Path］を選択します。この作業でPhoneGapフレームワークがHelloWorldプロジェクトに導入されます。

次ページでは、いよいよコーディングを行い、アプリを動かしてみます。