[Monaca] Fileプラグインを使って外部サーバーのファイルを保存してみる

Fileプラグインについて で、Fileプラグインの使用方法を説明しましたが、Fileプラグインを使って外部サーバーのファイルを保存してみたいと思います。
Fileプラグインで保存できる場所は、アプリケーション専用のサンドボックス内になります。

Fileプラグインは、Monacaの基本Cordovaプラグインに含まれており、Freeプランから利用することができます。

ステップ1: ファイルのダウンロード

document.addEventListener("deviceready", function() {
  window.requestFileSystem(LocalFileSystem.TEMPORARY, 0,
    function(fileSystem) {

      // サンプルファイルを取得
      var xhr = new XMLHttpRequest();
      xhr.open('GET', 'http://ドメイン名/sample.wav', true);
      xhr.responseType = 'blob';
      xhr.onload = function() {
        if (this.status == 200) {
          console.log("200:" + this.response);
          
          // Blobデータに変換
          var blob = new Blob([this.response], { type: 'audio/wav' });
          
          // ファイルを作成
          createFile(fileSystem.root, blob, "sample.wav");
        }
      };
      xhr.send();
    },
    function(e) {
      console.log("error: " + e.code);
    }
  );
}, false);

今回は、LocalFileSystem.TEMPORARY 内にファイル保存します。
保存するファイルは、wav音声ファイルです。

ファイルのダウンローには、XMLHttpRequest() を利用しています。
ファイルのダウンロードが成功した場合は、ファイルに書き込むために、ダウンロードしたデータを Blob データに変換しています。

次に、作成した Blob データをファイルに保存します。

ステップ2: ファイルを作成する

function createFile(dirEntry, fileData, fileName) {
  dirEntry.getFile(fileName, { create: true, exclusive: false }, 
    function (fileEntry) {
       // ファイルの保存先
      console.log(fileEntry.toURL());
      
      // ファイルへの書き込み
      writeFile(fileEntry, fileData);
    }, function(e) {
      console.log("error: " + e.code);
    }
  );
}

はじめに、LocalFileSystem.TEMPORARY に、ファイル名「sample.wav」でファイルを作成します。
ファイルの保存先は、fileEntry.toURL() で、確認することができます。

ファイルが作成されたら、ステップ1で作成した Blob データをファイルに書き込みます。

ステップ3: ファイルへの書き込み

function writeFile(fileEntry, dataObj) {
  fileEntry.createWriter(function (fileWriter) {

    fileWriter.onwriteend = function() {
      console.log("Success write()");

      if (dataObj.type == "audio/wav") {
        // ファイルの読み込み
        readFile(fileEntry);
      }
    };
    fileWriter.onerror = function(e) {
      console.log("Failed file write: " + e.toString());
    };

    fileWriter.write(dataObj);
  });
}

ファイルへの書き込みには、createWriter() メソッドを使います。
ファイルへの書き込みが完了したら、実際に作成されたファイルを読み込んで、音声を再生してみたいと思います。

ステップ4: ファイルの読み込み

function readFile(fileEntry) {
  fileEntry.file(function (file) {

    var reader = new FileReader();
    reader.onloadend = function() {
      console.log("Success readAsDataURL()");
      
      // 音声再生
      // <audio id="audio1" controls></audio>
      var element = document.getElementById('audio1');
      element.src = this.result;
      element.play();
    };
    reader.readAsDataURL(file)

  }, function(e) {
    console.log("Failed file read: " + e.toString());
  });
}

今回、ファイルの読み込みには readAsDataURL() メソッドを使用しています。
readAsDataURL() メソッドでは、base64 エンコードされたデータを取得することができます。
そのため、<audio> タグの src に、取得した値を直接設定することができます。

#おわりに

アプリ内に音声や画像、動画ファイルなどを直接組み込んでいる場合は、アプリの容量が大きくなってしまいます。
外部サーバーにあるファイルをAjaxでダウンロードし、アプリ内にファイル保存することで、あらかじめ容量の大きいファイルを用意する必要がなくなります。

状況に応じて、試してみてはいかがでしょうか。