自動生成メニューの作り方（JavaScript使用）

　このページでは、メニューの各項目のデータ（題名、リンク先パス、メニューに使う画像など）を設定しておくだけで、全ページで共通に利用できる折りたたみ可能な便利なメニューを自動生成する外部 JavaScript ファイルを実現する方法を解説します。ここで解説している方法の特徴は、以下の通りです。

　JavaScript と CSS が利用可能な環境で動作します。
　外部 JavaScript ファイルとして使用します。各HTML ファイルの中のメニューを表示したい部分で読み込みます。
　メニューの生成は、必要な HTML を書き出す（document.write()）ことによって行います
　階層は２階層まで作れるようにしました。
　どの HTML ファイルから利用しても、適宜必要なメニューを生成します。
　メニューを JavaScript で実装しているので、それが実行できない人（とロボット）のためにサイトマップが必要です。これも自動で生成します。

　フレームを使用せず、 SSI や CGI 等のサーバ側での処理も使わないサイトでは、メニューのデータが多数の HTML ファイルに分散してしまい、サイト構成を変更したときのメンテナンスが大変になります。しかし、この場合でも、スタイルシートと JavaScript を利用すれば、メニューなどの全ページ共通の部分を一つのファイルのみで管理できるようになります。 JavaScript を使っているので、 HTML を書かなくても、メニューの各項目のデータさえ設定しておけば、後は適宜必要なコードを生成してくれます。さらに、 JavaScript が実行できない人（とロボット）のために必要なサイトマップを自動で生成することも出来ます。その他、メンテナンスに必要なものを作って管理に役立てることも出来ます。
メンテナンス用ページ

概要

　JavaScript による自動生成メニューを実現するために使っている技術の解説は、要約すると以下の 1. ～ 3. の通りです。

1. 個々のページの HTML ファイルでは、メニューを表示する部分である、 <div id="lt">～</div> で囲まれた部分に、 <script type="text/javascript" src="../lt.js"></script> と記入します。これにより、全てのページで、外部 JavaScript ファイル "lt.js" を共通利用します。

2. "lt.js" には、ファイルのはじめの部分で、 JavaScript の変数に、メニューの各項目のデータ（題名、リンク先パス、メニューに使う画像など）を設定します。

// The following lines are *NOT* to be modified.

var g_txts_index    = new Array();
var g_txts_caption  = new Array();
var g_paths_i_out   = new Array();
var g_paths_i_over  = new Array();
var g_paths_link    = new Array();

// The following lines are to be modified.

g_txts_index.push(   "top" );
g_txts_caption.push( "トップページ" );
g_paths_i_out.push(  "img/top_out.gif" );
g_paths_i_over.push( "img/top_over.gif" );
g_paths_link.push(   "index.html" );
 :
 :

3. メニューの各項目を表示したり折りたたんだりするのは、各項目に ID を振り、その style.display に対して "" を設定したり "none" を設定したりすることによって行っています。その部分の JavaScript は、以下の通りです。 s_h は、 show / hide の意味で、 true ならば表示し、 false ならば折りたたみます。オブジェクトが存在しない場合は戻り値として 1 を返します。

function show_hide( id, s_h ) {
    var obj = document.getElementById( id );    
    var dirty = 1;
    var txt_disp = "";

    if ( ! s_h ) txt_disp = "none";
    if ( obj != null ) {
        if ( null != obj.style.display ) {
            obj.style.display = txt_disp;
            dirty = 0;
        }
    }
    return dirty;
}

　なお、詳しいことは、ソースコードを見ていただくとわかります。各外部 JavaScript ファイルの役割は以下の通りです。

"lt.js"：左メニューを生成するための JavaScript ファイルです。前半は、メニューの各項目のデータを変数に指定する部分です。後半は、主にメニューの各項目のデータから HTML を生成する部分です。
"shared.js"：汎用性の高い関数を置いてある JavaScript ファイルです。 "lt.js" などから利用しています。
"site.js"：サイトごとの設定を記載した JavaScript ファイルです。この部分を分離することで、サイト開発環境、サーバ、ミラーサイトといった環境の違いをこのファイルのみで吸収しています。

動作確認ブラウザ


ブラウザ名	動作

Internet Explorer 6	◎

Internet Explorer 7	◎

FireFox 1.5 - 2.0	◎

Netscape 7.2	◎

Mozilla 1.6	◎

Safari 2.0.4	◎

Opera 9.02	◎

Sleipnir 2.64-2.66	◎

lynx	△

IE 5.0-5.5	△

Mac IE 5	△

Netscape 4.x	△

対応状況が △ のものでは、メニュー生成を行いません。このサイトは、サイトマップを用意して全ページの上下にそこへのリンクを表示するなどし、スタイルシートや JavaScript を読み込まなくても支障なく閲覧できるように作ってあります。

八上全弘
email address

更新履歴：
2006年10月15日初回作成(appendix.html)
2006年11月07日自動生成メニューの作り方をこのページに移動。

サイトマップ