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

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

　今回はファイルの読み書きするためのプラグインを紹介します。前回と同様、サンプルコードでは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をすでによく知っている方などは、それらの違いに注意すれば問題ありません。