建築マップ「参加のご案内」 step4

参加のご案内
Join Us -step4-

step4-3.「むぎなび」の設置方法

(text=Mitsuo.K)

むぎなびは、建築マップコンテンツをプルダウンメニューで表示させるJavaScriptです。このページではむぎなびを設置するための説明をします。むぎなびは改造が容易であり、建築マップだけでなく個人サイトにも使用することが出来ます。

むぎなび原版には、20以上のオプションファイルが用意されています。その中の一部を結合させたものが建築マップ仕様のむぎなびです。むぎなびの原版を詳しく知りたいかたはMugi's Homepageを参照ください。

「むぎなび」設置方法のサブコンテンツ

建築マップ仕様のむぎなびを設置するには、建築マップ仕様の「むぎなび」を設置する方法だけを読めばOKです。建築マップで使用するには、そこに書かれた内容だけでじゅうぶん使えるようにしてあります。それ以外は改造をする方のための解説です。

「むぎなび」動作確認一覧

建築マップ仕様*むぎなび*動作確認表
Windows OS	IE`4.0`・・・動作します IE`5.0`・・・動作します IE`5.5`・・・動作します IE`6.0`・・・動作します NN`4.0x`・・・動作を無効にしました NN`4.5`以上・・・動作を無効にしました NN`6` /mozilla・・・動作します NN`7` /mozilla・・・動作します JavaScriptを無効にした場合・・・動作しません
Mac OS	IE`4.x`・・・動作しません IE`5.0`・・・動作します IE`5.ｘ`・・・動作します NN`4.x`・・・動作を無効にしました NN`4.5`以上・・・動作を無効にしました NN`6` /mozilla・・・動作します NN`7` /mozilla・・・動作します JavaScriptを無効にした場合・・・動作しません
他のOS	動作しません。

ver3.02.020820.2020 ; amap020830
Copyright 2001 Mugi
mugi@email.ee
http://mugi.ca.tc/

Mugi's Homepage
このサイト内のコンテンツをプルダウンメニューで表示するむぎなびの作成をしていただきました。

建築マップ仕様の「むぎなび」を自分のページに設置する

むぎなびはどんなサイトでも設置しやすいように柔軟な設計がされておりますが、とりあえず動かせる状態までは建築マップ仕様のむぎなびで設置してみましょう。

「むぎなび」を見てみる。（別窓）

むぎなびを設置するには、HTML文書内の3箇所に以下の内容を追記する必要があります。

`head`要素内に追記する。

<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<script type="text/javascript" src="http://www.archi-map.jp/js-bin/mninit.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.archi-map.jp/css-bin/muginavi.css">
</head>

`body`要素直下に追記する。

<body>
<script type="text/javascript"><!--
mnload("http://www.archi-map.jp/js-bin/menucfg.js")//--></script>

むぎなびを表示させたい場所に追記+代替テキストの準備をする。

<script type="text/javascript"><!--
muginavi.showhere()//--></script>
<ul class="muginavioff">
<li><a href="http://www.archi-map.jp/">ホーム</a></li>
<li><a href="http://www.archi-map.jp/map_index_00.htm">インデックス</a></li>
<li><a href="http://www.archi-map.jp/bbs/index.html">掲示板</a></li>
<li><a href="http://www.archi-map.jp/links_00.htm">リンク</a></li>
<li><a href="http://www.archi-map.jp/about_us_00.htm">このサイトについて</a></li>
<li><a href="http://www.archi-map.jp/step_00.htm">参加のご案内</a></li>
<li><a href="http://www.archi-map.jp/support_00.htm">サポート</a></li>
</ul>

代替テキストとは、閲覧者側がJavaScriptを無効にしていたりむぎなびを動作させることが出来ない場合、代わりに表示するものです。内容は何を書いても構いませんが、むぎなびと等価なテキストを用意します。クラス名class="muginavioff"でくくられた範囲がそれに該当します。今回は<ul class="muginavioff">としていますが、<div class="muginavioff">でも構いません。

特に改造する用事の無いかたは、これでむぎなび設置完了です。

