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

コメントのフラグメントを動的に切り替える

Movable Type のブログ記事アーカイブにある、コメントのフラグメントを動的に切り替えるカスタマイズです。

「フラグメント」とは「文書の特定の場所へのリンク」のことです。フラグメントに対応する、コメントへのリンクのフラグメント識別子（URLの#以降の部分）は、今回の場合、次のようになっています。

http://user-domain/2008/03/post.html#comments

今回実現したい、フラグメントによるリンクは次の通りです。

• ブログ記事にコメントが投稿されている場合、メインページに表示されているコメントへのリンクをクリックすると、その先頭にジャンプする
• ブログ記事にコメントが投稿されていない場合、メインページに表示されているコメントへのリンクをクリックすると、コメント投稿フォームにジャンプする

デフォルトテンプレートのコメント関連のマークアップは次のようになっています。投稿コメントおよびコメントフォーム全体を div 要素で括り、フラグメントとなる id 属性（赤色）を付与しているので、投稿コメントの有無に依存せず、常にフラグメントが存在します。

<MTIfCommentsActive>
<div id="comments" class="comments">
    <MTIf name="comment_preview_template">
    <$MTInclude module="コメント入力フォーム"$>
    </MTIf>
    <MTComments>
        <MTCommentsHeader>
    <h2 class="comments-header">コメント(<$MTEntryCommentCount$>)</h2>
    <div class="comments-content">
        </MTCommentsHeader>
        <$MTInclude module="コメント詳細"$>
        <MTCommentsFooter>
    </div>
        </MTCommentsFooter>
    </MTComments>
    <MTUnless name="comment_preview_template">
    <$MTInclude module="コメント入力フォーム"$>
    </MTUnless>
</div>
</MTIfCommentsActive>

問題となるのは、コメント全体に対してフラグメントが設定できないマークアップになっている場合です。

例えば次のようなマークアップを想定します。

<MTIfCommentsActive>
<MTIf name="comment_preview_template">
<div>
    <$MTInclude module="コメント入力フォーム"$>
</div>
</MTIf>
 
<MTComments>
    <MTCommentsHeader>
<h2 id="comments" class="comments-header">コメント(<$MTEntryCommentCount$>)</h2>
<div class="comments-content">
    </MTCommentsHeader>
    <$MTInclude module="コメント詳細"$>
    <MTCommentsFooter>
</div>
    </MTCommentsFooter>
</MTComments>
 
<MTUnless name="comment_preview_template">
<div>
    <$MTInclude module="コメント入力フォーム"$>
</div>
</MTUnless>
</MTIfCommentsActive>

このマークアップでは、もし投稿コメントがひとつもないと、MTComments 内部が実行されず、フラグメントも表示されないため、コメントのリンクをクリックするとページのトップにジャンプすることになります。
つまり、投稿コメントの有無によって、フラグメントの出力位置を切り替える必要があります。

この問題を解消するには、次のようにコメント入力フォーム部分に MTIfNonZero を追加し（青色部分）、投稿コメント件数が0の場合だけ id 属性を表示するようにします。

<MTIfCommentsActive>
<MTIf name="comment_preview_template">
<div>
    <$MTInclude module="コメント入力フォーム"$>
</div>
</MTIf>
 
<MTComments>
    <MTCommentsHeader>
<h2 id="comments" class="comments-header">コメント(<$MTEntryCommentCount$>)</h2>
<div class="comments-content">
    </MTCommentsHeader>
    <$MTInclude module="コメント詳細"$>
    <MTCommentsFooter>
</div>
    </MTCommentsFooter>
</MTComments>
 
<MTUnless name="comment_preview_template">
<div<MTIfNonZero tag="MTEntryCommentCount"><MTElse> id="comments"</MTIfNonZero>>
    <$MTInclude module="コメント入力フォーム"$>
</div>
</MTUnless>
</MTIfCommentsActive>

なお、コメント入力フォームの MTInclude が2ヶ所ありますが、最初に現れる、MTIf タグで括られた方は、コメントプレビュー時しか表示されない（=フラグメントの対象にならないため）ので、対処する必要はありません。

参考記事：文書の特定の場所へのリンク