ニフクラmBaaSお役立ちブログ

スマホアプリ開発にニフクラmBaaS。アプリ開発に役立つ情報をおとどけ!

ファイルストアのファイルを一括ダウンロードするブックマークレットの紹介

ファイルストアは静的なHTMLファイルや画像、動画、JavaScriptなどをまとめてアップロードしておける便利なストレージです。ソーシャル系アプリであれば写真を保存しておく先としても利用できます。

そんなファイルがアップロードされたファイルストアからまとめてファイルをダウンロードできるブックマークレットを作成しました。

実際に操作しているところです。

使い方

ブックマークが登録されているURLにアクセスして、リンクをツールバーにドラッグ&ドロップしてください。

動作の仕組み

行っていることは管理画面のファイルダウンロード機能をJavaScriptから実行しているだけです。ただしバイナリファイルもあるのでjQueryのAjaxではなく、XMLHttpRequestを使っています。

var filename = $($(".filestore-list-name")[i]).find("span:first").text();
console.log('filename', filename)
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://console.mb.cloud.nifty.com/api/download/file', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  saveAs(this.response, filename);
  if (i < count) {
    loop(i + 1)
  }
};
var data = new FormData();
data.append('applicationId', app_id);
data.append('fileName', filename);
data.append('sessionToken', session);
xhr.send(data);

そして取得したファイルを eligrey/FileSaver.js: An HTML5 saveAs() FileSaver implementation を使ってダウンロードしています。

FileSaver.jsは一部のブラウザで動作制限があるので注意してください。例えばSafariではダウンロードではなく別なタブが開いてしまいます。Google Chrome、Edge、IE10以上、Opera15以上、Firefox 20以上で試してください。

制限

自動ページネーションも可能ですが、負荷を考えて表示されているファイルだけに制限しています。

ソースコード

ソースコードはGistにアップロードしてあります。FileSaver.jsのコードが前半に貼り付けてあります。実際のコードは最後の方だけです。


ファイルストアのファイルもACLが設定できるので、場合によってはSDKからはダウンロードできません。管理画面で逐次ダウンロードしていたという方はこちらのブックマークレットをお試しください。