Yahoo!PipesとJSONを使ったガジェット臭いRSSリーダー

JavaScript WebAPI

昨日のエントリでYahoo!Pipesを使ってみましたが、
もともとページの一部にかんたんに任意のRSSフィードを表示できないか、という用途で調べていました。


結論を言うと簡単にできました。
ただ、ユーザ毎のRSSフィードURLの管理はしないといけないですね。

結果

先に結果のイメージを。
ページの一部にRSSフィードを埋め込んでいます。

myreader.html

GetFeedByURL

urlと最大件数をGETパラメータで受けってフィードを返却するだけ。

ソース

myreader.html

scriptタグのsrc属性で、Yahoo!Pipesで用意したAPIのURLを指定している。
最後のほうにあるRSSフィードのURLを変更すると、表示されるRSSが変わる。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="myreader.css" />
        <script type="text/javascript">
            /** 
             * JSONロード時に起動される関数
             */
            function jsonCallback(data){
                var myrss = document.getElementById("myrss_result");
                for (var i in data.value.items) {
                    var item = data.value.items[i];
                    
                    // aタグ作成
                    var a = document.createElement('a');
                    a.href = item.link;
                    a.innerHTML = item.title;
                    // liタグ作成
                    var li = document.createElement('li');
                    li.appendChild(a);
                    myrss.appendChild(li);
                }
            }
        </script>
    </head>
    <body>
        <h3>My RSS</h3>
        <ul id="myrss_result">
        </ul>
        <!-- ITProのフィード（JSON）-->
        <script type="text/javascript"
		 src="http://pipes.yahoo.com/cskai4g/getfeedbyurl?_render=json&_callback=jsonCallback&max=4&feedUrl=http%3A%2F%2Fitpro.nikkeibp.co.jp%2Frss%2FITpro.rdf">
        </script>
        <!-- ZDNetのフィード（JSON） -->
        <script type="text/javascript"
		 src="http://pipes.yahoo.com/cskai4g/getfeedbyurl?_render=json&_callback=jsonCallback&max=5&feedUrl=http%3A%2F%2Fjapan.zdnet.com%2Frss%2Fnews%2Findex.rdf">
        </script>
    </body>
</html>

メインの箇所。下のほうのscriptタグが読み込まれると、
jsonCallback関数が呼び出されるので、aタグにしてappendする。

myreader_parent.html

iframeタグを使ってガジェット臭を醸し出します。
おまけですね。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Yahoo!PipesとJSONを使ったガジェット臭いRSSリーダー</title>
        <link rel="stylesheet" type="text/css" href="myreader.css" />
    </head>
    <body>
        <h1>Yahoo!PipesとJSONを使ったガジェット臭いRSSリーダー</h1>
        <h2>ここにRSSフィードが表示されます。</h2>
        <iframe class="myreader" src="myreader.html">
        </iframe>
        <h2>ここは別のことを表示します。</h2>
        こんにちは！
        <br/><br/><br/><br/><br/>
        <h2>また別のことを表示します。</h2>
        さようなら！
    </body>
</html>
myreader.css

完全におまけ。

h1 {
    background-color: #12127D;
    border: 2px outset black;
    padding: 5px 10px;
    color: white;
    font-size: x-large;
}
h2 {
    background-color: #C8C8FF;
    border: 1px outset darkgray;
    padding: 3px 5px;
    font-size: large;
}
h3 {
    background-color: #E9E9FF;
    border: 1px dotted gray;
    padding: 2px 4px;
    font-size: medium;
}
iframe.myreader {
    width: 600px;
    height: 120px;
}
ul {
    font-size: small;
}
* {
	background-color: #CDE
}

まとめ

たんじゅんなフィードアグリケーターを超えて
いろいろできそうなかんじですね。


最終的に自前で全部やるにしても、さらっとプロトっぽく作るにはとてもいい。
あとで差し替えるのも難しくないし。