Javascript & XMLによる静的HTMLサイトでパンくずリストの作り方:How to make breadcrumb lists in static HTML pages by the Javascript & XML.
静的サイトにもっと『パンくず』を!!
『パンくず』とは
『パンくず』とはページ上部に表示されるナビゲーションのための簡易なリンクリストです。簡素で目立たないなものですが、ナビゲーションとしては非常に有効で、サイト全体のナビゲーションに一貫性の無い、事業部乱立、サイト制作発注先バラバラの大型のサイトなどは、『パンくず』無しでは、まさに森で迷ったヘンゼルとグレーテル状態となってしまうでしょう。
『パンくず』は「履歴型」と「階層型」に分類できます。「履歴型」の代表例はwikiで見られ、自分が閲覧してきたページを表示するものです。
「階層型」は現在見ているページが、そのサイトでどの位置に属しているかを線形で表示するもので上位カテゴリへの参照による現在位置の把握が目的となります。
一般的なサイトでどちらが良いかという問題に関しては、筆者は「階層型」が良いと思っています。「履歴型」は単に自分の見たページの『履歴パンくず』であり、ナビゲーションとは言えないからです。
wikiは投稿者が自由に記事を投稿するシステム上、サイト構造はマトリックス型になり整理されたたサイト構造を構成するのが不可能です。そのため「階層型」の動的なナビゲーションを生成するには手間がかかるでしょう。また、“関連する記事の閲覧”といった目的から考えても『履歴パンくず』の方が合理的である言えます。
尚、『履歴パンくず』は比較的簡単にcookieによって静的サイトへも実装可能だと思います。
そこで今回、「階層型」の『パンくずリスト』をhtmlによる静的サイトへ実装する方法に関して考察しました。
概要
多くのCMSでは『パンくず』（breadcrumbsやpathwayとも言います）を自動で生成してくれます。
これは非常に便利で、ユーザビリティ的にもGOODなナビゲーションと考えられていますが、静的HTMLで構築したサイトでは手動（要するに各々のページに個別に打ち込むこと）で設定することが常となります。
このあたりを少しでも自動化できないものかと考えて、色々と探しまわったのですが、、結局、イメージに近い物は見当たりませんでした。
そこで作ったのがこのスクリプトです。
『パンくず』の自動生成はファイルをphpにして・・・などという方法も考えられますが、『パンくず』ごときにファイルをphpにするのも何なんで、、
また、各ファイルのメタタグ等に情報を持たせて、と言う方法も少し考えましたが、ファイル自身に絶対的な位置情報を依存するのはサイト構造の変更時などに手間が発生すると考えられましたので、今回はJavascriptとXMLファイルを利用しました。(少しでもオブジェクト的に・・)
作ると言った程のものでは無いのですが、この程度の物が欲しかったのです。
考え方もスクリプトも非常に単純ですが、サイトのディレクトリ構造に左右されない自由度をもっています。
完全な自動化ではありませんが、個人的な制作経験から考えると、この程度の手間と自由度のトレードオフは許容範囲ではないかと思っています。
また、自動化すればするほどディレクトリの構造やファイル名、コンテンツ内容の影響を受けるために自由な『パンくず』の記述が出来なくなるために諦めました。
考え方は簡単で、各フォルダに『パンくず』生成のための情報を持ったXMLファイルを設置して各ページ(HTML)で読み込んで、『パンくず』を生成するといったものです。
特長
- 自由度が高い
- サイトのディレクトリ構造に左右されない
・・と言っても、できれば一致させた方が解り易いと思いますし、インフォメーションアーキテクチャ的にも◎だと思います。 - リストの記述が自由
- リンクの設定が自由
- サイトのディレクトリ構造に左右されない
欠点
- 各フォルダにXMLファイルを設置する必要がある
まぁ、10のセクション、各々が10個のフォルダによってサイト構築した場合、100のXMLファイルを設置する必要がありますが、こういったディレクトリ構造は個人的には細かすぎて問題ありと思っていますので。実際には8セクション+若干のフォルダ数で20以下のXMLファイルが平均的な量ではないかと思います。
コード
フォルダに設置するXMLファイル(例)
<breadcrumbs>
<pathway>
<path>https://itami.info/testroom/samplepathway/</path>
<name>ホーム</name>
</pathway>
<pathway>
<path>https://itami.info/testroom/samplepathway/about/</path>
<name>会社情報</name>
</pathway>
<pathway>
<path>https://itami.info/testroom/samplepathway/about/access/</path>
<name>アクセスマップ</name>
</pathway>
</breadcrumbs>
各ページで読み込むJavascript
window.onload = function XmlPathway()
{
// XmlPathway v1.2 20080320 by itami.info https://itami.info/
// XmlPathway.js is freely distributable under the terms of an MIT-style license.
/** config *******************************************************************/
var xmlid = “pathway”; // set id
var pathXmlFile = “_bc.xml”; // set xml file name
var separater = “ » ”; // set character as separater
var currentPhrase = “”; // set phrase for current page <– toggle excludePhrase
var excludePhrase = “”; // set exclude phrase for current page <– toggle currentPhrase
/*****************************************************************************/
var path,name,string =””;
if (document.implementation && document.implementation.createDocument){
xml_doc = document.implementation.createDocument(“”, “”, null);
}else if (window.ActiveXObject){
xml_doc = new ActiveXObject(“Microsoft.XMLDOM”);
}else{
}
xml_doc.async = false;
xml_doc.load(pathXmlFile);
var pathways = xml_doc.getElementsByTagName(“pathway”);
for (var i = 0; i < pathways.length; i++) {
path = pathways[i].getElementsByTagName(“path”)[0].firstChild.nodeValue;
name = pathways[i].getElementsByTagName(“name”)[0].firstChild.nodeValue;
string += “<a class=’path’ href=’ ” + path +”‘>”+ name + “</a>” + separater;
}
currentTitle = document.title;
if (currentPhrase != “”){
string += currentPhrase;
}else if (excludePhrase != “”){
string += currentTitle.replace(excludePhrase ,””);
}else {
string += currentTitle;
}
document.getElementById(xmlid).innerHTML = string;
}
サンプル
『パンくず』の必要の無いページではJavascriptへのリンクを外してください。
ダウンロード
ファイルはutf-8版です。他の文字コードで使用する場合はXMLファイルに日本語が含まれていますので、HTML、XMLの文字コードは統一して下さい。
スクリプトは最低限の手続きのみで組んでいます。IE6,IE7,FF2,Opera.NNで動作確認していますが、safariでは動作しません。ご意見、改良点など是非お聞かせ下さい。
過去のコメント
コメント一覧
itamiさんのコメント
少し改良しました。
以下を設定しない場合はパンくずの終端にはタイトルが使用されます。
var currentPhraseとvar excludePhraseはどちらか一方の設定のみ可能です。
var currentPhrase = “”; // 現在のページとして使用する文字列を設定します。
var excludePhrase = “”; // タイトルから指定した文字列削除します。
● currentPhraseの設定について
『パンくず』の終端を指定した文字列に統一します。
例: 未設定
ホーム >> 会社情報 >> アクセスマップ >> ○×株式会社_地図
例: excludePhraseに “このページ” を設定
ホーム >> 会社情報 >> アクセスマップ >> このページ
● excludePhraseの設定について
XmlPathway.jsでは『パンくず』の終端にタイトルタグ内の文字を使用することを前提としていますが、タイトルタグはSEOや検索エンジンへのリスティングを考慮して『サイト名+ページタイトル』などの設定が多く見られます。
この場合、生成される『パンくず』に余分な文字列（例えばサイト名）などが含まれてしまいますが、excludePhraseで指定することによって特定の文字列を削除できます。
例: 未設定
ホーム >> 会社情報 >> アクセスマップ >> ○×株式会社_地図
例: excludePhraseに “○×株式会社_” を設定
ホーム >> 会社情報 >> アクセスマップ >> 地図
メガネ女子さんのコメント
貴殿のサンプルを拝見させていただき、ぜひ私も利用させていただきたい！と思っていたところです。
が、自宅に戻り、Firefox３で同じサンプルを拝見したところ、パンくずのところがうまく動いていないようでした（ページ遷移はしますが、パンくずのところが真っ白状態）。
どうにか動かないかと、自分でもソースを眺めてみたのですがダメでした（泣）
どうしたらよいのでしょうか…教えてください。
itamiさんのコメント
おかしいですね、、こちらでWin Firefox3.0及び3.01での動作を確認しているのですが。。
メガネ女子さんのPC環境などをもう少しお教え頂けますか。
メガネ女子さんのコメント
本日、改めて確認しましたところ、バッチリ表示されておりました。大変申し訳ございません、私の確認ミスでした…。ｽﾐﾏｾﾝ。
頑張ってこれをShift－JISでできないものか挑戦中です…。なかなかうまくゆかないものですね（涙）
itamiさんのコメント
フォルダに設置するXMLファイルは文字コードがutf以外の場合は、文頭でXML宣言が必要です。
例:Shift_JISの場合
<?xml version=’1.0′ encoding=’Shift_JIS’?>
itamiさんのコメント
（動作テストをDOCTYPE無しで行っていたので、DOCTYPE宣言を行った場合、FFで『パンくず』が表示されませんでした。）
それに伴い、使用するidをconfig部で指定できるように変更しました。