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

前へおみくじ占いアプリ次へ開発 Tips

最終更新 1 年前