パンくずリストを生成するJavaScript

はじめに

とても常識的なプログラムを書きました。パンくずリストを生成するJavaScriptです。
ファイルごとの名前をハッシュ形式で指定し、実行時に読み込んで生成しています。

例えば、下記の定義において、www.haroperi.info/emoticonは、はろぺり研＞顔文字というリストが表示され、www.haroperi.info/emoticon/mecab.htmlを開くと、はろぺり研＞顔文字＞顔文字形態素解析と表示されます。

table = {
	"www.haroperi.info" : {
		"name": "はろぺり研",
		"profile.html" : { "name": "自己紹介" },
		"products.html": { "name": "作品紹介" },
		"emoticon" : {
			"name": "顔文字",
			"mecab.html": { "name": "顔文字形態素解析" },
			"extraction.html": { "name": "顔文字抽出" },
		},
	},
}

このようなjavascriptの定義をサクッと書いて、すべてのページから以下のように読み込むだけで、簡単にパンくずリストが作成できます。

<div id="pankuz"></div>
<script type="text/javascript" src="pankuz.js"></script>

ソースコード

以下にそのソースコードを掲載します。

// add following HTML to your HTML file.
// <div id="pankuz"></div>
// <script type="text/javascript" src="pankuz.js"></script>

// definition of each pages
table = {
	"foo.github.ac.jp": {
		"name": "foo github",
		"directory": {
			"name": "the title of this directory",
			"directory2": {
				"name": "the title of this directory",
				"foo.html": "foooooooooo",
			},
		},
	},
	"bar.github.ac.jp" : {
		"name": "bar github",
		"profile.html" : { "name": "profile" },
		"products.html": { "name": "products" },
	},
}

url = "http://"
arr = (window.location.hostname + window.location.pathname).split("/")
obj = document.getElementById("pankuz");
obj.innerHTML = "";
for(i = 0, current_node = table; i < arr.length && (current_node = current_node[arr[i]]); i++) {
	if (!current_node["name"]) {
		continue;
	}
	if (i > 0) {
		obj.innerHTML += " &gt; ";
	}
	url += "/" + arr[i];
	if (i == arr.length-1) {
		obj.innerHTML += current_node["name"];
	}
	else {
		obj.innerHTML += ("<a href=\"" + url + "\">" + current_node["name"] + "</a>");
	}
}

簡単な説明とか

以下のコードを実行すると、http://d.hatena.ne.jp/hatenadiary/というURLは["d.hatena.ne.jp", "hatenadiary"]という配列に分解される。

arr = (window.location.hostname + window.location.pathname).split("/")

それをループで回して、d.hatena.ne.jpに対応する名前、hatenadiaryに対応する名前をそれぞれハッシュから検索して<div id="pankuz"></div>内に書き込む。その際、上位ページは<a>タグで囲って、そこへリンクさせる。

デモとgist

デモ代わりに私のウェブサイトを

http://www.haroperi.info/

gist

https://gist.github.com/2986632

終わりに

実はこちらのサイトに二番煎じです。
http://tshinobu.com/lab/breadCrumbJs/