スポンサーサイト 
-- -- --
-- --:--:--

スポンサー広告  Comment -  Trackback -  edit.

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

リストのツリー化スクリプト(基本編) 
2005 08 07
Sun 18:46:51

カスタマイズ  Comment 3  Trackback 0  edit.

最新コメントやトラックバックリストなどで使われるツリー化スクリプト。
私のテンプレートにも必ずと言って良いほど使ってますが、この利用法と言うか設定法を今回は、簡単に説明してみたいと思います。
但しある程度のタグを理解していないと、見ても分からないと思いますが勉強のつもりで覗いてみるのも良いかもしれません。(笑)

スクリプトの制作者さんはリンクリストにもある、JUGEMカスタマイズ講座さんのモノを多少改造して使っています。

では・・・・・↓


<div class="sidetitle">RE COMMENTS</div>
<div id="commentlist">
<ul>
<!--rcomment-->
<li><%rcomment_etitle><br/><a href="<%rcomment_link>#comment">(<%rcomment_month>/<%rcomment_day>) <%rcomment_name></a></li>
<!--/rcomment-->
</ul>

</div></div>

<noscript>
<ul>
<!--rcomment-->
<li><%rcomment_etitle><br/><a href="<%rcomment_link>#comment">(<%rcomment_month>/<%rcomment_day>) <%rcomment_name></a></li>
<!--/rcomment-->
</ul>
</noscript>

まず上のタグを見てみると、<div id="commentlist"> で囲まれている部分

<ul>
<!--rcomment-->
<li><%rcomment_etitle><br/><a href="<%rcomment_link>#comment">(<%rcomment_month>/<%rcomment_day>) <%rcomment_name></a></li>
<!--/rcomment-->
</ul>


<!--rcomment-->?<!--/rcomment-->の変数部分がスクリプトでツリー化と日時単位で表示するように読み込まれます。

ツリー化のスクリプトを使う上で重要なのが、<div id="commentlist">で囲むという事です。
この二つのIDを指定し、スクリプトでもこれを設定する事でツリー化の処理がされるわけです。

スクリプトの設定部分を見てみると次の様になっています。

gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '<li class="lst">'; /* ツリー用マーク(通常) */
gTreeOption['end'] = '<li class="end">'; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '</li>
'; /* 各枝の末尾 */
gTreeOption['top'] = '<ul class="tree">'; /* ツリー本体の最初 */
gTreeOption['btm'] = '</ul>'; /* ツリー本体の最後 */
createTreeList('newentrylist',gTreeOption); // 最新エントリーのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化

この設定部分の createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化 が
最新コメントリストをツリー化させるスクリプト側の設定です。


<div id="commentlist">    [メニュー側の設定]

createTreeList('commentlist',gTreeOption); [スクリプト側の設定]


この2つがツリー化設定のワンセットと理解してください。

<div id="commentlist"> のid="commentlist" はスクリプト側の設定とセットですので同じ名前を付ける事を忘れないでください。

勿論、他の部分と重複しないという事は原則です。
名前を付ける場合も、○○○listという風にlistは変えずに、○の部分だけを変更します。

更にツリー内の表示順を並び替えるか、新規順かを設定する部分は、

gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */

この部分で設定します。

スクリプトが有効にしていない人のために、以下の部分を付け足す事も必要です。(必須では無いですが)

<noscript>
<ul>
<!--rcomment-->
<li><%rcomment_etitle><br/><a href="<%rcomment_link>#comment">(<%rcomment_month>/<%rcomment_day>) <%rcomment_name></a></li>
<!--/rcomment-->
</ul>
</noscript>



以上がツリー化スクリプトを使う上での設定法です。

それでも使える項目と言うのは大体決まっているので何にでも使えると言うわけでは有りません。
最新エントリーと最新コメントリスト、最新トラックバックリストぐらいでしょう。

つまりツリー化を使って日時単位にしたいだけという場合などにも有効です。
ツリー化と言ってもツリーの画像を外せば、日時単位でのソート処理だけが行われます。
この機能を使えば、ブログ以外にも掲示板の投稿順とか色々と使えると思います。

終わりにスクリプト本体の全文を載せておきますので参考にしてください。

<!-- サイドメニューツリー化スクリプト -->

