複数のRSSをタブ切り替えを利用して表示する
iGoogleガジェットにはタブ切り替えを簡単に実装するためのガジェットAPIが用意されています。
ここでは先ほどの新着情報RSSに、CodeZineが配信する人気ブックマークRSSを追加して、2つのRSSをタブ切り替えで表示できるようにしてみましょう。
CodeZineの人気ブックマークRSSはhttp://rss.rssad.jp/rss/codezine/bmp/20/index.xmlです。
完成のイメージを示します。
先頭のタブに新着情報を表示
2番目のタブに人気ブックマークを表示
ソースコードは次のようになります。
CodeZineから配信されているRSSを取得するガジェット（2つのRSSをタブ表示）
<?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="CodeZine-RSS" scrolling="true"> <Require feature="setprefs"/> <Require feature="tabs" /> </ModulePrefs> <UserPref name="feedNum" required="true" display_name="表示件数"
datatype="enum" default_value="5"> <EnumValue value="5"/> <EnumValue value="10"/> <EnumValue value="15"/> <EnumValue value="20"/> </UserPref> <UserPref name="selectedTab" datatype="hidden"/> <Content type="html"> <![CDATA[ <script type="text/javascript"> //全ての設定情報の取得 var prefs = new _IG_Prefs(__MODULE_ID__); //タブ情報にアクセスするためのオブジェクトを取得 var tabs = new _IG_Tabs(__MODULE_ID__); function init() { var newFeedUrl = 'http://rss.rssad.jp/rss/codezine/new/20/index.xml'; var bmpFeedUrl = 'http://rss.rssad.jp/rss/codezine/bmp/20/index.xml'; tabs.addTab("新着情報", "new", getCallback(newFeedUrl)); tabs.addTab("人気ブックマーク", "bmp", getCallback(bmpFeedUrl)); } /** * タブ切り替え時のCallback関数を返します * @param {String} feedUrl RSSのURL */ function getCallback(feedUrl) { return function(tabId) { callbackLoadTab(tabId, feedUrl); } } /** * タブ切り替え時のCallback関数 * @param {String} tabId タブのコンテンツを示すid(div) * @param {String} feedUrl RSSのURL */ function callbackLoadTab(tabId, feedUrl) { _IG_FetchXmlContent(feedUrl, function (response) { if (response == null || typeof(response) != "object" || response.firstChild == null) { _gel(tabId).innerHTML = "<p>データが取得できませんでした</p>"; return; } var feedTitle = response.getElementsByTagName("title") .item(0).firstChild.nodeValue; //タイトル var feedLink = response.getElementsByTagName("link") .item(0).firstChild.nodeValue; //リンク var html = '<div><p class="center"><a href="' + feedLink
+ '" target="_blank">' + feedTitle + '</a></p><ul>'; var itemList = response.getElementsByTagName("item"); var feedNum = prefs.getInt("feedNum"); //設定された表示件数の取得 for (var i = 0; i < feedNum ; i++) { var nodeList = itemList.item(i).childNodes; for (var j = 0; j < nodeList.length ; j++) { var node = nodeList.item(j); if (node.nodeName == "title") { var title = node.firstChild.nodeValue; //記事のタイトル } if (node.nodeName == "link") { var link = node.firstChild.nodeValue; //記事のURL } if (node.nodeName == "category") { var category = node.firstChild.nodeValue; //記事のカテゴリ } } html += '<li><a href="' + link +'" target="_blank">' + title + '[' + category + ']' + '</a></li>'; } html += '</ul></div>'; //_gel(id)はdocument.getElementByIdのラッパー関数 _gel(tabId).innerHTML = html; }); } //ロード時に呼ばれるイベントハンドラ。関数を引数に取る _IG_RegisterOnloadHandler(init); </script> <style type="text/css"> <!--
body {
font-size: 80%;
}
p.center {
text-align:center;
margin: 2px;
}
ul {
list-style-type: circle;
margin: 2px;
padding: 5px 0 5px 12px;
}
li {
margin: 2px;
}
a {
text-decoration: none;
}
--> </style> <div id="new" style="display:none"></div> <div id="bmp" style="display:none"></div> ]]> </Content> </Module>
このソースについての補足
- <Require feature="tabs"/>
- タブを扱うために宣言する部分です
- <UserPref name="selectedTab" datatype="hidden"/>
selectedTabは最後に開いたタブを保存する変数です。
- var tabs = new _IG_Tabs(__MODULE_ID__)
- タブ情報を扱うためのオブジェクトを取得します。
- addTab(tabName, id, callback)
- タブをtabsオブジェクトに追加します。
- tabNameパラメータは、タブの名前を示します。
- idパラメータは、このタブのコンテンツを表示する<div>の(DOM)idを示します。
- callbackパラメータは、このタブが選択されるたびに呼び出されるコールバック関数を指定します。ここで指定したコールバック関数には、タブの(DOM)idが渡されます。
まとめ
RSSリーダの作成を通して、iGoogleガジェットの大まかな流れをつかんでもらえたかと思います。
Google ガジェット API開発者向けガイドには、この他にも詳細なAPIの解説や使えるサンプルが収録されています。
自分が使いたいコンテンツを作ったり、自分で開発したアプリケーションやサービスと連携させたりと、オリジナリティのあるiGoogleガジェットを作成してみてはいかがでしょうか？
