2022年7月1日

Androidで「file://」スキームパスを変換する方法について

Android

Cordova

Monaca

Monacaチームの小田川です。

Cordova 11用のMonacaプロジェクトからは、iOSプラットフォーム6系、Androidプラットフォーム10系が既定になりました。iOSプラットフォーム6系、Androidプラットフォーム10系からは、これまで使用されていた「file://」スキームからカスタムスキームを使用する形に仕様が変更されています。

cordova-plugin-cameraでは、アプリへ返すファイルパスとして、「file://」スキームが使用されています。iOSプラットフォーム6系、Androidプラットフォーム10系では、Cordovaプラグイン側から返された「file://」スキームパスを使用することができないため、「file://」スキームパスを変換する必要があります。

iOSの場合は、iOSプラットフォーム6系以降から提供されている、

window.WkWebView.convertFilePath()

を利用することで対応することができます。window.WkWebView.convertFilePath()の利用方法については、WKWebViewでダウンロードしてファイル保存した画像を表示する – Cordova 10の場合 –を参照していください。

Androidの場合は、Androidプラットフォーム側からwindow.WkWebView.convertFilePath()のような機能は提供されていないため、別の方法で対応する必要があります。今回は、Androidでの「file://」スキームパスを変換する方法を見ていきたいと思います。

cordova-plugin-file v7.0.0以降を使用する

Androidで「file://」スキームパスを変換する場合は、cordova-plugin-file v7.0.0以降から提供されているtoURL()メソッドを利用する必要があります。

cordova-plugin-file v7.0.0以降からは、Android用のtoURL()メソッドの戻り値が更新され、アプリのコンテンツが「file://」スキームを使用している場合は、「file://」スキームパスを返し、「http(s)://」スキームを使用している場合は、「cdvfile形式」のパスが返るようになっています。詳しくは、Upgrading Notesを参照していください。

Cordova 11用のMonacaプロジェクトでは、cordova-plugin-file v7.0.0が規定値に設定されています。

注意点として、2022年7月1日時点のストア版Monacaデバッガーでは、cordova-plugin-file 6系が設定されています。そのため、Monacaデバッガーでcordova-plugin-file v7.0.0の動作確認を行う場合は、カスタムビルドデバッガーを作成する必要があります。カスタムビルドデバッガーは、MonacaクラウドIDEのAndroidアプリのビルド画面から作成することができます。

ストア版Monacaデバッガーのcordova-plugin-file v7.0.0対応については、次回のアップデートで対応する予定になっています。

toURL()メソッドの利用方法

cordova-plugin-cameraを例にcordova-plugin-fileから提供されているtoURL()メソッドの利用方法を見ていきたいと思います。

cordova-plugin-cameraのnavigator.camera.getPicture()を利用する際に、オプション設定のdestinationTypeに対してCamera.DestinationType.FILE_URIを指定した場合は、以下のような「file://」スキームパスが返ってきます。

file:///data/user/0/xxx.xxx.xxx/cache/xxxxxxxxxx.jpg

そのため、返ってきた「file://」スキームパスをcordova-plugin-fileのtoURL()メソッドを利用して変換する必要があります。toURL()メソッドの処理が成功した場合は、以下のようなパスが返っていきます。

https://localhost/__cdvfile_cache__/xxxxxxxxxx.jpg

toURL()メソッドの使用例は、以下になります。

<img id="img01" src="" />

navigator.camera.getPicture(dump_pic, fail, {
  quality : 50,
  destinationType: Camera.DestinationType.FILE_URI
});

function dump_pic(data) {
  if (monaca.isAndroid) {
    window.resolveLocalFileSystemURL(data, function (fileEntry) {
      document.getElementById("img01").src = fileEntry.toURL();
    }, fail);
  }

  if (monaca.isIOS) {
    document.getElementById("img01").src = window.WkWebView.convertFilePath(data)
  }
}

function fail(msg) {
  alert(msg);
}

cordova-plugin-cameraのnavigator.camera.getPicture()から取得したdataには、「file://」スキームパスが設定されています。cordova-plugin-fileのwindow.resolveLocalFileSystemURL()を使用して、dataに設定されている「file://」スキームパス先のファイルエントリーを取得します。ファイルエントリーが正常に取得できれば、ファイルエントリーに対してtoURL()メソッドを実行することで、「cdvfile形式」のパスを取得することができます。「cdvfile形式」のパスが取得できれば、imgタグに画像が表示されます。

使用例にあるmonaca.isAndroidやmonaca.isIOSは、Monacaプロジェクトの「JS/CSSコンポーネント」に設定されているMonaac Core Utilityが提供している機能になります。