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.' );
}
});
};
... 
