googleの「リアルタイム」表示のような効果を実現するjavascriptサンプルか、Jqueryプラグインなどがあればご紹介ください。

Question

kanienoteiou

39

39もっと見る

200pt

インターネットウェブ制作

googleの「リアルタイム」表示のような効果を実現するjavascriptサンプルか、Jqueryプラグインなどがあればご紹介ください。

新規投稿があったときに、記事表示部分がズズイッと下にスクロールして、新着記事が一番上に追加表示されるあれです。
ワードプレスでサイトを構築していますので、ワードプレスプラグインでも結構です。
どうぞ宜しくお願いします。

回答の条件

1人5回まで

登録：2011/06/24 01:26:54
終了：2011/07/01 01:30:02

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

Cherenkov 2011/06/24 05:57:58

複数のブログのRSSをyahoo pipesで新着順にまとめて、
デフォルトのRSSウィジェットで表示させ、
javascriptを使って回答1のような「リアルタイム」風な効果を出す感じでいいのかな。
Cherenkov 2011/06/24 06:02:58

「新規記事一覧」は既にあるのかな。
ページを開いたときに「リアルタイム」風に動かすのか、
それとも数十秒毎に更新されているかリアルタイムで追加するのかどちらなんでしょうか。
kanienoteiou 2011/06/24 06:39:07

さらにご質問ありがとうございます。
「数十秒毎に更新されているか確認しリアルタイムで追加」で考えています。

現在は、新規記事一覧は設置してあります。
これが、数十秒ごとに、新しい記事があればズズィっと下にさがって、一番上に新着記事が入ればいいなと。。。
Cherenkov 2011/06/24 20:36:13

現在の新規記事一覧がどういうものかわからないと回答できないと思います。
現在の構成がプラグイン、ウィジェットなのか、どういう仕組みで更新情報を取得しているのか、
URLを示すなりすれば誰かがカスタムメイドでJavaScriptを書いてくれるかもしれません。
kanienoteiou 2011/06/25 04:02:58

たびたびのご指摘ありがとうございます。
新規記事一覧のコードをここに転記してみます。
<?php
if( have_posts( ) ) {

$previous_user_id = 0;
while( have_posts( ) ) {
the_post( );
?>

<li id="grouppost-<?php the_ID(); ?>" class="user_id_<?php the_author_ID( ); ?>">
<div class="postcontent">

<p><?php the_author_posts_link( ); ?>:</p>
<?php the_content( __( '(More ...)' ) ); ?>

</div> 
<div class="bottom_of_entry"> </div>
</li>

<?php
} // while have_posts

} // if have_posts
?>

こんな感じになっています。
Cherenkov 2011/06/25 15:09:04

それは普通に投稿記事を表示するコードですね。
ウィジェットでタイトルだけ表示するようなものを想像してました。

そんな頻繁に更新されるブログなんですか？
ユーザからすると記事を読んでいるときに、突然記事が追加されてぐいぐい下に流れちゃうイメージでいいのですかね。
実装するとしたらJavaScriptで定期的に全文配信のRSSを読みにいって新着があったら追加ですかね…。

PuSHPressを入れてRSSをリアルタイムに更新されるようにして、
http://www.suzukikenichi.com/blog/pushpress/

回答1のようにYQLでRSSをJSONにして、うまいことテンプレートにはめ込んでいくとか。

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

Cherenkov · Answer 1 · 2011-06-24T03:38:03+09:00

wordpressプラグインで探すとしても、RSSの通知・人気記事を「リアルタイム」のように流すなど、明確な目的がないと見つからないと思います。

人力検索はてなのRSS（YQLでJSONに変換）を「リアルタイム」風に流すサンプルを書いてみました。

デモ：http://jsfiddle.net/cherenkov/FTx8S/2/

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
//http://q.hatena.ne.jp/1308846411
$(function() {
$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D'http%3A%2F%2Fq.hatena.ne.jp%2Flist%3Fmode%3Drss'&format=json&diagnostics=true", function(json){
	$(json.query.results.item.reverse()).each(function(i) {
		$('<div>').append($('<a>').text(this.title).attr('href', this.link)).hide().prependTo('#realtime').delay(i*1000).show(500);
	});
});
});
</script>
<style>
</style>
</head>
<body>
<div id="realtime"></div>
</body>
</html>