階層型メニューであるビヘビア機能が使いたい

　左側のメニューで例えばバックナンバー。これ、縦に長すぎ。
これを必要な時は、見えるようにして、必要でなければ隠しておきたい。

すなわち、Windowsのエクスプローラなどのファイル一覧で、フォルダをクリックすると、
その下にぶら下がっているフォルダが表示される機能。

これをこのBLOCKBLOGでも実現してみたい。
ではどうやって？

普通、このような機能は、はぎさんとこにあるフォルダ型階層メニューように、
ここでいう「バックナンバー」などのメニュー上をマウスでクリックすると、
それに対応した処理を行うJavaScriptの関数を、
このメニューのＨＴＭＬ文のＤＩＶタグ中に
例えば、onClick="xxxxxx()"というような属性で、あらかじめ記述しておく。

ところが、BLOCKBLOGでは、直接ＨＴＭＬ文は書けないので、
上記のようなことは出来ない。
しかし、ＤＯＭを使えば、これらの属性が、
ＨＴＭＬ文を表示した後でも追加できてしまう。
これがＤＯＭの画期的なところです。

自分も今まで、このような途中で属性を追加するということは、
やったことがないので、ここで勉強する意味で、
その過程を残してみようかな。
ということで書いておきます。

ただし、ここでＤＯＭは、
ブラウザだと、ＩＥ５以上、Mozilla、ＮＮ６以上でできるようです。

でも、自分の環境が、IE6.0 SP1、Mozilla1.6とOpera7.23しかないので、
この環境のみのことで書きます。
それ以外のバージョンや、他のブラウザはもちろん無視。

またＯＳは、WindowsXP SP1しかないので、
これ以外のＯＳは使ったことがないので無視。
マシンも、ＰＣしか持ってないので、Ｍａｃとかは、もちろん無視。

●onclickがないDIVにonclickを追加し、実行可能か？

document.getElementById("box").onclick="関数名()"
ＩＥ：関数は属性に追加されたが、実際の配置では実行できない。
Mozi：まず、当該DIV要素にonclickが存在しないため、
　　　そこに追加できないでエラーになる。
oper：エラーにならないが、Moziと同じ。

これは、ＤＯＭ１の概念でonclickを処理したので、
このようなことが起こったようで、
そもそもＤＯＭ１では、イベントは対応していないようだ。

●ＤＯＭ２からイベントが処理されるようになったようだ。

詳細はここ
この概念は、従来のタグ内にイベント処理関数を指定するのではなく、
処理したい要素にイベント関数を登録するというものです。

ただし、ＩＥ６では、ＤＯＭ２は対応していないので、
ＩＥ５から独自のプロパティがあるようです。
でも指定の仕方は殆ど同じなので、document.allで判断すれば、
互換性は保たれます。

var objBackNum=document.getElementById('b_ml_menu');
if(document.all){
　　　　objBackNum.attachEvent('onclick', sideMenu);
}else{
　　　　objBackNum.addEventListener('click', sideMenu, false);
}

ということで、基本中の基本は、これでＯＫ。

●次に、表示を隠したり、表示したりするのは、どうすればいいのか？
これは、ＤＯＭ１からあるdisplay属性で制御すればよい。

処理の概念は、b_ml_menu内のＤＴ属性でクリック時にイベントが発生し、
そのイベントを処理する関数内で、
まずＤＴタグの親要素内のすべての子要素を検索し、
ＤＤ要素を探し出して、
そのＤＤタグが現在表示されているか、隠されているかを判断し、
表示されていれば隠し、隠されていれば表示するようにする。
さらにＤＴタグ内の文字も、表示用と隠す用にそれぞれ、書き換えてやればよい。

●注意点
・nodeNameで検索するタグ名称は、大文字でないといけない。
・イベントハンドラでイベントが発生した要素を参照時、
　ＤＯＭは、thisでＯＫだが、ＩＥは、window.event.srcElementじゃないと駄目。
・childNodesのノードの指定は、
　ＩＥは、childNodes(i)で、ＤＯＭは、childNodes[i]なのね。
　要するに、括弧とカギ括弧の違い。

ということで、今回はまあスムーズにできました。

