JavascriptでRSSを読み込んで表示する方法【jQuery, Google Feed API】

2013/05/212017/01/31

code

追記：20167/01/31

このAPIは正式に廃止されており、12月15日後に動作を停止します、
Google Feed API | Google Developers

ということで、当記事のサンプルは動作しなくなったと思います。

・【YQL API利用】JavascriptでRSSを読み込んで表示する方法【2017年】 – 某氏の猫空

そこで、 YQL APIを利用した方法を試してみました。試す限りは、Google Feed API並みに簡単です。

以下のサンプルで、Yahooニュースのトピックストップの５件がリンクつきで表示されます。ローカルにhtmlファイルとして保存して、ブラウザで開けば動作を確認することができます。

<html>
  <head>
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">
    google.load("feeds", "1");

    function initialize() {
     //読み込み最大記事数
     var max_length = 5; 
      //RSSを指定
      var feed = new google.feeds.Feed("http://rss.dailynews.yahoo.co.jp/fc/rss.xml"); 
      feed.setNumEntries(max_length);
      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 title = entry.title;　//記事タイトル
            var link = entry.link; //記事へのリンク

            var content = entry.content; //記事の内容
            var snippet = entry.contentSnippet; //記事の要約
	    var publishedDate = entry.publishedDate; //投稿日
            var category = entry.categories[0]; //カテゴリー

           //タイトルを挿入
           $('#feed').append("<li><a href='" + link  +"'>"+ title +"</a></li>"); 
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);

    </script>
  </head>
  <body>
    <div id="feed"><!-- この位置に挿入される --></div>
  </body>
</html>

#1 Google Feed API Developer's Guide - Google Feed API — Google Developers
#2 簡単！RSS（XML）を取得&表示させる方法 – jQuery + Google Feed APIを使用してFeedを表示させる方法 | superChemical

上記の２サイトを主に参考に作成しました。
ほとんど＃1のサンプルのままです。

RSSの指定を別のところに変えても動作します。ソースのコメントを参考にしてください。

取得できる情報については、＃1のJSONの項目だと思います。
実際、ソースで変数に代入している項目に関しては、取得できてることを確認しました。

JavascriptでRSSを読んで、変数に代入することができれば、あとは自由に加工できると思うので、他のサービスやブログパーツに頼らずにいろいろできるかと思います。

Google Feed APIというのは、RSS/ATOMをJSON形式にしてくれるサービスのようです。

関連記事