Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

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

目次

 ただし、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をすでによく知っている方などは、それらの違いに注意すれば問題ありません。


  • 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