2014年5月2日金曜日

ファイルストレージ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);
}

0 件のコメント:

コメントを投稿