SHOEISHA iD

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

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

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

Apache Cordova+AngularJSでローカルファイルにアクセスするプラグインを使おう

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

 今回はファイルの読み書きするためのプラグインを紹介します。前回と同様、サンプルコードではAngularJSを使っています。AngularJSの処理が分からないと理解できない部分は書かないようにしています。

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

対象読者

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

モダンブラウザでのデータの保存方法

 Cordovaでローカルにデータを保存する方法を説明する前に、モダンブラウザでデータをどのように保存できるかを説明します。

 ブラウザが用意している機能で、目的の機能が実現できるのであれば、プラグインを無理に利用する必要はありません。AndroidやiOSなどの組込で利用されているモダンブラウザでは、以下に示すようにデータを保存するためのAPIが既に存在しています。したがって、特別なプラグインを用いなくてもデータの保存が可能です。

  • Web SQL
  • IndexedDB
  • Local Storage
  • Session Storage

 これらのAPIは主にHTML5として提供されているものですが、Web SQLに関してはHTML5としては廃案になっています。そのためIndexedDBのAPIを扱う方がHTML5としては推奨されます。しかし、iOSの場合には8.0からのサポートとなり、Cordovaの場合には、Web SQLの方が古くからサポートされているため過去のバージョンも含めてのサポートを考慮すると利用するケースもあるAPIです。

 実際にWeb SQLやIndexedDBを使ってみると、どちらも独特の癖があり、使いやすいAPIとは言えないなど、選択がより難しくなります。

 また、Local StorageやSession Storageなどは手軽ではあり、一時的なデータなどを保存する場合には有効な機能です。

 ただし、これらのAPIで共通していることは実際の端末の容量の上限にかかわらず、組込ブラウザが求める上限サイズなども考慮する必要があり、ネイティブのAPIに比べて開発者を悩ませるAPIであるといえます。

HTML5におけるFileSystem APIの現状とCordovaによるFileSystemの実現

 HTML5には先ほど紹介したAPIに比べるとあまり知られていませんがFileSystem APIという別のAPIも存在します。

 ファイルの読み込みに関して、FileReader APIを使っているという方もいるのではないでしょうか? ファイルのドラッグ&ドロップや、アップロード前の画像ファイルのプレビューなどを行おうとした場合には、このAPIを使ってデータを読み、Data URIによってプレビューを実現します。

 しかし、ユーザが指定していない任意のファイルを読みこんだり、データを保存するということはできません。これは、ほとんどのブラウザがサポートしていないためです。

 ブラウザはもともと安全性を第一にしていることから、自由にファイルの読込みや書込みができてしまうとセキュリティ上の問題になりかねなく、このようなAPIが実装されることは難しくなっています。

 少々、記事は古いですが、Firefox に FileSystem API が無いのはなぜか?を読むとFileSystem APIが各ブラウザに実装されていない理由がわかると思います。

 しかし、ファイルやディレクトリを操作できることは、アプリにとって非常に大切な基本機能の一つです。

 アプリは常にオンライン環境で動作するとは限らないために、できるだけオンライン中に保存しておいたデータを用いて、オフラインでも操作ができるようになど、考慮するポイントはWebアプリとは違っています。

 このHTML5のFileSystem APIを、Cordovaでも利用できるようにするためのプラグインが、今回紹介するfileプラグインです。

 このプラグインのドキュメントを参照しても、APIの利用方法などが他のプラグインと比べても詳しく記述されていないのは、使い方がHTML5で定義されているAPIと同様であるためです。ただし、前述した理由などから、HTML5のWebアプリとしてFile APIを使うことがあまりないためか、利用方法の情報もあまりありません。

 本稿の内容は、Fileプラグインの利用方法の説明ではありますが、HTML5のFileSystem APIの利用方法の説明でもあります。それ以外にアプリ特有のプロパティもありますので、FileSystem APIをすでによく知っている方などは、それらの違いに注意すれば問題ありません。

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

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

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

メールバックナンバー

次のページ
Fileプラグインを使う

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
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編 」他、著書多数

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング