ハイブリッドアプリ開発でファイルのアップロード、ダウンロードを便利にするプラグインを使う

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

サンプルアプリ

　図1は今回紹介するサンプルアプリのキャプチャー画面です。ダウンロードではサーバ上に存在するファイルをダウンロードし完了するとその画像を表示します。

　また、アップロードでは画像データをサーバにアップロードし結果をJSONで受信し、そのメッセージを表示します。

　アップロード時のサーバはリスト2のようなコードを用意しました。

図1　サンプルアプリの画面キャプチャ

リスト2　アップロード時のサーバ側のPHPコード

<?php
if(isset($_FILES['image'])) {
    $ret = array();
    $ret['file'] = $_FILES['image'];
    $ret['message'] = "Upload OK";
    print json_encode($ret);
}
else{
    $ret = array();
    $ret['message'] = "Image Not Found";
    print json_encode($ret);
}
?>

ファイルのダウンロード

　ファイルのダウンロードでは、FileTransferのdownloadメソッドを利用し、表5に示す引数が指定できます。

リスト3　ダウンロードメソッド

FileTransfer.download(source,target,successCallback,errorCallback,[trustAllHosts,[options]]);

　また、それぞれの引数の意味は、表5のとおりです。

表5　FileTransfer.downloadメソッドの引数

引数	概要
source	ネットワーク上のリソースを示すパス。encodeURIを使ってパスをエンコードする。
target	ローカルの保存するパス
successCallback	成功した場合のコールバック関数。関数の引数にはEntryオブジェクトが設定される
errorCallback	失敗した場合のコールバック関数。関数の引数にはFileTransferErrorオブジェクトが設定される
trustAllHosts	すべてのホストを信頼するか？オレオレ証明書などをもちいている場合にtrueにする。通常の運用ではfalseにする。
options	追加で指定する任意のヘッダを指定する。BASIC認証などが必要な場合にはこちらに追加のヘッダを指定する。

　ネットワーク上のファイルをローカルに保存するサンプルコードがリスト4のようになります。

リスト4　ファイルのダウンロード（app/www/js/controllers/FileTransferController.jsの抜粋）

// （1）FileTransferオブジェクトを作成
var fileTransfer = new FileTransfer();

fileTransfer.download(
  encodeURI("http://192.168.1.1/cdv7/images/img.png"),    // （2）ダウンロードするURLの指定
  "cdvfile://localhost/persistent/img.png",         // （3）保存先のパスを指定
  function(entry){                      // （4）成功した場合のCallback関数の指定
    // FileEntry
    $scope.$apply(function(){
        //  <img src="cdvfile://localhost/persistent/img.png" />と同様の設定
      $scope.img_path = "cdvfile://localhost/persistent/img.png";
    });
  },
  function(error){                      // （5）失敗した場合のCallback関数の指定
    alert('ERROR (' + error.code + ')');
  },
  false,
  // （6）ヘッダの指定
  {
    headers : {
      'X-Extra-Header' : 'Hoge'
    }
  }
);
// （7）ダウンロード中の状況を把握するためのイベント処理
fileTransfer.onprogress = function(event){
  if(event.lengthComputable){
    $scope.$apply(function() {
      $scope.progress = "loaded :" + event.loaded + "/" + event.total;
    });
  }
};

　（1）ではFileTransferオブジェクトを作成します。

　downloadメソッドには（2）encodeURIメソッドを使って指定したダウンロードするURLと、（3）保存するパスをまず指定します。

　続いて、（4）成功時のコールバック関数ではFileEntryオブジェクトが取得できますので、その後の処理をFileEntryオブジェクトを使って行います。

　また、（5）失敗した場合のコールバック関数ではFileTransferErrorが取得できます。

　ファイルをダウンロードする際に任意のヘッダが必要な場合は（6）のようにして任意のヘッダの指定が可能です。現時点では、headersというキーが指定可能でき、それ以外は指定できません。

　ファイルのダウンロード中の状況を把握するには（7）のようにonprogressプロパティに関数を設定する事で可能で、表6に示す各プロパティ値の取得が可能です。

表6　onprogress時のevent引数のプロパティ

変数	説明
lengthComputable	進捗状況でデータサイズが取得ができる状態になったことを示すフラグ
loaded	ダウンロード、もしくはアップロード済みのデータサイズ
total	ダウンロード、もしくはアップロードするファイルのトータルサイズ