白峯のソース

IT なことのメモなど

PhoneGap と Windows と Eclipse で Android 開発事始め

f:id:hakuhou-src:20140624164730j:plain

PhoneGap を使おうとしたが、Android 向けに WindowsEclipse で開発・実行する手段がよくわからなかったため、自分で調べてみた。
以下はそのメモである。

なお、各ソフトウェアのバージョンは以下のとおりである。

  • Window 8.1
  • ADT 21.1
  • Ecplise 4.2
  • PhoneGap 2.9.1

(2014/06/24 執筆)

 

(1) PhoneGap の ZIP をダウンロード,解凍する

「C:\> npm install -g phonegap」はエラーになってよくわからなかったので,Archive からひとつ前のバージョンをダウンロードした…

 

(2) lib\android\framework を Eclipse にインポートし,ビルドする

→ bin に cordiva.jar が出来上がる

 

(3) Eslipse で空の Android プロジェクトを作る

設定はデフォルトのまま.Create Activity では New Blank Activity を選択し,Activity 名は MainActivity とした

 

(4) 出来上がったプロジェクトの lib に先のビルドした cordiva.jar をコピー

その後,Eclipse の Package Explorer で F5 (Refresh) し(変更を反映させ),
cordiva.jar を右クリックし「Build Path」→「Add to Build Path」を実行

 

(5) プロジェクトの assets に www フォルダを作り,index.html と cordova.js (PhoneGap 内 lib\android\framework\assets\www にある)を置く

index.html は以下のような内容(文字コードUTF-8

	<html>
	<head>
		<meta charset="utf-8">
		<script src="cordova.js"></script>
	</head>
	<body>
		あいうえお
		<div id="deviceready">
			<p class="listening">端末に接続中…</p>
			<p class="received" style="display:none;">端末の準備完了!</p>
		</div>
		<script>
			var app = {
				initialize: function() {
					document.addEventListener('deviceready', this.onDeviceReady, false);
				},
				onDeviceReady: function() {
					var parentElement = document.getElementById('deviceready');
					parentElement.querySelector('.listening').setAttribute('style', 'display:none;');
					parentElement.querySelector('.received').setAttribute('style', 'display:block;');
					console.log('Received Event.');
				},
			};
			app.initialize();
		</script>
	</body>
	</html>

 

(6) プロジェクトの res に xml フォルダを作り,config.xml (PhoneGap 内 lib\android\framework\res\xml にある)をコピー

 

(7) MainActivity.java を書き換える

import android.app.Activity;
コメントアウト

import org.apache.cordova.*;
を追加

public class MainActivity extends Activity

public class MainActivity extends DroidGap
に変更

protected void onCreate(Bundle savedInstanceState) {

public void onCreate(Bundle savedInstanceState) {
に変更

setContentView(R.layout.main); の下に
super.loadUrl("file:///android_asset/www/index.html");
を追記

 

(8) AndroidManifest.xml を書き換える

<application・・・の前に

	<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" />

を追加

android:label="@string/app_name" >

android:label="@string/app_name"
android:configChanges="orientation|keyboardHidden" >
に変更

 

(9) 実行する