2013年10月13日日曜日

PhoneGap (Cordova) によるAndroidアプリ作成

今回は、HTML5、CSS、JavaScriptによるAndroidアプリ開発についてです。
これらのWebアプリ技術を使って、Androidアプリ作成を可能にするのが、PhoneGap(Cordova)です。

PhoneGap(Cordova)の開発環境について、まとめてみました。

◆PhoneGap(Cordova)のダウンロード

以下のPhoneGap公式サイトからダウンロードします。

http://phonegap.com/

[Install]ボタンをクリックすると、phonegap.zipがダウンロードできます。



ZIPファイルを任意のディレクトリに展開すれば、PhoneGap(Cordova)を使用する準備は完了です。

(現時点でのバージョンは2.4.0)


◆新規プロジェクトの作成

①Eclipseで新規プロジェクトを作成します。

プロジェクトの作成方法については、以下を参照してください。


②PhoneGap(Cordova)資材のコピー

phonegap-2.4.0\lib\android配下の以下の資材をコピーします。



・libsフォルダにcordova-2.4.0.jarをコピー
・assets/wwwフォルダにcordova-2.4.0.jsをコピー
・resフォルダにxmlフォルダをコピー


cordova-2.4.0.jarは、Librariesに追加します。



◆AndroidManifest.xmlの編集

以下の編集が必要になります。

①端末解像度の対応

解像度が異なる端末に対応するための設定です。
<uses-sdk.../> タグの上に挿入してください。

<supports-screens
android:largeScreens="true"
android:normalScreens ="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"/>

②パーミッション設定

PhoneGap公式サイトでは、以下のパーミッションをすべて追加する必要があると書いてあります。

<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" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />

ただし、まずは作成するアプリに必要なパーミッションだけを追加するほうが良いでしょう。
最初は、以下のパーミッションのみを<application.../> タグの上に挿入してください。
これらのパーミッションを追加しないと、exception SecurityExceptionの例外が発生してしまいます。

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

他のパーミッションについては、必要に応じて追加することにしましょう。


③端末回転のサポート

端末の回転やキーボードの出し入れなどによって、Activityを再起動させない設定です。
以下を、<activity>タグ内に挿入してください。

android:configChanges="orientation|keyboardHidden|keyboard|locale"
Android3.2(API Level: 13)以降では、
android:configChanges="orientation|keyboardHidden|keyboard|locale|screenSize"


◆Activityの編集

Activityファイルを以下のように編集します。

・import android.app.Activity; の行をimport org.apache.cordova.*; に変更
・継承を Activity から DroidGap に変更
・setContentView() の行を super.loadUrl("file:///android_asset/www/index.html");に変更

(注意)
元々あったonCreate()を編集した場合、以下のエラーが出力されます。

- Cannot reduce the visibility of the inherited method from DroidGap
- overrides org.apache.cordova.DroidGap.onCreate

この場合は、いったん @Override onCreate()メソッドを削除してから、
改めて、Override/Implement MethodsからDroidGapのonCreate(Bundle)をオーバーライドしてください。



◆動作確認

assets/www ディレクトリにindex.htmlファイルを作成します。
ファイルのエンコードはUTF-8に設定します。



以下は、その一例です。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>PhoneGapSample</title>
<script type="text/javascript" src="cordova-2.4.0.js"></script>
</head>
<body>
<p>いいね!Androidアプリ</p>
</body>
</html>

シミュレーターもしくは、実機でアプリが実行されることを確認してください。