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 もぜひお試しください。
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!
最終更新 21d ago
リンクのコピー