RSS リーダーアプリ

検索…
RSS リーダーアプリ
アプリ
jQuery を使用した RSS リーダーのアプリです。
デモ
​​
プロジェクトをインポート​
テスト環境
Android 9.0
iOS 12.2
ファイル構成
ファイル
説明
index.html
RSS フィードを読み込むスタート画面のページ
loading.gif
「 読み込み中 」 のイメージファイル
README.md
このテンプレートに関する README ファイル
js/feed-reader.js
RSS フィードを取得するための 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 もぜひお試しください。
...
//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.');
        }
    });
};
...
最終更新 10mo ago
リンクのコピー
概要
デモ
ファイル構成
必要な JS/CSS コンポーネント
必要な Cordova プラグイン
HTML の解説
index.html
JavaScript の解説
index.html
feed-reader.js