RSSリーダーの作成から学ぶ、はじめてのiGoogleガジェット開発

RSSリーダーの作成を通して、iGoogleガジェットの作成方法を理解する

RSSリーダーを実装する

　Hello Worldガジェットの作成を通して、一連の作成方法が理解できたら、早速RSSリーダーを作成してみましょう。

　今回はCodeZineから配信されている新着記事のRSSをガジェットに表示してみます。

　CodeZineの新着情報RSSはhttp://rss.rssad.jp/rss/codezine/new/20/index.xmlです。

CodeZineの新着情報RSSをブラウザで表示

CodeZineから配信されている新着記事のRSSを取得するガジェット

　早速作成してみましょう。完成イメージは次のようになります。

新着記事のRSSを取得するガジェット

　次のようなソースコードを作成し、iGoogleガジェットとして追加します。

CodeZineから配信されている新着記事のRSSを取得するガジェット

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="MyRSS" scrolling="true">
</ModulePrefs>
<Content type="html">
<![CDATA[
<script type="text/javascript">
function init() {
  var feedUrl = 'http://rss.rssad.jp/rss/codezine/new/20/index.xml';  //RSSのURL
  _IG_FetchXmlContent(feedUrl, function (res) {
    if (res == null 
        || typeof(res) != "object" 
        || res.firstChild == null) {
      _gel('out').innerHTML = "<p>データが取得できませんでした</p>";
      return;
    }
    var feedTitle = res.getElementsByTagName("title")
                      .item(0).firstChild.nodeValue; //タイトル
    var feedLink = res.getElementsByTagName("link")
                      .item(0).firstChild.nodeValue;   //リンク
    var html = '<div><p><a href="' + feedLink + '" target="_blank">' 
             + feedTitle + '</a></p><ul>';
    var itemList = res.getElementsByTagName("item");
    for (var i = 0; i < itemList.length ; 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('out').innerHTML = html;
  });
}
//ロード時に呼ばれるイベントハンドラ。関数を引数に取る
_IG_RegisterOnloadHandler(init);
</script>
<style type="text/css">
<!--
body {
  font-size: 80%;
}
div#out p {
  text-align:center;
  margin: 2px;
}
ul {
  list-style-type: circle;
  margin: 2px;
  padding: 5px 0 5px 12px;
}
li {
  margin: 2px;
}
-->
</style>
<div id="out"></div>
]]>
</Content>
</Module>

• myrss.xml（右クリックして保存してください）

このソースについての補足

1. <ModulePrefs title="MyRss" scrolling="true">
   • title属性はガジェットのタイトルを記述します
   • scrolling属性をtrueにすることで下にはみ出した部分をスクロールで見れるようになります

1. _IG_FetchXmlContent(url, func)
   外部のURLからリソースを取得するガジェットAPIです。外部のコンテンツの取得や操作のためのガジェットAPIとして、次の関数が用意されています。
   • _IG_FetchContent(url, func)： urlのコンテンツをテキストとして取得および操作します。 HTMLコンテンツを操作するための関数です。
   • _IG_FetchXmlContent(url, func)： urlのXMLコンテンツをDOMオブジェクトとして取得および操作します。
   • _IG_FetchFeedAsJSON(url, func, num_entries, get_summaries)： urlのフィードコンテンツをJSON形式で取得および操作します。

1. _IG_RegisterOnloadHandler(func)
   • ガジェットのロード時に呼ばれるイベントハンドラです。関数を引数に取ります。

　JavaScriptによるDOM操作については、書籍やウェブ上の記事も参考にしてください。

　このように、JavaScriptとガジェットAPIを組み合わせることで、外部のリソースと連携したiGoogleガジェットが簡単に作成できます。