PhoneGap と Windows と Eclipse で Android 開発事始め
PhoneGap を使おうとしたが、Android 向けに Windows と Eclipse で開発・実行する手段がよくわからなかったため、自分で調べてみた。
以下はそのメモである。
なお、各ソフトウェアのバージョンは以下のとおりである。
- 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" >
に変更