« いつ落ち着くのですかねぇ<ココログのシステムトラブル | トップページ | いつ買ったんだっけか?な書籍リストその1 »

2006/04/20

【ココログプロ】『コメント一覧/トラックバック一覧を記事毎にまとめて表示するJavaScript』(日付範囲指定つき)

『コメント一覧/トラックバック一覧を記事毎にまとめて表示するJavaScript』(日付範囲指定つき)を作成してみました。
指定した日付範囲のコメントまたはトラックバックの一覧を、記事毎にまとめて表示します。
ココログ標準の『最近のトラックバック』ではどこの記事に付いたトラックバックなのかわからないのが不満だったのですが、これで少しは便利になったかも???

残念ながら【ココログプロ】で【上級者向けテンプレートセット】を使用している方専用となりますが、該当する方はもし宜しければ一度お試し下さい。

もしかするとココログプロの他にもテンプレートを変更可能なTypePadやMovable Type系のブログなら使えたりするのでしょうか?(試す気は無いですが)

設置方法は、

  1. ココログプロの上級者向けテンプレートセットで、下記のテンプレート(commentlist.txt及びtblist.txt)を新規に作成する。
    【テンプレートの新規作成方法】
    • 『管理ページトップ > ブログ一覧 > (対象ブログ名) > デザイン』で、『現在のテンプレートを編集』を選択
    • 「上級者向けテンプレート」欄の『新しいテンプレートを作成する』を選択
    • 「テンプレート名」「出力ファイル」「テンプレートの内容」欄にそれぞれ下記の内容を貼付
    • 『□インデックステンプレートを公開する際、自動的にこのテンプレートも公開する』にチェック
    • 『保存』→『反映』画面で、作成したテンプレートを『反映』
  2. 下記、[一覧表示]の内容を、サイドバー等でHTMLを記述可能な場所(メモタイプのマイリストや、またはsidebar.incを直接編集する等)に貼付ける。
    このとき、赤字になっているところを、ご自分のブログにあわせて変更すること。
    【例】
    http://sample.tea-nifty.com/blog/ という URL の場合: /annex/ → /blog/
    一覧表示開始の初期日付を 2004/4/1 にしたい場合: 2006/1/1 → 2004/4/1
    もし、テンプレートの出力ファイル名を変更した場合には、それに合わせて青字の箇所も変更のこと。
    また、prototype.jsを組み込み済の方(なおゆき氏のcocolog_ajax_search.jsblog_ajax_json_search.jsをご使用の方など)は、緑字の行は不要です(よくわからなければそのままにしておいてください)。

設置完了したらブラウザでブログを表示し、表示されたフォームに一覧表示したい日付範囲を入力して“コメント一覧”もしくは“トラックバック一覧”横の[表示]釦を押して下さい。一覧が表示されると思います。
これは上記のテンプレートによりココログ(TypePad)が出力した結果を JavaScript で取得し、整形・表示しているものです。“キャッシュ使用”にチェックが入っている場合、2回目以降は結果取得を省略して整形・表示のみ行います。
ただし JavaScript の特性上、ページ遷移が発生してしまうと必ず読込み直してしまうので、結果表示画面のリンク先に飛ぶ場合は[Shift]キーを押しながらクリックする等して別ウィンドウ/タブとして表示させた方がよいかも知れません。

なお制限事項として、index.html(Main Index Template:index.html)上に class="content" の要素を持つ <div> タグが存在することを前提としています(その中に結果を表示します)。
これが存在しない場合には使えませんので、ご注意を。(『現在のテンプレートを編集』の画面で Main Index Template を開いて確認しておいてください)

最後になりましたが、このスクリプトは、なおゆき氏の『ココログプロとかTypepadとかMTとかブログ人とかその他のブログサービスとかでもAjaxでバックナンバーを検索するJavaScript』に触発され、大いに参考にさせていただきながら作成しました。この場を借りて、なおゆき氏にお礼申し上げます。

はっきりいって初めて、プロコースでよかったと思いました(笑)……でも考えてみれば、これくらいは標準機能として付いていて欲しいなぁ。。。>ココログ
cocolog_ajax_search.jsの方の技術を使えば、プロコース以外でも(検索に時間はかかるにしろ)同じことをするJavaScriptが作れそうだけど……気が向けばもしかして?

テンプレート名:Comment List   出力ファイル:commentlist.txt
テンプレートの内容:

{
archive_list:[
<MTEntries all="1"><MTIfNonZero tag="MTEntryCommentCount">{
link:'<$MTEntryLink$>'
,title:'<$MTEntryTitle remove_html="1" encode_js="1"$>'
,comment:[
    <MTComments>{
    id:'<$MTCommentID$>'
    ,auth:'<$MTCommentAuthor remove_html="1" encode_js="1"$>'
    ,url:'<$MTCommentURL$>'
    ,date:'<$MTCommentDate format="%Y/%m/%d %H:%M"$>'
    ,excerpt:'<$MTCommentBody remove_html="1" trim_to="60" encode_js="1"$> ...'
    },</MTComments>
    {id:''}
    ]
},</MTIfNonZero></MTEntries>
{link:''}
]
}

テンプレート名:Trackback List   出力ファイル:tblist.txt
テンプレートの内容:

