サイトマップ
自動生成メニューの作り方 | 概要 | 動作確認ブラウザ |

自動生成メニューの作り方(JavaScript使用)

 このページでは、メニューの各項目のデータ(題名、リンク先パス、メニューに使う画像など) を設定しておくだけで、 全ページで共通に利用できる折りたたみ可能な便利なメニューを自動生成する 外部 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 ファイルの役割は以下の通りです。


動作確認ブラウザ

ブラウザ名 動作
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日 自動生成メニューの作り方をこのページに移動。


サイトマップ