FCafe  ツリー化統合

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

  リンクやカテゴリをグループ分けしたい、という人はかなりの数いらっしゃるようです。
また、その他のナビリスト(コメントやTB)の 「ツリー表示」 の要望も良く耳にします。
我が古巣?のJUGEMではかなり以前からリストをツリー化するスクリプトが広く用いられていましたが、それでも当初はコメントやTBリストが対象でエントリやリンク・カテゴリのツリー化は後からのサポートでした。 エントリは「投稿日」でのグループ化であり、同日に複数の記事を投稿するユーザー以外にはあまりツリー化によるメリットは得られず、リンクやカテゴリのツリー化に於いては分類名を項目名に付加して登録する必要がありました。 リスト中にグルーピングの為の情報が乏しい(無い)為です。
  ・・・定まった形式でリストが吐き出されるJUGEMと異なり、此処FC2のブログに於いては、ユーザーが(各リスト毎に)自由に要素を選択し組み合わせる事が可能です。 (全く素晴らしいシステムです)
「そのメリットを最大限に引き出せるような『ツリー化』スクリプトが欲しい!」
・・・そう切実に感じ、自ら作ってみました。

  全てのリストをツリー化(グループ化)可能です。 リストの構成も自由に設定できます。
(現在はサポートされていませんが)、将来<%recent_category> や <%recent_author> がサポートされた暁にはエントリリストをカテゴリや投稿者名でツリー化することも可能となります。
 ( IE、FireFox、Opera で動作 )

【 初めに 】  ソースをお示しする前に、category と LINK をグループ化する方法を説明します。
例えばカテゴリの場合、 一番目のグループが『 映画 』 であったとしてそこに 邦画・洋画・アニメ を登録する時は
1.邦画 1.洋画 1.アニメ ・・・と半角数字とドットを冒頭に付加して登録します(リンクも同じ)
グループ名はスクリプト中の配列変数 Ctg[] に順に記載しておきます。
(グループ名変更時に、各項目名を書き換える必要はありません)
配列の最初の(ゼロ番)要素は、番号の付加されていない項目群のグループ名となります。
(グループ番号は「表示順」ではありません。 他のリストと同じく最初に表示された項目が所属するグループから順にツリーが形成されます)

 
  設置方法(ソース)は以下のようになります。

  head 領域
<script type="text/javascript"><!--
n=0; tgt=0; var Item=new Array(); var Ctg=new Array();
Ctg[0]=new Array("その他","分類名1","分類名2",・・・); // category 用分類名
Ctg[1]=new Array("OTHERS","group 1","group 2",・・・); // LINK 用分類名

function getItem(u1,u2,u3,u4,u5) {
j=u1;
if (j==0 || j==1) { u1=Ctg[j][0];
if (j>0) { tgt=1 }
if (u2.indexOf('.')>0) { p=u2.split("."); u1=Ctg[j][p[0]]; u2=p[1] }
}
n++; Item[n]=u1+'$'+u2+'$'+u3+'$'+u4+'$'+u5;
}

function mkTree() {
var Cc=new Array(); var Ce=new Array(); var Ct=new Array();
v=0; Ct[0]="";a1='" title="';
if (tgt==1) {a1='" target="_blank'+a1; tgt=0;}
for(i=1;i<=n;i++) {g=Item[i].split('$')[0]; f=0;
for(j=0;j<=v;j++) {if (g==Ct[j]) {Cc[j]++; Ce[j][Cc[j]]=i; f=1}
}
if (f==0) {v++; Cc[v]=1; Ce[v]=new Array(); Ce[v][1]=i;Ct[v]=g}
}
for(i=1;i<=v;i++) { l=Cc[i];
for(j=1;j<=l;j++) { p=Item[Ce[i][j]].split('$');
if (j<l) {a0="├";a2="<br>";} else {a0="└"; a2="<br><br>"}
if (j==1) {document.write('<strong>'+p[0]+'</strong><br>')}
document.write(a0+'<a href="'+p[2]+a1+p[3]+'">'+p[1]+'</a>'+p[4]+a2);
} }
n=0;
}
//--></script>
         ★この色の行は LINK を別窓で開く為のものです (不要なら削除可)

  各リスト部
