CodeZine(コードジン)

特集ページ一覧

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

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

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

サンプルアプリ

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

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

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

図1 サンプルアプリの画面キャプチャ
図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 ダウンロード、もしくはアップロードするファイルのトータルサイズ

  • 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-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5