2012年6月22日金曜日

PhoneGapを再び試してみました（Android）

次はAndroidです。
iOSはこちら。http://teru2-bo2.blogspot.jp/2012/06/phonegapios.html

iOSの場合はパッケージをインストールしましたがAndroidの場合は、インストール不要です。
不要ですが。。。これまたちょっとした手間があります。

まず、Eclipseを起動して新規にAndroidプロジェクトを作成します。
パッケージエクスプローラを開いて「libs」と「assets/www」フォルダを作成します。

次にPhoneGapのサイトからダウンロードしたファイルを展開しそれぞれコピーを行います。

  • libs/cordova-1.8.1.jar
  • assets/www/cordova-1.8.1.js
jarファイルはこのままでは参照されないのでcordova-1.8.1.jarを右クリックして「ビルドパスに追加」をします。

このあたりがちょっと手間ですが、決まったことなんで慣れかなと。
これで準備は完了です。

次に画面となるファイルを作成します。場所は「assets/www/index.html」です。
ソースファイルはiOSのときと同じです。
<!DOCTYPE HTML>
<html>
    
    <head>
        <meta charset="utf-8">
            <title>カメラサンプル</title>
            <script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
            <script type="text/javascript" charset="utf-8">
                var pictureSource;
                var destinationType;
                
                document.addEventListener("deviceready", onDeviceReady, false);
                
                function onDeviceReady() {
                    pictureSource = navigator.camera.PictureSourceType;
                    destinationType = navigator.camera.DestinationType;
                }
                
                function onPhotoDataSuccess(imageData) {
                    smallImage = document.getElementById('smallImage');
                    smallImage.style.display = "block";
                    smallImage.src = "data:image/jpeg;base64," + imageData;
                }
                function onPhotoURISuccess(imageURI) {
                    largeImage = document.getElementById('largeImage');
                    largeImage.style.display = "block";
                    largeImage.src = imageURI;   
                }
                function onFail(message) {
                    alert(message);
                }
                
                function capturePhoto() {
                    navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
                                                quality: 50,
                                                destinationType: destinationType.DATA_URL
                                                });
                }
                function capturePhotoEdit() {
                    navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
                                                quality: 20,
                                                destinationType: destinationType.DATA_URL,
                                                allowEdit: true
                                                });
                }
                function getPhoto(source) {
                    navigator.camera.getPicture(onPhotoURISuccess, onFail, {
                                                quality: 50,
                                                destinationType: destinationType.FILE_URI,
                                                sourceType: source
                                                });
                }
                </script>
    </head>
    
    <body>
        <button onclick="capturePhoto();">Capture Photo</button>
        <button onclick="capturePhotoEdit();">Capture Editable Photo</button>
        <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button>
        <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button>
        <img src="" id="smallImage" style="display:none;width:60px;height:60px;">
            <img src="" id="largeImage">
    </body>
    
</html>

これでOK。ではありません。
Android側ではメインのアクティビティとマニフェストファイルを修正する必要があります。

CameraPhoneGapActivity.java
package jp.kuseful.cameraphonegap;

import org.apache.cordova.DroidGap;

import android.os.Bundle;

public class CameraPhoneGapActivity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

ネイティブアプリはActivityを継承しますがPhoneGapではDroidGapを継承します。
また画面を表示するのにsetContentView()ではなくsuper.loadUrl()を使用します。

次にAndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

パーミッションの宣言ですね。
カメラを使うんでCameraとかWRITE_EXTERNAL_STORAGEはいいんですが
私の環境のせい？？
ACCESS_NETWORK_STATEは必須でした。
（カメラとかに関係なく）

これでOK。
実機で試してみてください。




ラベル: ,

0 件のコメント:

コメントを投稿