JavaScript+HTML+CSSでAndroid開発ができるという、PhoneGapを使ってみました。
今回はTitaniumとは違い、問題なく設定できました。
環境
今回テストした環境です。
- WindowsXP
- Eclipse
- AndroidSDKの設定済み
以上の状態ではじめました。
AndroidSDKの設定については、
http://blog.livedoor.jp/shizuku_kun/archives/51455230.html
を参考にしてください
Eclipse上の作業。
まず、新規作成を行います。
新規作成で
Android Project を作成します。設定は
- Project Name: PhoneGapTest
- Build Target: Android 2.2
- Application Name: PhoneGapTest
- Package Name: com.phonegap.test
- Create Activity: PhoneGapTest
以上でOKにしました。
次に必要なディレクトリ、ファイルを追加。
PhoneGapTestを右クリックの「New -> Folder」から、「/assets/www」と「/libs」を追加し
の状態にします。
次に、最初に展開したzipの「/Android」内にある「phonegap-0.9.2.js」を「/assets/www」に、「phonegap-0.9.2.jar」を「/libs」にドラッグアンドドロップでコピーします。
「/assets/www」を右クリックから、「New -> File」から
FileName「index.html」を追加し
この画像のファイル構成になればOKです。
ライブラリの追加
まず、「/lib/phonegap-0.9.2.jar」を読み込ませる設定をします。
PhoneGapTestを右クリックから、Propertiesを開き
「Java Build Path」内の「Libraries」タブにある「Add JARs」を開き、(PhoneGapTestを右クリックから、「Build Path -> Add Libraries」一発で開けるようです)
「/lib/phonegap-0.9.2.jar」を指定します。
先ほど追加したindex.htmlを編集。
普通に開くとブラウザが開いてしまうので、右クリックから「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」を開き
画像の丸で囲った部分
- import com.phonegap.*; を追加
- extends Activity を extends DroidGap に変更
- super.loadUrl("file:///android_asset/www/index.html"); を追加
- setContentView(R.layout.main); を削除
のように変更します。
Manifestファイルの編集
「/AndroidManifest.xml」を開き
バージョンネームが記述してある行とアプリケーションタグの行の間に
<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)