<!--リスト始-->
<script type="text/javascript">
getItem("分類元要素","個別表示要素","リンク要素","付加情報1","付加情報2");
</script>
<noscript>
  *デフォルトの記述(スクリプトoffで表示)
</noscript>
<!--/リスト終-->
<script type="text/javascript">mkTree()</script>



【 解説 】 今回( 統合版 )のデータ収集関数 getItem は5つの引数を持ちます。
   1 グループのタイトルとなる要素
   2 リンクを載せて並べ(表示す)る要素
   3 リンク先アドレスを表す要素
   4 2にマウスオンすると表示される要素(情報)
   5 リンク外 で2に続いて表示される要素(情報)

当blogのコメントリストの場合を例に挙げますと、
1元記事のタイトル   "<%rcomment_etitle>"
2投稿者名       "<%rcomment_name>"
3コメントのアドレス   "<%rcomment_link>#comment<%rcomment_no>"
4コメントのタイトル   "<%rcomment_title>"
5投稿月日       " <%rcomment_month><%rcomment_day>"

となっている訳ですが、これらの組み合わせは(リンク先以外は)自由に変更可能です。
例えば、「投稿者名」毎に「投稿日」を並べる、などでも構いません。
(コメントタイトルなど省略されがちな項目を第1,2引数に指定するのは避けた方が良いでしょう)
各引数には「独自タグ」以外の文字(空白・記号・タグ)を付加しても構いません。
上記の例にもあるように 一つの引数に複数の独自タグを記入するのもOKです。
( あるいは独自タグを用いず、4などは "Click!" などとしても構いません )
★当然、ツリー化されないデフォルト表示の構成と同一にする必要もありません。

  第1~3要素はリストの性格上必須ですが、4,5要素は省略することも可能です。 マウスオン表示や、日付表示等を(表示幅の関係等で) 略したい場合は、相当する引数部に独自タグ等を記入しないで ""(空文)を記入して下さい。


【 リンク・カテゴリの場合 】  これら二つの場合は以下のようにして下さい。
 
   ○カテゴリリストの場合 ⇒ 第1引数に(半角で) 0 と記入
   ○リンク先リストの場合 ⇒ 第1引数に(半角で) 1 と記入

 そうすると スクリプトは第2引数の項目名冒頭に付加された数値を引き剥がし、その数値に対応するグループ名を配列変数 Ctg から取得して第1引数に充てます。  形成されたデータは他のリストと同様に描出されます。  ( ですから今回のリスト描出関数 mkTree には引数はありません )


  リストタイトルやリスト本体の ID 指定や class 指定等の書式を厳格に定める(他リストと揃える)必要がなく、 引数に要素を放り込むだけで良い、というのが" Stack & Build "方式?の利点です。
(リストの修飾はスクリプト中にタグを加えたり、CSSを使用して下さい) 

【 追補 】 XHTMLテンプレートの方はソース中の改行タグを<br />とされて下さい。
出来るだけ簡単に設置・運用できるように考えましたが、このスクリプトは或る程度「知識と経験」がある方を想定したものです。 (テンプレートに 『貼り付ける』 だけでは使えません)
その代わりFC2の独自タグを理解し、組み合せられる方には自分なりのアレンジを楽しんでいただける訳です。

Comment

みんと みんと Edit
01/23 03:25

初めまして。

「cfdn_p」のテンプレートでも設置可能でしょうか?
このテンプレート、リンクごとに区切り線みたいのでマウスカーソルを置くと、
背景色が変わるようになっています。
これ自体はとっても気に入ってるんですが・・
リンクリストをツリー化というのは、是非やってみたいので^^;

