メニュー項目の動的読み込み方法

[新着] Webテンプレートを仮オープンしました



0   名前: minx : 2007/01/21(日) 16:33  ID:u7OKXWvF
【何をしたいのか】
動的にドロップダウン式のメニューを読み込みたいのです。

【現在の状況】
menu.jsという外部ファイルをHTML読み込み字にロードして、今、メニュー表示は出来ています。
ただ、メニュー項目が膨大(1,000行以上)になってしまい、HTMLが開ききるまでに数十秒かかるといった状況です。

【何をしてみたのか】
HTML読み込み時にメニュー読み込みをさせず、文字列のリンク先をJavascriptの関数にし、関数の中でloadMenus関数を呼び出したりしてみましたが、うまく行きません。

【備考】
ブラウザはIE6しかない環境です。他のブラウザはケアする必要はありません。
サンプルコードです。
例えば、以下のmyMenu001とmyMenu002が、文字列のリンクをクリックした時に呼び込まれるような形にできれば良いのですが....

------------------------------------------------------------------
<html>
<head>
<title>JavaScript Sample</title>

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

<SCRIPT language=JavaScript>
function loadMenus() {
window.myMenu001= new Menu();
myMenu001.addMenuItem("メニュー1:項目1", "top.window.open('http://www.google.co.jp/')");
myMenu001.menuItemWidth=200;

window.myMenu002_1= new Menu("メニュー2_1");
myMenu002_1.addMenuItem("メニュー2_1:項目1", "top.window.open('http://www.google.co.jp/')");
myMenu002_1.addMenuItem("メニュー2_1:項目2", "top.window.open('http://www.google.co.jp/')");
myMenu002_1.menuItemWidth=200;

window.myMenu002= new Menu();
myMenu002.addMenuItem("メニュー2:項目1", "top.window.open('http://www.google.co.jp/')");
myMenu002.addMenuItem("メニュー2:項目2", "top.window.open('http://www.google.co.jp/')");
myMenu002.addMenuItem(myMenu002_1);
myMenu002.menuItemWidth=200;

// ↑ このようなメニュー定義が1000個以上続きます。

writeMenus();
}
</script>

</head>

<body>
<SCRIPT language=JavaScript>
if (document.all) {
loadMenus();
}
</SCRIPT>

<A href="javascript:window.showMenu(window.myMenu001);">メニュー1</A>
<BR><BR>
<A href="javascript:window.showMenu(window.myMenu002);">メニュー2</A>

<!-- ↑ 定義したメニューに基づき、HTML上にリンクが沢山あります。実際には、メニューには孫メニューもありますので、最初のリンクは数十個のみです。

</body>
</html>

1   名前: minx : 2007/01/21(日) 16:33  ID:35uDUP7M
質問者です。
解決したワケではありません。試行錯誤の経過報告と言ったところです。

下記のコードは、メニューを後から読み込もうとしているコードです。
loadMenues関数を、試しに
<A href="javascript:lm();">メニューをロード</A>
で、ファイルが開いた後から呼び出そうとしていますが、呼び出した後は、ハイパーリンクをクリック出来なくなります。

どうしてなのでしょうか。

----------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<title>JavaScript Sample</title>

<script type="text/javascript" src="menu.js"></script>
<script language=javascript>
function loadMenus() {
window.myMenu001= new Menu();
myMenu001.addMenuItem("メニュー1:項目1", "top.window.open('dmy.htm')");
myMenu001.menuItemWidth=200;
writeMenus();
}

function lm() {
if (document.all) {
loadMenus();
}}

</SCRIPT>

</head>
<BODY>

<A href="javascript:lm();">メニューをロード</A>
<BR><BR>
<A href="javascript:window.showMenu(window.myMenu001);">メニュー1</A>

</body>
</html>

2   名前: miz : 2007/01/21(日) 16:33  ID:Y5nxmOvJ
>メニュー項目が膨大(1,000行以上)になってしまい、HTMLが開ききるまでに数十秒かかるといった状況

それは、いっぺんに表示しすぎですよ。100個くらいでも探すのが容易でないのに、そんなサイト見る気なくしますね。
メニューを小分けにして、章ごとにメニューページを作って(メニュー定義そのものを小分けにする)、トップから各章へのリンクを作った方がいいでしょう。

