オンラインブックマークスクリプトCGI不要のJavaScript版

74thtool web
前回

JavaScriptで、HTMLとテキストファイルさえあれば動くようなオンラインブックマーク

ajaxを勉強する機会があったので、どうせならオンラインブックマークスクリプトをJavaScriptで組めないかと考えてみた。今までJavaScriptは触ったことくらいしかなかったので、カテゴリを開閉させるくらいにしか使っていなかった。今回は、JavaScriptでテキストファイルを読み込み、正規表現で構文解析して、DOMで組む、ところまでやってみた。

で、毎度恒例、設置してみたので是非触ってみて欲しい。拡張子が「.html」な点に注目。本当にサーバ側ではなにも処理していない。

これだけのファイルだが、処理時間は一瞬だった。今のところ、IE7、FF3で動作を確認済み。

使い方

下のソースをテキストエディタにコピペしてUTF-8で保存。さらに、テキストエディタでブックマークデータファイル『bookmark.dat』を作成。

データファイルの例は以下。

http://74street.ddo.jp/ 74番通り
*カテゴリ名
http://www.hoge.com/ hogeサイト１
http://www.hogehoge.com/ hogeサイト２
**カテゴリ名
http://www.hoge2.com/ hogeサイト３
*カテゴリ名
http://www.hogee.com/ hogeサイト４

と、「*の連続+文字列」が文字列をカテゴリになり、「URL(半角スペース）サイト名」がサイトへのリンクになる。ただし文字コードはUTF-8に限定。

そしてこの２つのファイルを同じどこにアップロードするなり、USBメモリの同じフォルダに入れるなりすると、使えます。

注意

「**カテゴリ名」の後に「***カテゴリ名」とせずにいきなり「****カテゴリ名」を作ってはいけません。階層は一個ずつ下りましょう。

ソースコード

毎度のソースコード。今回は100行。もちろん外部スクリプトも使っていない。ライセンスはフリー。

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
var beforecategory='m0';
function OpenCategory(category) {
	if( document.getElementById('c'+category) ){
		if( document.getElementById('c'+category).style.display == "none" ){
			if( document.getElementById('b'+category) ){
				document.getElementById('b'+beforecategory).style.display = "none";
				document.getElementById('b'+category).style.display = "block";
				beforecategory=category;
			}
			document.getElementById('c'+category).style.display = "block";
		}else{
			document.getElementById('c'+category).style.display = "none";
		}
	}else{
		if( document.getElementById('b'+category) ){
			document.getElementById('b'+beforecategory).style.display = "none";
			document.getElementById('b'+category).style.display = "block";
			beforecategory=category;
		}
	}
}
function Load(){
	if (window.XMLHttpRequest) {
		var data = new XMLHttpRequest();
	}else if (window.ActiveXObject){
		var data = new ActiveXObject("Msxml2.XMLHTTP");
	}
	data.open('get', './bookmark.dat', false);
	data.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT");
	data.send(null);
	var split_data = data.responseText.split("\n");
	var main = document.getElementById('main');
	var category_array = new Array();
	category_array[1] = document.getElementById('navi');
	var main_div = document.createElement('div');
	main_div.setAttribute('id','bm0');
	var depth = 1;
	var no = 0;
	for( var i=0;i<split_data.length;i++){
		if( split_data[i].match( /^(\*+)([^\*]+)$/ ) != null){
			main.appendChild( main_div );
			main_div = document.createElement('div');
			no++;
			main_div.setAttribute('id','bm'+no);
			main_div.style.display = 'none';
			if( RegExp.$1.length > depth ){
				depth++;
				if( RegExp.$1.length != depth )alert('ERROR');
				category_array[ depth ] = document.createElement('div');
				category_array[ depth ].setAttribute('id','cm'+(no-1));
				category_array[ depth ].style.display = 'none';
			}else if( RegExp.$1.length < depth ){
				for( var j=depth; j > RegExp.$1.length; j-- ){
					category_array[ j-1 ].appendChild( category_array[ j ] );
				}
				depth=RegExp.$1.length;
			}
			var link = document.createElement('a');
			link.setAttribute('href',"javaScript:OpenCategory('m" + no + "')");
			link.appendChild( document.createTextNode( RegExp.$2 ) );
			category_array[ depth ].appendChild( document.createTextNode( RegExp.$1.slice(0,-1) ) );
			category_array[ depth ].appendChild( link );
			category_array[ depth ].appendChild( document.createElement('br') );
		}else if( split_data[i].match( /^(\S+)\s(.+)/ ) ){
			var link = document.createElement('a');
			link.setAttribute('href',RegExp.$1);
			link.appendChild( document.createTextNode( RegExp.$2 ) );
			main_div.appendChild( link );
			main_div.appendChild( document.createElement('br') );
		}
	}
	main.appendChild( main_div );
	for( var j=depth; j > 1; j-- ){
		category_array[ (j-1) ].appendChild( category_array[ j ] );
	}
}
if(window.attachEvent){
	window.attachEvent('onload', Load );
}else if(window.addEventListener){
	window.addEventListener('load', Load, false);
}
//]]>
</script>
</head>
<body>
<table width="100%"><tr>
<td width="40%" align="left" valign="top" id="navi">
<a href="javaScript:OpenCategory('m0')">トップ</a><br />
</td>
<td align="left" valign="top" id="main"></td>
</tr></table>
</body></html>

で、

CGI不要になりましたが、いかがっスか？