JavaSctiptを用いたナビゲーションの分離

当サイトでは、外部JavaScriptファイルに構造を記述しています。JavaSctiptでデータのツリー構造を表現するには、（連想）配列を利用します。

外部JavaSctiptにサイト構造を記述した場合、head要素に<script type="text/javascript" src="foo.js"></script>を埋め込みます。src属性値に外部JavaSctiptファイルのURIを代入すればOKです。

外部JavaScriptにサイト構造を記述した場合、そのデータをHTMLに生成し直さねばなりません。当然、そのためのJavaSctipt関数が必要になります。Document Object Model（以下DOM）という技術を利用すれば、任意のHTML要素として任意のタイミングでJavaSctiptデータ等を変換することができます。サイト構造のデータをどう使うか。まだまだ検証が済んでいませんが、とりあえずサイトマップの表示という形が最も分かりやすいかと思います。

というわけで、手段は色々あると思いますが、ここではJavaScriptを用いた方法で検証します。

括弧内は、http://foo.com/MyWebSite/ を基準とした相対URIとなっています。

• MyWebSite （index.html）
  • Diary1997 （Diary1997/index.html）
    • 7月上旬 （Diary1997/d199707f.html）
    • 7月下旬 （Diary1997/d199707l.html）
    • 8月上旬 （Diary1997/d199708f.html）
    • 8月下旬 （Diary1997/d199708l.html）
  • About （about.html）
  • Links （Links/index.html）
    • 友人関係 （Links/friends.html）
    • テキストサイト （Links/text.html）
    • フリーソフト （Links/freeSoft.html）

まず、MyWebSiteという名前のオブジェクトを作成します。

var MyWebSite = new Object();

次に、作成したMyWebSiteオブジェクトのメンバーに、Diary1997という名前のオブジェクトを加えます。

var MyWebSite = new Object();
MyWebSite.Diary1997 = new Object();

MyWebSite.Diary1997にタイトル、URI、説明などの情報を加えます。

var MyWebSite = new Object();
MyWebSite.Diary1997 = new Object();
MyWebSite.Diary1997.Title = 'Diary1997';
MyWebSite.Diary1997.URI = 'http://foo.com/MyWebSite/Diary1997/index.html';
MyWebSite.Diary1997.Exposition = '1997年分の日記の目次';

さらに、MyWebSite.Diary1997オブジェクトに、7月上旬のページに関するデータを収めるためのオブジェクト（d199707fとします）をメンバーとして加えます。

var MyWebSite = new Object();
MyWebSite.Diary1997 = new Object();
MyWebSite.Diary1997.Title = 'Diary1997';
MyWebSite.Diary1997.URI = 'http://foo.com/MyWebSite/Diary1997/index.html';
MyWebSite.Diary1997.Exposition = '1997年分の日記の目次';
MyWebSite.Diary1997.d199707f = new Object();

MyWebSite.Diary1997.d199707fは、MyWebSite内のDiary1997というコンテンツのd199707fというページを意味します（そのように解釈可能です）。このプロパティとして、タイトル、URI、説明などを幾つでも追加できます。

var MyWebSite = new Object();
MyWebSite.Diary1997 = new Object();
MyWebSite.Diary1997.Title = 'Diary1997';
MyWebSite.Diary1997.URI = 'http://foo.com/MyWebSite/Diary1997/index.html';
MyWebSite.Diary1997.Exposition = '1997年分の日記の目次';
MyWebSite.Diary1997.d199707f = new Object();
MyWebSite.Diary1997.d199707f.Title = '7月上旬';
MyWebSite.Diary1997.d199707f.URI = 'http://foo.com/MyWebSite/Diary/d1997f.html';

上の記述方法では階層構造が弱冠分かり辛いですが、このように書き換えることも可能です。

var MyWebSite = new function(){
  this.Diary1997 = new function(){
    this.Title = 'Diary1997';
    this.URI = 'http://foo.com/MyWebSite/Diary/index.html';
    this.Exposition = '1997年分の日記の目次';
    this.d199707f = new function(){
      this.Title = '7月上旬';
      this.URI = 'http://foo.com/MyWebSite/Diary/d1997f.html';
    };
  };
};

