読者です 読者をやめる 読者になる 読者になる

kurukuru-papaのブログ

主に、ソフトウェア開発に関連したメモを書き溜めたいと思います。

HTML5のBlobで、動的データのダウンロードを、わずか3行で実装できた。

JavaScriptなどにより、クライアント側で動的なデータを作成し、それをローカル環境に保存したいと思い、サンプルプログラムを作成してみました。実装技術として、HTML5のFile API機能におけるBlobを使いました。

わずか3行で実装できてしまうのですね。便利ですね。さらに、HTML5なので、最近の主要ブラウザ(IE 10.0以降、Firefox 13.0以降、Chrome 20.0以降のはず)では動作しますし、現在動作していないブラウザ(Safari?)でも、HTML5対応が進めば、動作するようになるはず。

では、作成してみたサンプルプログラムを説明します。

ポイント

ポイントは、この3行です。content変数には、ダンロードしたいファイルのテキストデータが入っています。id変数は、ダウンロード用リンクのaタグを特定するid属性です。

var blob = new Blob([ content ], { "type" : "text/plain" });
window.URL = window.URL || window.webkitURL;
$("#" + id).attr("href", window.URL.createObjectURL(blob));

1行目で、contentのデータを、Blobオブジェクトとして保持しています。2行目では、Chrome, Safariにおいて、URLオブジェクトの変数名が異なるので、名前を統一しています。3行目では、Blobオブジェクトを識別するURLを生成し、jQueryを使用して、aタグのhref属性に設定しています。

これにより、ユーザがダウンロード用リンクをクリックすると、content変数の内容が、ダウンロードされます。ただし、ブラウザや設定によっては、ダウンロードではなく、別ウインドウやタブで開かれるかもしれません。

作成したプログラム

作成したプログラムをブラウザで表示した画面イメージです。テキストエリアに入力したテキストを、ダウンロードリンクから、ローカル環境にダウンロードする事ができます。

HTMLです。

<textarea id="content" cols="40" rows="5">Hello, World!
こんにちは、みなさん!</textarea><br>
<a id="download" target="_blank">ダウンロード</a>

JavaScriptです。

(function() {
    // Aタグのhref属性に、Blobを設定する。
    // Blobに含めるデータは、引数で指定する。
    function setBlobUrl(id, content) {
        // 指定されたデータを保持するBlobを作成する。
        var blob = new Blob([ content ], { "type" : "text/plain" });

        // Aタグのhref属性にBlobオブジェクトを設定する。
        window.URL = window.URL || window.webkitURL;
        $("#" + id).attr("href", window.URL.createObjectURL(blob));
    }

    $("#content").keyup(function(){
        setBlobUrl("download", $("#content").val());
    });

    $("#content").keyup();
})();

今回作成したプログラムは、jsdo.it上で作成しました。次のリンクから、参照可能です。興味が湧いた方は、Forkして遊んじゃって下さい。

動作環境

対象ブラウザ

  • IE 10.0以降、Firefox 13.0以降、Chrome 20.0以降
    • ※動作確認したブラウザは以下のみです。

動作確認済みブラウザ

  • Mac OS X 10.7 Lion, Firefox 15.0.1
  • Windows 8 Release Preview, IE 10.0
    • クリックでは無反応。右クリックメニューから「対象をファイルに保存」を選ぶ必要がありました。

動作しないことを確認したブラウザ

  • Mac OS X 10.7 Lion, Safari 6.0
    • リンクが反応しません。「blob」で始まるURLを認識してくれない模様です。

利用ライブラリ