【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行で実装できた。