あと、menu.jsってどこかから、貰ったものなんでしょうか?
writeMenus(); って何やってるのかな?document.writeだったら、onload発生以降で実行すると、それまであったページもScriptもみな消えるけど?
で、リンククリック出来ないと云うよりエラーが発生して、終了してるのでしょう。
発生しているエラーを捕らえないことには、原因も解決もできませんね。

3   名前: minx : 2007/01/21(日) 16:33  ID:RezQz0T4
ありがとうございます。

1,000個のメニューがあるのではありません。
メニューの定義で1,000行を超えてしまうという事です。
数十のリンクがあって、そこからメニュー、子供メニューへと展開します。
現実、それほどHTML上が煩雑になっているワケではありません。

エラーを捕らえるにはどうしたら良いでしょうか。
IEの[ツール]→[オプション]→[詳細設定]→[スクリプト エラーごとに通知を表示する]
にチェックを付けても、エラー時に何も表示されないのです。

menu.jsは知人からコピーさせてもらったもので、彼がどこからDLしたかは分かりません。(済みません)
冒頭に以下の記述のあるファイルです。writeMenus関数だけでも文字数が多いので、ここに掲載する事は出来ないようです。
------------------------------------------------
/**
* Menu 0.8 990602
* by gary smith, July 1997
* Copyright (c) 1997-1999 Netscape Communications Corp.
*
* Netscape grants you a royalty free license to use or modify this
* software provided that this copyright notice appears on all copies.
* This software is provided "AS IS," without a warranty of any kind.
*/

4   名前: Z ◆XTzyosZXcL : 2007/01/21(日) 16:33  ID:l1JH9ebB
>>3
 引用した部分をご確認ください。「1997年7月に”gary smith”という人物が書いたものであり、著作権は「Netscape Communications」社に帰属します」といった文章です(本文のところまでは私には訳せないですのでご容赦を)。

 さて、当時のNetscape Navigator用のスクリプトである、ということはInternetExplolerで適切に動作するか保証の限りでない、ということになるのではないでしょうか?標準仕様のスクリプトで公開されているものを使うか、ご自身で構造から勉強されて組み立てるか、のいずれかにされたほうがよいかと思います(内容が分からないまま無闇に使うと、実はそのプログラムに「悪意」がこめられていて被害にあう、などということになりかねません)。

Netscape Navigator(WikiPedia):
http://ja.wikipedia.org/wiki/Netscape_Navigator

デジタル著作権:
http://blogcopyrightguide.seesaa.net/category/442177-1.html

その他参考:
http://m035.blog61.fc2.com/blog-entry-12.html

5   名前: minx : 2007/01/21(日) 16:33  ID:i2Krktoq
ありがとうございます。
一応、お知らせまで。

冒頭部分の後半は、
「この著作権に関する告知が全ての(ファイルの)コピーに表示される事を前提に、Netscapeはこのソフトウェアの無償使用/改造を許可する。」
という意味の事が書いてあります。

また、この仕組みは、外注でプロに作ってもらったサイトで、IE6で問題なく動作していました。(勿論プロと言ってもいろいろあるのでしょうが)
今回私がこれを利用して作ろうとしているページは社内のイントラネット上であり、ブラウザはIE6しかない事が明確になっています。

確かに当該jsファイルの全てを理解して使用しているワケではありません。
「ある特定条件のもとで動く「悪意のあるコード」など仕掛けられていない」とは100%確証を持って言えませんが、まず間違いないだろうとの判断で動いています。
こういう姿勢に同意出来ない方もいらっしゃるとは思いますが、それは本題とはあまり関係ないので、ご容赦願いたいと思います。


6   名前: Z ◆XTzyosZXcL : 2007/01/21(日) 16:33  ID:l1JH9ebB
>>5
 そういうことは「先に」おっしゃってください(注意書きを訳せるならなおさらです)。
 で、既存のものが問題なく動いていたのであれば「元の依頼者に尋ねる」のが一番でしょう。

 あるいは、>>2への質問(発生しているエラーは「何」か)に適切に答えてください。そうでないと多分話はこれ以上進まないでしょう。
 なお、「JavaScript エラー 発見 方法」という方法でGoogle検索してみたところ、下記ページが見つかりました。他にもよい資料があるかもしれませんが、とりあえずご紹介しておきます。

小粋空間: JavaScript エラーを解消する
http://www.koikikukan.com/archives/2005/11/10-235011.php

 また、過去ログに何かヒントがあるかもしれませんので申し添えます。

