だいぶ間が空いてしまいましたが、HTML5を使ってどこまでスマホアプリが作れるのか、挑戦しようと進めています。しかも、フルキャンバスで。
題材はRSSリーダーです。RSS Pipesの補完機能として考えています。
前回はHellow Worldを表示するところまででした。今回は、RSSを取得してテキスト表示してみました。ただし、まだスクロールできません。当然クリックもできません。
RSSはjQueryを使って読み込むことにしました。コードはこんな感じです。
$.ajax({
type: 'GET',
url: rssurl,
dataType: 'xml',
success: function(xml) {
var $xml = $(xml);
var items = [];
$xml.find("item").each(function() {
var $this = $(this);
var item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text()
};
items.push(item);
});
updateRssContent(items);
},
error: function() {
alert('failed to get the rss: ' + rssurl);
}
});
updateRssContent()
でキャンバスにかきますが、座標も自分で計算しないといけません。
function updateRssContent(items) {
$.each(items, function(index, item) {
var text = new Kinetic.Text({
x: 5,
y: 5,
text: item.title,
fontSize: 12,
fontFamily: 'Arial',
fill: '#aaaaff'
});
text.setOffset({
y: -index * (text.getHeight() + 5)
});
layer.add(text);
});
layer.draw();
}
setOffset
を使うよりいい方法があるのではないかと想像しますが、まだ探していません。
実行結果はこんな感じです。
最新版はherokuでも実行可能です。
http://canvas-rss-reader.herokuapp.com/
今回は、GitHubにコードをアップしました。
https://github.com/dai-shi/canvas-rss-reader/tree/42ddd815e88304c6217c8c5f9f978d97c39fc34a
そう、プロジェクト名もcanvas-rss-readerにしました。
しかし、キャンバスを使うとあたりまえですが文字列選択ができないですね。JavaScriptでクリップボードって制御できるのでしょうか。
http://www.w3.org/TR/clipboard-apis/
このあたりをウオッチすることになるのでしょうか。
コメント