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

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/06/24 01:26:54
  • 終了:2011/07/01 01:30:02

回答(2件)

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922011/06/24 03:38:03

ポイント100pt

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>

参考:

YQLを使用してWordpressのRSSをjsonで取得してjQueryで表示する | webOpixel



twitterウィジェットがjQueryなので参考になるかと。

Twitter / Search Widget

http://twitter.com/javascripts/widgets/widget.js


jquery carouselとかslideshowで検索して気に入ったプラグインをsetIntervalで定期的に動かす案もあるかと思います。

id:kanienoteiou

ありがとうございます!

サンプルまで書いていただいて・・

そうですね。

何をやりたいのかを書くべきでした。

WPのindexで表示している、新規記事一覧を自動更新したいのです。

グループで利用しているブログでして、メンバーが書いた新着記事を、indexの新着に順次自動表示していきたいのです。

他の皆様のご意見も伺いたいので、まだしばらく質問を続けることにします。

どうぞ宜しくお願いします。

2011/06/24 05:27:58
id:km1981 No.2

km1981回答回数429ベストアンサー獲得回数492011/06/30 15:03:55

ポイント100pt

PuSHPressを導入し、jFeedを定期的に実行すればいいと思います


PuSHPress

http://www.suzukikenichi.com/blog/pushpress/


jFeed.jQuery

http://hovinne.com/articles/jfeed-jquery-rss-atom-feed-parser-plugin

  • id:Cherenkov
    複数のブログのRSSをyahoo pipesで新着順にまとめて、
    デフォルトのRSSウィジェットで表示させ、
    javascriptを使って回答1のような「リアルタイム」風な効果を出す感じでいいのかな。
  • id:Cherenkov
    「新規記事一覧」は既にあるのかな。
    ページを開いたときに「リアルタイム」風に動かすのか、
    それとも数十秒毎に更新されているかリアルタイムで追加するのかどちらなんでしょうか。
  • id:kanienoteiou
    さらにご質問ありがとうございます。
    「数十秒毎に更新されているか確認しリアルタイムで追加」で考えています。

    現在は、新規記事一覧は設置してあります。
    これが、数十秒ごとに、新しい記事があればズズィっと下にさがって、一番上に新着記事が入ればいいなと。。。
  • id:Cherenkov
    現在の新規記事一覧がどういうものかわからないと回答できないと思います。
    現在の構成がプラグイン、ウィジェットなのか、どういう仕組みで更新情報を取得しているのか、
    URLを示すなりすれば誰かがカスタムメイドでJavaScriptを書いてくれるかもしれません。
  • id:kanienoteiou
    たびたびのご指摘ありがとうございます。
    新規記事一覧のコードをここに転記してみます。
    <?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> <!-- // postcontent -->
    <div class="bottom_of_entry">&nbsp;</div>
    </li>

    <?php
    } // while have_posts

    } // if have_posts
    ?>

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

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


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

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

この質問への反応(ブックマークコメント)

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません