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

広告

APIを使ってフィードの取得に成功した後は、フィードからタイトルやエントリなど必要なデータを取り出して利用します。ここではフィードから必要なデータを取り出す方法について解説します。

1.フィードに含まれるプロパティの種類
2.フィードに関する情報
3.エントリに関する情報
4.サンプル

フィードに含まれるプロパティの種類

フィードの取得に成功した場合、デフォルトの値であるJSON形式を指定していた場合は「feed」プロパティの値の中にフィードの内容が含まれています。「feed」プロパティの値は次のような構成となっています。 

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

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

フィードに関する情報

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

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

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

var feed = new google.feeds.Feed("http://www.example.com/feed.xml");
feed.load(function (result){
  if (!result.error){
    var title = result.feed.title;
    var link = result.feed.link;
    var description = result.feed.description;
    var author = result.feed.author;
  }
});

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

エントリに関する情報

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

プロパティ説明該当要素
mediaGroupmediaGroup※この項目についてはよく分かっていません
titleタイトルAtom の<title>要素と RSS の<title>要素の値
linkURLAtom の<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.example.com/feed.xml");
feed.load(function (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 文字未満となっています。

サンプル

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

<!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">
<head>
<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="https://www.google.com/jsapi"></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>

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

function initialize() {
  var feedurl = "http://googlejapan.blogspot.com/atom.xml";
  var feed = new google.feeds.Feed(feedurl);
  feed.load(function (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 += '<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);

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

p3-1

今回のサンプルではタイトルや説明について表示した後で、エントリ毎のタイトルや概略などを表示しています。

ではもう一つサンプルを作成します。今度はエントリ毎の概略ではなく本文を表示してみます。 

<!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">
<head>
<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="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="./js/script3_2.js"></script>

</head>
<body>

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

</body>
</html>

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

function initialize() {
  var feedurl = "http://googlejapan.blogspot.com/atom.xml";
  var feed = new google.feeds.Feed(feedurl);
  feed.load(function (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.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);

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

p3-2

p3-3

今回のサンプルではエントリ毎に概略ではなく本文を取り出して表示しています。このようにフィードの取得に成功した場合は、フィードに含まれる色々なデータを取得して利用することができます。

( Written by Tatsuo Ikura )