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

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

ユーザーの設定情報を扱う

　iGoogleガジェットには、ユーザーに任意の設定を委譲できます。

　先ほど作成したCodeZineの新着情報RSSは20件のエントリを返してきますので、これを修正してエントリの表示件数をユーザーが設定できるようにしてみましょう。

　完成のイメージを示します。設定の編集画面を開くには、ガジェット右上の矢印アイコンをクリックします。

設定の編集

エントリの表示件数を指定する

　ソースコードは次のようになります。修正点は太字で示してあります。

CodeZineから配信されている新着記事のRSSを取得するガジェット（表示件数を設定可能にする）

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="CodeZine-RSS" scrolling="true">
<Require feature="setprefs"/>
</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>
<Content type="html">
<![CDATA[
<script type="text/javascript">
var prefs = new _IG_Prefs(__MODULE_ID__); //全ての設定情報の取得

function init() {
  var feedUrl = 'http://rss.rssad.jp/rss/codezine/new/20/index.xml';  //RSSのURL
  _IG_FetchXmlContent(feedUrl, function (response) {
    if (response == null || typeof(response) != "object" 
                         || response.firstChild == null) {
      _gel('out').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><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('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-pref.xml（右クリックして保存してください）

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

1. <Require feature="setprefs"/>
   • 設定情報を扱うために宣言する部分です

1. <UserPref name="feedNum" required="true" display_name="表示件数" datatype="enum" default_value="5">
   • name属性は変数名です。
   • required="true"を指定すると必須指定の項目になります。
   • displayname属性は画面に表示する項目名です。
   • datatype属性で入力されるデータ型を指定します。datatypeで使用できる値には、string、bool、enum、hidden（ユーザーが編集できない隠し文字列）、list、location（Google Mapsをベースとするガジェット用）があります。デフォルトのデータ型はstringです
   • default_value属性で初期値を指定します。

1. var prefs = new _IG_Prefs(__MODULE_ID__);
   • 設定情報にアクセスします。連想配列（ここでは変数prefs）に設定情報が格納されます。

1. var feedNum = prefs.getInt("feedNum");
   • 設定情報のうち、任意の値を取得します。ここではfeedNumで指定した設定情報を数値として取得します。
   • string型の場合はgetString(name)を使用します。
   • bool型の場合はgetBool(name)を使用します。
   • list型の場合はgetArray(name)を使用します。