[**プロジェクトをインポート**](https://monaca.mobi/ja/directimport?pid=64082ab2e78885eb0ea02f45)
**テスト環境**
* 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 の \ は、「 `loading.gif` 」、「 フィード一覧 」、「 エラーメッセージ 」 の置き場所となります。
## JavaScript の解説
### index.html
アプリを起動すると、RSS フィードの取得処理が直ちに始まります。RSS フィードのコンテンツの読み込み中は、`loading.gif` ファイルが表示されます。次の JavaScript コードで、RSS フィードの取得を行う関数を呼び出します。取得処理を行う関数は、`feed-reader.js` 内で定義されています。このファイルの解説は、後ほどします。RSS フィードで使用している URL は変更可能ですので、他の URL もぜひお試しください。
```javascript
...
//RSS Feeds URL
Feed.feedUrl = "http://feeds.bbci.co.uk/news/technology/rss.xml";
$(function() {
Feed.load();
});
...
```
### feed-reader.js
RSS フィードを取得する関数 （ `Feed.load()` ） が呼ばれると、次の JavaScript コードが実行されます。
```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 フィードの配置と表示を行います。
```javascript
...
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 '' + description + '