{
archive_list:[
<MTEntries all="1"><MTIfNonZero tag="MTEntryTrackbackCount">{
link:'<$MTEntryLink$>'
,title:'<$MTEntryTitle remove_html="1" encode_js="1"$>'
,tburl:'<$MTEntryTrackbackLink$>'
,tb:[
    <MTPings>{
    id:'<$MTPingID$>'
    ,url:'<$MTPingURL$>'
    ,blog:'<$MTPingBlogName remove_html="1" encode_js="1"$>'
    ,title:'<$MTPingTitle remove_html="1" encode_js="1"$>'
    ,date:'<$MTPingDate format="%Y/%m/%d %H:%M"$>'
    ,excerpt:'<$MTPingExcerpt remove_html="1" trim_to="60" encode_js="1"$> ...'
    },</MTPings>
    {id:''}
]
},</MTIfNonZero></MTEntries>
{link:''}
]
}

[一覧表示]

<script type="text/javascript" src="https://furyu.tea-nifty.com/script/prototype.js"></script>
<script type="text/javascript" src="https://furyu.tea-nifty.com/script/cocoTBlistPro.js"></script>
<span style="color:#446688;font-weight:bold;font-size:x-small">
<script type="text/javascript">
<!--
var tmpBlogName = '/annex/' ;
var tmpDefaultFrom = '2006/1/1' ;
var tmpDate = new Date() ;
var tmpDefaultTo = tmpDate.getFullYear() + "/" + (1 + tmpDate.getMonth()) + "/" + tmpDate.getDate() ;
var tmpCmtFile = 'commentlist.txt' ;
var tmpTbFile = 'tblist.txt' ;

var tmpCmtReq = 'cocoCommentListPro' ;
var tmpTbReq = 'cocoTBlistPro' ;
var tmpButton = '<input type="button" onclick="javascript:d=document;$CMD$(\''+tmpBlogName+'$FILE$\',!(d.getElementById(\'useReadCache\').checked),d.getElementById(\'dateFrom\').value,d.getElementById(\'dateTo\').value);" value="表示"/>' ;

var tmpInputText = '<input type="text" size="12" maxlength="20" style="color:#440000;background-color:#eeeeff" ' ;

var tblistform = [
    '<form action="javascript:void(0);">'
,   tmpInputText + 'id="dateFrom" value="'+tmpDefaultFrom+'"/> から<br />'
,   tmpInputText + 'id="dateTo" value="'+tmpDefaultTo+'"/> まで'
,   '<table><tbody style="font-size:12px;line-height:14px;"><tr>'
,   '<td>コメント一覧</td><td>'+tmpButton.replace('$CMD$',tmpCmtReq).replace('$FILE$',tmpCmtFile)+'</td>'
,   '</tr><tr>'
,   '<td>トラックバック一覧</td><td>'+tmpButton.replace('$CMD$',tmpTbReq).replace('$FILE$',tmpTbFile)+'</td>'
,   '</tr><tr>'
,   '<td style="font-size:smaller">キャッシュ使用 <input type="checkbox" checked id="useReadCache"/></td>'
,   '</tr></tbody></table>'
,   '</form>'
].join('\n') ;
document.write(tblistform) ;
//-->
</script>
<noscript>
<div style="padding:4px 0px 8px 0px; color:red;">JavaScriptをONにしないと正常に動作しません。</div>
<div style="padding:4px 0px 8px 0px;">元データは下記からダウンロードできます。</div>
<dl style="margin-left:0px;padding:4px;">
  <dd style="margin-left:8px;padding-bottom:4px;"><a href="/annex/commentlist.txt">コメント一覧</a></dd>
  <dd style="margin-left:8px;padding-bottom:4px;"><a href="/annex/tblist.txt">トラックバック一覧</a></dd>
</dl>
</noscript>
</span>

<style type="text/css">
<!--
/* --- style sheet of cocoTBlistPro.js --- */
/* for Comment List */
.cmtl-indv {
    list-style-type: none;
    margin-left:16px; margin-bottom: 8px;
    padding-left:0px;
    }
.cml-article-cmtnum {
    color: darkgreen;
    font-weight:bold;
    }
.cmtl-indv-cont-excerpt {
    color: darkgreen;
    font-size: 10px;
    padding-left: 24px;
    }
/* for Trackback List   */
.tbl-article-title {
    }
.tbl-article-tburl {
    display:none;
    }
.tbl-tbindv {
    list-style-type: none;
    margin-left:16px; margin-bottom: 8px;
    padding-left:0px;
    }
.tbl-article-tbnum {
    color: darkgreen;
    font-weight:bold;
    }
.tbl-tbindv-cont-excerpt {
    color: darkgreen;
    font-size: 10px;
    padding-left: 24px;
    }
-->
</style>

【2006.5.21追記】

触発された記事を書いておくのを失念しておりました。
観測気球』さんの“「トラックバック一覧」の表示”です。

« いつ落ち着くのですかねぇ<ココログのシステムトラブル | トップページ | いつ買ったんだっけか?な書籍リストその1 »

ウェブログ・ココログ関連」カテゴリの記事

おもいつき」カテゴリの記事

覚書」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

« いつ落ち着くのですかねぇ<ココログのシステムトラブル | トップページ | いつ買ったんだっけか?な書籍リストその1 »

戻るリンク追加

カレンダー

2024年6月
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            

ココログカレンダーPlus(旧2)

検索


    • Web全体 サイト内
    • 蔵書のISBNを入力して下さい
    • はじめる前
      初級者向け
      上級者向け
      ブログ紹介
      結果を表示

コメントリストツリー化

無料ブログはココログ