cutmail's blog

write the code

Buzzurlの記事を取得するGoogleガジェットを作る

まず、buzzurl.xmlとかいうファイルを作り、
下記の内容を書きます。

<Module> 
<ModulePrefs title="Buzzurl" /> 
<Content type="html"> 
<![CDATA[ 
><div id="recents_sample"> 
<span style="font-size:10px;"> 5users以上の新着エントリー 10件</span> 
</div> 
<div style="font-size: 10px;"> 
<script type="text/javascript"> 
    function displayRecents(json) {
        var ul = document.createElement('ul');
        
        for (var i = 0; i < json.length; i++) {
            var li = document.createElement('li');
            var a = document.createElement('a');
            a.setAttribute('href', json[i].url);
            a.appendChild(document.createTextNode(json[i].title+" ("+json[i].user_num+")"));
            li.appendChild(a);
            ul.appendChild(li);
        }
        document.getElementById('recents_sample').appendChild(ul);
    }
</script> 
<script type="text/javascript"
        src="http://api.buzzurl.jp/api/articles/recent/v1/json/?num=10&threshold=4&cb=displayRecents" charset="UTF-8"> 
</script> 
</div> 
]]>
</Content> 
</Module>

Googleガジェットの作り方 - Webクリエイターのひとりごと
helloworldの部分をjavascriptに書き換えただけです。

ここでは、BuzzurlのAPI
を利用して、最新の記事を取得してきています。

実際にここで作成したxmlファイルをiGoogleに追加してみました。

f:id:invent:20081129225239p:image

見た目は悪いですが、APIを使うことでいろいろなガジェットが作れそうです。