ただし、AngularJSについても、よく知りたいという方は筆者の連載もありますので、そちらをご参照していただけると幸いです。
対象読者
- スマホアプリに挑戦したいと思っているWeb開発者
- アプリ開発をもっと楽にしたいと思っている方
- 業務スマホアプリを作る開発者
サンプルアプリの概要
今回作成するサンプルアプリは、図1に示すテキストデータの保存と読込、そして、画像（JPEG）ファイルの保存と表示をするためのサンプルアプリです。
テキストデータでは、テキストエリアに入力したデータをそのまま保存する方法と、既に保存してあるテキストデータに入力したデータを追記する方法を紹介します。
画像ファイルの保存と表示では、HTMLのinput[file]要素にて指定した画像ファイルの保存と表示を行います。また、画像ファイルの保存するパスを表示する際には、これまで紹介していないcdvfileプロトコルという形式を利用して指定します。cdvfileプロトコルについては最初に説明します。
cdvfileプロトコルについて
cdvfileプロトコルは、HTML内にリソースを指定する時に記述できるプロトコルです。例えば、外部サイトのリソースであれば、http://やhttps://などのように記述する事ができます。同じようにcdvfileプロトコルを使えば、リスト1に示すように同じような形式で記述する事ができます。
<img src="http://hostname/path/to/image.jpg"> <!-- cdvfileプロトコルを使った記述例 --> <img src="cdvfile://localhost/persistent/image.jpg" />
また、JavaScript内でもこれまで利用してきたcordova.fileのプロパティ値を使用していた部分をリスト2で示すように記述することができます。
window.resolveLocalFileSystemURL("cdvfile://localhost/persistent/",
// (省略)
}
ただし、cordova.fileプロパティにあるパスがすべて利用できるわけでなく、iOSやAndroidにかかわらず利用できるパスは表1のようになります。
| 指定できるパス | 説明 |
|---|---|
| cdv://localhost/persistent/* | LocalFileSystem.PERSISTENT 以下のパス |
| cdv://localhost/temporary/* | LocalFileSystem.TEMPORARY 以下のパス |
他にも指定が可能ですが、iOSとAndroidで利用できる指定が異なり、また、cordova.fileで指定しているするパスと一致していませんので、多少わかりにくい部分があります。
指定可能なパスはFileプラグインに詳細が記されています。iOSの場合にはiosextrafilesystems、Androidでは、androidextrafilesystemsで指定されているものが記述されていますが、主なパスとして利用可能なものを抜粋したものが表2のようになります。
| 指定できるパス | 説明 |
|---|---|
| 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ファイルに追記が必要です。
<access origin="*" /> <!-- 追加 --> <access origin="cdvfile://*" />
また、HTML内でパスとして記述する場合には、HTML側のセキュリティ指定も行う必要があり、リスト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 *">
