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