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

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

JavaScriptで手元のテキストファイルを読み込んでブラウザに表示させるためのサンプル

<スポンサーリンク>

色々と苦労したけれど、なんとかサンプルを作ることができたので、メモする。

ボタンクリックでファイルを選択して、そのファイルを読み込むサンプル

HTMLにJavaScriptを直書きというひどいものだが、とりあえずサンプルということで。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8">
	<title>タイトル</title>
	<script type="text/javascript">
	function dochange(event) {
		var file = event.target.files[0];
		if (file) {
			readfile(file);
		}
	}

	function readfile(file) {
		var reader = new FileReader();
		reader.addEventListener('load', onLoaded);
		reader.addEventListener('error', onError);

		reader.readAsText(file,"utf-8");
	}

	function onLoaded(event) {
		var str = event.target.result;
		document.querySelector("#msg").innerHTML = str;
		console.log("text has read.");
	}

	function onError(event) {
		if (event.target.error.code == event.target.error.NOT_READABLE_ERR) {
			alert("ファイルの読み込みに失敗しました!");
		} else {
			alert("エラーが発生しました。" + event.target.error.code);
		}
	}

	</script>
</head>
<body>
	<header>
		<h1>File Read Sample </h1>
	</header>

	<article>
		<p>File API のサンプル </p>
		<textarea id="msg" cols="30" rows="7"></textarea>
		<hr>
		<input type="file" onchange="dochange(event);">
	</article>
</body>
</html>

このHTMLをコピペして開くとわかるのだけれど、ファイルを選択して選ぶと、テキストエリアにテキストに書かれた内容が表示される。
つまり、選択したファイルをJavaScriptで読み込むことができた。

JavaScriptでドラッグ&ドロップでファイルを読んで、読み込みの進捗を表示してみる。

まずは表示するHTML。枠にドラッグ・アンド・ドロップすると、ファイルが読み込まれる。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>ファイルをドラッグするサンプル</title>
<style>
h1 {font-size: 18pt; background: #AAAAEE; padding: 5px;}
#drop {
	border:solid 1px gray;
	background: #FFEEEE;
}
</style>
<script src="drag.js">
</script>
</head>
<body>
<h1>ファイルをドロップする</h1>
<div id="drop">
	<p>ここにデスクトップ上のファイルをドロップしてください</p>
	<div id="progress"></div>
	<br>
	<br>
	<div><button id="abort">読み取り中止</button></div>
	<div id="info"></div>
	<div id="content"></div>
</div>
<hr>
</body>
</html>

ファイルを読み込んで進捗を表示するサンプル(上のhtmlで読み込んでいるdrag.js)

function init() {
	var drop = document.getElementById("drop");
	var progress = document.getElementById("progress");
	var info = document.getElementById("info"); 
	var content = document.getElementById("content");
	var abort = document.getElementById("abort");

	drop.addEventListener("dragover", function(event) {
		event.preventDefault();
	}, false);

	drop.addEventListener("drop", function(event) {
		event.preventDefault();
		file_droped(event);
	}, false);
	abort.addEventListener("click", abort, false);
}

function file_droped(event) {
	//ファイルがドラッグ・アンド・ドロップされたらalertが出る
	//alert("dropされました!");
	console.log("dropped");

	var progress = document.getElementById("progress");
	var info = document.getElementById("info"); 
	var content = document.getElementById("content");

	progress.innetHTML = "";
	info.innerHTML = "";
	content.innerHTML = "";

	var file = event.dataTransfer.files[0];

	if (! file) {
		info.innerHTML = "<p>本当にファイルをドロップしてますか?</p>";
		return;
	}

	//ファイルロードの進捗を表示してみる
	var reader = new FileReader();
	reader.onprogress = function(event) {
		if (event.lengthComputable == true && event.total > 0) {
			var rate = (event.loaded * 100 / event.total).toFixed(1);
			var msg = "";
			msg += event.total + "バイト中";
			msg += event.loaded + "バイトをロードしました!";
			msg += "(" + rate + "%)";
			progress.innerHTML = msg;
			console.log(msg);
		}
	};

	reader.readAsText(file);
	reader.onload = function (event) {
		content.appendChild( document.createTextNode(reader.result));
	};
}

window.onload = init;

色々と無駄があって、リファクタリングの余地がずいぶんあるけれど、HTML5っぽく、JavaScriptでファイルをドラッグ&ドロップで読み込むことができた。

参考文献

以下の2冊の書籍を参考にさせていただきました。(正確にいうと、2冊+モダンJavaScript)

Google API Expertが解説するHTML5ガイドブック

Google API Expertが解説するHTML5ガイドブック

HTML5ガイドブックは増補改訂版が出ているようなので、今度本屋に行って良さそうだったら購入を検討したい。
でも、本を買い込みすぎて、もう本棚の空きが無いから、しばらく衝動買いは控えた方がいいかも。

HTML5ガイドブック 増補改訂版 (Google Expert Series)

HTML5ガイドブック 増補改訂版 (Google Expert Series)

  • 作者: 羽田野太巳,古籏一浩,太田昌吾,小松健作,伊藤千光,吉川徹
  • 出版社/メーカー: インプレスジャパン
  • 発売日: 2012/10/19
  • メディア: 単行本(ソフトカバー)
  • 購入: 3人 クリック: 6回
  • この商品を含むブログを見る

何の自慢にもならないけど、間違いなく図書館のITコーナーよりも自分の家の方が本があると思うw

いつかITカフェ開きたいな。調べ物できる本も(異常なほど)大量にあるし。

LANを開放して、コーヒー飲めるようにして、座席も好きに使えて、わかんないことがあったら、本を調べることができる。ホワイトボードも用意してさ。
そのカフェで気が合う仲間がいたら、そこで一緒にモノを作ったりもできるの。
打ち合わせもできて、プロジェクター用意したりして。

そんな空間作ったら面白いんじゃないかなぁ。
エンジニアだからこそできる、エンジニアのためのカフェ。
そんなの作って、俺も一緒にコード書いたりできたらいいなぁ、なんて妄想したら、本文と関係ないところが長くなってしまった。
今日は寝ます。

感謝のプログラミング

今回で感謝のプログラミングは【480時間目】
10000時間まで、あと【9520時間】

サンプルを読んだり、色々と調べていると3時間も使ってしまった。
まだJavaScriptには慣れていないので、もっと手を動かしていかないと。

今週末にガッツリやって、なんとか500時間まで到達したい。
読んでいない新聞がたまっているのと、英語の勉強ができていないので、そこも不安です。最近は会社ではシェルスクリプトばっかり書いてます。viのうまい使い方もまとめてみたい。