Movable Type 備忘録

 
  

 MovableTypeのカテゴリ一覧などをツリー表示する２

こんにちわ^^

今日は母の日ですね。
わたしは今日はチョビッと用があるので、昨日実家に帰って親孝行してきました (●´∀｀●)

有楽町に買い物行ったり、地元の高島屋で買い物したり･･･買い物しかしてなかったりしますが (;￣∇￣A

さて、今回はカテゴリ一覧をツリー表示するカスタマイズのご紹介です。

以前、こちらのMovableTypeのカテゴリ一覧などをツリー表示するでも紹介したことりますが、今回はエクスプローラ風なツリー表示をやってみました。

エクスプローラ風なツリー表示は、こちらのDestroydropさんのところで配布しているJavaScript+CSSで見映えよく表示できます。

以下にわたしのサイトのカテゴリ一覧を表示してみます。

open all | close all

ディレクトリ構成

今回は以下のようなディレクトリ構成として説明していきます。

http://●●●.com/
|
+-- index.html         <-- 各自のトップページ
+-- styles-site.css    <-- 各自のスタイルシート
|
+-- js/
|    +-- dtree/        <-- 新規作成
|    |    +-- dtree.js
|    |    +-- dtree.css
|    |    |
|    |    +-- img/
|    |    |    +-- base.gif
|    |    |    |      :
|    |    |    |      :
|    |    |    +-- trash.gif

カスタマイズ

  1. まず、JavaScriptを入手します。
    こちらのTreeからdtree.zipという圧縮ファイルをダウンロードします。

    そして適当なフォルダに展開します。

  2. 次に、dtree.jsを修正します。
    修正内容は以下の通りです。

    dtree.js

    1. root : 'http://●●●.com/js/dtree/img/base.gif',
    2.  
    3. folder : 'http://●●●.com/js/dtree/img/folder.gif',
    4.  
    5. folderOpen : 'http://●●●.com/js/dtree/img/folderopen.gif',
    6.  
    7. node : 'http://●●●.com/js/dtree/img/page.gif',
    8.  
    9. empty : 'http://●●●.com/js/dtree/img/empty.gif',
    10.  
    11. line : 'http://●●●.com/js/dtree/img/line.gif',
    12.  
    13. join : 'http://●●●.com/js/dtree/img/join.gif',
    14.  
    15. joinBottom : 'http://●●●.com/js/dtree/img/joinbottom.gif',
    16.  
    17. plus : 'http://●●●.com/js/dtree/img/plus.gif',
    18.  
    19. plusBottom : 'http://●●●.com/js/dtree/img/plusbottom.gif',
    20.  
    21. minus : 'http://●●●.com/js/dtree/img/minus.gif',
    22.  
    23. minusBottom : 'http://●●●.com/js/dtree/img/minusbottom.gif',
    24.  
    25. nlPlus : 'http://●●●.com/js/dtree/img/nolines_plus.gif',
    26.  
    27. nlMinus : 'http://●●●.com/js/dtree/img/nolines_minus.gif'

    青い字の部分を各自の環境に合わせて修正します。

  3. 次にサーバにアップロードします。
    アップロード先はどこでも構いません。各自の環境に合わせてアップロードしてください。

    とりえあず、ここでは上記ディレクトリ構成のようにアップロードします。
    dtree/という名前のディレクトリを新規作成して、その中にすべてをアップロードします。

  4. 最後に各テンプレートのカテゴリ一覧を変更します。
    上記サンプルで表示したカテゴリ一覧のコードを以下に記します。

    カテゴリ一覧のコード

    1. <script type="text/javascript">
    2. <!--
    3. document.write('<style type="text/css">@import url(<$MTBlogURL$>js/dtree/dtree.css);</style>');
    4. //-->
    5. </script>
    6. <script type="text/javascript" src="<$MTBlogURL$>js/dtree/dtree.js"></script>
    7.  
    8. <div id="category-tree">
    9. <p><a href="javascript: a.openAll();">open all</a> | <a href="javascript: a.closeAll();">close all</a></p>
    10.  
    11.     <script type="text/javascript">
    12.     <!--
    13.         var node = new Array;
    14.         var depth = 0;// 階層
    15.  
    16.         a = new dTree('a');
    17.         a.config.useCookies = false;
    18.         a.add(0, -1, '<$MTBlogName encode_html="1"$>', '<$MTBlogURL$>');
    19.  
    20.         node[depth] = 0;
    21.  
    22.         <MTTopLevelCategories>
    23.         <MTIfNonZero tag="MTCategoryCount">
    24.             a.add(<$MTCategoryID$>, node[depth], '<$MTCategoryLabel$> (<$MTCategoryCount$>)', '<$MTCategoryArchiveLink$>');
    25.         <MTElse>
    26.             a.add(<$MTCategoryID$>, node[depth], '<$MTCategoryLabel$> (<$MTCategoryCount$>)', 'javascript:void(0);');
    27.         </MTElse>
    28.  
    29.         <MTHasSubCategories>node[++depth] = <$MTCategoryID$>;</MTHasSubCategories>
    30.         </MTIfNonZero>
    31.  
    32.         <$MTSubCatsRecurse max_depth="3"$>// 3階層分表示
    33.  
    34.         <MTEntries lastn="3">// 最近のエントリ3件分表示
    35.         a.add(<$MTEntryID$>, <$MTCategoryID$>, '<$MTEntryTitle$>', '<$MTEntryPermalink$>');
    36.         </MTEntries>
    37.  
    38.         <MTSubCatIsLast>depth--;</MTSubCatIsLast>
    39.         </MTTopLevelCategories>
    40.  
    41.         document.write(a);
    42.     //-->
    43.     </script>
    44. </div>

    青い字の部分を各自の環境に合わせて変更します。
    赤い字の部分は、親ディレクトリとなるカテゴリIDを指定しています。 緑の字の部分にはカテゴリIDを指定します。子ディレクトリはここで指定した親ディレクトリのカテゴリIDを指定することになります。

    既存のカテゴリ一覧を差し替えます。

以上で完了です。 あとは再構築して表示確認します。

表示されなかった場合には、URLが間違っていないか再度確認します。

ちなみに、ブログのPHP化している人は以下の手順で共有化できます。

  1. カテゴリ一覧用のインデックス・テンプレートを作成します。
    MovableType(ムーバブルタイプ)の管理画面からブログを選択して、左サイドバーにある「テンプレート」をクリックします。

    そして、右上にある「テンプレートを新規作成 」をクリックしてください。
    入力内容はお好みで構いません。

    たとえば、テンプレート名(=カテゴリ・ツリー)、出力ファイル名(=category-tree.php)などのようにします。
    テンプレートの内容には上記コードのURLを変更したものをコピペして再構築してください。

  2. 各テンプレートを変更します。
    以下のコードを既存のカテゴリ一覧と差し替えます。

    カテゴリ一覧・PHP化

    1. <?php include('<$MTBlogURL$>/category-tree.php'); ?>

    青い字の部分を各自の環境に合わせて変更します。

  3. 各テンプレートのカテゴリ一覧を変更したら再構築します。

- 2007.12.09 追記 -

小粋空間さんとこで、dtree の詳細が公開されてました。
ツリー表示 JavaScript 「dTree」詳解

以上です。

  • Edit
  • Permalink
  • Comments(24)
  • Trackbacks(0)
  

 Trackback Pings(0)

No trackbacks found.

 Comments(24)

#1: Posted by arata @ May 13, 2007 [REPLY]
user-pic

こんにつは_(．．)_
このツリー表示、面白いですねー。
エクスプローラー・ライクなテンプレートとか作れちゃいそうですね。

 
#2: Posted by bzbell @ May 13, 2007 [REPLY]
user-pic

>>1 arata さん

こんにちわ^^

ですね♪

今ね、トラックバック一覧とコメント一覧をカスタマイズ中なの (●＞∀＜●)

 
#3: Posted by かわぐち @ July 20, 2007 [REPLY]
user-pic

ども、かわぐちです。

うひょっ！これいいですね。
早速、導入しちゃいました。
ありがとうございます。

 
#4: Posted by bzbell @ July 21, 2007 [REPLY]
user-pic

>>3 かわぐち さん

こんばんわ^^

カンタンに設置できるし、それなりにカスタマイズも可能なのでわたしも気に入ってます♪

 
#5: Posted by Author Profile Page うに @ December 7, 2007 [REPLY]
user-pic

こんにちわ。

度々お世話になります。
うにです。

階層別にツリー状に分けられた方が来訪者にとって見易いと思い、こちらを組み込んでみましたが[トラックバックとコメント]のdtreeと重複してしまい正常に動作しません。

両方のソースからdtree.jsの取り込みを切り取ってヘッダーに追記してみましたが階層別カテゴリが動いてくれません。

これは[カテゴリ一覧（ツリー）]と[トラックバックとコメント（ツリー）]の共存は不可能なんでしょうか？

今日は色々と質問してしまいすいませんです＞＜；

 
#6: Posted by Author Profile Page bzbell @ December 7, 2007 [REPLY]
user-pic

>>5 うに さん

> 階層別にツリー状に分けられた方が来訪者にとって見易いと思い、こちらを組み込んでみましたが[トラックバックとコメント]のdtreeと重複してしまい正常に動作しません。

共存はできますが、それをやるにはひと工夫必要です。

> 今日は色々と質問してしまいすいませんです＞＜；

ぜんぜん OK です♪

 
#7: Posted by Author Profile Page うに @ December 7, 2007 [REPLY]
user-pic

>>6 bzbell さん

>共存はできますが、それをやるにはひと工夫必要です。

自分なりにいろいろと弄ってみたものの・・・
もう頭がパンクします...orz...

とりあえず諦めて何か他に階層別で表示できないか探してみます。

ありがとうございました。

 
#8: Posted by Author Profile Page bzbell @ December 7, 2007 [REPLY]
user-pic

>>7 うに さん

> とりあえず諦めて何か他に階層別で表示できないか探してみます。

しょうがないですねぇ (;￣∇￣A
以前、他の人からも同様のこと言われてアドバイスしたことあるので、今回は記事にしますので参考にしてください。

と、思ったけど、うに さん 別な形で実現されてるようなので OK ですね。

 
#9: Posted by Author Profile Page うに @ December 7, 2007 [REPLY]
user-pic

>>8 bzbell さん

>と、思ったけど、うに さん 別な形で実現されてるようなので OK ですね。

とりあえず階層別に段落分けて表示ができればよかったんでスタイルシートとMTSubCatIsFirstを使って表現は出来たんですけど、贅沢を言っちゃうと[線]が欲しいですね。

何か方法ないですか？
やっぱｊｓを使う形になっちゃいますかねぇ

 
#10: Posted by Author Profile Page bzbell @ December 8, 2007 [REPLY]
user-pic

>>9 うに さん

> 贅沢を言っちゃうと[線]が欲しいですね。

うん、JavaScript じゃないとツリー構造にするのはムズかしいかも、ですね。
ちょっと待っててください。今作ってますから (●´∀｀●)

 
#11: Posted by Author Profile Page うに @ December 8, 2007 [REPLY]
user-pic

>>10 bzbell さん

>ちょっと待っててください。今作ってますから (●´∀｀●)

おぉぉぉ
助かります～^^

いつまでも待ってます！

 
#12: Posted by Author Profile Page bzbell @ December 8, 2007 [REPLY]
user-pic

>>11 うに さん

お待たせしました。
記事にしようかと思ったけど･･･面倒になっちゃったからコメントで済ませます (;￣∇￣A はは

  1. 以下のファイルをダウンロードします。
    dtree.posts.zip

  2. dtree.post.js テンプレートを、新しい dtree.post.js で上書きして再構築します。

  3. この時点で今まで通りコメント／トラックバックツリーが表示されることを確認します。

  4. カテゴリ一覧を以下と差し替えます。

    <div class="widget-categories widget">
<script type="text/javascript" src="http://bizcaz.com/js/dtree/dtree.js"></script>
<script type="text/javascript" src="http://bizcaz.com/js/dtree/dtree.posts.js"></script>
<h3 class="widget-header">Categories</h3>
<div class="widget-content">
<script type="text/javascript">dtree_categories();</script>
<p><a class="imgbutton" href="javascript: b.openAll();"><span>OPEN ALL</span></a>
<a class="imgbutton" href="javascript: b.closeAll();"><span>CLOSE ALL</span></a></p>
</div>
</div>

    ここで気をつけることは、dtree.js と dtree.post.js は必ずページ内で一回だけ読込むようにします。重複して読込んでしまうとエラーしますのでご注意ください。

    てか、素直に XHTML ヘッダ(<head>～</head>)に移動してください。

  5. サイト全体を再構築します。

以上です。

 
#13: Posted by Author Profile Page うに @ December 8, 2007 [REPLY]
user-pic

>>12 bzbell さん

>お待たせしました。

お待ちしておりました!!!

>以下のファイルをダウンロードします。

リンク先がありません!!!

　　　...orz...

>てか、素直に XHTML ヘッダ(～)に移動してください。

既に移動済みです^^

 
#14: Posted by Author Profile Page bzbell @ December 8, 2007 [REPLY]
user-pic

>>13 うに さん

あっ Σ(￣Д￣；)!!
わたしってば･･･アップしましたのでダウンロードしてください。

さっき言い忘れましたけど、別途 CSS でコメント／トラックバックツリーと同様にデザインしてください。

 
#15: Posted by Author Profile Page うに @ December 8, 2007 [REPLY]
user-pic

>>14 bzbell さん

>アップしましたのでダウンロードしてください。

ありがとうございます。

>ここで気をつけることは、dtree.js と dtree.post.js は必ずページ内で一回だけ読込むようにします。重複して読込んでしまうとエラーしますのでご注意ください。

ウィジェットテンプレートから抜いてヘッダーだけでの読み込みになっているので重複エラーではないんですが、うまく表示してくれませんねぇ。。。

 
#16: Posted by Author Profile Page bzbell @ December 8, 2007 [REPLY]
user-pic

>>15 うに さん

> ウィジェットテンプレートから抜いてヘッダーだけでの読み込みになっているので重複エラーではないんですが、うまく表示してくれませんねぇ。。。

インデックス・テンプレート一覧の dtree.post.js を新しいので上書きして再構築してますか!?
JavaScript エラーしてますよ。

 
#17: Posted by Author Profile Page うに @ December 8, 2007 [REPLY]
user-pic

>>16 bzbell さん

>インデックス・テンプレート一覧の dtree.post.js を新しいので上書きして再構築してますか!?

はい。
年の為もう一度上書き転送して再構築してみましたが変わらないです。

 
#18: Posted by Author Profile Page bzbell @ December 8, 2007 [REPLY]
user-pic

>>17 うに さん

こんにちわ^^

> 年の為もう一度上書き転送して再構築してみましたが変わらないです。

う～ん･･･でも、わたしお作りした JavaScript になってないようです。
なので、dtree_categories というものがないよって怒られてます (;￣∇￣A

 
#19: Posted by Author Profile Page うに @ December 8, 2007 [REPLY]
user-pic

>>18 bzbell さん

こんばんわ^^

昨晩はFFFTPを使って上書き転送してたのがいけなかったようで。

インデックステンプレートのJavaScript(dtree.posts.js)にコピペして保存/再構築をしたら、今度は重複エラーが出てしまっているようです。。。

[Stack overflow at line 244]

これって重複エラーですよね？

今回追加したカテゴリツリーを外すとエラーは出なくなるので、カテゴリツリーに何かしらの原因があるとは思うんですが・・・

ちょっと確認してもらっても宜しいでしょうか？

 
#20: Posted by Author Profile Page bzbell @ December 9, 2007 [REPLY]
user-pic

>>19 うに さん

こんばんわ^^

> [Stack overflow at line 244]

いえ、メモリオーバーフローエラーです。
原因はブログ公開して間もない時に起こる現象でして、カテゴリ ID、エントリ ID が若い番号(1 ～)なので、その ID が重複してしまった為に起こったエラーでした。

対策したバージョンをアップしたのでご確認ください (;￣∇￣A

 
#21: Posted by Author Profile Page うに @ December 9, 2007 [REPLY]
user-pic

>>18 bzbell さん

サーバー戻りました？ね^^

新しいファイルのアップありがとうございます。
お陰様で無事ツリー表示させる事が出来ました。
(_ _(--;(_ _(--; ﾍﾟｺﾍﾟｺ

ひとつお聞きしたいのですが・・・
最下層のカテゴリのアイコンがページアイコンになってるんですが、これはフォルダアイコンには出来ないんでしょうか？

すいませんもひとつ。
ページを表示させた時にカテゴリツリーを全展開させて表示させる事は可能でしょうか？

 
#22: Posted by Author Profile Page うに @ December 9, 2007 [REPLY]
user-pic

>>20 bzbell さん

度々ごめんなさい。
ツリーを眺めててちょっと思った事が。。。

ツリーの初めに表示されているアイコンですが、アイコンの淵に白枠？のような物が表示されていますが、アイコンのイメージソースはコメントツリーと同じところを見ているんですよね？

コメントツリーではフォルダマークに白枠は出ていないのにカテゴリツリーには表示がある。

すいません細かくって・・・
せっかくかっこよくなってきたのであまり妥協はしたくないもので・・・＞＜；

 
#23: Posted by Author Profile Page bzbell @ December 9, 2007 [REPLY]
user-pic

>>21 うに さん
>>22 うに さん

> サーバー戻りました？ね^^

はい。でも サーバの知識がないので CORESERVER わたしには荷が重いのかも (￣。￣lll)

> 最下層のカテゴリのアイコンがページアイコンになってるんですが、これはフォルダアイコンには出来ないんでしょうか？

カテゴリは何階層分作られてます!?
デフォルトでは 3 階層までとしてますので、dtree.post.js 内の 64 行目を うにさん のサイトに合わせて変更してください。

> ページを表示させた時にカテゴリツリーを全展開させて表示させる事は可能でしょうか？

はい、できます。
すべて全開バージョンをアップしましたのでご確認ください。

> ツリーの初めに表示されているアイコンですが、アイコンの淵に白枠？のような物が表示されていますが、アイコンのイメージソースはコメントツリーと同じところを見ているんですよね？

いいえ、違います。
デフォルトでは dtree/img/ 配下が参照されます。
コメントツリーの方はわたしが白枠消したものなんですの。
コメントツリーと同じところを参照するよう修正しましたので合わせてご確認ください。

 
#24: Posted by Author Profile Page うに @ December 9, 2007 [REPLY]
user-pic

>>23 bzbell さん

何から何までありがとうございました。

また面白そうなプラグイン見つけたら相談させて頂きます＾＾

 
 

 Post a Comment

 

コメント用フィード