Mac / iOS 開発担当の松本です。
先日リリースしました Sleipnir 3 for Mac RC 版、皆様お試しいただけていますでしょうか。まだの方は是非ぜひ！既に試された方はフィードバックもいただけると凄く嬉しいです。
さて、その RC 版には”分割画面”という機能があります。OS X Lion のフルスクリーンをもっと良く使いたいという流れで実装された機能で、iMac の広い画面で使うと綺麗に２つのページを並べられて良いですね。
一方で Mac Book だと画面が狭いので、分割時に画面に収まるページがあまりありません。何か上手くハマるページは無いものかということで、Yahoo Pipes を使ってフィードを流してみる事にしました。
まず Yahoo Pipes で購読したいフィードをくっつけて１つのフィードに結合します。初めて 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[i];
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 ですが、少しずつ確実に改善を続けていきますので、暖かく見守っていただけると幸いです。
関連記事
