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