daniel daniel Edit
01/23 10:35

ようこそ  みんとさんお早うございます。
はい、(基本的に)どんなテンプレートでも設置可能です。
ただ、ツリー化されたリストはプレーンなリストとは性状が異なります。
cfdn_pはリスト項目全部にリンクを載せているので CSS設定であのような表示形式にできるのですが、
 
私のスクリプトそのままですと、ツリー線(”├ ”)にはリンクが載っていませんので、(CSSを設定しても)行全幅の背景色は変化しません。
そうするには 第4引数を使用せず 表示項目は全て第2引数に記述し、
関数 mkTree 書き出し部の a0 という変数をリンクタグの内側(p[1]の前)に移してやります。
(ツリー線と混在すると不自然ですからCSSでborderは解除します)
  ・・・と、このように、
このスクリプトはちょっと知識があれば 色々と変更・応用がきくのです。

- - Edit
01/24 05:14

管理人のみ閲覧できます このコメントは管理人のみ閲覧できます

daniel daniel Edit
01/24 11:18

有難うございます 「そっけないデザイン」 と思われがちかな、などと(心の片隅で)思ったりすることもあるのですが、そう言っていただけると嬉しいです。
( バグの指摘か? などと一瞬緊張しました・・  ~~;)

- - Edit
01/24 15:23

管理人のみ閲覧できます このコメントは管理人のみ閲覧できます

daniel daniel Edit
01/24 18:33

修正しました 御指摘、有難う御座います!  (ヤッパリアッタ・・orz )
( また、御自身で修正のお手間を取らせた事お詫び申し上げます)
私のblogのソースはItmなのですが Itemの法が分かり易いかな、と
変更したのに漏れがありました。 早速修正いたしました。
この為に お手数をお掛けした皆様にも お詫び申し上げます。
(未熟者です故、お気付きの点などありましたらどんどん御指摘下さい)

- - Edit
01/26 09:24

管理人のみ閲覧できます このコメントは管理人のみ閲覧できます

daniel daniel Edit
01/26 18:50

粗末ですが サポート掲示板を設置しました。
設置に関する 御質問等はこちらで承ります。

chelsea chelsea Edit
01/31 16:46

使わせてもらいました 初めまして。
カテゴリが煩雑になって困っていたところこちらを拝見し、四苦八苦しましたが何とかツリー化することができました。
どうもありがとうございました。

daniel daniel Edit
01/31 17:45

こちらこそ 御利用いただき有難うございます。
お弁当blog、Jで拝見したことありますよ。  ・・カテゴリが20以上あると大変?ですよね。
JUGEMからいらっしゃる方が多いように感じるのは気のせいでしょうか。
同郷のよしみ?で 今後ともよろしくお願い申し上げます。

はっぴー はっぴー Edit
02/28 19:41

はじめまして。 配布しているテンプレートのサンプルに使用させていただきTBさせてもらいました。
もし宜しければですがこの配布してるテンプレに設置する方法をソース付で
記事に書かせていただきたいのですがいかがでしょうか?

daniel daniel Edit
02/28 20:42

光栄です  はっぴーさん、ようこそ今晩は。
拙blogの記事は、罵倒・引用・使用・改変・再配布、全てフリーです。
私のような半端者の手遊びを御目に留めていただけるなんて光栄の至り。
御紹介くださるなんてこちらからお頼みしたいくらいでありますよ。
これを機に、今後とも どうぞ宜しくお願い申し上げます m(_)m

はっぴー はっぴー Edit
03/01 17:35

ありがとうごさまいます 許可いただきありがとうございました。
早速記事に書かせていただきました。
こちらこそよろしくお願いします。

ばっち ばっち Edit
03/09 22:40

使わせていただきました 最近、F2Cに乗り換えた者です。
カテゴリのジャンル別けは以前から“できたらいいなぁ”と思っていたのでこちらのソースを発見して設置し、感激しました。
ありがとうございました。これからも頑張ってください。

