フェンリル

Developer's Blog

Yahoo Pipes を利用して Sleipnir 3 for Mac でフィードを読んでみる

split window

Mac / iOS 開発担当の松本です。

先日リリースしました Sleipnir 3 for Mac RC 版、皆様お試しいただけていますでしょうか。まだの方は是非ぜひ!既に試された方はフィードバックもいただけると凄く嬉しいです。

さて、その RC 版には”分割画面”という機能があります。OS X Lion のフルスクリーンをもっと良く使いたいという流れで実装された機能で、iMac の広い画面で使うと綺麗に2つのページを並べられて良いですね。

一方で Mac Book だと画面が狭いので、分割時に画面に収まるページがあまりありません。何か上手くハマるページは無いものかということで、Yahoo Pipes を使ってフィードを流してみる事にしました。

まず Yahoo Pipes で購読したいフィードをくっつけて1つのフィードに結合します。初めて Pipes を利用したのですが、こちらのページを参考に簡単に想定した出力を得られました。

yahoo pipes

つぎに、先ほどの Pipes からの出力を受けてフィードっぽく表示する HTML を書きます。Pipes の JSON 形式のエンドポイントに _callback というパラメータを渡すと JSONP が利用できるので、非常に簡単にデータの利用が可能です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Sleipnir for Mac Simple Feed</title>
    <style>
    #zebra {
	    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	    font-size: 12px;
	    margin: 2x;
	    width: 350px;
	    text-align: left;
	    border-collapse: collapse;
    }
    #zebra th {
	    font-size: 14px;
	    font-weight: normal;
	    padding: 10px 8px;
	    color: #039;
    }
    #zebra td {
	    padding: 8px;
	    color: #669;
    }
    #zebra .odd {
	    background: #e8edff; 
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(function() {
        $.getJSON(
            "http://pipes.yahoo.com/pipes/pipe.run?_id=d024192ebd012b9ad7d49a57b0f52e6a&_render=json" + "&_callback=?",
            function(data) {
                var tableElem = document.createElement("table");
                tableElem.id = 'zebra';
                var items = data.value.items;
                
                for (var i = 0; i < items.length; i++) {
                    var item = items&#91;i&#93;;
                    var rowElem = document.createElement("tr");
                    var faviconCellElem = document.createElement("td");
                    var faviconElem = document.createElement("img");
                    faviconElem.src = 'http://favicon.qfor.info/f/' + item.link;
                    faviconCellElem.appendChild(faviconElem);
                    var cellElem = document.createElement("td");
                    var anchorElem = document.createElement("a");
                    anchorElem.href = item.link;
                    anchorElem.appendChild(document.createTextNode(item.title));
                    cellElem.appendChild(anchorElem);
                    rowElem.appendChild(faviconCellElem);
                    rowElem.appendChild(cellElem);
                    if (i % 2) {
                        rowElem.className = 'odd';
                    }
                    tableElem.appendChild(rowElem);
                    console.log(item);
                }
                document.getElementById('target').appendChild(tableElem);
            }
        );
    });
    </script>
</head>
<body>
    <div id="target"></div>
</body>
</html>

コード中で URL に対する favicon を取得する為に、コチラの API を利用させていただきました。ありがとうございます。

このファイルを適当な場所に保存して Sleipnir for Mac で開けば、冒頭の画像のようにスプリット側でフィードを読めます。スプリット側のリンクをドラッグ&ドロップするとフィードを消化できますね!

今はまだ手がかかる Sleipnir for Mac ですが、少しずつ確実に改善を続けていきますので、暖かく見守っていただけると幸いです。

Facebook コメント

コメント

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。