Cordova-ファイルシステム

このプラグインは、ユーザーのデバイス上のネイティブファイルシステムを操作するために使用されます。

手順1-ファイルプラグインのインストール

このプラグインをインストールするには、*コマンドプロンプト*で次のコードを実行する必要があります。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file

ステップ2-ボタンを追加する

この例では、ファイルの作成、ファイルへの書き込み、読み取り、削除の方法を示します。このため、 indexl に4つのボタンを作成します。また、ファイルのコンテンツが表示される textarea を追加します。

<button id = "createFile">CREATE FILE</button>
<button id = "writeFile">WRITE FILE</button>
<button id = "readFile">READ FILE</button>
<button id = "removeFile">DELETE FILE</button>
<textarea id = "textarea"></textarea>

手順3-イベントリスナーの追加

プラグインが使用される前にすべてが開始されるように、 onDeviceReady 関数内の index.js に*イベントリスナー*を追加します。

document.getElementById("createFile").addEventListener("click", createFile);
document.getElementById("writeFile").addEventListener("click", writeFile);
document.getElementById("readFile").addEventListener("click", readFile);
document.getElementById("removeFile").addEventListener("click", removeFile);

ステップ4A-ファイル機能の作成

ファイルは、デバイスのアプリのルートフォルダーに作成されます。ルートフォルダーにアクセスできるようにするには、フォルダーへの*スーパーユーザー*アクセスを提供する必要があります。この場合、ルートフォルダーへのパスは \ data \ data \ com.example.hello \ cache です。現時点では、このフォルダーは空です。

Cordova File Root Empty

ここで、log.txtファイルを作成する関数を追加しましょう。このコードを index.js に記述し、ファイルシステムにリクエストを送信します。このメソッドは、WINDOW.TEMPORARYまたはWINDOW.PERSISTENTを使用します。ストレージに必要なサイズはバイト単位です（この例では5MB）。

function createFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
         alert('File creation successfull!')
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }

}

これで、 CREATE FILE ボタンを押すと、ファイルが正常に作成されたことをアラートで確認できます。

Cordovaファイル作成

これで、アプリのルートフォルダを再度確認でき、そこに新しいファイルを見つけることができます。

Cordovaファイルルート

ステップ4B-ファイル関数の書き込み

このステップでは、ファイルにテキストを書き込みます。再度ファイルシステムに要求を送信し、 blob 変数に割り当てた Lorem Ipsum テキストを書き込むことができるファイルライターを作成します。

function writeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: true}, function(fileEntry) {

         fileEntry.createWriter(function(fileWriter) {
            fileWriter.onwriteend = function(e) {
               alert('Write completed.');
            };

            fileWriter.onerror = function(e) {
               alert('Write failed: ' + e.toString());
            };

            var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});
            fileWriter.write(blob);
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

*WRITE FILE* ボタンを押すと、次のスクリーンショットのように、アラートにより書き込みが成功したことが通知されます。

Cordovaファイル書き込み

これで、 log.txt を開いて、 Lorem Ipsum が内部に書き込まれていることを確認できます。

Cordovaファイルルートログテキスト

ステップ4C-ファイル機能の読み取り

このステップでは、log.txtファイルを読み取り、 textarea 要素に表示します。ファイルシステムにリクエストを送信し、ファイルオブジェクトを取得してから、リーダー*を作成します。リーダーがロードされると、戻り値を *textarea に割り当てます。

function readFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {}, function(fileEntry) {

         fileEntry.file(function(file) {
            var reader = new FileReader();

            reader.onloadend = function(e) {
               var txtArea = document.getElementById('textarea');
               txtArea.value = this.result;
            };
            reader.readAsText(file);
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

*READ FILE* ボタンをクリックすると、ファイルのテキストが *textarea* 内に書き込まれます。

Cordovaファイル読み取り

ステップ4D-ファイル機能の削除

最後に、 log.txt ファイルを削除する関数を作成します。

function removeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: false}, function(fileEntry) {

         fileEntry.remove(function() {
            alert('File removed.');
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

*DELETE FILE* ボタンを押して、アプリのルートフォルダーからファイルを削除できます。 アラートは、削除操作が成功したことを通知します。

Cordovaファイルの削除

アプリのルートフォルダーを確認すると、空であることがわかります。