Webエンジニアは試してみる価値アリ!! PhoneGapの導入手順を紹介します。

PhoneGapとは

PhoneGapは、javascriptからAndorid端末に搭載されているデバイス(カメラやGPSセンサ、加速度センサなど)の操作を可能にするライブラリです。これによって、HTML+CSS+javascriptAndroidアプリを作成することができます。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]を押下します。
https://lh5.googleusercontent.com/-MjEtEZ2pQcA/TuiwcJQY9rI/AAAAAAAAK-0/HBFLOsTuHmY/s800/New%252520Android%252520Project.jpg

準備

次に、プロジェクトルートに以下のフォルダを追加します。

  • /libs
  • /assats/www

フォルダを追加するところからメニューを表示して、[New]-[Folder]を選択します。表示されたダイアログの[Folder name]に入力して[Finish]を押下します。
https://lh3.googleusercontent.com/-MTo1RykpVWY/TuiwdsusK6I/AAAAAAAAK-4/fiWgBG5QmmM/s800/Create%252520libs%252520Folder.jpg


追加するとこんな感じです。
https://lh5.googleusercontent.com/-4AVam53IQto/TuiweE_86JI/AAAAAAAAK-8/1UswWSzLKVQ/s800/Package%252520Explorer.jpg

PhoneGapのファイルを配置

さっき解凍したPhoneGapのファイルを配置します。配置先は下表のようになります。

phonegap-1.2.0.jar /libs
phonegap-1.2.0.js /assets/www
xml /res

追加するとこうなります。
https://lh3.googleusercontent.com/-wvUG80sUFqg/Tuiwe0WrPKI/AAAAAAAAK_A/uEpWFmZOiQY/s800/Add%252520PhoneGap%252520File.jpg

phonegap-1.2.0.jar をビルドパスに追加しておきましょう。

デフォルトのActivityファイルを編集

Activityファイルを編集します。

  • 継承しているActivityクラスを、DroidGapクラスに変更
  • 「setContentView(R.layout.main);」を、「super.loadUrl("file:///android_asset/www/index.html");」に変更

変更したら、メニューから[Source]-[Organize Imports]を選択してimport文を整理します。
https://lh5.googleusercontent.com/-V3OnpgvwlDU/TuiwfhIaCbI/AAAAAAAAK_E/iwIqDMn_YiU/s800/Modify%252520Activity%252520File.jpg

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>

起動して確認

プロジェクトルートからメニューを表示して、[Run As]-[1 Android Application]を選択します。
https://lh3.googleusercontent.com/-bpBtPjIBMxc/Tuiwgdxl4gI/AAAAAAAAK_I/WSUabo3YBTE/s800/Android%252520Application.jpg


このように表示されれば導入完了です。
https://lh6.googleusercontent.com/-kdPnIg_WMgc/TuiwhKRhyKI/AAAAAAAAK_M/Goqi5uFfQ1Y/s800/Hello%252520World.jpg

まとめ

次は、PhoneGapを利用して、カメラから画像を取得するサンプルを紹介します。