Monaca
テクノロジー
ノウハウ・TIPS

WKWebViewでダウンロードしてファイル保存した画像を表示する – Cordova 10の場合 –

Cordova

Monacaチームの小田川です。

2020年11月19日からMonacaでのCordova 10サポートが開始されました。

Cordova 10では、iOSプラットフォームのバージョンが「6系」にアップデートされています。iOSプラットフォーム6系からは、UIWebViewサポートが廃止され、WKWebViewのみの対応になっています。

WKWebViewでは、「file:」スキームに対してアクセス制限があるため、外部ファイルにアクセスする場合は、カスタムスキームを使用する必要があります。

Monacaで提供しているCordova 10用のテンプレートでは、カスタムスキームとしてmonaca-app:が設定されています。

WKWebViewで画像ファイルをダウンロードして、アプリ内に保存した画像ファイルを表示する場合、Cordova 9.0では、保存した画像ファイルをblobデータで取得し、window.URL.createObjectURLで取得したURLを使用する必要がありました。詳しくは、WKWebView環境でダウンロードした画像を表示してみるを参照してください。

iOSプラットフォーム6系からは、「file:」スキームパスをカスタムスキームパスに変換する、

window.WkWebView.convertFilePath()

が、提供されています。

アプリ内に保存した画像ファイルを表示する

サンプルでは、Fileプラグインを使用しています。Fileプラグインのcordova.file.documentsDirectoryから取得できるDocumentsフォルダーパスにダウンロードしたファイルを保存しています。保存したファイルの「file:」スキームパスをwindow.WkWebView.convertFilePath()でカスタムスキームパスに変換することで、画像を表示することができます。

<script>
  function downloadFile() {
    // ファイル保存ディレクトリに cordova.file.documentsDirectory を設定
    window.resolveLocalFileSystemURL(cordova.file.documentsDirectory, function (dirEntry) {
      var fileName = "sample.png";
      var mimeType = "image/png"
      var xmlHttpRequest = new XMLHttpRequest();

      xmlHttpRequest.open("GET", "https://cordova.apache.org/static/img/cordova_bot.png", true);
      xmlHttpRequest.responseType = 'blob';

      xmlHttpRequest.onload = function() {
        if (this.status == 200) {
          var blob = new Blob([this.response], { type: mimeType });

          // ファイルを保存
          dirEntry.getFile(fileName, { create: true, exclusive: false }, function (fileEntry) {
            fileEntry.createWriter(function (fileWriter) {
              fileWriter.onwriteend = function() {
                // 「file:」スキームパスをカスタムスキームパスに変換
                var url = window.WkWebView.convertFilePath(fileEntry.toURL());
                
                // 画像を表示
                document.getElementById('img1').src = url;
              };

              fileWriter.onerror = function(err) {
                console.log("Failed file write: " + err.toString());
              };

              // ファイルへ書き込み
              fileWriter.write(blob);
            });
          });
        }
      };

      // ファイルをダウンロード
      xmlHttpRequest.send();

    }, function(err) {
      console.log('error: resolveLocalFileSystemURL');
    }); 
  }
</script>

<body>
  <input type="button" value="downloadFile" onclick="downloadFile()" />
  <img id="img1" />
</body>

注意点として、WKWebViewでは、「cdvfile:」スキームをサポートしていないため、window.WkWebView.convertFilePath()を使用して「cdvfile:」スキームパスをカスタムスキームのパスに変換することはできません。

おわりに

Cordova 10でアプリ内に保存されている画像ファイル等にアクセスできない場合は、一度、window.WkWebView.convertFilePath()を使用して、「file:」スキームパスをカスタムスキームパスに変換して試してみてください。

author img for keiji_asial

keiji_asial

前の記事へ

次の記事へ

一覧へ戻る
PAGE TOP