<script type="text/javascript">
function makeTreeElements (idName,objList) {
if (!objList.innerHTML) return;
var objLink = objList.getElementsByTagName('a')[0];
var linkUrl = objLink.getAttribute('href');
if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) {
var tmpText = objList.innerHTML.split("⇒");
tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
this.base = Array('<a href="',linkUrl,'">',tmpText[0],'</a>').join('');
this.elem = objLink.innerHTML;
} else if (idName.indexOf('entry') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/((dd/dd))/);
this.base = Array('',RegExp.$1,'').join('');
this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
} else if (idName.indexOf('link') > -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/[(.+)](.+)/) ) {
this.base = Array('',RegExp.$1,'').join('');
this.elem = Array('<a href="',linkUrl,'" target="_blank">',RegExp.$2,'</a>').join('');
}
}
return this;
}
function createTreeList(idName,option) { // version 2.2
var objFocus = this.document.getElementById(idName);
if (!objFocus) return;
if (!objFocus.innerHTML) return;
var objLists = objFocus.getElementsByTagName('li');
var linkList = new Array();
var outText = new Array();
if (objLists.length > 0) {
for (i=0;i<objLists.length;i++) {
var chckFlag = true;
var elemText = new makeTreeElements(idName,objLists[i]);
if (!elemText.base || !elemText.elem) return;
for (j=0;j<linkList.length;j++) {
if ( linkList[j].base.indexOf(elemText.base) > -1 ) {
chckFlag = false;
linkList[j][linkList[j].length] = elemText.elem;
}
}
if (chckFlag) {
var tmpNum = linkList.length;
linkList[tmpNum] = new Array();
linkList[tmpNum][0] = elemText.elem;
linkList[tmpNum].base = elemText.base;
}
}
if (linkList.length > 0) {
outText[outText.length] = '<ul>
';
for (i=0;i<linkList.length;i++) {
outText[outText.length] = Array('<li>',linkList[i].base,option.top).join('');
if (linkList[i].length > 0 && option.sort) linkList[i].reverse();
for (j=0;j<linkList[i].length;j++) {
outText[outText.length] = (j == linkList[i].length - 1) ? option.end : option.list;
outText[outText.length] = Array(linkList[i][j],option.leef).join('');
}
outText[outText.length] = Array(option.btm,'</li>').join('');
}
outText[outText.length] = '</ul>
';
objFocus.innerHTML = outText.join('');
}
}
}

var gTreeOption = new Array;
gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '<li class="lst">'; /* ツリー用マーク(通常) */
gTreeOption['end'] = '<li class="end">'; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '</li>
'; /* 各枝の末尾 */
gTreeOption['top'] = '<ul class="tree">'; /* ツリー本体の最初 */
gTreeOption['btm'] = '</ul>'; /* ツリー本体の最後 */
createTreeList('newentrylist',gTreeOption); // 最新エントリーのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
createTreeList('commentlist02',gTreeOption); // 最新コメントリスト02のツリー化
createTreeList('tblist02',gTreeOption); // 最新トラックバック02リストのツリー化
// -->
</script>
<!--/サイドメニューツリー化スクリプト -->


赤文字部分が、スタイルシートでツリー表示に使う画像を指定するための変更箇所です。
ツリー画像が要らない場合などは、ここに→ や▼ などのマークを使う事も出来ます。
その場合は、JUGEMカスタマイズ講座さんのスクリプトを参考にしてください。

Re comments.

「ありがとうございました」
早い対応、本当にありがとうございました。
早速試してみたいと思います。
2005/08/07(日) 22:58:21 [URL] chanyさん [編集]
「うまくできました」
スクリプト部分はそのまま使用されていただきました。
元の感じを残すようにやってみるとすんなりできたので、とても助かりました。
ありがとうございました。
2005/08/08(月) 10:16:34 [URL] chanyさん [編集]
「どうもご報告ありがとうです」
どうやら解決したようですね、良かった良かった(^o^)
私もいじりながら覚えたので不十分な説明が有るかも知れません。
でも役立てて頂き嬉しいです。
2005/08/09(火) 00:24:54 [URL] 有希之武さん [編集]
Comment form.

  管理者にだけ表示を許可する 
  注意 名前、タイトル、本文を入力する事で投稿可能になります。

Trackbacks.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。