概要
ローカルに保存したファイルを削除したい！
というときのコード。
PhoneGapでサーバーから画像・音声・動画をダウンロードして表示・再生まで
という記事をかきましたが、逆に不要になったときに削除する手順です。
ついでなので、複数ファイルを一括ダウンロード＆一括削除、を実装してみます。
アプリ準備
いつも、PowerShellからコマンドラインで作ってるので、その方法で説明します。
参考：WindowsでPhoneGapアプリ開発＆デバッグ環境構築
まず、アプリ作ってフォルダ移動
phonegap create fileremovetest
cd fileremovetest
ファイル転送するためのプラグインを追加
phonegap plugin add org.apache.cordova.file-transfer
HTML/JSコード
全文のせます。まるっと www/index.html へ、コピペどうぞ。
jQuery 使ってるので、それだけ自己ダウンロードお願いします。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ダウンロードテストアプリ</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script>
var rootObj,rootDir,dlCount;
//ダウンロードするファイルをいれているフォルダ
var fileurl = 'https://secure.elephancube.jp/dltestapp/';
//ダウンロードするファイルの配列
var files = ['120590.png','120591.png','120592.png'];
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
//ルートのオブジェクトを格納 ファイルの削除時に使う
rootObj = fileSystem.root;
//ルートのパスを格納 ファイルのダウンロード時に使う！
rootDir = fileSystem.root.toURL();
}, function(e) {
alert('ファイルアクセスエラー');
});
}
function dl_imgs(){
alert('画像のダウンロードを開始するよ');
dlCount = 0;
do_download();
}
function do_download(){
$('#view').html('downloading... '+String(dlCount+1)+'/'+String(files.length));
var fileTransfer = new FileTransfer();
//ダウンロードするURL
var url = encodeURI(fileurl+files[dlCount]);
//保存するパス
var filePath = rootDir + 'remtest/'+files[dlCount];
fileTransfer.download(url, filePath, function(entry) {
//次のファイルへ
dlCount++;
if(dlCount==files.length){
//ダウンロード完了：画像の表示
var htmlstr = '';
for(var i=0;i<files.length;i++){
htmlstr += '<img src="'+rootDir+'remtest/'+files[i]+'" width="33%">'
}
$('#view').html(htmlstr);
}else{
//次のファイルをダウンロード
do_download();
}
}, function(error) {
alert('ダウンロードエラー '+error.code);
});
}
function rem_imgs(){
if(confirm('本当に削除しますか？')){
dlCount = 0;
do_remove();
}
}
function do_remove(){
$('#view').html('removing... '+String(dlCount+1)+'/'+String(files.length));
//削除するファイルパス
var filePath = 'remtest/'+files[dlCount];
rootObj.getFile(filePath,{create:false},function(fileEntry){
//削除実行
fileEntry.remove();
//次のファイルへ
dlCount++;
if(dlCount==files.length){
//ファイル削除完了
$('#view').html('remove completed.');
}else{
//次のファイルを削除
do_remove();
}
},function(){
alert("Error removing the file " + error.code);
});
}
</script>
</head>
<body>
<h1>PhoneGap ダウンロードのテスト</h1>
<p><button onclick="dl_imgs()">画像の一括ダウンロード</button></p>
<p><button onclick="rem_imgs()">画像の一括削除</button></p>
<div id="view">（ここに表示されます）</div>
</body>
</html>
動作確認
ビルドして実機にapk転送してインストール
phonegap build android
↓キャプチャ画像
↓削除の確認は、ファイルマネージャー系のソフトを使って（キャプチャは削除前）
デバック用のapkおいておきますが、インストールは自己責任で！
apkダウンロード
積み残し課題！？
・フォルダの削除ができていません。
・一度ダウンロードした画像を表示させると、キャッシュが残っている限り、ファイル削除したあとも表示されます。アプリによっては、キャッシュ削除も検討したほうがよいかもしれません。
Thanks
画像素材は、以下サイトからいただきました。
http://www.ac-illust.com/
キャプチャに出ているファイルマネージャーアプリはこれです。
https://play.google.com/store/apps/details?id=com.rhmsoft.fm&hl=ja