カメラプラグインを使って、Apache Cordovaのサンプルアプリを作ってみよう

Apache Cordovaで本格スマホアプリに挑戦しよう 第3回

プラグインAPIの組込み

　続いてカメラプラグインのAPIを実装した例がリスト8のようになります。この際に、デフォルトで作成されたindex.jsの流れをなるべく変えずに実装しています。また、カメラAPIは先ほどのプラグインのページを参照して実装しています。

リスト8　カメラAPIの組込み（www/js/index.js）

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    onDeviceReady: function() {
        //  （1）画面表示の切り替え
        $('#device-not-ready').hide();
        $('#device-ready').show();

        // （2） ボタンによるカメラの起動
        $('#camera-call').click(function(){
            // （3） カメラの起動と、画像の取り込み手法、結果Callbackの設定
            navigator.camera.getPicture(app.onSuccess, app.onFail, { quality: 50,
                destinationType: Camera.DestinationType.DATA_URL
            });
        });
    },
    // （4） カメラで撮った写真データの表示
    onSuccess : function(imageData){
        var image = $('#image');
        image.attr('src',"data:image/jpeg;base64," + imageData);
    },
    // （5） カメラの起動失敗などの場合
    onFail : function(message) {
        alert('Failed because: ' + message);
    }
};
app.initialize();

　まず、（1）ではdevicereadyのイベントの結果取得時にDOM操作にて必要な要素を表示、もしくは非表示にしています。（2）ではカメラ起動ボタンにクリックイベントにてカメラを起動するようにしています。

　続いて、（3）のようにcamera.getPictureメソッドを使って起動をします。このメソッドには、表2に示すように3つのパラメータが設定可能です。

表2　camera.getPicutreメソッドのパラメータ

パラメータ名	概要
successCallback	写真取得成功時に呼ばれるコールバック関数
failureCallback	エラー時に呼ばれるコールバック関数
options	カメラ、もしくは写真データなどの設定（くわしくはこちら）

　今回は詳細のAPIの利用方法は紹介しませんが、ほとんどのAPIがこのように成功時のコールバック関数と失敗時のコールバック関数を引数に指定する形式が一般的になっています。これはプラグインの呼び込み時にUIを止めないためであり、また、実際の処理はネイティブ側にて実行されていることから処理の結果が即時でとれるわけではないので、このような形式が多くなります。

　実際に取得した写真データは（4）のようにDATA URL形式で取得するように指定していますので、取得したデータをimgタグのsrc属性に指定すれば画像の写真が表示されます。また、失敗時には（5）のようにエラーメッセージを表示しています。

サンプルアプリの実行

　今回のサンプルアプリはカメラ機能を使うことから、PCブラウザなどでエミュレートすることは難しいため、実機を使って動作を確認します。

　アプリをビルドするときには、リスト9のようにすべてのプラットフォーム、もしくはそれぞれのOSを指定してのビルドができます。

リスト9　アプリのビルド例

# すべてのプラットフォーム
$cordova build
# もしくは各プラットフォーム毎
$cordova build android
$cordova build ios

　また、Androidですぐに実機で確認する場合には、実機をPCと接続した上でリスト10のように実行します。

リスト10　Androidでの実機確認

$cordova run android

　また、iOSの場合にはXCodeから実行した方が便利ですので、platforms/ios/SampleApp1.xcodeprojをXCodeで開いてから実行するしたほうが便利だとは思います。ただし、XCodeなどを使ってビルドする場合にはwwwフォルダの同期が必要になります。その場合には、リスト11のようにprepareコマンドによって、必要なファイルの同期を事前に行います。

リスト11　ビルドする際に必要となるファイルの同期

$cordova prepare

　実際にiOSとAndroidで実行してみた画面キャプチャーが図6のようになります。

図6　サンプルアプリの実機キャプチャー画面

　実際に実行してみると、AndroidとiOSで多少の結果が違います。このように、プラグインによってはOS毎に多少の違いが発生してしまう場合があります。これらをどのように扱うかも、ハイブリッドアプリで作る際には課題の一つと言えるでしょう。

最後に

　今回は、実際のサンプルアプリを通じて、簡単ではありますが、実際のApache Cordovaでのアプリ開発の流れを紹介しました。実際にネイティブコードを記述することなく、JavaScriptのコードを記述するだけでスマホアプリが作れますので非常に便利です。

　多少の癖はありますが、画面がHTMLとCSSで記述でのノウハウは既に非常に蓄積されているので、HTMLで作ったモックアプリを作成し、そこにネイティブアプリ機能を実装していくなどをすれば、実際の使い勝手を確認しながらの開発などもスムーズに行えます。

　ネイティブアプリでアプリ開発が当たり前だと思っていた開発者も、Apache Cordovaを利用する事でメリットも非常にたくさんありますので、是非、いろいろな人に使ってもらえればと思います。

参考資料

• Apache Cordova
• Apache Cordovaプラグインの検索
• Cameraプラグイン