Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

 今回は、前回紹介したファイルプラグインと共によく利用されるネットワーク上のファイルのダウンロードとアップロードを行うプラグインを紹介します。アプリ内のデータの更新やアプリ内のデータのクラウド保存などの機能を作る際に利用できる便利なプラグインです。前回と同様、サンプルコードでは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によるコンテンツがなかった場合

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

著者プロフィール

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

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

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

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

バックナンバー

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

もっと読む

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