参考・関連するであろう掲示板Q&A:
http://www.tagindex.com/bbs/qa06.html#a07
http://www.tagindex.com/bbs/qa09.html#a04
http://www.tagindex.com/bbs/qa02.html#a06
http://www.tagindex.com/bbs/qa09.html#a03

7   名前: 匿名 : 2007/01/21(日) 16:33  ID:u7OKXWvF
ありがとうございます。

■jsファイルの著作権について
これが論点になるとは考えておりませんので(そうすべきだとも考えていません)、jsファイルの冒頭部分は訳しませんでした。ご了承下さい。

■元のサイトの作成者
契約等の事情から、その業者(サイト作成者)とはコンタクト出来ない状況です。
改めて外注するというオプションもありますが、こちらでヒントを得て自分で解決できるのであれば、それに越したことはないという判断故、こちらに投稿している次第です。

■JavaScriptのエラーについて
私のケースの場合、ステータスバーにエラー表示すら出ません。
例えば、1.で示したコードで言いますと、「メニューをロード」という文字列の上にマウスポインタを持っていくと、ステータスバーには「javascript:lm();」が表示されます。
しかし、クリックすると、何も表示されず、指の形だったマウスポインタは矢印の形になり、リンクの上でも指の形に変わりません。
VBのErr関数のようなものがあれば良いのでしょうが、私が調べた範囲ではそれも無いようですし、ちょっと困っています。

■示していただいた過去ログ
貼っていただいた4つのリンクですが、どれも投稿態度に関する内容と言えると思います。
これらに関して言えば、例えば、私が試行錯誤しているソースを掲示用に簡略化したものを掲載させていただいております。(menu.jsは、前述の通り、字数制限にて(一つの関数ですら)掲載できません。DL出来るサイトがあれば探してみます。)
また、こちらの過去ログ、その他ウェブ上のいろいろな情報を調べ、分からないのでこちらに投稿しています。
全く調べないで投稿していると仰りたいのかもしれませんが、そうではなく、あちこち調べた上での投稿です。
その旨、ご理解いただければ幸いです。

8   名前: minx : 2007/01/21(日) 16:33  ID:u7OKXWvF
追補:
上記投稿(7.)にて名前を入れるのを忘れてしまいましたが、質問者による投稿です。

9   名前: 匿名 : 2007/01/21(日) 16:33  ID:JEFUZzom
回答者は暇人のにわか専門家しか居ないから話半分で聞いといた方がいいですよ。

今回のパターンでは相手の意見を聞いたふりをして、
「ご指摘の通り私の態度には改めるべき点が多々ありました。
 回答者様にご迷惑をおかけして申し訳ありません。
 今回のエラーは〜〜(以下略」
などと言っておけば良いでしょう。

10   名前: 匿名 : 2007/01/21(日) 16:33  ID:fqUPSjiv
>>0-1
メニューの分割ということならば、項目追加スクリプトを分割して、addBehavior などで少しずつ読み込ませることは可能。しかし、

・addMenuItem を呼び出したときに直ちに書き換えが行われるのか?
・writeMenus は以前の状態を保持するのか、しないのか?

menu.js の中身を確認しないことには何とも言えない。まあ、その手の古いスクリプトだと、大改造が必要になる気がする。


>>6
>>0
> ブラウザはIE6しかない環境です。他のブラウザはケアする必要はありません。

と先に書いてあるし、問題点自体は明確だったと思うが。

11   名前: 匿名 : 2007/01/21(日) 16:33  ID:KTM9W7KV
>私のケースの場合、ステータスバーにエラー表示すら出ません。

KIKI というブラウザなら、エラーの内容が表示されると思いますよ。

http://www.din.or.jp/~blmzf/

ご参考まで。

12   名前: minx : 2007/01/21(日) 16:33  ID:i2Krktoq sub-.B
しばらく離れておりました。
年末〜年始にかけてあれこれやってみましたが、たしかにmenu.jsは自分にとってブラックボックスで、何がどう動いているのか良く分かっていないので、これを使うのをやめ、CSSとJavascriptを使い、全く違うやり方でトライする事にしました。
そちらの疑問点は、また別途スレッドを立てて質問させていただきたいと思います。
皆様、ありがとうございました。

一覧へ戻る