HOME 『 AjaxによるスクロールするRSS更新情報のスクリプト 』

MOVABLE PRESS ↑ フィード・ティッカーを使ってみましょう

メールで更新情報をお伝えできます:

配信: FeedBurner

2010年8月
« 11月    
1234567
891011121314
15161718192021
22232425262728
293031  

[PROCESS3][LEVEL3]Dynamic Driveさんで公開されているAjaxによってRSS更新情報をスクロールさせるスクリプトgAjax RSS Pausing Scrollerをホームページとカテゴリーページに設置してみました。

SAMPLE

下のサンプルはロイターのジャンルごとのニュース更新情報を表示しています。ニュースに限らず、サイトをCMSとして利用する場合など、ユーザー情報の表示(おそらくできると思うのですが・・・)に便利なスクリプトだと思われます。

ヘッド情報 – Google のAPI keyが必要

ページのヘッドセクションに挿入するコードは3つです。そのうちの一つはGoogleのAJAX Feed APIを利用します。GoogleのAJAX Feed APIを利用するためにはGoogleのAPI keyが必要です(API keyはドメイン毎に取得しなければいけません)。API keyを含んだURIにてAJAX Feed APIを呼び出すことになります。

残りの二つのJavaScriptであるgfeedfetcher.jsとgajaxscroller.jsはgAjax RSS Pausing ScrollerのStep2にてindicator.gifとともにダウンロードできるようになっています。尚、著作権表示を要求されているので注意が必要です。

HTMLとCSS

下のスクリプトコードをHTML上の表示したい場所に記述します。コード内の1行目でidとclassを指定することによりCSSでのスタイリングが可能となります。

<script type="text/javascript">

var newsfeed=new gfeedpausescroller("rss-roll-4", "rss-roll-4class", 8000, "_new")
newsfeed.addFeed("テクノロジー", "http://feeds.reuters.com/reuters/JPTechnologyNews")
newsfeed.addFeed("マーケット", "http://feeds.reuters.com/reuters/JPMarketNews")
newsfeed.addFeed("ビジネス", "http://feeds.reuters.com/reuters/JPBusinessNews")
newsfeed.displayoptions("datetime snippet")
newsfeed.setentrycontainer("p")
newsfeed.filterfeed( 15, "label")
newsfeed.entries_per_page(3)
newsfeed.init() 

</script>

(c) Dynamic Drive (www.dynamicdrive.com)

上記のスクリプト中の赤字の部分が設定値になります。パラメーターの設定内容は以下の通りです。

  • 1行目
    id名、class名、ポーズ(ミリ秒)、リンクターゲット。
  • 2行目~4行目
    表示するラベル名、フィードURI
  • 5行目
    使用できるパラメータ「date(日)」「time(時間)」「datetime(日時)」「label(ラベル名)」「snippet(記述の冒頭部分)」「description(概要)」の選択と表示順の指定
  • 6行目
    タグ名<p><li>の指定。エントリーをリスト表示するのか、段落表示するのか選択できます。初期値は<div>
  • 7行目
    表示エントリー総数、表示配分の仕方。複数のフィードの場合、配分されます。配分のパラメーターは「date」「label」「title」です(初期値は「date」)
  • 8行目
    ワンポーズに表示するエントリー数。初期値は1。

[ AjaxによるスクロールするRSS更新情報のスクリプト ] のポストデータ▼

[Date]
2008年10月10日
[Time]
at 4:06 am
[Author]
Akihiro
[Comments]
( 0 )
[Categories]
CSS,HTML,JavaScript,マークアップとスタイルおよびユーティリティー
[Tags]
, , , ,
[BOOKMARK]
-
   

'AjaxによるスクロールするRSS更新情報のスクリプト'にコメントはありません

コメント(トラックバック)を受け付けています