Furudateのブログ

プログラミングやネットワーク系の知識・技術がメインのブログ。技術メモ帳的な感じになるかと。岩手から発信していきます。

【JavaScript】ローカルファイルにテキストを出力して保存

JavaScript

こんにちは。 久々の更新になってしまいました。

今回はJavaScriptについてです。

先日とある人から「ボタンを押した数をカウントしてテキストファイルに保存したい」という要望がありました。 要望だけ見ればものすごく簡単です。

ただ、今回はWebサーバ環境はないのでローカルだけで処理したい（PHP等が使えない）ということだったため、JavaScriptで実現しようと思いました。 しかしJavaScriptは基本的にはローカルファイルを扱えません。

そこで色々と調べた結果、HTML5のFile APIというのを使うと実現出来るようなのでやってみました。 一応実現出来たため、メモとして残しておきます。

以下ソースコードです。

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="test.js"></script>
    </head>
    <body>
        <div id="contents_sample_wrap">
            <ul>
                <li class="text_box">ボタンを押すとテキストが変わります</li>
            </ul>
            <input type="button" value="テキストを変更" id="count" /><!--クリックしたときにtext()
            を実行-->
            <input type="button" value="出力！" id="export" />
            <a id="download" target="_blank">ダウンロード（IEでは、右クリック＞対象をファイルに保存）</a>
        </div>
    </body>
</html>

HTML側は特に難しいことはしていません。 Jqueryと外部JSファイルを読み込み、カウントアップボタンと出力ボタンを作成しています。 出力ボタンを押すとダウンロードリンクが生成され、ボタンを押した回数が書き込まれたファイルをDLできるという流れです。

次にJavaScriptのほうです。

$(function() {
    var click_count = 0;    // ボタンカウント用変数

    if (typeof Blob !== "undefined") {
        // alert('このブラウザに対応しています');
    } else {
        alert('このブラウザには対応していません');
    }

    $("#count").click(function(){
        click_count++; // ボタンを押した数をカウント
        // text_boxクラスのテキストの値を変更
        $("#contents_sample_wrap .text_box").text("ボタンが" + click_count + "回クリックされました");
    });

    $("#export").click(function(){  // 出力ボタンを押した場合は、setBlobUrl関数に値を渡して実行
        setBlobUrl("download", click_count);
    });
});


function setBlobUrl(id, content) {

 // 指定されたデータを保持するBlobを作成する。
    var blob = new Blob([ content ], { "type" : "application/x-msdownload" });
 
 // Aタグのhref属性にBlobオブジェクトを設定し、リンクを生成
    window.URL = window.URL || window.webkitURL;
    $("#" + id).attr("href", window.URL.createObjectURL(blob));
    $("#" + id).attr("download", "tmp.txt");
}

ポイントはsetBlobUrl関数の中身です。 BlobというクラスをNewしていますが、これがFile APIの機能の一部です。 これを利用し、ローカルファイルに出力しています。

今回は以上です。 File APIは割と手軽なので、色々と出来そうですね！

それでは。

参考にさせていただいたサイト

Webページ作成覚書: javascript: ファイルの出力
HTML5のBlobで、動的データのダウンロードを、わずか3行で実装できた。