【BLOCKBLOGで対応すれば簡単】
　この機能も段々使っていると、欲しいという声が上がってきそうですね。
その時もデザイン変更と同じで、BLOCKBLOGさんで、対応してくれれば、
こんなにややこしいことしなくてもＨＴＭＬを吐き出す時に
ちょっと書き換えるだけで簡単に出来ちゃうので、
きっと対応してくれるでしょう。まあ、こちらは設定画面が大変かもね、
なので少しは大変かも？

ただもう既にBLOCKBLOGの設定画面で使ってるみたいだけど。

ただ、BLOCKBLOGのブロックという考えは、とてもいいのだけど、
それを設定するのに、いろいろな設定画面があるんだけど、
それがいろいろ複雑で、この画面で作成して、こっちの画面で登録して、
という複数の操作を組み合わせないと出来ないので
これが自分も初めは何のことかよく分からなかった。

BLOCKBLOGの目的はＨＴＭＬなんて全く知らない人でも
簡単に使えることだと思うけど、どうもこの設定画面は
分かりずらいかなと感じます。

じゃどうすればいいかと。
まあ、自分は見た目の直感性を重視した方がいいと思う。

すなわち、ブログを使う人は、自分もそうだけど、まず何が出来るのか？
どうやって作るのか？どうやって操作するの？ということが
見た目で簡単に分かる必要があると思うんですよね。
それが、どこのブログサービスも、この辺がいろんなところを見てみないと
イマイチ理解できない。

そういう意味でまずは、あなたが作ると、こんな感じの画面になります。
その画面のこの部分は、こういう機能です。
そして、その部分をクリックすれば、それの設定操作が行えます。

ということを実際の画面で見せて操作すればいいじゃないのかな。
すなわち画面をもろに表示し、例えばカテゴリ表示の部分をクリックすると
その説明と、カテゴリ編集とその設定が一度に出来ちゃう。
入力は、本文内をクリックすると、投稿画面が出てくるとか。
まあ、もちろんJavaScriptじゃなく、ＨＴＭＬ文でのみで作るんですけど。

そんなのがあったらいいななんて思った次第。

【注意点のまとめ】

?動作環境
　・ＤＯＭは、ブラウザだと、ＩＥ５以上、Mozilla、ＮＮ６以上でできるようです。
　・自分の環境は、IE6.0 SP1、Mozilla1.6とOpera7.23しかないので、これで確認し、
　　この環境のみのことで書いてある。
　　それ以外のバージョンや、他のブラウザはもちろん無視（動くかどうか不明）。
　・ＯＳは、WindowsXP SP1しかないので、これ以外のＯＳは使ったことがないため無視。
　・マシンも、ＰＣしか持ってないので、Ｍａｃとかは、もちろん無視。
　・BLOCKBLOGの文書構造に合わせて作成してあるので、
　　この文書構造以外は当然動かないです。^^);;

　・2004.09.22 Mac OS X 10.3.4/Safari 1.2.2(v125.7)で動かしたら、動いた。

【改良:2005.01.13】

　今までは、対象がバックナンバーに限定していたが、
最新のトラックバックは、１件に対してＤＤが３個もあるので長くなる。
ということで、複数カテゴリを対象にする必要があるが、
いっそのこと、カテゴリ名の先頭に半角で[+]または[-]を予め指定しておけば
それに対応して、階層メニュー化させれば便利ですね。

　ということで、この仕様に変えた。

考え方は、

　現在は、テーブルで対象カテゴリ名を設定しているので、
そこを、対象BLOCK領域id名（menu等）をテーブルで持ち、
この領域が存在するものについて、
その子ノードでnodeNameがＤＬで、
　その子ノードのDTの中身の先頭が[+]か[-]のＤＤに対して
　　[-]なら、そのままで、イベントを登録する。
　　[+]なら、ＤＤを隠し、イベントを登録する。
にすればよい。

注）DTのカテゴリ名の先頭に半角スペースがあっても
　　これはレイアウト時に無視されるようですね。^^)

【でも直ぐ使いたいという気さくな方】

　ここ見てね。

当然、内容理解できて、何が必要で、どうすればいいかを
判断できる人ね。で、自分で改造してね。
もちろん、サポート、問合せはごめんね。なしで。m(_ _)m