jQuery を使用した RSS リーダーのアプリです。
デモ
テスト環境
ファイル構成
RSS フィードを取得するための JavaScript ファイル
必要な JS/CSS コンポーネント
必要な Cordova プラグイン
HTML の解説
index.html
index.html はスタート画面のページです。ソースコードを次に記します。
このファイルの HTML の <body> は、「 loading.gif 」、「 フィード一覧 」、「 エラーメッセージ 」 の置き場所となります。
JavaScript の解説
index.html
アプリを起動すると、RSS フィードの取得処理が直ちに始まります。RSS フィードのコンテンツの読み込み中は、loading.gif ファイルが表示されます。次の JavaScript コードで、RSS フィードの取得を行う関数を呼び出します。取得処理を行う関数は、feed-reader.js 内で定義されています。このファイルの解説は、後ほどします。RSS フィードで使用している URL は変更可能ですので、他の URL もぜひお試しください。
...
//RSS Feeds URL
Feed.feedUrl = "http://feeds.bbci.co.uk/news/technology/rss.xml";
$(function() {
Feed.load();
});
...
feed-reader.js
RSS フィードを取得する関数 （ Feed.load() ） が呼ばれると、次の JavaScript コードが実行されます。
...
Feed.prototype.load = function() {
var self = this;
$(this.maskEl).show();
$(this.errorEl).text('');
$.ajax({
url: this.url,
dataType: 'text',
crossDomain: true,
success: function(data) {
data = $.parseXML(data.trim());
$(self.listEl).empty();
// Display RSS contents
var $rss = $(data);
$rss.find('item').each(function() {
var item = this;
$(self.listEl).append(self.createListElement(item));
});
},
error: function() {
$(self.errorEl).text('Failed to load RSS.');
},
complete: function() {
$(self.maskEl).hide();
}
});
};
...
この関数の実行に成功すると、取得した RSS フィードが、ホーム画面に表示されます。
次の JavaScript で、ホーム画面 ( index.html ) の RSS フィードの配置と表示を行います。
...
Feed.prototype.createListElement = function(item) {
var $item = $(item);
var link = this.escape($item.find('link').text());
var title = this.escape($item.find('title').text());
var description = this.escape(strip_tags($item.find('description').text()));
var date = new Date($item.find('pubDate').text());
return '<li class="feed-item" data-link="' + link + '">' +
'<time>' + date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + '</time>' +
'<h2>' + title + '</h2><p>' + description + '</p></li>';
};
...
RSS フィードは、一覧形式で表示されています。このフィードの各アイテムをタップすると、InAppBrowser が起動し、指定された URL へ遷移します。
次の JavaScript コードで上述の動作をします。
...
Feed.prototype.addClickHandler = function() {
$(this.listEl).on('click', 'li', function() {
var url = $(this).data('link');
if (/^http/.test(url)) {
var ref = window.open(url, '_blank', 'location=yes');
ref.addEventListener("exit", function() {});
} else {
alert('Invalid URL.');
}
});
};
...
