JavaScript + Ajax 実践サンプル集 - YQL: 丸善の催し物情報のRSSフィードを取得して表示する

YQL: 丸善の催し物情報のRSSフィードを取得して表示する

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

このサンプルは、Yahoo! Query Languageを利用して丸善の催し物情報のRSSフィードを取得して表示します。著者のセミナーなどを受講するときに便利です。サンプルが表示されたら[Get Maruzen RSS Feeds!]ボタンをクリックしてください。セミナーなどの情報が表示されます。

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

$.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)
          .replace('{description}', item.description);
  });
  $('#placeholder').html(html);
  var baseURL = 'http://www.maruzen.co.jp'
  $('ul#placeholder li img').each(function(i) {
    var src = baseURL + $(this).attr('src');
    $(this).attr('src', src);
  });
});// 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 - Maruzen  RSS Feeds </title>
  <style type="text/css">
    body { font-size: 76%; font-family: Arial, Sans-Serif;} 
    li { list-style: none;  margin: 10px; }
    li a { text-decoration: none; }
    li a:hover { text-decoration: underline; }
  </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://www.maruzen.co.jp/Blog/Blog/maruzen02/CR/93.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)
                    .replace('{description}', item.description);
            });
            $('#placeholder').html(html);
            var baseURL = 'http://www.maruzen.co.jp'
            $('ul#placeholder li img').each(function(i) {
              var src = baseURL + $(this).attr('src');
              $(this).attr('src', src);
            });
          });// end of getJSON          
        }); // end of click event   
      });  // end of jQuery
    });   // end of setOnLoadCallback
  </script>
</head>
<body>

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

</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

YQL: 丸善の催し物情報のRSSフィードを取得して表示する

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

YQL: 丸善の催し物情報のRSSフィードを取得して表示する

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!