SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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によるコンテンツがなかった場合

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
サンプルアプリ

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
Apache Cordovaで本格スマホアプリに挑戦しよう連載記事一覧

もっと読む

この記事の著者

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9577 2016/08/19 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング