ようへい
閲覧には Mozilla FireFox、Google Chrome、もしくは Gecko、Webkit を利用したブラウザを推奨します。
Internet Explorer 6～8 では表示できない部分があります。

2012年9月26日水曜日

[Eclipse] PhoneGap で Android アプリ開発

面白そうな記事を見つけたので、早速試してみる。
なんでもHTML、JavaScript、CSSでAndroidアプリが作れるそうだ。
Adobeいつのまにこんなフレームワーク作ってたんだ・・・
Eclipse×PhoneGapでAndroidアプリ開発！　～インストールからアプリ実行まで （1/3）：CodeZine
http://codezine.jp/article/detail/6687
Apache Cordova API Documentation
http://docs.phonegap.com/en/2.1.0/guide_getting-started_android_index.md.html#Getting Started with Android

PhoneGapの準備

以下のページからPhoneGapをダウンロード。
PhoneGap | Download & Archives
http://www.phonegap.com/download 現時点で最新の 2.1.0 をダウンロードしました。
ダウンロード後、解凍しておきます。

プロジェクトの作成

Androidプロジェクトを新規に作ります。
PhoneGap で Android アプリ開発


ここでは、2.3.3をターゲットとしてプロジェクトを作りました。

テストプロジェクトなのでCreate custom launcher iconのチェックは外します。


PhoneGap で Android アプリ開発


BlankActivityを作成します。

PhoneGap で Android アプリ開発


後は適当に。


PhoneGapインストール


PhoneGap で Android アプリ開発



プロジェクトのassetsディレクトリ内にwwwフォルダを作成します。

また、libsフォルダが無い場合は新規に作成します。

PhoneGap で Android アプリ開発


PhoneGapのlib/android/cordova-2.1.0.jsをassets/wwwディレクトリにコピーします。

lib/android/cordova-2.1.0.jarをlibsディレクトリにコピーします。

lib/android/xmlディレクトリをresディレクトリにコピーします。

libs配下に追加したcordova-2.1.0.jarをビルドパスに追加するため、libs/cordova-2.1.0.jarを右クリックし、ビルド・パス->ビルド・パスに追加を行います。


アプリの作成


PhoneGap で Android アプリ開発



index.htmlをwwwディレクトリ配下に作成。

Webサイトと同じように、このファイルがアプリのトップ画面になるようだ。

index.htmlに書くコードは以下。

index.html
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML>
<html>
  <head>
    <title>PhoneGap</title>
    <script type="text/javascript" charset="utf8" src="cordova-2.1.0.js"></script>
  </head>
  <body>
    <h1>Hello PhoneGap</h1>
  </body>
</html>

Activityファイルを開き、以下のように変更します。


MainActivity.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package jp.blogspot.logroid.phonegap.test;
 
import org.apache.cordova.DroidGap;
 
import android.os.Bundle;
 
public class MainActivity extends DroidGap {
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 super.loadUrl("file:///android_asset/www/index.html");
    }
 
}



メタデータ修正


AndroidManifest.xmlファイルを開き、以下のように変更します。

AndroidManifest.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="jp.blogspot.logroid.phonegap.test"
    android:versionCode="1"
    android:versionName="1.0" >
 
    <uses-sdk
        android:minSdkVersion="10"
        android:targetSdkVersion="15" />
 
    <supports-screens
        android:anyDensity="true"
        android:largeScreens="true"
        android:normalScreens="true"
        android:resizeable="true"
        android:smallScreens="true" />
 
    <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.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.BROADCAST_STICKY" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            configChanges="orientation|keyboardHidden"
            android:label="@string/title_activity_main" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>


実行


PhoneGap で Android アプリ開発



なかなか簡単に実行までできました。

本格的にJavaScript、CSS使ったアプリも作ってみたいと思います。









関連記事


    








投稿者





時刻:
21:30












このエントリーをはてなブックマークに追加






ラベル:
,
,
,

















0 件のコメント:















コメントを投稿