【javascript】RSSを読み込んで表示させる【Google Feed API】

公開日: : 最終更新日:2014/08/14 JavaScript/jQuery, ニコニコ動画

スポンサーリンク

jQueryで簡単にRSSフィードを表示させる方法としてGoogleFeedAPIを利用するというのがあります。

これを使うことでRSSを動的に読み込んで表示させることが可能です。

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

    google.load("feeds", "1");

    function initialize() {
      var feed = new google.feeds.Feed("http://fastpshb.appspot.com/feed/1/fastpshb");
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement("div");
            div.appendChild(document.createTextNode(entry.title));
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);

    </script>
  </head>
  <body>
    <div id="feed"></div>
  </body>
</html>

このサンプルは本家ページのものです。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("feeds", "1");
</script>

冒頭に上記の記述で読み込みを行ってからgoogle.setOnLoadCallbackによってRSSの読み込みを開始します。

使用例

雑ですがこんな風に使ってみました。readFeedというのがRSSを読み込んで表示させる関数で、引数はRSSのURL、結果を出力するセレクタの文字列(jQueryを使ってます)、最大記事数としました。最大記事数はFeedクラスのsetNumEntriesメソッドで指定が可能です。setNumEntriesの詳細はページを見てください。

<script type="text/javascript">
var readFeed = function(feedurl,selector,maxlength){
    function initialize(){
        var feed = new google.feeds.Feed(feedurl);
        feed.setNumEntries(maxlength);
        feed.load(function(result) {
            if (!result.error) {
                var dst = "";
                for (var i = 0; i < result.feed.entries.length; i++) {
                    var entry = result.feed.entries[i];
                    var title = entry.title;
                    var link = entry.link;
                    var content = entry.content;
                    dst += content;
//                    var content = entry.content;
//                    var snippet = entry.contentSnippet;
//                    var publishedDate = entry.publishedDate;
//                    var category = entry.categories[0];
                    
                }
                $(selector).html(dst);
            }
        });
    }
    google.setOnLoadCallback(initialize);
}
readFeed("http://www.nicovideo.jp/ranking/fav/daily/all?rss=2.0&lang=ja-jp","#feedtest",5);
</script>

<div id="feedtest"></div>

この例ではニコニコ動画のデイリーランキングRSSを読み込んで概要(contents)を指定のセレクタに追加していっているだけです。Feedからはリンクなど色々取れるので欲しい情報だけ抽出して出力する形にしてください。

スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

61m2fdbtoTL._AA180_

ニコニコ動画の検索APIについて調べたのでメモ

ニコニコ動画にはAPIがあり、動画の情報(タイトルとか再生数とか)を取得したり、ランキング情報(RS

記事を読む

jquery-icon

【HTML/jQuery UI】NumericUpDownを設置する【Spinner】

HTMLタグにNumericUpDownがないか探したのですがないみたいなのでそれが使えるようなもの

記事を読む

1_129

javascriptで画像処理をする【HTML5】

HTML5でjavascriptを使って画像処理をしてみました。このページでは手始めにグレースケール

記事を読む

farbtasticimage

jQueryのカラーピッカーライブラリFarbtastic Color Pickerを使う

.farbtastic .wheel { background: url(http://mem

記事を読む

PAK65_chikyuugitohon500-thumb-500xauto-3318

Canvasの画像をリサイズする簡単な方法【HTML5・javascript】

調べてみるとCanvasをリサイズするようなjavascriptの関数は存在しないようなので自前で作

記事を読む

nc23924

ニコニコ動画の外部プレイヤーを動的に設置する【javascript/jQuery】

ニコニコ動画の外部プレイヤーはページのはじめの読み込みのときにしか表示されず、javascriptで

記事を読む

wmn0133-001

【jquery】iframe内のスクロールイベント設定とスクロール量取得

ページ内に設置したiframeのスクロールイベントおよびスクロール量を取得したかったのでメモ

記事を読む

application-javascript

javascriptでチェックボックスを一括で変更する方法

チェックボックスのチェックに一つ一つチェックを入れていくのは非常に手間がかかるのでjavascrip

記事を読む

progressbar_sample

【javascript/jQuery】Progressbarで処理の進捗状況を表示する

jQuery UIでProgressbarを使う 処理経過を表示する場合プログレスバーにより提示さ

記事を読む

googlemapapilineimage1

Google Maps JavaScript API v3でマップ上に線を引く

GoogleMapsAPIを使って地図上に線を引いたときに気を付けたことなどをメモしておきます。

記事を読む

encodingtype
【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

_rtm0919_tp_v
スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

rssimage
【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

rssimage
フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

computer_server
格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

school_toshokan_hondana
kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazo

TAKEBE055122558_TP_V
寝る前にスマホを見ると斜視になる可能性とその対策

はじめに  寝る前などスマホを横になりながら見続けると斜視になる可能

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