ファイル構成

5種類のファイルの役割を説明します。むぎなびを動かすためには、最低限この5種類のファイルが必要です。

muginavi.js: むぎなびの中枢。このファイル内を変更してはいけません。
mninit.js: 閲覧者のブラウザを判別し、むぎなびを起動させるかさせないかの振り分けをしています。このファイル内にmuginavi.jsの場所を指定する箇所があります。
menucfg.js: muginavi.cssのスタイルシートでどうしても設定できない項目をまとめて設定します。むぎなびのセンタリングや右寄せ、またコンテンツ群を格納するファイルの場所を指定します。このファイルの説明は、見栄えの変更方法にあります。
items.js: コンテンツ群をここにひとまとめにしてあります。このファイルの説明は、コンテンツを変更する方法にあります。
muginavi.css: テキストの見栄えを設定するファイルです。このファイルの説明は、見栄えの変更方法にあります。

設置の順番

HTML文書ではファイルを設置する順番も関与しますから間違えのないようにしてください。なによりも先頭にmninit.jsを書かなくてはなりません。

コンテンツを変更する

むぎなびのコンテンツ項目を各自で変更することができます。コンテンツファイルの変更に関係するファイルはitems.jsです。

muginavi.js
mninit.js
menucfg.js
items.js
muginavi.css

コンテンツはitems.jsに格納しています。
items.jsを各自で変更・管理したいかたは、同時にmenucfg.jsも各自で管理することが必須です。items.jsの場所はmenucfg.jsファイル内で指定するので、menucfg.jsも各自で管理しないと、変更したitems.jsが反映されないためです。

ファイルは、メモ帳などのテキストエディタで開くことができます。
またはダウンロードしたファイルを右クリックして編集をクリック。直接開こうとしてもdocumentは宣言されていませんというエラーが出ます。

コンテンツファイルの仕組み

プルダウンメニューのルール

items.jsファイルの中を見ると、以下のような独自ルールで構築されています。

muginavi.rootitems()
muginavi.add("項目ID-1","コンテンツ1","URL","ターゲット")
muginavi.add("項目ID-2","コンテンツ2","URL","ターゲット")
muginavi.add("項目ID-3","コンテンツ3","URL","ターゲット")
muginavi.rootend()

muginavi.makesubmenu("項目ID-1")
muginavi.add("項目ID-4","コンテンツ4","URL","ターゲット")
muginavi.add("項目ID-5","コンテンツ5","URL","ターゲット")
muginavi.add("項目ID-6","コンテンツ6","URL","ターゲット")
muginavi.submenuend()

muginavi.makesubmenu("項目ID-5")
muginavi.add("項目ID-7","コンテンツ7","URL","ターゲット")
muginavi.add("項目ID-8","コンテンツ8","URL","ターゲット")
muginavi.add("項目ID-9","コンテンツ9","URL","ターゲット")
muginavi.submenuend()

上記の設定をするとむぎなびは以下の画像のような見えかたをします。プルダウンメニューがどういう法則で出てくるか？を理解してください。

コンテンツ並びの法則

muginavi.rootitems()からmuginavi.rootend()で挟まれた部分が、最初に見えるコンテンツ群になります。
muginavi.makesubmenu("項目ID")からmuginavi.submenuend()で挟まれた部分が、プルダウンメニューとして出てきます。
項目ID-x同士が一致すると、プルダウンメニューまたはサブプルダウンメニューが出てきます。
項目IDが重複してはいけません。

特殊な設定

muginavi.add("項目ID","コンテンツ","URL","ターゲット")について特殊な設定を紹介します。
ターゲットなどはフレームを使わないサイトでは必要ないので、削除しても構いません。むぎなびを1ページでもフレーム内に設置した場合は、すべての項目にターゲット指定をしなくてはなりません。

コンテンツの記述場所にハイフン-を入れると水平線を表示します。
URLの記述場所にハイフン-を入れるとリンクのない素のテキストになります。
muginavi.add("項目ID","コンテンツ")という風に"URL","ターゲット"ごと削除すると、リンク先は無いけれどリンクがあるようなテキスト装飾をします。（サブプルダウンメニューを出すときに使えます。）

