2011年09月19日

PhoneGapでAndroidアプリ

PhoneGapでAndroidアプリをインストールするまでの備忘録

PhoneGapのインストールAndroid SDKのインストールはすでに完了してる。

Eclipse Classic 3.7のMac OS 64bitをダウンロード。ダウンロードした「eclipse-SDK-3.7-macosx-cocoa-x86_64.tar.gz」を解凍した「eclipse」を適当なフォルダへ。その後eclipsを
起動(workspaceは適当に)。

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]。後はウィザードに沿ってインストール。

メニューの[Eclipse]→[Preference]を選択、左メニューの「Android」を選択[SDK Location]にAndroid SDKまでのパスを入力(/Applications/android-sdk-mac_x86など)、その後[Apply]を押すと、Android SDKが読み込まれます。

Eclipseのメニューから、[File]→[New]→[Project]、[Android]→[Android Project]を選択

Eclipsワークスペースに、「HelloWorld」フォルダが作成されているので、その直下に「libs」フォルダを新規作成し、ダウンロードしたPhoneGapアーカイブの「Android」フォルダの中にある「phonegap.1.0.0.jar」を「libs」フォルダの中にコピーします。「aseets」フォルダの中に「www」フォルダを作成し、その中に「index.html」を作成した後、「Android」フォルダの中にある「phonegap.1.0.0.min.js」をコピーします。「res」フォルダにXMLフォルダをコピーします。

EclipseのPackage Explorerでプロジェクトを選択、まずは「src/com.example.helloworld/HelloActivity.javaを編集します。

package com.example.helloworld;

import android.app.Activity;
import android.os.Bundle;

public class HelloActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}


を次のように変更

package com.phonegap.helloworld;

//import android.app.Activity;
import android.os.Bundle;
import com.phonegap.*;

public class App extends DroidGap{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
super.loadUrl("file:///android_asset/www/index.html");
}
}


エラーが出るようだったらPhoneGapのjarファイルを読み込めてない可能性が高いので、EclipseのPackage Explorerで、「libs」フォルダを右クリックし、 「Build Path」→「Configure Build Path」を選択し、 「Libraries」タブ内で「Add JARs...」→「libs」→「phonegap-1.0.0.jar」を選択し、 「OK」を押します。 最後にプロジェクトを更新(F5)してください。

次にAndroidManifest.xml を編集「Open With」 から「 Text Editor」で開きます。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.phonegap.helloworld"
android:versionCode="1"
android:versionName="1.0">


<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".App"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>

</application>
</manifest>


を次のように変更

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.phonegap.helloworld"
android:versionCode="1"
android:versionName="1.0">
<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" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />

<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".App"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <intent-filter> </intent-filter> </activity>
</application>
</manifest>


index.htmlは次のようにしておく

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


エミュレータでチェックするにはプロジェクトを右クリックして[Run as]→[Android Application]を選択。プロジェクトが複数ある場合は[Run as]→[Run Configurations]で設定画面を開き左の+ボタンで新しいプロジェクトを追加して[Run]。

実機で確認するにはAndroid本体をUSB接続でつなげて「Target」タブでManualを選択、「Run」するとChoose arunnign Android deviceで実機確認ができます。



参考:PhoneGapでAndroidアプリを作るための基礎知識
Get Started Guide « PhoneGap
[DroidGap]のクラス部分が 「DroidGap cannot be resolved to a type」 と表示される場合の対応
タグ:PhoneGap android
posted by ねこまんま at 09:23 | Comment(0) | TrackBack(0) | PhoneGap | 更新情報をチェックする

2011年09月10日

PhoneGap入門

参考:ASCII.jp:HTML5でiPhoneアプリ開発!PhoneGap入門|古籏一浩のJavaScriptラボ

参考元とちょっと違うところもあったので、補足がてらインストール手順を紹介。Xcodeはインストールしているので飛ばします。ただ、実機確認するにはiOS Developer Programへ参加(年間1万800円)とXcode4が必要らしいです、おいおい購入としておこう。

まずはPhoneGap本体をダウンロード。

iOSフォルダ内にある「PhoneGap-1.0.0.dmg」を展開、「PhoneGap-1.0.0.pkg」をダブルクリックして開く。

インストーラーが立ち上がるのでウィザードにそってインストール。

つぎは、/Developer/Applications/xcode.appからXcodeを立ち上げる。

「Create a new Xcode project」から新規プロジェクトを作成、左のテンプレートから「PhoneGap」を選択して「選択」、適当なプロジェクト名を付けて保存。

wwwフォルダ内にプロジェクトのHTMLファイルがあるので色々操作できます。

iOSシュミレーターでの確認はプロジェクトメニューから「アクティブな実行可能ファイルを設定」→「iPhone Simulator 4.3」を選択後、「ビルドと実行」ボタンで確認できます。
タグ:PhoneGap
posted by ねこまんま at 02:33 | Comment(0) | TrackBack(0) | PhoneGap | 更新情報をチェックする