フィードからタイトルやエントリを取得

フィードのダウンロードに成功した場合、JSON形式で取得した場合は「feed」プロパティの値の中にフィードの内容が含まれています。「feed」プロパティの値は次のような構成となっています。

feed
  title
  link
  description
  author
  entries[]
    title
    link
    content
    contentSnippet
    publishedDate
    categories[]

では順に各値を取得してみます。

フィードに関する情報

まずはフィードそのものに関する情報です。タイトル、リンク、説明、作成者について取得できます。

プロパティ	説明	該当要素
title	タイトル	Atom の<title>要素と RSS の<title>要素の値
link	URL	Atom の<link>要素と RSS の<link>要素の値
description	説明	Atom の<subtitle>要素と RSS の<description>要素の値
author	作成者	Atom の<name>要素の値
entries[]	エントリ	Atom の<entry>要素と RSS の<item>要素の値

例えば次のように記述することで各値を取得できます。

var feed = new google.feeds.Feed("http://www.sample.com/feed.xml");
feed.load(dispfeed);

function dispfeed(result){
  if (!result.error){
    var title = result.feed.title;
    var link = result.feed.link;
    var description = result.feed.description;
    var author = result.feed.author;
  }
}

エントリに関する値はさらに細かい情報に分かれています。次を参照して下さい。

エントリに関する情報

次にフィードに含まれるエントリ毎の情報です。エントリの数だけ含まれます。

プロパティ	説明	該当要素
title	タイトル	Atom の<title>要素と RSS の<title>要素の値
link	URL	Atom の<link>要素と RSS の<link>要素の値
content	本文	Atom の<content>または<summary>要素と RSS の<description>要素の値
contentSnippet	概要	contentの概要
publishedDate	日付	Atom の<published>要素と RSS の<pubDate>要素の値
categories[]	タグのリスト	Atom の<category>要素の term 属性と RSS の<category>要素の値

例えば次のように記述することでエントリ毎の各値を取得できます。

var feed = new google.feeds.Feed("http://www.sample.com/feed.xml");
feed.load(dispfeed);

function dispfeed(result){
  if (!result.error){
    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 contentSnippet = entry.contentSnippet;
      var publishedDate = entry.publishedDate;
      for (var j = 0; j < entry.categories.length; j++) {
          var categorie = entry.categories[j];
      }
    }
  }
}

本文である「content」プロパティの値にはHTMLタグが含まれます。その為、innerHTMLを使用することが薦められています。なお概要の方にはHTMLタグは含まれず文字数は120 文字未満となっています。

サンプルプログラム

それでは簡単なサンプルで試してみます。

sample3_1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Google AJAX Feed API テスト</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=(key)">
</script>
<script type="text/javascript" src="./js/script3_1.js">
</script>
</head>
<body>

<p>Google AJAX Feed API テスト</p>
<div id="feed"></div>

</body>
</html>

script3_1.js

google.load("feeds", "1");

function initialize() {
  var feedurl = "http://d.hatena.ne.jp/jkondo/rss";
  var feed = new google.feeds.Feed(feedurl);
  feed.load(dispfeed);

  function dispfeed(result){
    if (!result.error){
      var container = document.getElementById("feed");
      var htmlstr = "";
      htmlstr += '<h2><a href="' + result.feed.link + '">' + result.feed.title + '</a></h2>';
      htmlstr += "<p>説明:" + result.feed.description + "</p>";
      htmlstr += "<p>作成者:" + result.feed.author + "</p>";

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

        htmlstr += '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';
//        htmlstr += entry.content;
        htmlstr += "<p>" + entry.contentSnippet + "</p>";
        htmlstr += "<p>[日付]" + entry.publishedDate + "</p>";
        htmlstr += "<p>[カテゴリ]";
        for (var j = 0; j < entry.categories.length; j++) {
          htmlstr += "[" + entry.categories[j] + "]";
        }
        htmlstr += "</p>";
      }

       container.innerHTML = htmlstr;
    }else{
       alert(result.error.code + ":" + result.error.message);
    }
  }

}
google.setOnLoadCallback(initialize);

上記を実際にブラウザ見てみると次のように表示されます。

フィードからタイトルやエントリを取得

今回は「jkondoの日記」のRSSフィードを受信しています。まずはエントリ毎の概要を表示しました。では次に概要の代わりに本文を表示させてみます。サンプルプログラムを次のように変更して下さい。

        htmlstr += entry.content;
//        htmlstr += "<p>" + entry.contentSnippet + "</p>";

フィードからタイトルやエントリを取得