関数はオブジェクトの雛型で、new演算子を使うことでその実体が生成され、上のように使うと関数名がそのままオブジェクト名となります。こうすることで、thisが使えるのでオブジェクト名の反復を避けることができます。

完全な形で記述したものが下になります。

var MyWebSite = new function(){
  this.Diary1997 = new function(){
    this.Title = 'Diary1997';
    this.URI = 'http://foo.com/MyWebSite/Diary/index.html';
    this.Exposition = '1997年分の日記の目次';
    this.d199707f = new function(){
      this.Title = '7月上旬';
      this.URI = 'http://foo.com/MyWebSite/Diary/d199707f.html';
    };
    this.d199707l = new function(){
      this.Title = '7月下旬';
      this.URI = 'http://foo.com/MyWebSite/Diary/d199707l.html';
    };
    this.d199708f = new function(){
      this.Title = '8月上旬';
      this.URI = 'http://foo.com/MyWebSite/Diary/d199708f.html';
    };
    this.d199708l = new function(){
      this.Title = '8月下旬';
      this.URI = 'http://foo.com/MyWebSite/Diary/d199708l.html';
    };
  };
  this.About = new function(){
    this.Title = 'About';
    this.URI = 'http://foo.com/MyWebSite/about.html';
  };
  this.Links = new fucntion(){
    this.Title = 'Links';
    this.URI = 'http://foo.com/MyWebSite/Links/index.html';
    this.friends = new function(){
      this.Title = '友人関係';
      this.URI = 'http://foo.com./MyWebSite/Links/friends.html';
    };
    this.text = new function(){
      this.Title = 'テキストサイト';
      this.URI = 'http://foo.com/MyWebSite/Links/text.html';
    };
    this.freeSoft = new function(){
      this.Title = 'フリーソフト';
      this.URI = 'http://foo.com/MyWebSite/Links/freeSoft.html
    };
  };
};

タイトルとURIだけでなく、更新日時やファイルサイズなどの情報も、適当に加えることが可能です。例えば最後のフリーソフトのリンク集ページの更新日時を記しておきたければ、

    this.freeSoft = new function(){
      this.Title = 'フリーソフト';
      this.URI = 'http://foo.com/MyWebSite/Links/freeSoft.html
      this.LastModified = '2001/10/25';
    };

このように、適当なメンバーを追加すれば良いのです。ちなみにこの更新日時の参照は、

MyWebSite.Links.freeSoft.LastModified

で可能です。

尚、追加したい情報が確定しているのであれば、オブジェクトの雛型を作成したり、また、URIの共通部分を変数に収めたりしてもっとシンプルな書き方にすることもできます。

私は、フレーム否定論にも書きましたが、どうにかフレームを否定しようと思い、代案を色々考えています。フレームを利用する最大の利点は、閲覧性の高い目次や索引を、二度以上ダウンロードせずに再利用できる点です。

ウェブサイト構造データを外部JavaScriptファイルとして読み込めば、フレームの欠点は何一つ持たず、フレームに近いことができます。

まずは、データのツリー構造を、そっくりそのままHTMLのリスト要素に変換し、ページの末尾に生成してみます。

サンプル

サイトマップ生成用のJavaScriptは以下のようになっています。

var flag = false;

function createSiteMap(obj_argument){
 if(flag && !obj_argument){
  var siteMap = document.getElementById('SiteMap');
  siteMap.parentNode.removeChild(siteMap);
  flag = false;
  return;
 }
 var nUL = document.createElement('UL');
  nUL.id = 'SiteMap';
  flag = true;
 var parent = (!obj_argument) ? document.body : nLI;
 parent.appendChild(nUL);
 
 var object = (!obj_argument) ? MyWebSite : 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]);
 }
}

どのように表示させるかは全てCSSに任せます。さもなくば、コードはこの2倍以上になってしまうでしょう。

この例ではデータをul要素として再生成しましたが、どのような要素として生成することもできます。