小粋空間  -  a cheap joke and a play on words site

新着エントリーの New マークを親カテゴリーに表示する

先日エントリーした「新着エントリーに New マークをつける」で「サブカテゴリーリストを折りたたんだ状態で親カテゴリーにもNewマークを表示させたい」というご要望をいただきましたので、本エントリーにてご紹介します。 このカスタマイズを行うことで、スクリーンショットのように子カテゴリー [Linux] を新規エントリーした際、最上位の親カテゴリー [趣味] にも New マークを表示します（折りたたみマークは割愛）。 以下、カスタマイズ方法です。

１．サブカテゴリー構成が2階層の場合

サブカテゴリー構成が2階層の場合、親カテゴリーに子カテゴリーの新着エントリーの日付を反映させることで、New マークを表示させます。ただし New マークは全ての親カテゴリーに反映されるので、3階層以上のカテゴリー構成の場合は２項をご利用ください。

１．１ サブカテゴリーリストの修正

サブカテゴリーリストの折りたたみ用タグ（下記）に青色部分を追加します。

<!-- サブカテゴリー用 -->
<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <span class="new"><MTEntriesWithSubCategories lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntriesWithSubCategories></span><MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <span class="new"><MTEntriesWithSubCategories lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntriesWithSubCategories></span>
<MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
<!-- サブカテゴリー用 -->

１．２ スクリプトの設定・CSSの設定

スクリプトの設定・CSSの設定については新着エントリーに New マークをつけるを参照ください。

２．サブカテゴリー構成が3階層以上の場合

サブカテゴリー構成が3階層以上の場合は、途中の親カテゴリーに New マークを表示させないようにするため、１項とは設定内容が異なります。

２．１ サブカテゴリーリストの修正

サブカテゴリーリストの折りたたみ用タグ（下記）に青色部分を追加してください。

<!-- サブカテゴリー用 -->
<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <span class="new"><MTEntries lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$>:</MTEntries><MTTopLevelParent><$MTCategoryID$></MTTopLevelParent></span><MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <span class="new">00:00:00:00:00:00:<MTTopLevelParent><$MTCategoryID$></MTTopLevelParent></span><MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
<!-- サブカテゴリー用 -->

２．２ スクリプトの追加

下記のスクリプトを２．１項のタグの下に追加してください。

<script type="text/javascript">
<!--
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date();
var spans = document.getElementById('categories').getElementsByTagName('span');
var list = new Array();
for (i = 0; i < spans.length; i++) {
    if(spans[i].getAttribute('class') == 'new' ||
     spans[i].getAttribute('className') == 'new') {
        time = spans[i].childNodes[0].nodeValue.split(":");
        var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
        list.push(time[6]);
        var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
        now = Math.ceil(now);
        if(-now <= pass){
            spans[i].innerHTML = content;
            spans[i].style.display = 'inline';
            for(j = 0; j < list.length; j++){
                if(list[j] == time[6]){
                    spans[j].innerHTML = content;
                    spans[j].style.display = 'inline';
                    break;
                }
            }
        }
    }
}
//-->
</script>

このスクリプトの動作ですが、各カテゴリーの日付の最後に最上位の親カテゴリーIDを予め付与しておき、新着エントリーがあった場合にその親カテゴリーIDのカテゴリーを再検索して、New マークを与えています。

２．３ CSSの設定

CSSの設定については新着エントリーに New マークをつけるを参照ください。

2006.02.28 追記
２．２項、３項でエントリーが存在しない親カテゴリーの考慮がもれていましたのでタグを修正しました。

2006.08.19 追記
記事を全面修正しました。