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

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

Posted at March 17,2008 1:00 AM
Tag:[Comment, Customize, MovableType]

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 タグで括られた方は、コメントプレビュー時しか表示されない(=フラグメントの対象にならないため)ので、対処する必要はありません。

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

関連記事
zenback
人気エントリー
トラックバックURL


コメント

 大変お忙しい折、面倒くさいお願いで真に恐縮です。お手透きのときで構いません。相談に乗っていただけませんか?。
 コメントをどこに書き込んでいいかも分かりません。もし、場所違いで、適切な場所をお教えいただければ、そちらに移動します。

 「最近のコメント」の表示が壊れ、フロントページから該当ページにリンクしなくなりました。
 カスタマイズの都合で、最近、サーバーのphpディレクトリとplaginsディレクトリをいじりました。そのとき、手違いで両方のディレクトリを抹消してしまい、プラグインも全て消去してしまいました。間違いに気づいたので、半年位前に偶然ダウンロードしてあったphpディレクトリとplaginsディレクトリを、再度サーバーにアップロードしました。このとき、プラグインは全て回復したと思っていました。
 その後、新規エントリーを行い、ブログを構築したところ、「最近のコメント」の表示が壊れてしまいました。
 sixapartテクニカルサービスに聞いたところ、「以前使用されていた外部プラグインが、現在インストールされておらず、外部プラグインが提供するタグが Movable Type で認識できないことが原因と思われます」。という返事でした。

 さて、過去にどんな外部プラグインを入れたか、記憶がおぼろです。カスタマイズは、全て小粋空間さんを利用させてもらいました。どの外部プラグインが入ってないか、専門家の目で判断つかないものでしょうか。もし、分かれば大変有り難いのですが。

 ちなみに、indexテンプレートのコメント部分を添付します。

<!-- 最近のコメント開始 -->
<MTCollateCollect>
<MTComments lastn="10">
<MTCollateRecord>
<MTCollateSetField name="comment_id"><$MTCommentID$></MTCollateSetField>
<MTCollateSetField name="comment_author"><$MTCommentAuthor encode_html="1" default="Anonymous"$></MTCollateSetField>
<MTCollateSetField name="comment_date"><$MTCommentDate format="%m/%d"$></MTCollateSetField>
<MTCollateSetField name="comment_newdate"><$MTCommentDate format="%Y:%m:%d:%H:%M:%S"$></MTCollateSetField>
<MTCommentEntry>
<MTCollateSetField name="entry_key"><MTComments lastn="1"><$MTCommentDate format="%y%m%d%H%M%S"$></MTComments></MTCollateSetField>
<MTCollateSetField name="entry_link"><$MTEntryPermalink$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle encode_html="1"$></MTCollateSetField>
</MTCommentEntry>
</MTCollateRecord>
</MTComments>
</MTCollateCollect>
<div class="sidetitle">
Recent Comments
</div>
<div class="side">
<MTCollateList sort="entry_key:#:- comment_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>" title="<$MTCollateField name="entry_title" encode_html="1"$>"><$MTCollateField name="entry_title"$></a><br /></MTCollateIfHeader>
└ <a href="<$MTCollateField name="entry_link"$>#<$MTCollateField name="comment_id"$>" encode_html="1"><$MTCollateField name="comment_author"$></a> <$MTCollateField name="comment_date"$><span class="new"><$MTCollateField name="comment_newdate"$></span><br />
</MTCollateList>
</div>
<!-- 最近のコメント終了 -->

[1] Posted by かたし : May 20, 2008 9:19 PM

お騒がせしました。直りましたので(1)は、撤回します。

[2] Posted by かたし : May 20, 2008 11:32 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)