2.各部の解析(1)

　2-1.　MENU 項目

MENU項目はjsファイル内で定義されるが、それはメニュー構造を忠実に反映した配列となっている。

例えば次のようなメニューの場合、そのjsファイル内での記述は以下のようになる。

階層メニューの表示例

menu1　　　　menu2　　　　　menu3
　├menu1-1　　├menu2-1
　├menu1-2　　├menu2-2−┬menu2-2-1
　├menu1-3　　　　　　　 ├menu2-2-2
　　　　　　　　　　　　　├menu2-2-3

Tigra Menuによるmenu項目の登録例

var MENU_ITEMS = [
　["menu1","http://url1",
　　　["menu1-1","http://url1-1"],
　　　["menu1-2","http://url1-2"],
　　　["menu1-3","http://url1-3"]
　],
　["menu2","http://url1",
　　　["menu2-1","http://url2-1"],
　　　["menu2-2","http://url2-2",
　　　　　["menu2-2-1","http://url2-2-1"],
　　　　　["menu2-2-2","http://url2-2-2"],
　　　　　["menu2-2-3","http://url2-2-3"]
　　　]
　],
　["menu3","http://url3"]
]

メニュー階層の深さに配列次元が連動し、すなわち配列はメニューの階層構造をそのまま反映したものとなっている。

模式図的に書けば、この配列は以下のような構造となっているわけだ。

　1
　　1-1
　　1-2
　　1-3
　2
　　2-1
　　2-2
　　　2-2-1
　　　2-2-2
　　　2-2-3
　3

--------------------------------------------------------

まず語らねばならぬことは、このような配列を見たのが初めてであるということだ。

それは恰もメニューそのものであるかのような、Javascriptによる配列表現であり、配列はメニューの構造を忠実に反映しているが故に、「構造的」なものとなっている。

Tigra Menuの解析(1)

　1.全体構造

Tigra Menuの全体は、3つのJavascriptファイル、1つのCSSファイル及びmenuを表示するための1つのHTMLの、合計5つのファイルから構成される。

まず、JavascriptファイルとCSSファイルは全て外部化されてHTMLから呼び出されると共に、メニューはHTML内に埋め込まれたたった1つの次のインスタンス生成文により表示される。

new menu (MENU_ITEMS, MENU_POS, MENU_STYLES);

//MENU_ITEMSはメニュー項目であり、メニューの階層に対応した
　子持ちの配列となっている。
//MENU_POS, MENU_STYLESはそれぞれが2次元配列であり1次元目は
　連想配列となっている。

JavascriptとCSS内では、メニューの構造、メニュー各項目、Onmouseout時の色、Onmouseover時の色、Onclick時の動作、階層メニューの表示とその位置及び隠蔽、などが定められており、Javascript文は、(1)menuとmenu_itemの2つの大きなクラス定義、(2)メニュー項目とリンク先、各種イベント処理、メニュー項目の位置・色・表示/非表示等のための定数値を設定する連想配列に大別される。

そして先の2つのクラス内において、当該コンストラクタのメソッドとしてイベント処理関数が定義されている。

＜Javascript文の構成＞

menu.js　　　　　　：メニューの構造を設定する
menu_items.js　　　：メニュー項目を設定する
menu_tpl.js　　　　：メニューの装飾（位置、色等）を設定する

　2.各部

つづく・・・

　関数、変数、配列、オブジェクトとメソッド。
　これらの用語と意味はJavascriptの学びはじめの時点で一通り学習するのが常となっている。
　しかし、コンストラクタ、クラス、インスタンスについてはどうだろうか？
　言葉だけは聞いたことがあるが、実際にそれらの概念を理解し、縦横に使いこなせるような、そんな学習の出来る書籍やサイトがどれだけあるだろう？
　不勉強にしてこれまで、これらの概念の理解は全くと言って良いほど欠如していたし、もちろん利用することなどあり得なかった。
　しかし、大変スマートなTigraMenuに遭遇して、このままではいかん！可能な限りの知恵を付けてこそJavascriptを使いこなせるのだ、との認識に至った。
　そんなわけで、TigraMenuのソースコード解析を通じて、Javascriptの基礎の基礎を学習し直すことになったのである。

