はてぶのRSSを表示する mixiアプリを試しに作ってみた

まだ、HelloWorldレベルですが、作ってみました。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="mixiapp x hatena_bookmark">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html" view="home, profile"><![CDATA[

<h3 style="margin:0; padding:0;">Hotentry</h3>
<div id="hotentries"></div>
<script type="text/javascript">
    // get rss
    var url = 'http://b.hatena.ne.jp/hotentry.rss';
    var params = {};
    params[gadgets.io.RequestParameters.METHOD]       = gadgets.io.MethodType.GET;
    params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.FEED;
    params[gadgets.io.RequestParameters.NUM_ENTRIES]  = 5;  
    
    gadgets.io.makeRequest(url, function(res) {
        //var feed    = res.data;
        var entries = res.data.Entry;
        var html = '<ul style="font-size:14px">';
        for (var i=0,len=entries.length; i<len; i++) {
            var entry = entries[i];
            var t = entry.Title;
            if (t.length > 10) t = t.substring(0, 8) + '..';
            html += '<li style="margin-bottom:5px; margin-left:-20px;"><a href="' + entry.Link + '" title="' + htmlEscape(entry.Title) + '" target="_blank">' + t + '</a>';
            html += '<a style="margin-left:5px" href="http://b.hatena.ne.jp/entry/' + entry.Link + '" target="_blank"><img border="0" style="vertical-align:middle" src="http://b.hatena.ne.jp/entry/image/' + entry.Link + '" /></a></li>';
        }
        html += '</ul>';
        
        document.getElementById('hotentries').innerHTML = html;
    }, params);

    function htmlEscape(str) {
        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }
</script>

  ]]></Content>
  <Content type="html" view="canvas"><![CDATA[

<h3>Hotentry</h3>
<div id="hotentries"></div>
<script type="text/javascript">
    // get rss
    var url = 'http://b.hatena.ne.jp/hotentry.rss';
    var params = {};
    params[gadgets.io.RequestParameters.METHOD]       = gadgets.io.MethodType.GET;
    params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.FEED;
    params[gadgets.io.RequestParameters.NUM_ENTRIES]  = 20;  
    
    gadgets.io.makeRequest(url, function(res) {
        //var feed    = res.data;
        var entries = res.data.Entry;
        var html = '<ul style="font-size:14px">';
        for (var i=0,len=entries.length; i<len; i++) {
            var entry = entries[i];
            html += '<li style="margin-bottom:5px"><a href="' + entry.Link + '" title="' + htmlEscape(entry.Title) + '" target="_blank">' + entry.Title + '</a>';
            html += '<a style="margin-left:5px" href="http://b.hatena.ne.jp/entry/' + entry.Link + '" target="_blank"><img border="0" style="vertical-align:middle" src="http://b.hatena.ne.jp/entry/image/' + entry.Link + '" /></a></li>';
        }
        html += '</ul>';
        
        document.getElementById('hotentries').innerHTML = html;
    }, params);
    
    function htmlEscape(str) {
        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }
</script>

  ]]></Content>
</Module>


Canvas Viewではこんな感じ

Profile, Home Viewはちょっと小さく

まぁただのRSS readerですorz
ソーシャルグラフ何も使ってない\(^o^)/


本当は、アプリ設置者(Owner)が設定したidを保存し、そのidのブクマRSSを表示させようと思ったのだけれど、
mixiアプリ上では、Ownerの設定を永続化して、他ユーザに見せることはできないっぽい(mixiアプリの外に保存すればいけるだろうけど?)ので、
とりあえずは、ホットエントリにしておいた。

気が向いたら、外に保存して、それをゲットする方も試してみたいです。


参考:mixiアプリで、OWNERの永続化がまだサポートされてなかった・・・。 - 雑想空間