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

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

　今回は、前回紹介したファイルプラグインと共によく利用されるネットワーク上のファイルのダウンロードとアップロードを行うプラグインを紹介します。アプリ内のデータの更新やアプリ内のデータのクラウド保存などの機能を作る際に利用できる便利なプラグインです。前回と同様、サンプルコードではAngularJSを使っています。理解をする上でAngularJSの処理がわからないと理解できない部分はないようにしています。

　ただし、AngularJSについても、よく知りたいという方は筆者の連載もありますので、そちらをご参照していただけると幸いです。

対象読者

• スマホアプリに挑戦したいと思っているWEB開発者
• アプリ開発をもっと楽にしたいと思っている方
• 業務スマホアプリを作る開発者

ファイルのダウンロードとアップロードプラグイン

　ネットワーク上のファイルのダウンロードとアップロードを行うプラグインを紹介します。

　ダウンロードはアプリの初期データには含めず、後でデータを提供したい場合などにも利用でき、オフライン時のためなどにローカルファイルに保存しておくことなどができます。

　また、カメラから取った画像やビデオファイルなど端末内にあるファイルをアップロードしたい場合もあるでしょう。これらはAJAXを使ってのダウンロード、もしくはアップロードも可能ですが、もっと簡単に行うプラグインがありますので紹介します。

インストール

　インストールするプラグインは、「cordova-plugin-file-transfer」です。インストールはリスト1のように行います。

リスト1　cordova-plugin-file-transferプラグインの導入

$cordova plugin add cordova-plugin-file-transfer

プラグインで用意されるクラス（コンストラクタ）

　このプラグインを導入すると、表1のようなクラス（コンストラクタ）が追加されます。ただし、devicereadyイベントが発火された以降でしか利用できない点は忘れないようにして下さい。

表1　追加されるクラス（コンストラクタ）

名称	説明
FileTransfer	ファイルのアップロード、もしくはダウンロードを行うためのオブジェクトを作成する
FileUploadOptions	ファイルをアップロードするときにファイル名やその他ヘッダなどを指定するためのオプションを作成する
FileUploadResult	ファイルのアップロードに成功した際のコールバック関数に設定されるオブジェクト
FileTransferError	アップロードもしくはダウンロードに失敗した際のコールバック関数に設定されるオブジェクト

　ファイルのアップロードもしくはダウンロードするために利用するFileTransferオブジェクトは、表2に示すプロパティもしくはメソッドがあります。

表2　FileTransferのプロパティとメソッド

プロパティ、メソッド	説明
onprogress	アップロードもしくはダウンロード中の状況を把握するためのイベントメソッド
upload()	ファイルのアップロードメソッド
download()	ファイルのダウンロードメソッド
abort()	ファイルのアップロードもしくはダウンロードの中断処理

　また、アップロードもしくはダウンロード処理で失敗した場合にはFileTransferErrorオブジェクトが取得できます。FileTransferErrorオブジェクトには表3に示すプロパティがあります。

表3　FileTransferErrorのプロパティ

プロパティ	説明
code	エラーの原因を示すコード（数値）。表4に示すエラー一覧
source	アップロード元のURLもしくは、ダウンロード元となるURL
target	アップロード先のURLもしくは、ダウンロード先となるURL
http_status	エラーとなったときのHTTPのステータスコード。例）404
exception	エラーオブジェクト（getMessage()もしくはtoString()でメッセージを取得）

　エラーコードは数値で定義されていますが、表4に示す定数がありますので、そちらを利用して原因を判定してください。

表4　エラー原因コード

値	定数	説明
1	FileTransferError.FILE_NOT_FOUND_ERR	ファイルが見つからない
2	FileTransferError.INVALID_URL_ERR	URLが不正の場合
3	FileTransferError.CONNECTION_ERR	接続エラー
4	FileTransferError.ABORT_ERR	処理が中断された
5	FileTransferError.NOT_MODIFIED_ERR	HTTPでNot Modifiedによるコンテンツがなかった場合