　配列の要素を特定するためには0から始まる整数値を利用することは周知のことだ。しかしarray("name")という配列の記述の仕方は知らなかった。
　これが実は連想配列だったのだ。言葉だけは聞いていたが実用に供したことはなかったそれに、TigraMenuのお陰で初めて遭遇したわけだ。
例えば、次のようになるらしい。
price["apple"] = 200 ;
price["orange"] = 100;
上の例では配列priceにおいて、それぞれ添字名 "apple" に 200を、添字名 "orange" に 100を代入している。

TigraMenuではこの連想配列がふんだんに利用されているのだ。

Tigra MenuでJavascriptを学ぶ

オンラインで階層メニューが作成できてしまう優れものサイトTigra Menuを元にして、Javascriptを更に学習する過程を記してみたい。

1-まずはTigra Menuで階層メニューを作る

　オンラインで階層メニューを作成する

その存在は『HTML＆スタイルシートデザインブック』（エビスコム著　ソシム株式会社）で知った。

そもそもこの書籍では階層メニューが「プルダウンメニュー」として紹介されているので、久しく階層メニューのことではない、と決めてかかっていた。最近ひょんな機会から見直してみて、実はフォームを使ったプルダウンメニューではなく、まさしく階層メニューの意味であることが分かったのだ。

まあそんな用語の定義と適切な使い方については脇に置くとして、早速Tigra Menuでテスト的に階層メニューを作ってみた。作成は極めて簡単に行えるので、お好みの深さの階層メニューが数分で完成してしまった。もちろん、配置、文字色、背景色、メニューアイテムのサイズ等のデザインは自在に変更可能だ。余りに容易に出来るので、作成手順について述べるまでもないだろう。

オンラインBuilderで階層メニューを作成し終えると、5つのファイル index.html、menu.css、menu.js、menu_tpl.js、menu_items.jsが出来上がる。これらを一括ダウンロードすれば、ローカルPC上あるいはウェブサイト上で直ぐに活用できる。

　出来上がった5つのファイルを分析する

まず、Tigra Menuによりオンラインで作成される階層メニューの最大の特徴は、階層メニュー部分に関するHTML文が皆目存在しないことだ。（正確に言えば作成した複数のJavascript文を呼び出すスクリプト文がHTML内にある。）Javascriptとcssだけで階層メニューを実現しているのである。階層メニューはJavascriptにより吐き出され、HTML文内に書き出される。このことは最大の特徴であるだけでなく、最大の驚きでもあった。何故ならば、これまでネット上で検索し遭遇した階層メニューは、悉くHTML文内に様々な要素を書き連ね、それをJavascriptで制御する仕組みのものであったからだ。

更に、驚異はそれだけではなかった。Javascript文が私にとって相当難しいのである。配列を縦横無尽に使い、かつthis命令を多用しているが故である。これまで学んできたJavascriptは、配列を使ったりthis命令を使うことは部分的にあったものの、全面的に悉く配列とthisで埋め尽くされたJavascriptには馴染んでいないため、Javascript文の解読そのものが出来ないでいるのだ。

