CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/04/27 14:00

目次

プラグイン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 サンプルアプリの実機キャプチャー画面
図6 サンプルアプリの実機キャプチャー画面

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

最後に

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

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

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

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Apache Cordovaで本格スマホアプリに挑戦しよう

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしど...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5