RSSを取得して表示 - web-0127のブログ

アメブロの場合

Google API

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>RSSを取得</title>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>

<script type="text/javascript">
google.load("feeds", "1"); //APIを読み込みます

function initialize(){
  
  var feed = new google.feeds.Feed("http://rssblog.ameba.jp/アメブロID/rss.html"); //読み込むフィードを設定します
  //var noPhoto = ("<img src='http://kana-lier.com/demo/feed_ajax/img/noimage.jpg' />"); //画像がなかった場合に表示する画像を指定します
  
  feed.setNumEntries(5); //記事を読み込む件数を設定します
  feed.load(dispfeed);
  
  function dispfeed(result){

    if(!result.error){
      var container = document.getElementById("feed"); //HTMLに書き出す対象のIDを指定します

      for (var i = 0; i < result.feed.entries.length; i++) {

        var entry = result.feed.entries[i];
        
        var entryDate = new Date(entry.publishedDate); //日付取得　以下二桁処理をします
        var entryYear = entryDate.getYear();
        if (entryYear < 2000){
          entryYear += 1900;
        }
        var entryMonth = entryDate.getMonth() + 1;
        if (entryMonth < 10) {
          entryMonth = "0" + entryMonth;
        }
        var entryDay = entryDate.getDate();
        if (entryDay < 10) {
          entryDay = "0" + entryDay;
        }
        var date = entryYear + "年" + entryMonth + "月" + entryDay + "日" ;

        var entryImg = "";
        var imgCheck = entry.content.match(/(src="http:)[\S]+((\.jpg)|(\.JPG)|(\.jpeg)|(\.JPEG)|(\.gif)|(\.GIF)|(\.png)|(\.PNG))/); //画像のチェックをします
        /* if(imgCheck){
          entryImg += '<img ' + imgCheck[0] + '" width="100">';
          } else {
            entryImg += noPhoto;
        }*/

        container.innerHTML += '<div><p class="date">' 
                  + date 
                  + '</p><h3><a href="' + entry.link + '">'
                  + entry.title + '</a></h3>'
                  + entryImg  
                  + '<p class="text">'
                  +entry.contentSnippet.substring(0,120)
                  + ' …<a href="' + entry.link + '">more</a></p></div>';

      }

      var linkBlank = container.getElementsByTagName('a'); // targetに'_blank'を設定します。不要な場合は、以下4行を削除
      for (var j = 0, l = linkBlank.length; j < l; j++) {
        linkBlank[j].target = '_blank';
      } //target'_blank'ここまで
    }
  }
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="feed"></div>
</body>
</html>

1行目はGoogle AJAX APIを呼び出しています。
3行目以降が、RSSを読み込んで書き出すためのJavaScriptになります。4行目から63行目までを、別のjsファイルにして読み込むことも可能です。

プログラム内で変更を加えたくなるような箇所については、コメントアウトにて説明をしていますので、参考にしてください。

46行目から53行目にかけては、書き出す内容を指定しています。
必要に応じて、タグなどを書き換えたり、入れ替えてください。

date：記事の日付
entry.link：記事へのURL
entry.title：記事のタイトル
entryImg：記事の画像
entry.contentSnippet.substring(0,120)：記事の概要