daniel daniel Edit
03/10 10:00

ありがとうございます ばっちさんはじめまして。
seesaa をお使いでしたか。 ( 私は JUGEM からです )
FC2のblogは 「これが無料でいいのか」 と思わされるくらい良いですよ
ヘタレなソースを使っていただいて私も感激しております。
まだまだですが、これからも頑張るつもりですので、とうぞ宜しくお願いします 

juna juna Edit
05/09 22:02

いつも参考にさせていただいています。
今回こちらのツリー化スクリプトを使用させていただきました。
簡単にツリー化することができ、感激です!
ありがとうございました。

daniel daniel Edit
05/10 01:24

juna さんこんばんは。 ( 御利用有難うございます )
 
このツリー化は他のスクリプトと異なり既存オブジェクトを操作せず、
関数に直接ツリーを書き出させる方法を取っています。
ですから 簡単というか自由度が高いのです。
( FC2blogはこのタイプのスクリプトがとても書き易く出来てます)

- - Edit
07/10 02:57

管理人のみ閲覧できます このコメントは管理人のみ閲覧できます

daniel daniel Edit
07/10 18:53

「んなこたぁ無い筈」 ときっぱり言い切れないへたれな私。
久し振りに(懐かしい)スクリプトを走らせてみましたですよ。
・・・はい、動きました。
http://blog3.fc2.com/p/pcafe/file/treeold.html「SAMPLE」

このページの「各リスト部」のソースは一つのリストblockの中にスクリプト(getItem関数)と代替用のnoscriptタグを一緒に書いてますが、 こうすると実際に出力されるソースは逆に長くなってしまうのでありました。


<script type="text/javascript"><!--リスト始-->
getItem("引数1","引数2","引数3","引数4","引数5");
<!--/リスト終--></script>

<noscript><!--リスト始-->
*デフォルトの記述(スクリプトoff用)
<!--/リスト終--></noscript>

と書いても勿論動きます

しょーき しょーき Edit
12/31 18:32

初めまして! ツリー化のプラグインをダウンロードさせていただいた者です^^
記事タイトルが太字でなくて普通の字で表示されるようにしたいのですが、ソースのどこをいじったらいいか分かりません;;
教えていただけると助かります・・・。

daniel daniel Edit
12/31 22:33

しょーきさん こんばんは。 Tree-Comment の御利用有難うございます。 
記事タイトルを太く表示したくないのであれば 
テンプレートCSS末尾に以下を追加してみて下さい。

#RC p b {font-weight:normal}

しょーき しょーき Edit
12/31 23:12

お返事ありがとうございます!
さっそくCSSに追加してみたところ、その場のプレビューでは反映されるのですが更新して普通に開くともとの太字のままに戻ってしまいます…単に私のやり方が悪いのでしょうか;;

daniel daniel Edit
12/31 23:50

ブラウザがCSSをキャッシュしている為と思われます。
確認させていただきましたが ちゃんと太字が解除されていますよ。

三毛猫 三毛猫 Edit
01/01 10:57

迎春 danielさん、あけましておめでとうございます☆
昨年は本当にお世話になりました。

その後何度かF-Cafeを拝見させていただいているのですが
内容が難しくさっぱりわかりません。。
そんなわけでコメントとかはもう出来そうにないのですが
今年もよろしくお願いします。(わけのわかんないコメント
すみません)

daniel daniel Edit
01/01 16:32

三毛猫さんおめでとうございます。
え~ ・・・ウチの記事そんな難しいですか。
私も三毛猫さんと同じ一ブロガーに過ぎないんですけどねぇ
( そういうのも 雨ブロが伸びる理由の一つなのかも? )

や~ またなんかありましたら、御遠慮なくお申し付けください。
私で可能な事なら喜んで対応させていただきますから。
本年もどうぞ宜しくお願い申し上げます

しょーき しょーき Edit
01/02 15:30

