JavaScript + Ajax 実践サンプル集 - YQL: jsajax.comのRSSフィードを取り込んで表示する

YQL: jsajax.comのRSSフィードを取り込んで表示する

説明補足説明コード関連書籍コメント投稿

このサンプルは、Yahoo! Query Languageを利用して当サイト(jsajax.com)のRSSフィードを取り込んで表示します。[Get RSS Feeds!]ボタンをクリックするとjsajax.comの新着サンプルの上位50件が表示されます。

このサンプルを編集して試してみる

YQLでRSSフィードを取り込むには、where句のurlにRSSフィード用のURLを設定します。ここでは、jsajax.comのRSS「http://jsajax.com/ArticlesTop50.aspx」を設定しています。

var rss = 'http://jsajax.com/ArticlesTop50.aspx'
var url = 'http://query.yahooapis.com/v1/public/yql?callback=?'
var sql = 'select * from rss where url="{rss}"';
var query = sql.replace('{rss}', rss);
var params = {
  q: query,
  format: 'json'
}
$.getJSON(url, params, function(data) {
  if (data.query.count == 0) return;
  var html = '';
  $.each(data.query.results.item, function(i, item) {
    html += template.replace('{href}', item.link).replace('{text}', item.title);
  });
  $('#placeholder').html(html);
});// end of getJSON

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Yahoo! Query Language - RSS Feeds </title>
  <style type="text/css">
    body { font-size: 765; font-family: Arial, Sans-Serif;} 
  </style>
  <script src="http://www.google.com/jsapi" type="text/javascript"></script>
  <script type="text/javascript">
    google.load('jquery', '1.4');
    google.setOnLoadCallback(function() {
      $(function() {
        var template = $('#placeholder').html().replace('', '');
        $('#btnGetRss').click(function() {
          var rss = 'http://jsajax.com/ArticlesTop50.aspx'
          var url = 'http://query.yahooapis.com/v1/public/yql?callback=?'
          var sql = 'select * from rss where url="{rss}"';
          var query = sql.replace('{rss}', rss);
          var params = {
            q: query,
            format: 'json'
          }
          $.getJSON(url, params, function(data) {
            if (data.query.count == 0) return;
            var html = '';
            $.each(data.query.results.item, function(i, item) {
              html += template.replace('{href}', item.link).replace('{text}', item.title);
            });
            $('#placeholder').html(html);
          });// end of getJSON          
        }); // end of click event   
      });  // end of jQuery
    });   // end of setOnLoadCallback
  </script>
</head>
<body>

<button id="btnGetRss">Get RSS Feeds!</button>
<ul id="placeholder">
  
</ul>

</body>
</html>