10-07-22

「Google AJAX Feed API」で外部RSSを読み込む

demo

PozuPadのフィード

memo

作業内容

Google AJAX Feed APIを使ってAtomやRSSフィードを読み込んでみます。まずはGoogle AJAX Feed API への登録を行います。するとサンプルが表示されるので、それを元に以下のように設定。

--- 表示されるサンプルを元に「表示件数」「リンク」「投稿日の表示スタイル」を追加設定 ---

<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>タイトル</title>
 <script type="text/javascript" src="http://www.google.com/jsapi?key=生成されたAPIキー"></script>
 <script type="text/javascript">
  google.load("feeds", "1");
 
  function initialize() {
   var feed = new google.feeds.Feed("フィードURL");
   feed.setNumEntries(10); //表示させる件数
   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>タグで囲まれる
      var a = document.createElement("a"); //取得するデータにリンク設定
      a.href = entry.link; //取得するデータ(ページ)へリンク設定
      a.target = "_blank" ; //blankでページを開く
      a.appendChild(document.createTextNode(entry.title + "(" + date.toLocaleDateString() + ")"  )); //データの表示形式を設定
      div.appendChild(a);
      container.appendChild(div);
     }
    }
   });
  }
  google.setOnLoadCallback(initialize);
 
 </script>
</head&g
<body>
 <div id="feed"></div> //ここで表示される
</body>

これで記事タイトル(YYYY年M月D日)のように表示されます。が、個人的には上記demoのような形で表示したい…

そこで以下のようにしてみました。

--- demo用コード ---

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

 function initialize() {
  var feed = new google.feeds.Feed("http://otani-webs.com/blog/feed/");
  feed.setNumEntries(5) //追加:表示する件数
  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 date = new Date(entry.publishedDate);
     var yy = date.getYear().toString(); //文字列を取得
     yy = yy.substr(1); //文字列の2番目の文字から表示
     var mm = date.getMonth() + 1;
     if (mm < 10) {mm = "0" + mm;} //0~9月だったら前に0をつける
     var dd = date.getDate();
     if (dd < 10) {dd = "0" + dd;}
     var yymmdd = yy + "-" + mm + "-" + dd + " ";
     container.innerHTML += "<li>" + yymmdd + "<a href='" + entry.link + "' target='_blank'>" + entry.title + "</a></li>";
    }
   }
  });
 }
 google.setOnLoadCallback(initialize);

</script>

参考記事

otani-webs.com / PozuPad / Copyright © 2010 LabPad All Rights Reserved.