従って、学習すると銘打っても現時点ではBuilderで作成されたJavascript文を眺めても皆目分からず、分析どころの話ではない。まず配列とthis命令についてきちんと学習することから始めなければならないのである。(;´д`)トホホ

（ブログパーツと言えるかどうか・・・）
　Tigra Menuの存在を今まで知らなかった。知らなかったその時の流れが恨めしい（爆笑）。
　Tirga Menuは知る人ぞ知るJavascriptのTip集サイト、それも階層メニュー（プルダウン形式、ツリー形式等）の技を満載した多くのツールを無料でダウンロード出来るだけでなく、オンラインで階層メニューが作れてしまう、大変優れたサイトである。
　このサイトの存在をもっと早く知っていれば、おそらくこの間悩んできた階層メニューにおけるちらつき問題に費やした時間は不必要だったはずだ。

JavaScript Menu

　これからダウンロードした階層メニュー作成ツールを使って縦横無尽に階層メニューの奥義を極めてみたいと思っている。

　リアルタイムでスパイウェアの侵入を監視するソフト＝Spywareguard（以下SG）をインストールしたら、PCがおかしくなってしまった。
　具体的には、WindowsXP起動時に、Explorerがread出来ないというエラーメッセージが出るようになり、かつSGが動いているにも拘わらず、システム領域にアイコンが表示されなくなってしまった。しかもWindowsXP終了に要する時間がかなり長くなってしまった。
　あれこれと模索し、まず原因はSGにあると特定し、次にSGそのものを除去するしかないと判断したものの、アンインストールしようと思ったら、「起動中なので削除できない。まずはSGを止めろ」と警告が来て、アンインストール出来ない状態となってしまった。しかも、通知領域にSGのアイコンはないのだ。
　仕方なく、(1)msconfigにてスタートアップリストを表示し、SGをスタートグループから削除し、(2)再起動してから、SGをアンインストールし、(3)三度再起動したところ、やっと先のエラーメッセージが出なくなった。
　インストール当初は問題なく作動していたのだが、Updateした途端におかしくなったので、Updateデータに何か悪意のあるファイルが入っていたのかも知れない。
　いずれにせよ、セキュリティを高めようとしたのに、逆に裏切られてPCがおかしくなり、それを修復するために1時間以上の時間を費やす羽目になったことは、実に恨めしい限りだ。
　もう二度とSGは入れないぞ〜〜！！！

Sleipnir2がネットサーファーを熱くさせている昨今であるが、そのInstall時におまけでRoboFormがインストールされる。

もちろんRoboform単独で入手可能であり、利用も可能である。

RoboFormはパスワード管理, フォーム記入, パスワード生成, 自動ログイン等を可能とする多機能なブラウザプラグインアプリだが、これはこれまでの同様な機能のアプリに較べて、操作性において極めて優れている。（ロボフォームの機能: フォーム記入、自動フォーム記入、フォーム保存）

これまでも、IE専用のECOIE2という自動ログインツールや、汎用的なプライベート情報管理ソフトであるIDManagerを使ってきた。しかし前者はIE以外には使えないし、後者は一々登録作業を別に行わなければならなかったし、自動ログインする作業も手間が掛かった。ロボフォームはそれらの全ての欠点を補って余りある機能と操作性を有しているのだ。

知る人ぞ知るRoboFormだった（？）、いや私だけが知らなかったのだろう。何故ならばRoboFormは下に引用（RoboForm本家サイトから）したように、各種の賞を受賞しただけではなく、一般紙やパソコン専門誌で高い評価を得ているし、あのvectorからもダウンロードできるのだから。

	"「Webサイトへのログインという用途に限れば、最も効率よく使いやすいソフトといってよいのではないだろうか。」 " ベクター
	"最も素晴らしいことは、良くできたプログラムだと言うことだ。" ＰＣマガジン
	"Easy to use and without any hidden spyware... Innovative, lean, useful product." Wall St Journal
	"It Knows All Your Passwords (But Promises Not to Tell)". NY Times
	"The Best of 2003 -- Most Practical Program. I highly recommend it." CNET Download.com
	"Best web enhancement." People's Choice Award-2004
	RoboForm has long been a leader in the field of password management and form filling software. MorningStar Advisor

なお、vectorの評価（VECTORによる「AI RoboForm PICKUP」記事）は一面的と言わざるを得ない。Webログイン時のメリットしか評価してないが、名前の由来（Form用Robot）からも明らかなように、フォーム記入時（例えばブログ上におけるコメント作成時）にも大いに役立つことをきちんと評価すべきだ。

いずれにせよ、Sleipnir2との同梱によって、RoboForm利用者は急激に増えるに違いない。

　またしてもWindowsXPに支障を来した。今度は全く起動しないのだ。
　正確に言うと、スイッチオンの後「設定読み取り中」迄進んだ後、次に表れるべき背景画像が全く表示されず、その先に一向に進まないのだ。
　昨晩、prefechファイルを全て削除したので、これが原因かとも思って見たが、そもそもそれで起動しなくなるのは理屈が通らない。実際半日掛けてWindowsXPが起動する状態に修復・復帰した後に、prefechフォルダを空にしても問題なく、WindowsXPが起動したのだから、この削除は不具合の原因ではなかったことになる。
　では原因はなにか？　何故WindowsXPが起動しなくなってしまったのか？
　その原因は皆目思い当たらない。WindowsXPの設定に影響するような作業は昨晩は何もしなかったからだ。昨晩問題なく起動してアプリを利用し、問題なく終了したのに、今朝スイッチを入れたら、全く起動しなくなってしまった。このことから類推できる原因はだただ一つ───ウィルス感染に他ならない。
　ウィルス定義ファイルは常に最新状態に更新していたというのに、それでも侵入されてしまったとしか考えられない。どんなウィルスだったのか再インストールしてしまった今知るよしもないが、二度と同じ事が起きぬよう対策を打たねばなるまい。
　それは、今度もし同じ事態が起きても、バックアップユーティリティを使って作成したブータブルバックアップDVdから、現在のCドライブ全体を即座に復帰できるようにしておくしかないだろう。

　（適当なスレッドテーマがないので「パソコン情報」に投稿）
　昨日ヤマダ電機に行き、DVD-Rが1枚辺り130円足らずで売られていることに驚いた。1円当たり36メガバイトの計算になる。しかもそれはバルク品ではなくTDK製であり、わざわざ日本製とも書いてある。速度も８倍速まで対応しているれっきとした製品だ。
　ほんの２年前にはCD-Rがその程度の値段で売られていたのでなかったか？
　感覚的な判断であるが、フロッピイ1枚が100円の時代から、対FD記録容量3264倍のDVD-Rが130円になるまでに10年は経過していないかもしれない。
　急速な技術革新の威力を目の当たりにした一例と言えよう。

　甲斐市は自治体の広報ツールとしてブログを採用したそうだ。（甲斐市 Blog News　出典：iJAMP時事通信社）
　早速覗いてみた。写真入りで地元の話題が分かる点は評価できるだろうが、ユーザビリティの点から一点だけ苦言を呈したい。それはフォントサイズが小さすぎることだ。
　閲覧者の年代層をどの様に想定しているにせよ、自治体の住民を第一優先に考えるべきだから、当然小さい文字を好む若者もいれば、大きな文字でないと苦痛を感じるお年寄りもいる。
　この場合どちらを優先させるべきかは自ずと明らかだ。「大は小を兼ねる」がその逆ではない。
　折角の試みがフォントサイズの小ささ故に「馴染めない」と離反されては残念だろう。
　なお、トラックバックを受け入れない仕様としている点は理解できなくもない。スパムトラックバックが登場し増えているようだから、この対応は無難だろう。

　Javascript関連サイトリスト（since 2005/07/25）

総合的サイト

小技特集サイト

この階層メニューは或るサイトからの転用である。元にしたサイトではちらつきはないのだが、我がサイトではちらつきが出てしまう。別の階層メニューでもちらつきでさんざん悩まされたが、「ちらつき問題」が常につきまとっている！

結局ちらつき防止対策としてタイマーをセットせざるを得なかった。出来ればタイマーなんて面倒なことはしたくなかったのであるが、万策尽きた感があり、最後の最後の手段として採用せざるを得なかった。

しかし、元にしたサイトでは、タイマーなんて使わないでちらつきが発生していないのに、どうしてであろうか？

tableのセル内にdivタグを配置すればちらつかない、というような「文法」があるのであろうか？！？！

詳しい方のお知恵を拝借したい次第である。

そんなわけでリストを作成するどころではなく、またしても階層メニューで行き詰まってしまっているのであった・・・。

それに敢えてリストを壱から作らなくても、こんなにすばらしいサイト（「J.O.Y.」）があるのだから、今更不必要かも知れない───と落ち込んでいるのであった。