bloggerの最近のコメント問題(最終版）

最近のコメント用javaスクリプトの修正するテンプレートを公開致します。
大元はarm22さんのブログ
http://360-to-issho.blogspot.com/2007/08/blogger10.html
を若干改変したものになっています。

これまでの記録は以下のリンクを参照

http://toranekosan.blogspot.com/2007/08/blogger.html
http://toranekosan.blogspot.com/2007/09/blogger2.html

http://toranekosan.blogspot.com/2007/09/blog-post_06.html

「最近のコメント」問題（2）以前の解答スクリプトはエラーが入っていたようです。
これは当ブログの筆者がスクリプトをHTML形式でどのように表示するかで悩んで
あやまったコードを挿入していた為です。問題(3)で一応の解決を確認しております。

以下が修正ごのスクリプトとなります。
-------------------------------------------------

<div id="recent_comment_list"></div>
<script>
<!--
function recent_comment_callback(obj) {
var data = obj;
var statusHTML = '<ul>';
for (var i=0; i<data.feed.entry.length; i++) {
statusHTML+= ('<li><a href="'+data.feed.entry[i].link[0].href+'">');

statusHTML+= (data.feed.entry[i].summary.$t.substring(0,mojisu));
if (data.feed.entry[i].summary.$t.length > mojisu) {
statusHTML+= ('...');
}

statusHTML+= ('</a> - ');
statusHTML+= ('<span class="item-date">'+data.feed.entry[i].published.$t.substring(0,kennsu)+'</span>');
statusHTML+= ('<span class="item-author"> '+data.feed.entry[i].author[0].name.$t+'</span>');
statusHTML+= ('</li>');
}
statusHTML += '</ul>';
document.getElementById('recent_comment_list').innerHTML = statusHTML;
}

-->

</script>
<script text="text/javascript" src="http://username.blogspot.com/feeds/comments/summary
?alt=json-in-script&callback=recent_comment_callback&max-results=
10"></script>

----------------------------------------------------
上のスクリプトの改造方法

mojisu とかかれた部分は、表示するコメント内容の文字数です。当ブログでは１０としています。

kennsuとかかれた部分は、表示する最近のコメント数です。当ブログでは１０としてます。

usernameとかかれた部分はbloggerのurlがユーザー名となっているようなので、自分のに相当するのを書いてください。このブログではtoranekosanとなっています。

下のリンク先で、上のスクリプト改変してを貼り付けて、実行すると動作確認が出来ます。

http://html.appelle.jp/cgi-bin/makesouce_cgi.cgi

そして、bloggerのテンプレート：レイアウト：ページ要素追加： HTML/JavaScriptで、作ったスクリプトをコピーしてください。

「最近のコメント」問題（３）

どうも、スクリプトが動かないケースもあるようなんです。そこで、このブログで使っている最近のコメント用のスクリプトを公開します。長い行を改行出来ないbloggerの仕様と、長い行をコピーできないブラウザの仕様の問題だとおもいます。firefoxだと問題なく視野外にあってもコピーできるのですが。

これまでの記録は以下のリンクを参照

http://toranekosan.blogspot.com/2007/08/blogger.html
http://toranekosan.blogspot.com/2007/09/blogger2.html

「最近のコメント」問題（２）の解答スクリプトはエラーが入っていたようです。確認するために同一コードを消さなければいけないようですが、さすがにそれはやっかいです。

結局<> < /script >　となってしまう事を確認しました。

なので、無難な手段としてこのブログで使っているスクリプトをそのまま公開します。



<div id="recent_comment_list"></div>

<script>

<!--

function recent_comment_callback(obj) {

var data = obj;

var statusHTML = '<ul>';

for (var i=0; i<data.feed.entry.length; i++) {

statusHTML+= ('<li><a href="'+data.feed.entry[i].link[0].href+'">');

statusHTML+= (data.feed.entry[i].summary.$t.substring(0,10));

if (data.feed.entry[i].summary.$t.length > 10) {

statusHTML+= ('...');

}

statusHTML+= ('</a> - ');

statusHTML+= ('<span class="item-date">'+data.feed.entry[i].published.$t.substring(0,10)+'</span>');

statusHTML+= ('<span class="item-author"> '+data.feed.entry[i].author[0].name.$t+'</span>');

statusHTML+= ('</li>');

}

statusHTML += '</ul>';

document.getElementById('recent_comment_list').innerHTML = statusHTML;

}

-->

</script>

<script text="text/javascript" src="http://toranekosan.blogspot.com/feeds/comments/summary

?alt=json-in-script&callback=recent_comment_callback&max-results=

10"></script>



このような感じです。改行しても問題ないようですね。

下のリンク先で、上のスクリプトを貼り付けて、実行すると動作確認が出来ます。
さらに、自分のURLに変えて動作確認すればよいかとおもいますが。

http://html.appelle.jp/cgi-bin/makesouce_cgi.cgi

bloggerの「最近のコメント」問題(2)

昼飯どきに訪れたら、昨晩うまくいかなかったようでして、

arm22さんのブログ
http://360-to-issho.blogspot.com/2007/08/blogger10.html

のソースを以下にじゃっかん書き換えたものを示します。

<div id="recent_comment_list"></div>
< script >
<!--
function recent_comment_callback(obj) {
var data = obj;
var statusHTML = '<ul>';
for (var i=0; i<data.feed.entry.length; i++) {
statusHTML+= ('<li><a href="'+data.feed.entry[i].link[0].href+'">');
statusHTML+= (data.feed.entry[i].summary.$t.substring(0,32));
if (data.feed.entry[i].summary.$t.length > 32) {
statusHTML+= ('...');
}
statusHTML+= ('</a> - ');
statusHTML+= ('<span class="item-date">
'+data.feed.entry[i].published.$t.substring(0,10)+'</span>');
statusHTML+= ('<span class="item-author"> '+data.feed.entry[i].author[0].name.$t+'</span>');
statusHTML+= ('</li>');
}
statusHTML += '</ul>';
document.getElementById('recent_comment_list').innerHTML = statusHTML;
}
-->
< /script >
<script text="text/javascript" src="http://XXXXXXX.blogspot.com/feeds/comments/summary?
alt=json-in-script&
callback=recent_comment_callback&max-results=10"></script>

最後の行に改行を施したら、arm22さんのスクリプトのままで動くようです。やっぱjavaやhtmlは分からないなぁ^^;　前のもなんで動いたんだろう^^;

以下は使い方

これをテンプレート：レイアウト：ページ要素追加： HTML/JavaScriptで、コピーしてください。

コピーしたのちにパラメータをかえなければなりません。

上のスクリプトの最後から二番目の行にて、http://XXXXXXX.blogspot.com/feeds/comments/summaryと、あります。このXXXXXXXは各bloggerのアカウント名によって異なります。ここに自分のアカウントもしくはブログのアドレスを表示したときに相当する綴りを入れてください。当blogではtoranekosanに相当する箇所です。

さらに、上のスクリプトで数字を変更することで体裁を整えられます。substring(0,32)の中の32を当blogでは10にすることによって、コメント内容表示の時に長すぎる文章になるのを解消しています。よって、上のスクリプトで32と書いてある箇所すべて（二ヶ所しかないが）を任意の数字に書き換えることで、自分のblogにあったスタイルになります。

さらに、上のスクリプトで、表示する件数を変更することも可能です。最後の行のmax-results=10の1０を5にすることで最新5件まで表示するということも可能です。


では、飯タイムに戻りますw

bloggerの「最近のコメント」問題

最近のコメントがブログのサイドバーについています。元々bloggerではその機能は無かったらしいです、公には。日本人でbloggerを使い始めた方が「最近のコメント」機能の役割をするスクリプトコードを発掘してくれて、僕はその方法に習って使っていました。

どこのbloggerでも、嘆きが聞こえますが、先週末からそのスクリプトが正しく動いていません。何があったのやら困ったものです…。誰かやり方が分かる人、タレコミよろしくです^^/　

と思ったら別の所でスクリプトが公開されていました。arms22さんが公開しています。さらに、jsファイルを作成してWEB上に置かなくても、Bloggerのレイアウト画面でHTML/JavaScript要素を追加し、arms22さんのスクリプトをちょっとだけ変えた、下のスクリプトを貼り付ければ動作することを確認しました。スクリプト宣言がなされていないだけだったようです。

arms22さんありがとうございます！！！

<div id="recent_comment_list"></div>
< script >
<!--
function recent_comment_callback(obj) {
var data = obj;
var statusHTML = '<ul>';
for (var i=0; i<data.feed.entry.length; i++) {
statusHTML+= ('<li><a href="'+data.feed.entry[i].link[0].href+'">');
statusHTML+= (data.feed.entry[i].summary.$t.substring(0,32));
if (data.feed.entry[i].summary.$t.length > 32) {
statusHTML+= ('...');
}
statusHTML+= ('</a> - ');
statusHTML+= ('<span class="item-date">'+data.feed.entry[i].published.$t.substring(0,10)+'</span>');
statusHTML+= ('<span class="item-author"> '+data.feed.entry[i].author[0].name.$t+'</span>');
statusHTML+= ('</li>');
}
statusHTML += '</ul>';
document.getElementById('recent_comment_list').innerHTML = statusHTML;
}
-->
< /script >
<script text="text/javascript" src="http://360-to-issho.blogspot.com/feeds/comments/summary?alt=json-in-script&callback=recent_comment_callback&max-results=10"></script>

arm22さんのブログ
http://360-to-issho.blogspot.com/2007/08/blogger10.html


このスクリプトを使用する際の注意点は、
http://360-to-issho.blogspot.com/feeds/comments/summary
の部分を自分のブログと同じように書き換えましょう。
このブログの場合はhttp://toranekosan.blogspot.com/feeds/comments/summary
です。

あと最近のコメントをいくつまで表示するかというのも変えることが出来て、
recent_comment_callback&max-results=10
の部分の数字を変えれば良いようです。

追記:：arms22さんのブログにて既に訂正版が公開されております。
arm22さんのブログ
http://360-to-issho.blogspot.com/2007/08/blogger10.html



改行バージョンは以下のとおりです。基本的に上のスクリプト部分を選択すると表示されないのもコピーできると思っていたのですが出来ないようですね。改行した部分を赤くしています。赤の部分が上で見えなかった行になります。ブログのフォームスタイルをストレッチ型にすればよいみたいなのですけど。

<div id="recent_comment_list"></div>
< script >
<!--
function recent_comment_callback(obj) {
var data = obj;
var statusHTML = '<ul>';
for (var i=0; i<data.feed.entry.length; i++) {
statusHTML+= ('<li><a href="'+data.feed.entry[i].link[0].href+'">');
statusHTML+= (data.feed.entry[i].summary.$t.substring(0,32));
if (data.feed.entry[i].summary.$t.length > 32) {
statusHTML+= ('...');
}
statusHTML+= ('</a> - ');
statusHTML+= ('<span class="item-date">
'+data.feed.entry[i].published.$t.substring(0,10)+'</span>');
statusHTML+= ('<span class="item-author"> '+data.feed.entry[i].author[0].name.$t+'</span>');
statusHTML+= ('</li>');
}
statusHTML += '</ul>';
document.getElementById('recent_comment_list').innerHTML = statusHTML;
}
-->
< /script >
<script text="text/javascript" src="http://360-to-issho.blogspot.com/feeds/comments/summary?
alt=json-in-script
&callback=recent_comment_callback&amp;amp;max-results=10"
></script>