WebSite Object Model

妄想していたgetElementsByAttribute()って、XULのDOM拡張で存在したんだ……。属性でNodeListを取得できるんなら欲しい。DOMでもあったら便利だろうに（無関係）。

本題。ウェブサイトの構成をツリー状に整理して、サイトマップの生成に再利用するという方法は、どうもイマイチ。

link要素のrel属性にsite mapというのがあって、href属性にサイト構造を記したファイルのURIを記述しておけば、Mozillaのサイドバーのような手段でブラウザがサイトマップを提供してくれる、というのが理想。これを念頭に置きつつ。

DOMとJavaScriptでこういうことを実現するため、実験的にサイトマップを生成していたが、なにやら行き詰まってしまったので、シンプルなモデルを使って考え直してみることにした。余計な要素がからんでいると、頭がこんがらがってアイデアが具現化しない。

// 連想配列にサイト構造を収める
var WebSite = new function(){
 this.title = 'site name';
 this.uri = './';
 this.contents1 = new function(){
  this.title = 'contents1 title';
  this.uri = 'contents1.html';
 };
 this.contents2 = new function(){
  this.title = 'contents2 title';
  this.uri = 'contents2.html';
 };
 this.contennts3 = new function(){
  this.title = 'contents3 title';
  this.uri = 'contents3.html';
  this.contents1 = new function(){
   this.title = 'contents1_3 title';
   this.uri = 'contents1_3.html';
  };
  this.contents2 = new function(){
   this.title = 'contents2_3 title';
   this.uri = 'contents2_3.html';
   this.contents1 = new function(){
    this.title = 'contents1_2_3 title';
    this.uri = 'contents1_2_3.html';
   };
  };
 };
 this.contents4 = new function(){
  this.title = 'contents4 title';
  this.uri = 'contents3.html';
 };
};

// サイト構造をツリー状のリストにする関数
function createSiteMap(obj_argument){
 var nUL = document.createElement('UL');
 var parent = (!obj_argument) ? document.body : nLI;
 parent.appendChild(nUL);

 var object = (!obj_argument) ? WebSite : obj_argument;
 for(var member in object){
  if(member == 'title') continue;
  if(member == 'uri') continue;
  nLI = document.createElement('LI'); // var 無し。
  nUL.appendChild(nLI);
  
  var nA = document.createElement('A');
  nA.href = object[member].uri;
  nLI.appendChild(nA);
  
  var nText = document.createTextNode(object[member].title);
  nA.appendChild(nText);
  createSiteMap(object[member]);
 }
}
サンプル

ああ、とうとうできたか。そうだよなあ……。このシンプルなモデルで考えても1時間かかったというのに、例外やら、現在地表示やら、色々なことを考えなきゃならなかったわけで、私の頭で整理がつくわけが無かった。

今日の教訓。まずはシンプルなモデルで試すべし。

問題は、後で自分で作ったスクリプトを見て、すんなり理解できるかどうかだ……。なんにせよ、後々これを拡張していかなければいけないからこれは大問題。寝る前に細かく説明を書いておこう。

これと、CSS切り替え等をうまく組み合わせて何か……とか、拡張性がなければ、frameには勝てない。現在地表示だけじゃなぁ……。打倒frame！

各ブラウザのobject要素に関するバグが取れるまで待つというのも手。