FCafe ツリー化統合

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

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

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

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

head 領域
<script type="text/javascript"></script>
　　　　　　　　★この色の行は LINK を別窓で開く為のものです　（不要なら削除可）

　　各リスト部

<script type="text/javascript">
getItem("分類元要素","個別表示要素","リンク要素","付加情報１","付加情報２");
</script>
<noscript>
　　＊デフォルトの記述（スクリプトoffで表示）
</noscript>

<script type="text/javascript">mkTree()</script>

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

当ｂｌｏｇのコメントリストの場合を例に挙げますと、
１元記事のタイトル　　　"<%rcomment_etitle>"
２投稿者名　　　　　　　"<%rcomment_name>"
３コメントのアドレス　　"<%rcomment_link>#comment<%rcomment_no>"
４コメントのタイトル　　　"<%rcomment_title>"
５投稿月日　　　　　　　"　<%rcomment_month><%rcomment_day>"

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

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

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

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

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

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

Comment

★ みんとみんと Edit 01/23 03:25	初めまして。「cfdn_p」のテンプレートでも設置可能でしょうか？このテンプレート、リンクごとに区切り線みたいのでマウスカーソルを置くと、背景色が変わるようになっています。これ自体はとっても気に入ってるんですが・・リンクリストをツリー化というのは、是非やってみたいので＾＾；
★ daniel daniel Edit 01/23 10:35	ようこそ　みんとさんお早うございます。はい、（基本的に）どんなテンプレートでも設置可能です。ただ、ツリー化されたリストはプレーンなリストとは性状が異なります。 cfdn_pはリスト項目全部にリンクを載せているので　ＣＳＳ設定であのような表示形式にできるのですが、　私のスクリプトそのままですと、ツリー線（”├ ”）にはリンクが載っていませんので、（ＣＳＳを設定しても）行全幅の背景色は変化しません。そうするには　第４引数を使用せず　表示項目は全て第２引数に記述し、関数　mkTree　書き出し部の a0 という変数をリンクタグの内側（p[1]の前）に移してやります。（ツリー線と混在すると不自然ですからＣＳＳでborderは解除します）　　・・・と、このように、このスクリプトはちょっと知識があれば　色々と変更・応用がきくのです。
★ - - Edit 01/24 05:14	管理人のみ閲覧できますこのコメントは管理人のみ閲覧できます
★ ｄａｎｉｅｌｄａｎｉｅｌ 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	管理人のみ閲覧できますこのコメントは管理人のみ閲覧できます
★ ｄａｎｉｅｌｄａｎｉｅｌ Edit 01/26 18:50	粗末ですがサポート掲示板を設置しました。設置に関する　御質問等はこちらで承ります。
★ chelsea chelsea Edit 01/31 16:46	使わせてもらいました初めまして。カテゴリが煩雑になって困っていたところこちらを拝見し、四苦八苦しましたが何とかツリー化することができました。どうもありがとうございました。
★ daniel daniel Edit 01/31 17:45	こちらこそ御利用いただき有難うございます。お弁当blog、Ｊで拝見したことありますよ。　　・・カテゴリが２０以上あると大変？ですよね。ＪＵＧＥＭからいらっしゃる方が多いように感じるのは気のせいでしょうか。同郷のよしみ？で　今後ともよろしくお願い申し上げます。
★ はっぴーはっぴー Edit 02/28 19:41	はじめまして。配布しているテンプレートのサンプルに使用させていただきＴＢさせてもらいました。もし宜しければですがこの配布してるテンプレに設置する方法をソース付で記事に書かせていただきたいのですがいかがでしょうか？
★ ｄａｎｉｅｌｄａｎｉｅｌ Edit 02/28 20:42	光栄です　はっぴーさん、ようこそ今晩は。拙blogの記事は、罵倒・引用・使用・改変・再配布、全てフリーです。私のような半端者の手遊びを御目に留めていただけるなんて光栄の至り。御紹介くださるなんてこちらからお頼みしたいくらいでありますよ。これを機に、今後とも　どうぞ宜しくお願い申し上げます　m(＿)m
★ はっぴーはっぴー Edit 03/01 17:35	ありがとうごさまいます許可いただきありがとうございました。早速記事に書かせていただきました。こちらこそよろしくお願いします。
★ ばっちばっち Edit 03/09 22:40	使わせていただきました最近、F2Cに乗り換えた者です。カテゴリのジャンル別けは以前から“できたらいいなぁ”と思っていたのでこちらのソースを発見して設置し、感激しました。ありがとうございました。これからも頑張ってください。
★ ｄａｎｉｅｌｄａｎｉｅｌ Edit 03/10 10:00	ありがとうございますばっちさんはじめまして。ｓｅｅｓａａをお使いでしたか。　（私はＪＵＧＥＭからです ) ＦＣ２のｂｌｏｇは　「これが無料でいいのか」　と思わされるくらい良いですよヘタレなソースを使っていただいて私も感激しております。まだまだですが、これからも頑張るつもりですので、とうぞ宜しくお願いします
★ 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 の御利用有難うございます。　記事タイトルを太く表示したくないのであれば　テンプレートＣＳＳ末尾に以下を追加してみて下さい。 #RC p b {font-weight:normal}
★ しょーきしょーき Edit 12/31 23:12	お返事ありがとうございます！さっそくＣＳＳに追加してみたところ、その場のプレビューでは反映されるのですが更新して普通に開くともとの太字のままに戻ってしまいます…単に私のやり方が悪いのでしょうか；；
★ daniel daniel Edit 12/31 23:50	ブラウザがＣＳＳをキャッシュしている為と思われます。確認させていただきましたが　ちゃんと太字が解除されていますよ。
★ 三毛猫三毛猫 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さんに教えてもらった自動リンクですが、例えば２４時間以内に投稿してもらったリンクにｎｅｗマークとかつけられますか？もしできる様だったら、お手数ですがご伝授ください。お願いします♪
★ 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さん、凄いです！もうばっちりです！もうこれで何も思い残すことはありません～～！！感謝！感謝です！！実は前の英語（ソースといいますか？）と今度のではどこが違うのか調べもせず張り替えました。勉強もしないですみません。でも出来たので嬉しいです！！本当にありがとうございました☆ ＰＳ・・danielさんもお料理がお好きなんですか？私も大好きです～～（^-^）

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

Shown after Admisson

PukiWiki/TrackBack 0.1 *

現在:2 今日:0 昨日:0 累計:0 カテゴリイ表示の手動階層化 † 　カテゴリイは、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

FCafe ツリー化統合

Comment

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

FCafe　ツリー化統合

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