jqueryとphoneGapでAndoroidアプリ作成の基礎

Javaを覚えなければ、Andoroidの機種に依存した機能を利用したアプリを作ることができなかったのですが、Titaniumや今回紹介するphoneGapを使えば、GPSや加速度計など、機種に依存した機能を使えるアプリを作ることが可能になりました。

そんなphoneGapのまずを使っての作り方。今回はeclipseを使って環境を作ります。
※eclipseでAndroid開発環境を作るのはこちらから

1、phonGapをdawonload

公式サイトは→こちら

dawonloadして、解凍します。

今回使うのは
Androidフォルダ→phonegap.x.x.x.jarとphonegap.x.x.x.jsを使います。
※xはバージョンです。

2、eclipseのワークスペースにphongapを入れる

まずは、eclipseでAndroidプロジェクトをつくります。

フォルダを作り、phonegapのコードを挿入

1、assets/wwwフォルダをつくります。
2、wwwフォルダ内にphonegap.x.x.x.jsを挿入
3、libsフォルダをつくります。
4、libsフォルダ内にphonegap.x.x.x.jarを挿入

ビルドパスの構成

eclipseのプロジェクト・エクスプローラー画面でプロジェクトを右クリックして
ビルドパス→ビルドパスの構成を選びます。

ライブラリーでJar追加を選び、libs→phonegap.x.x.x.jarを追加します。

App.javaの書き換え

メインファイルのApp.javaファイルを書き換えます。

変更後

1、import com.phonegap.*;を追加
2、public class App extends Activity→public class App extends DroidGap に変更
3、setContentView(R.layout.main);→super.loadUrl(“file:///android_asset/www/index.html”);に変更

AndoroidMainfest.xmlの書き換え

タブで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" />

を追加します。

index.htmlを作る

これで下準備は完了です。
assets/wwwの中にindex.htmlを作ってAndroidで表示されるか試してみてください。

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</head>
<body>
<h1>PhoneGap Hello</h1>
</body>
</html>

phoneGapの日本語ファンサイトはこちら


コメントする