なるほど・・・確かに今はちゃんと解除されています!
ありがとうございました!

三毛猫 三毛猫 Edit
01/04 15:41

danielさん、こんにちは☆
今日は実は「出来たらいいなぁ」と思うことを質問に
来ました。私にも出来そうでしたらまた教えてください。

danislさんに教えてもらった自動リンクですが、
例えば24時間以内に投稿してもらったリンクに
newマークとかつけられますか?
もしできる様だったら、お手数ですがご伝授ください。
お願いします♪

daniel daniel Edit
01/04 22:03

三毛猫さんこんばんは。
アレに NEWマーク 付けられたいのですね。 可能ですよ。
少しお時間をいただければ、と思います。

三毛猫 三毛猫 Edit
01/06 12:18

ありがとうございます!!嬉しいです~~

最近あのリンクに雑誌にも載ったお料理ブログ管理人様が
投稿してくださいました。(昨年のふじっこレシピでグランプリの方です♪)

これもdanielさんのおかげです!ありがとうございます☆

daniel daniel Edit
01/07 07:57

新着印表示機能付きのHTMLソースを記事にしましたので
今までのソースと差し替えてお使い下さい。
何かありましたら 御遠慮なくそちらの記事の方でお尋ね下さい

( ところで「お料理」はblogと相性の良いテーマだと思いますね
 個人的にも好きなジャンルで 自分でやりたいくらいです  ^^)

三毛猫 三毛猫 Edit
01/08 23:51

danielさん、凄いです!もうばっちりです!
もうこれで何も思い残すことはありません~~!!
感謝!感謝です!!

実は前の英語(ソースといいますか?)と今度のではどこが違うのか
調べもせず張り替えました。勉強もしないですみません。
でも出来たので嬉しいです!!
本当にありがとうございました☆

PS・・danielさんもお料理がお好きなんですか?
私も大好きです~~(^-^)


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/49-4c0a1156

Shown after Admisson
PukiWiki/TrackBack 0.1 *
現在:2 今日:0 昨日:0 累計:0 カテゴリイ表示の手動階層化 &dagger;  カテゴリイは、FC2ブログでは、http://blog1.fc2.com/userid/?cat=n (useridは各自のuserid名、nはカテゴリイ番号)によって特定されるので、カテゴリイの階層化表示に対応していない現状において...
Old Dancer's BLOG *
 あっ!ちゅー間に2000超えちゃいました。(゚д゚ )ポカーン 1000超えたのって10日ぐらい前じゃなかったでしたっけ…。オイラ一体どうなっちまうんだ…。いやいや、一杯ご覧いただいて、ホントにどうもありがとうございます。 さて、2000達成を記念しまして、最近のコメ
こばやし家のお弁当 *
JUGEMが重い状態があまりに長く続いており、もう辛抱できませんので、やはりこちらに移転してくることに決めました。・ブックマークして下さっている方は、恐れ入りますがURLの変更をお願いいたします。Yahoo、BlogPeople、MyBlogListには、URL変更を依頼済みです。(了承はま
web素材「はっぴ~・フリー」 *
黒背景でシンプルな2カラムを作ってみました。サイドバーにコメントを表示させるようにしてみました。画像はセイニィさんから頂いた物をしようしています。サイドバーが大きめの為カテゴリーにはサンプルで使ってるようなツリー表示などさせるのによいと思います。サンプルで
case of B *
カテゴリのジャンル別けは以前からあったらいいなぁと思ってたことなのですが、自分で直接HTMLカスタマイズして表示させると新しいカテゴリが追加された時に結局またHTMLを書き直さなきゃならんわけで、blog使ってる意味ないじゃーんということに気付いた。どうにかならんか
.

≫ エントリのリスト化 一時撤収 ≪

2005 / 01 / 21  Fri
Navigation   
Comment 31 / TB 5 / Edit
Designed by Daniel Corporation . all rights renounced
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。