【cordova-plugin-file-transfer】ファイルを端末にダウンロードする harublog

スマホアプリの開発に今回初めて触れました。

端末にファイルをダウンロードするのにも一苦労しました。iOSやAndroid、画像とPDFでも、使用するプラグイン含め実装方法や、動きがだいぶ異なりました。

普段スマホアプリを開発している人には当たり前の事も多いかもしれませんが、せっかくなので調べたことを備忘録に残します。

使用するプラグイン
Android
ファイル（PDF）・画像のダウンロード
iOS
iOSでのファイルダウンロードの考え方（サンドボックス）
サンドボックス内へのファイル（PDF）・画像のダウンロード
サンドボックスではなく、端末へのファイル（PDF）・画像のダウンロードする方法
previewAnyFileプラグイン（動作確認済）
Cordova Social Sharing プラグイン（動作未確認）

使用するプラグイン

以下の2つのプラグインを使用します。

ファイル転送プラグイン

cordova-plugin-file-transfer

ファイルダウンロードの為に使用します。その他アップロードなどの機能もあります。

※ 非推奨プラグイン (Cordova 9.0 以降)

参考ファイル転送プラグインMonoca Docs

ファイル操作プラグイン

cordova-plugin-file

ファイルの保存場所の指定に使用します。

参考ファイル操作プラグインMonoca Docs

Android

ファイル（PDF）・画像のダウンロード

Androidでファイルの保存が完了した状態（今回はDownloadフォルダに保存させました。）

確認端末：Android Studio エミュレーター（Pixel 4）

※エミュレーターや実機でPDFを表示するのに適したアプリがインストールされていなければ表示はできません。

Android Studio エミュレーターでは「GooglPlay」マークがついているものであれば、元々PDFを閲覧可能だったので、上記確認端末を使用して確認しました。

var fileTransfer = new FileTransfer();

// 今回はdataURIを渡します
var data = 'data:image/png;base64/iVBORw0KGgoAAAANSUhEU0.....';

// Androidファイル任意の保存先（cordova.file.externalRootDirectory部分で「ファイル操作プラグイン」を使用）
var storeDirectory = cordova.file.externalRootDirectory + 'Download/';
// ファイル名　○○.png や ○○.pdf 等
var fileName = 'XXXXXXX.png';
// 保存先パス（ディレクトリ＋ファイル名）
var filePath = storeDirectory + fileName;

// ダウンロード
fileTransfer.download(
	data,
	filePath,
	function(entry) {
		console.log("ダウンロード完了: " + entry.toURL());
		// entry.toURL()で得られるパスの例
		file:///storage/emulated/0/Download/XXXXXXX.png
	},
	function(error) {
		console.log("ダウンロード失敗" + error.source);
	},
	false,
	{
		headers: {
			"Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
		}
	}
);

iOS

iOSでのファイルダウンロードの考え方（サンドボックス）

iOSもAndroidと同様のコードでダウンロードが可能ですが、ダウンロード先についてiOS独特の知識が必要で、不慣れな私はここで時間を食いました。

Androidの方は、端末で一般的に使用されている「ファイル」アプリのDownloadフォルダで、実際にダウンロードされていることが確認できました。

iOSはいろんなパス（cordova-plugin-file を使用した cordova.file.XXXXXXの部分）を試してみましたが、一向に端末で確認できる場所にダウンロードされません。。

iOSでは「サンドボックス」（端末では確認できないアプリの占有ボックス）と呼ばれる構造になっており、他アプリから閲覧できないようになっているのです。

他社製Appはすべて「サンドボックス化」されるので、ほかのAppによって保存されたファイルにアクセスしたり、デバイスに変更を加えたりすることはできません。サンドボックス化は、ほかのAppによって保存された情報が収集または変更されるのを防ぐために行われます。
Appleサポート　サンドボックス化

xcodeで確認してみると、アプリのサンドボックス内に、PDFも画像もダウンロードされていることを確認しました。

後述のソースでも、entry.toURL()で得られるパスfile:///var/mobile/Containers/Data/Application/8544A743-4870-4073-B0F...（アプリに割り振られるID）/Library/Cloud/XXXXXXX.png　を確認しても分かるように、アプリのスペースの中に保存されています。

参考iOSデバイス上のアプリケーションコンテナの内容を確認する方法 – QiitaQiita

不慣れな私は、「他アプリから閲覧できない」というところに、違和感を感じました。

いつも使用している以下の「ファイル」「写真」をアプリの一つだとして意識した事があまり無かったからです。

「ファイル」「写真」もアプリの一つで、そのアプリに開発中のアプリでダウンロードしたファイルを「共有」するという考え方になります。

サンドボックス内へのファイル（PDF）・画像のダウンロード

先述の考え方を踏まえ、ダウンロードは、サンドボックス内だけでいいんだという方はAndroidとほぼ同じですが、以下のコードでダウンロードが可能です。

サンドボックス内でなく、端末に保存したいのだ！いう方はこの後紹介するプラグインを導入することで解決可能です。

var fileTransfer = new FileTransfer();

// 今回はdataURIを渡します
var data = 'data:image/png;base64/iVBORw0KGgoAAAANSUhEU0.....';

// iOSファイル任意の保存先（cordova.file.syncedDataDirectory部分で「ファイル操作プラグイン」を使用）
var storeDirectory = cordova.file.syncedDataDirectory;
// ファイル名　○○.png や ○○.pdf 等
var fileName = 'XXXXXXX.png';
// 保存先パス（ディレクトリ＋ファイル名）
var filePath = storeDirectory + fileName;

// ダウンロード
fileTransfer.download(
	data,
	filePath,
	function(entry) {
		console.log("ダウンロード完了: " + entry.toURL());
		// entry.toURL()で得られるパスの例
		file:///var/mobile/Containers/Data/Application/アプリに割り振られるID/Library/Cloud/XXXXXXX.png
	},
	function(error) {
		console.log("ダウンロード失敗" + error.source);
	},
	false,
	{
		headers: {
			"Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
		}
	}
);