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.jpgtoURL()メソッドの使用例は、以下になります。
<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が提供している機能になります。
おわりに
「file://」スキームパスを変換する場合、iOSとAndroidで変換方法が異なるため、少し処理が複雑になってしいますが、現状では、今回紹介した方法で対応する必要があります。今後のCordovaのバージョンアップで処理が統一されることを期待したいと思います。