フレームを使うサイトの場合は、ターゲット指定しないとフレームの入れ子が発生しますので注意してください。

self: 同じフレーム
_top: フレーム解除（ページ全体）
_blank: 新しいウィンドウ
_parent: 親フレーム
各自でつけたフレーム名: その名前のフレームページを切り替えます。

見栄えの変更方法

むぎなびの見栄えや細かい設定を各自で変更することができます。見栄えに関する設定はmuginavi.cssとmenucfg.jsにあります。

muginavi.js
mninit.js
menucfg.js
items.js
muginavi.css

muvinavi.cssの内容

スタイルファイルです。ページ内にmuginavi.cssと独自のスタイルファイルを併用することも可能です。むぎなびを設置したページ全てにスタイルファイルを適用させているサイトなら、CSSを1つにまとめることも出来ます。ここでは建築マップ用のスタイルを紹介していますが、スタイル項目の設定次第でいろいろなむぎなびを作ることができます。

.muginavi, .muginavi-nn { color:black; }: ハイパーリンクではない文字色の設定です。
.muginavisub .muginavi, div.muginavi { layer-background-color:#ffffff; }: サブメニューのみの背景の設定
.muginavisub, .muginavisub span.muginavi { background-color:#ffffff; }: 背景色はNN4と他で2回記述　ここには背景色以外の指定をしてはいけません。
.muginavi a { color:#336699; font-weight:bold; text-decoration:none; }: リンク項目のスタイル。
.muginavi a:visited { color:#B0C4DE; font-weight:bold; text-decoration:none; }: 訪問済みリンク項目のスタイル。
.muginavi a:hover { color:red; background-color:#f2f2f2; font-weight:bold; text-decoration:none; } .muginavi a.hilight { color:red ! important; font-weight:bold; text-decoration:none; } .muginavi a:active { color: orangered; text-decoration:none; }: リンクにカーソルを乗せたときのスタイル。a.hilightは、むぎなびが起動した直後に「そのページがどこのコンテンツに属しているか？」を知らせるための設定箇所。このページならサポートコンテンツがハイライト設定してあります。IE5.5では! importantを書いておかないと起動しないようです。
#muginavicontainer a { font-weight:bold; text-decoration:underline; }: 初期表示項目のスタイル。今回は背景色の指定をしていないので透明になります。

menucfg.js の内容

スタイルファイルでは設定出来ない各項目をここで指定します。該当する項目が必要のない場合は、その行ごと削除しても構いません。

/* メニュー設定 */

muginavi.align="left" //配置：left(デフォルト)/center/rightのいずれか。必ず小文字で。
muginavi.hilight="#f2f2f2" //マウスが乗ったときの背景色。#RRGGBBで指定。
muginavi.borderColor="#696969" //枠の色。#RRGGBBで指定。
muginavi.arrowColor="#000000" //サブメニュー記号「>>」の色。
muginavi.usetable=false //テーブル内に設置する場合にのみ指定。誤った指定をすると誤動作します。
muginavi.root_nospace=true //初期表示項目に自動で間隔を空けさせない。自分で間隔調整する場合等に。
muginavi.root_noborder=true //初期表示項目に枠を付けない。

onloadhilight=""

muginavi.borderColorSub="#f5f5f5" //サブメニューの枠の色。#RRGGBBで指定。borderColorと同じの場合は省略。
muginavi.borderWidth=2 //サブメニューの枠の幅。単位:px。
muginavi.borderStyle="outset" //サブメニューの枠の見た目。指定できる値はCSSのborderStyleと同じ。

mnload("http://www.mediawars.ne.jp/~m921320/js-bin/items.js")

muginavi.align ="left": むぎなびの配置を設定します。建築マップ総合管理ではホームページをright、通常はleftを使っています。選択肢はleft center rightのいづれか。必ず小文字で記述してください。
この行を削除するとデフォルト（=標準）設定で表示します。設定項目のデフォルトはleftです。
muginavi.hilight="#f2f2f2": マウスカーソルがテキストに触れたときの背景色の設定。
muginavi.borderColor ="#696969": むぎなびの境界線（枠）の色を指定します。色は#RRGGBBで指定。
この行を削除するとデフォルト設定で表示します。設定項目のデフォルトは#000000です。
muginavi.arrowColor="#000000": サブプルダウンメニューで出てくる矢印 >>の色を設定します。
この行を削除するとデフォルト設定で表示します。設定項目のデフォルトは#000000です。
muginavi.usetable=false: むぎなびを設置した場所がtable要素の中に入る場合は、この値を=trueに変更してください。table要素の中にむぎなびを入れない場合は今回の設定のように=falseと設定します。誤った設定をすると誤作動しますので注意してください。
この行を削除するとデフォルト設定で表示します。設定項目のデフォルトは=falseです。
muginavi.root_nospace =true: むぎなびが最初に表示するコンテンツテキスト同士の余白の有無を指定します。=trueで余白を設けません。建築マップは縦線|でコンテンツ同士を区切るので=trueで設定しています。その逆の設定は=falseと書きます。
この行を削除するとデフォルト設定で表示します。設定項目のデフォルトは=falseです。
muginavi.root_noborder =true: むぎなびの最初に現れるコンテンツテキスト領域に境界線（枠）の有無を指定します。=trueで枠線を消します。その逆の設定は=falseと書きます。
この行を削除するとデフォルト設定で表示します。設定項目のデフォルトは=falseです。
onloadhilight="": items.js内で設定した項目IDをここに記入すると、むぎなびが立ち上がったときに、そのルートコンテンツだけ文字装飾を変更して表示します。今回の設定のように何も書かなければ、項目IDとHTMLファイルが一致すると文字装飾が変更します。文字装飾の設定はスタイルファイルで行います。
muginavi.borderColorSub="#f5f5f5": プルダウンメニューの枠の色を設定します。
muginavi.borderWidth=2: プルダウンメニューの枠の幅を指定します。単位はピクセルです。
muginavi.borderStyle="outset": プルダウンメニュー枠の形状を設定します。スタイルシートのborder設定と同じ原理です。
mnload("http://www.mediawars.ne.jp/~m921320/js-bin/items.js"): コンテンツを格納しているファイルitems.jsの場所をここで指定します。

音声ブラウザの対応

2002年2月現在、建築マップは約500ページで構成しています。この膨大なページを迷うことなく少ないクリック数で目的ページに誘導することが、むぎなびの役割です。サイトマップのごとく全てのページに全てのリンク一覧を表示させることがベストなのですが、それでは逆に分かりにくくなります。そこで、普段は折りたたまれて隠れているが、必要なときにプルダウンメニューとして表示するScriptを導入しました。それがむぎなびです。
しかしこれは、視覚的な操作であり、音声ブラウザでは上手く処理できません。

JavaScriptに対応した音声ブラウザで、むぎなびを設置したページを読み上げさせた状況を説明します。
読み上げられる順番は、以下の通りです。

title要素。
むぎなびのプルダウンメニューとして表示させる部分。
（普段から表示しているコンテンツ群は、ここでは読まれません。）
body要素直下に書かれたテキスト。
むぎなびを実際に設置した場所で、普段から表示しているコンテンツ群。
JavaScriptに対応していないブラウザのために用意した代替表示部分。
（通常は、display:noneで表示させていない部分。）
これ以降は通常読み上げをします。

建築マップのサブコンテンツは、約100ページあります。毎度ページが読み込まれるたびに、この100コンテンツを音声ブラウザが読み上げていては、いつまで経っても本文が始まりません。
その対策として、一番最初に読まれるサブコンテンツ部分に、読み飛ばしができるリンクを設置しました。

個人でむぎなびを設置されるかたは、むぎなびが表示する第1番目のハイパーリンクに、プルダウンメニューが出るように設定し、同ページの適切な場所に移動させる手段を用意してください。
建築マップでの例を挙げます。

item.jsに追記する。

muginavi.makesubmenu("index")
muginavi.add("index_01","音声ブラウザで、サブコンテンツの読み上げを省略する。","#pass","_self")
muginavi.submenuend()

muginavi.makesubmenu("index")のindexは、独自に設置した場合には違う名前になっているかも知れません。今回は、URLに#passというa要素を用意しました。

HTML文書にname属性を追記する。

 <ul class="muginavioff">
     <li><a href="http://www.archi-map.jp/" name="pass">ホーム</a></li>
     <li><a href="http://www.archi-map.jp/map_index_00.htm">インデックス</a></li>
     <li><a href="http://www.archi-map.jp/bbs/index.html">掲示板</a></li>

以下省略

ホームと書かれた部分にname属性で値をpassと記述しました。これでむぎなびの一番最初に開くプルダウンメニュー音声ブラウザで、サブコンテンツの読み上げを省略する。を指示すると、100あるサブコンテンツの読み上げを省略し、ホームから読み上げることになります。また、title要素が読み上げられた後、すぐに読み飛ばしをするためのハイパーリンクを読み上げるため、該当文章を長めに用意しておかないと、あっという間に通り過ぎてしまいます。

むぎなびFAQ

個人サイトで設置しても「むぎなび」が動きません。

実際にこのスクリプトを使ってこのページでむぎなびは動いているのですから、きっと変更すべき部分を変更し忘れていることが原因でしょう。以下にチェックリストを用意してみました。

ブラウザのJavaScriptを無効に設定している。
html文書内でJSファイルのロケーション指定が間違っている。
JSファイルの中に他のJSファイルのロケーションを指定する箇所が間違っている。
items.jsの項目IDが重複している。
body要素直後にmenucfg.jsが無い。
設置するjsファイルの順番が間違っている。

また、むぎなびが根本的に出来ないことを、以下に挙げておきます。

1ページ内にむぎなびを複数設置すること。
position指定された要素にむぎなびを設置すること。
フレーム越しにプルダウンメニューを出すこと。
文書型宣言DOCTYPE宣言により、Webブラウザが仕様準拠の厳格解釈モード (Standards mode)で表示すること。

どれがjsファイルで、どれがcssファイルなのか区別が出来ません。

Windows OSの標準設定では、ファイル名のあとに続くファイルの種類拡張子を表示しないように設定してあります。通常作業では拡張子の表示がなくともアイコンの絵柄で判断できますが、ほとんどのサーバーはUNIX OSなので、アイコンではなく拡張子でファイルの種類を区別します。
Windows98SEでは、エクスプローラの表示→フォルダオプションを指定すると以上の画面が出てきます。表示のしおりをクリックして登録されているファイルの拡張子は表示しないにチェックマークが入ってると思います。それを解除して適用ボタンをクリックしてください。

cssファイルやjsファイルをクリックしても何も動きません。

テキストエディタ、Windowsならメモ帳などで開きます。もしくはファイルを右クリックすると編集というコマンドがありますから、そこからファイルを開いてください。

`<要素名 class="muginavioff">`から`</要素名>`までの内容は何？。

<要素名 class="muginavioff">から</要素名>で挟まれた部分は、むぎなびが起動しない場合に表示する代替テキストです。JavaScriptを無効に設定しているかたやむぎなびが起動できない環境のブラウザでは、この部分を表示します。

なぜJavaScriptの宣言文があんなに複雑なのですか？。

JavaScriptを実行させるための宣言文は、例えばmenucfg.jsなら、

<script type="text/javascript" src="menucfg.js"></script>

と書くだけで問題なく動くのですが、これでは古いバージョンのブラウザだとJavaScriptを無効に設定しても無効にならずにエラー扱いとなります。そのためにわざわざ、

<script type="text/javascript"><!--
mnload("menucfg.js") //--></script>

という書きかたをしています。

「参加のご案内」のサブコンテンツ

はじめに
Webチュートリアル

参加に向けて

より使いやすいページ作りのために

参加のご案内 Join Us -step4-