PhoneGapとは
PhoneGapは、javascriptからAndorid端末に搭載されているデバイス(カメラやGPSセンサ、加速度センサなど)の操作を可能にするライブラリです。これによって、HTML+CSS+javascriptでAndroidアプリを作成することができます。Webエンジニアは、馴染み深いjavascriptでコーディングできることで、習得が容易であることは採用する大きなインセンティブになるのではないでしょうか。
まず今回は、PhoneGapの導入手順を紹介します。
PhoneGapを導入します。
導入するPhoneGapのバージョンは、執筆時点最新の1.2.0を使います。
ダウンロード
http://phonegap.com/download-thankyouにアクセスすると5秒後に自動的にダウンロードが開始されます。ダウンロードしたファイルを解凍しましょう。
導入方法
まず、PhoneGapを導入するAndroid Projectを作成します。メニューから[File]-[New]-[Android Project]を選択するとダイアログが表示されるので、[ProjectName],[Build Target],[package]を入力して、[Finish]を押下します。
準備
次に、プロジェクトルートに以下のフォルダを追加します。
- /libs
- /assats/www
フォルダを追加するところからメニューを表示して、[New]-[Folder]を選択します。表示されたダイアログの[Folder name]に入力して[Finish]を押下します。
PhoneGapのファイルを配置
さっき解凍したPhoneGapのファイルを配置します。配置先は下表のようになります。
phonegap-1.2.0.jar | /libs |
---|---|
phonegap-1.2.0.js | /assets/www |
xml | /res |
phonegap-1.2.0.jar をビルドパスに追加しておきましょう。
デフォルトのActivityファイルを編集
Activityファイルを編集します。
- 継承しているActivityクラスを、DroidGapクラスに変更
- 「setContentView(R.layout.main);」を、「super.loadUrl("file:///android_asset/www/index.html");」に変更
AndroidManifest.xml を編集
ます、mamifestタグの子要素として、以下の記述を追加します。
<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" />
次に、activityタグに、以下の属性を追加します。
android:configChanges="orientation|keyboardHidden"
最後に、activityタグを追加します。
<activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <intent-filter> </intent-filter> </activity>
結果的には、以下のようになります。
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="me.gungnir.android.phonegapshowcase" 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" /> <uses-sdk android:minSdkVersion="8" /> <application android:icon="@drawable/icon" android:label="@string/app_name"> <activity android:name=".PhoneGapShowcaseActivity" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <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 を作る
Activityファイルを編集した際に記述した、「"file:///android_asset/www/index.html"」を作成します。
[www]フォルダからメニューを表示して、[New]-[File]を選択します。表示されたダイアログの[File name]に index.html と入力して[Finish]を押下します。ファイルの内容は、以下のソースを参考にして下さい。
<!DOCTYPE HTML> <html> <head> <title>PhoneGap</title> <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script> </head> <body> <h1>Hello World</h1> </body> </html>
まとめ
次は、PhoneGapを利用して、カメラから画像を取得するサンプルを紹介します。