複数フィードの出力形式

広告

複数のフィードをまとめて取得した場合、順番に上から下へフィードを出力する以外にタブを使って表示するフィードを切り替えることができます。ここでは複数フィードの出力形式の設定について解説します。

1.drawModeプロパティの指定
2.サンプル

drawModeプロパティの指定

FeedControlを使用する場合はフィードの取得を行うと自動的にDOMノードへの出力が行われますが、出力する形式として2つの種類から選択が可能です。指定する場合はdrawメソッドの2番目の引数で指定します。 

draw(element, opt_options?)

前のページで記載した通り。1番目の引数には取得した結果が出力されるDOMノードを指定して下さい。そして2番目の引数にdrawModeプロパティに対して出力形式を表す値を設定します。設定可能な値は次の通りです。 

google.feeds.FeedControl.DRAW_MODE_TABBED
google.feeds.FeedControl.DRAW_MODE_LINEAR

引数が省略された場合は google.feeds.FeedControl.DRAW_MODE_LINEAR がデフォルトの値となっています。実際に指定する場合は次のように記述して下さい。 

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

function initialize() {
  var control = new google.feeds.FeedControl();

  control.addFeed("http://www.example.com/rss", "SampleSite");
  control.addFeed("http://www.example.jp/rss", サンプルブログ");

  control.draw(document.getElementById("feed"), 
    {drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED}
  );
}
google.setOnLoadCallback(initialize);

DRAW_MODE_TABBED を指定した場合は表示するフィードを切り替えるタブが表示されます。この場合、1つタブ毎に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/script2_1.js"></script>

</head>
<body>

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

</body>
</html>

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

function initialize() {
  var control = new google.feeds.FeedControl();
  var feedurl1 = "http://googlejapan.blogspot.com/atom.xml";
  var feedurl2 = "http://googleblog.blogspot.jp/atom.xml";

  control.addFeed(feedurl1, "Google Japan");
  control.addFeed(feedurl2, "Official Google Blog");

  control.draw(document.getElementById("feed"),
    {drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED}
  );

}

google.setOnLoadCallback(initialize);

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

p2-1

画面上部に表示するフィードを切り替えるタブが表示されています。タブをクリックすると、別のフィードが表示されます。

p2-2

前のページのように複数のフィードを順に上から下へ並べて表示することできますし、今回ご説明したようにタブ毎にフィードを表示することも可能です。

( Written by Tatsuo Ikura )