JavaScript+HTML+CSSでAndroid開発ができるという、PhoneGapを使ってみました。

今回はTitaniumとは違い、問題なく設定できました。

環境

今回テストした環境です。

  • WindowsXP
  • Eclipse
  • AndroidSDKの設定済み

以上の状態ではじめました。

AndroidSDKの設定については、

http://blog.livedoor.jp/shizuku_kun/archives/51455230.html

を参考にしてください

まずダウンロード

http://www.phonegap.com/download

より、zipを落とし、展開します。(今回は0.9.2でした)

Eclipse上の作業。

まず、新規作成を行います。

WS000000

新規作成で

WS000001

Android Project を作成します。設定は

WS000002

WS000003

  • Project Name: PhoneGapTest
  • Build Target: Android 2.2
  • Application Name: PhoneGapTest
  • Package Name: com.phonegap.test
  • Create Activity: PhoneGapTest

以上でOKにしました。

次に必要なディレクトリ、ファイルを追加。

WS000018

PhoneGapTestを右クリックの「New -> Folder」から、「/assets/www」と「/libs」を追加し

WS000005

の状態にします。

次に、最初に展開したzipの「/Android」内にある「phonegap-0.9.2.js」を「/assets/www」に、「phonegap-0.9.2.jar」を「/libs」にドラッグアンドドロップでコピーします。

WS000007

「/assets/www」を右クリックから、「New -> File」から

WS000008

FileName「index.html」を追加し

WS000010

この画像のファイル構成になればOKです。

ライブラリの追加

まず、「/lib/phonegap-0.9.2.jar」を読み込ませる設定をします。

WS000013

PhoneGapTestを右クリックから、Propertiesを開き

WS000014

「Java Build Path」内の「Libraries」タブにある「Add JARs」を開き、(PhoneGapTestを右クリックから、「Build Path -> Add Libraries」一発で開けるようです)

WS000015

「/lib/phonegap-0.9.2.jar」を指定します。

先ほど追加したindex.htmlを編集。

WS000011

普通に開くとブラウザが開いてしまうので、右クリックから「Open With -> Text Editor」から開き

<!DOCTYPE HTML>
<html>
  <head>
    <title>PhoneGap</title>
  </head>
  <body>
  <h1>Welcome to PhoneGap</h1>
  <h2>Edit assets/www/index.html</h2>

  <script type="text/javascript" charset="utf-8" src="phonegap-0.9.2.js"></script>      
  <script type="text/javascript" charset="utf-8">
        document.addEventListener("deviceready", function() {
            alert('initialized');
    }, true);
  </script>
  </body>
</html>

を貼り付けて保存します。

  <script type="text/javascript" charset="utf-8" src="phonegap-0.9.2.js"></script>  

の部分はバージョンにあわせることに注意してください。

javaファイルの編集です。「/src/com.phonegap.test/PhongapTest.java」を開き

WS000016

画像の丸で囲った部分

  • import com.phonegap.*; を追加
  • extends Activity を extends DroidGap に変更
  • super.loadUrl("file:///android_asset/www/index.html"); を追加
  • setContentView(R.layout.main); を削除

のように変更します。

Manifestファイルの編集

「/AndroidManifest.xml」を開き

WS000017

バージョンネームが記述してある行とアプリケーションタグの行の間に

    <supports-screens
        android:largeScreens="true"
        android:normalScreens="true"
        android:smallScreens="true"
        android:resizeable="true"
        android:anyDensity="true"
        />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" />   
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />   
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

を追加し、activityタグ内に

android:configChanges="orientation|keyboardHidden"

を追加して保存して作業は終了です。

あとは

普通にコンパイルすれば、仮想デバイスや実機にて動作テストができます。

今回はポップアップが出れば成功です。


Titanium Mobileで開発するiPhone/Androidアプリ (Smart Mobile Developer)
Titanium Mobileで開発するiPhone/Androidアプリ (Smart Mobile Developer)