ファイルストレージAPIの利用 Cordova(PhoneGap)
W3CのFileSystem API、FileWriter API、File APIの仕様に基づいて実装されているCordovaのファイルストレージAPIの利用方法についてです。
1.プラグインの追加
①ファイルシステム プラグインの追加
> cordova plugin add org.apache.cordova.file
②ファイル転送 プラグインの追加
> cordova plugin add org.apache.cordova.file-transfer
③config.xmlの確認
以下のパラメータが追加されていることを確認します。
[platforms/android/res/xml/config.xml]
<feature name="File">
<param name="android-package" value="org.apache.cordova.file.FileUtils" />
<param name="onload" value="true" />
</feature>
<feature name="FileTransfer">
<param name="android-package" value="org.apache.cordova.filetransfer.FileTransfer" />
</feature>
④AndroidManifest.xmlの確認
以下のパーミッションが追加されていることを確認します。
[platforms/android/AndroidManifest.xml]
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
2.FileSystemオブジェクト
window.requestFileSystemメソッドにより、FileSystemオブジェクトを取得します。
cordovaのファイルストレージAPIが利用できるのは、devicereadyイベントが発火されて、察知した後となります。
したがって、FileSystemオブジェクトの取得は、以下のようになります。
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function gotFS(fileSystem) {
//FileSystemオブジェクトの利用
}
function fail(error) {
//エラー処理
console.log(error.code);
}
FileSystemオブジェクトには、二つのストレージタイプがあります。
window.requestFileSystemメソッドの第1引数にて、ストレージタイプを指定します。
①PERSISTENTストレージ
・[引数]LocalFileSystem.PERSISTENT
・[永続性]○
・[保存先]/mnt/sdcard/
②TEMPORARYストレージ
・[引数]LocalFileSystem.TEMPORARY
・[永続性]×
・[保存先]/mnt/sdcard/Android/data/(アプリケーション名)/cache/
3.FileEntryオブジェクト
FileSystemオブジェクトのfileSystem.root.getFileメソッドにより、FileEntryオブジェクトを取得します。
getFileメソッドで、第2引数の{create : true}は、ファイルが無ければ新規でファイルを作成することを意味します。
function gotFS(fileSystem) {
//FileSystemオブジェクトの利用
fileSystem.root.getFile("hoge.txt",{create : true}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry){
//FileEntryオブジェクトの利用
}
function fail(error) {
//エラー処理
console.log(error.code);
}
FileEntryオブジェクトのプロパティとメソッドによって、ファイルストレージを利用します。
①FileEntryオブジェクトのプロパティ
[name]
ファイル名
[fullPath]
フルパス
[isDirectory]
ディレクトリ判定のBoolean値
[isFile]
ファイル判定のBoolean値
function gotFileEntry(fileEntry) {
//FileEntryオブジェクトの利用
console.log('file name:' + fileEntry.name);
console.log('file path:' + fileEntry.fullPath);
console.log('directory?:' + fileEntry.isDirectory ? 'yes' : 'no');
console.log('file?:' + fileEntry.isFile ? 'yes' : 'no');
}
②FileEntryオブジェクトのメソッド
[createWriter]
FileWriterオブジェクトを取り出します。
FileWriterオブジェクトのwriteメソッドでファイルへの書き込みを行います。
function gotFileEntry(fileEntry) {
//FileEntryオブジェクトの利用
fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(fileWriter){
var str = 'Hello\n' + 'World\n';
//ファイルの書き込み位置を最終行とする
fileWriter.seek(fileWriter.length);
//ファイルに書き込む
fileWriter.write(str);
}
function fail(error) {
//エラー処理
console.log(error.code);
}
[file]
Fileオブジェクトを取り出します。
別に、FileReaderオブジェクトを作成して、FileReaderオブジェクトのreadAsTextメソッドによって、Fileオブジェクトからファイルの内容を読み出します。
function gotFileEntry(fileEntry) {
//FileEntryオブジェクトの利用
fileEntry.file(gotFile, fail);
}
function gotFile(file){
//FileReaderオブジェクトを作成
var reader = new FileReader();
//Fileオブジェクトからファイルの内容を読み出す
reader.readAsText(file);
//非同期のレスポンスを受信
reader.onloadend = function(evt) {
console.log(evt.target.result);
};
}
function fail(error) {
//エラー処理
console.log(error.code);
}
[removeTo]
ファイルストレージのファイルを削除します。
getFileメソッドで、第2引数の{create : false}は、ファイルが無い場合に、新規にファイルを作成しないことを意味します。
function gotFS(fileSystem) {
//FileSystemオブジェクトの利用
fileSystem.root.getFile('hoge.txt', {create : false}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry){
//FileEntryオブジェクトの利用
fileEntry.removeTo(function() {
console.log('ファイルを削除しました。');
});
}
function fail(error) {
//エラー処理
console.log(error.code);
}
1.プラグインの追加
①ファイルシステム プラグインの追加
> cordova plugin add org.apache.cordova.file
②ファイル転送 プラグインの追加
> cordova plugin add org.apache.cordova.file-transfer
③config.xmlの確認
以下のパラメータが追加されていることを確認します。
[platforms/android/res/xml/config.xml]
<feature name="File">
<param name="android-package" value="org.apache.cordova.file.FileUtils" />
<param name="onload" value="true" />
</feature>
<feature name="FileTransfer">
<param name="android-package" value="org.apache.cordova.filetransfer.FileTransfer" />
</feature>
④AndroidManifest.xmlの確認
以下のパーミッションが追加されていることを確認します。
[platforms/android/AndroidManifest.xml]
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
2.FileSystemオブジェクト
window.requestFileSystemメソッドにより、FileSystemオブジェクトを取得します。
cordovaのファイルストレージAPIが利用できるのは、devicereadyイベントが発火されて、察知した後となります。
したがって、FileSystemオブジェクトの取得は、以下のようになります。
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function gotFS(fileSystem) {
//FileSystemオブジェクトの利用
}
function fail(error) {
//エラー処理
console.log(error.code);
}
FileSystemオブジェクトには、二つのストレージタイプがあります。
window.requestFileSystemメソッドの第1引数にて、ストレージタイプを指定します。
①PERSISTENTストレージ
・[引数]LocalFileSystem.PERSISTENT
・[永続性]○
・[保存先]/mnt/sdcard/
②TEMPORARYストレージ
・[引数]LocalFileSystem.TEMPORARY
・[永続性]×
・[保存先]/mnt/sdcard/Android/data/(アプリケーション名)/cache/
3.FileEntryオブジェクト
FileSystemオブジェクトのfileSystem.root.getFileメソッドにより、FileEntryオブジェクトを取得します。
getFileメソッドで、第2引数の{create : true}は、ファイルが無ければ新規でファイルを作成することを意味します。
function gotFS(fileSystem) {
//FileSystemオブジェクトの利用
fileSystem.root.getFile("hoge.txt",{create : true}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry){
//FileEntryオブジェクトの利用
}
function fail(error) {
//エラー処理
console.log(error.code);
}
FileEntryオブジェクトのプロパティとメソッドによって、ファイルストレージを利用します。
①FileEntryオブジェクトのプロパティ
[name]
ファイル名
[fullPath]
フルパス
[isDirectory]
ディレクトリ判定のBoolean値
[isFile]
ファイル判定のBoolean値
function gotFileEntry(fileEntry) {
//FileEntryオブジェクトの利用
console.log('file name:' + fileEntry.name);
console.log('file path:' + fileEntry.fullPath);
console.log('directory?:' + fileEntry.isDirectory ? 'yes' : 'no');
console.log('file?:' + fileEntry.isFile ? 'yes' : 'no');
}
②FileEntryオブジェクトのメソッド
[createWriter]
FileWriterオブジェクトを取り出します。
FileWriterオブジェクトのwriteメソッドでファイルへの書き込みを行います。
function gotFileEntry(fileEntry) {
//FileEntryオブジェクトの利用
fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(fileWriter){
var str = 'Hello\n' + 'World\n';
//ファイルの書き込み位置を最終行とする
fileWriter.seek(fileWriter.length);
//ファイルに書き込む
fileWriter.write(str);
}
function fail(error) {
//エラー処理
console.log(error.code);
}
[file]
Fileオブジェクトを取り出します。
別に、FileReaderオブジェクトを作成して、FileReaderオブジェクトのreadAsTextメソッドによって、Fileオブジェクトからファイルの内容を読み出します。
function gotFileEntry(fileEntry) {
//FileEntryオブジェクトの利用
fileEntry.file(gotFile, fail);
}
function gotFile(file){
//FileReaderオブジェクトを作成
var reader = new FileReader();
//Fileオブジェクトからファイルの内容を読み出す
reader.readAsText(file);
//非同期のレスポンスを受信
reader.onloadend = function(evt) {
console.log(evt.target.result);
};
}
function fail(error) {
//エラー処理
console.log(error.code);
}
[removeTo]
ファイルストレージのファイルを削除します。
getFileメソッドで、第2引数の{create : false}は、ファイルが無い場合に、新規にファイルを作成しないことを意味します。
function gotFS(fileSystem) {
//FileSystemオブジェクトの利用
fileSystem.root.getFile('hoge.txt', {create : false}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry){
//FileEntryオブジェクトの利用
fileEntry.removeTo(function() {
console.log('ファイルを削除しました。');
});
}
function fail(error) {
//エラー処理
console.log(error.code);
}
コメント
コメントを投稿