ファイルを操作するためのプラグインで、テキストや画像をアプリ内に保存する

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

　今回は、前回に引き続きファイルを操作するためのプラグインを紹介します。今回は、サンプルアプリを用いてテキストや画像の書込処理や、画像の読み込み処理を紹介します。前回と同様、サンプルコードではAngularJSを使っていますが、理解をする上でAngularJSの処理がわからないと理解できない部分はないようにしています。

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

対象読者

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

サンプルアプリの概要

　今回作成するサンプルアプリは、図1に示すテキストデータの保存と読込、そして、画像（JPEG）ファイルの保存と表示をするためのサンプルアプリです。

　テキストデータでは、テキストエリアに入力したデータをそのまま保存する方法と、既に保存してあるテキストデータに入力したデータを追記する方法を紹介します。

　画像ファイルの保存と表示では、HTMLのinput[file]要素にて指定した画像ファイルの保存と表示を行います。また、画像ファイルの保存するパスを表示する際には、これまで紹介していないcdvfileプロトコルという形式を利用して指定します。cdvfileプロトコルについては最初に説明します。

図1　サンプルアプリの画面キャプチャ

cdvfileプロトコルについて

　cdvfileプロトコルは、HTML内にリソースを指定する時に記述できるプロトコルです。例えば、外部サイトのリソースであれば、http://やhttps://などのように記述する事ができます。同じようにcdvfileプロトコルを使えば、リスト1に示すように同じような形式で記述する事ができます。

リスト1　HTMLでの画像の指定方法

<img src="http://hostname/path/to/image.jpg">
<!-- cdvfileプロトコルを使った記述例 -->
<img src="cdvfile://localhost/persistent/image.jpg" />

　また、JavaScript内でもこれまで利用してきたcordova.fileのプロパティ値を使用していた部分をリスト2で示すように記述することができます。

リスト2　JavaScriptでの利用方法

window.resolveLocalFileSystemURL("cdvfile://localhost/persistent/",
    // (省略)
}

　ただし、cordova.fileプロパティにあるパスがすべて利用できるわけでなく、iOSやAndroidにかかわらず利用できるパスは表1のようになります。

表1　OSに依存せずcdvfileプロトコルで指定できるパス

指定できるパス	説明
cdv://localhost/persistent/*	LocalFileSystem.PERSISTENT 以下のパス
cdv://localhost/temporary/*	LocalFileSystem.TEMPORARY 以下のパス

　他にも指定が可能ですが、iOSとAndroidで利用できる指定が異なり、また、cordova.fileで指定しているするパスと一致していませんので、多少わかりにくい部分があります。

　指定可能なパスはFileプラグインに詳細が記されています。iOSの場合にはiosextrafilesystems、Androidでは、androidextrafilesystemsで指定されているものが記述されていますが、主なパスとして利用可能なものを抜粋したものが表2のようになります。

表2　OSに依存したcdvfileプロトコルで指定できるパス（一部）

指定できるパス	説明
cdv://localhost/bundle/*	cordova.file.applicationDirectory以下のパス (Androidでは利用不可)
cdv://localhost/cache/*	cordova.file.cacheDirectory 以下のパス(iOS、Android共に利用可能)
cdv://localhost/documents/*	iOSの場合 (cordova.file.documentsDirectory 以下のパス)、Androidの場合 (cordova.file.dataDirectory以下のDocuments以下のパス)
cdv://localhost/files/*	cordova.file.dataDirectory以下のパス(iOSでは利用不可)
cdv://localhost/sdcard/*	cordova.file.externalRootDirectory以下のパス (iOSでは利用不可)

　cdvfileプロトコルを使うには、セキュリティ上の指定も行う必要があり、リスト3に示すようにconfig.xmlファイルに追記が必要です。

リスト3　config.xmlの指定追加（app/config.xmlの抜粋）

<access origin="*" />
<!-- 追加 -->
<access origin="cdvfile://*" />

　また、HTML内でパスとして記述する場合には、HTML側のセキュリティ指定も行う必要があり、リスト4のように指定が必要です。

リスト4

<!-- data: と gap: の間に cdvfile:の記述を追加しています -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: cdvfile: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">