一覧の開発 - paulbarre/RssReader GitHub Wiki
ダウンロードXMLファイルから一覧を作ります。
とりあえず、ダウンロードしたXMLの中身を確認しましょう。
取得したxmlData変数はXMLドキュメントを保持しているので、下記のようにログを出力して中身を確認します：
console.log(new XMLSerializer().serializeToString(xmlData));ブラウザーを使って、コンソールに出るXMLデータを確認します。下記のように出力されるはずです：
<query>
<results>
<channel>
...
<item>
<title>情報のタイトル</title>
<description>情報の内容</description>
<link>情報のURL</link>
</item>
<item>
<title>情報のタイトル</title>
<description>情報の内容</description>
<link>情報のURL</link>
</item>
...
</channel>
...
</results>
</query>各itemタグは表示したい情報になります。
api.jsのdownloadメソッドにあるAjaxリクエストが成功すると、displayFeedResultsという新しいメソッドを呼び出すようにします。
このメソッドはfeed.jsという新規ファイルに実装してください。
api.js
function download(url, onSuccess) {
...
$.ajax({
url: getYqlRssUrl(url),
type: 'GET',
dataType: 'xml',
success: function(xmlData) {
console.log('-- ダウンロードを成功しました。');
onSuccess(xmlData);
},
error: function() {
console.log('-- ダウンロードを失敗しました。');
}
});
}feed.js
function displayFeedResults(xmlData) {
// ここはフィードの結果をページに表示する
}downloadメソッドに新しい引数を追加します。onSuccessはコールバックとなります。ダウンロードが成功したらこのメソッドが呼びされます。
main.js
$(document).ready(function () {
...
download(feed_url, displayFeedResults);
});上記のソースコードでは、feed_urlのダウンロードに成功したら、displayFeedResultsを呼び出すことになります。
とりあえず各itemタグにアクセスしてみましょう。
function displayFeedResults(xmlData) {
var items = $(xmlData).find('item');
items.each(function(n) {
// 各itemの情報を表示する
});
}.find(item)でXMLの中のitemタグを検索します。jQueryのeach関数で全てのitemタグにアクセスができます。
eachの中で実装するfunctionはコールバックです。各アイテムでこのコールバックが呼ばれます。このコールバック関数の中ではアイテムにアクセスするために$(this)を利用します。
function displayFeedResults(xmlData) {
var items = $(xmlData).find('item');
items.each(function(n) {
var title = $(this).find('title').text();
var description = $(this).find('description').text();
var link = $(this).find('link').text();
console.log('item ' + n);
console.log(title);
console.log(description);
console.log(link);
});
}アイテムはXMLのオブジェクトですので、findを利用して、中にあるタイトル及び説明を取得できます。
nはアイテム番号になります。
ブラウザーで確認してください。
コンソールログで表示した内容を、今度はページに表示してみましょう。
displayFeedResultsを編集して、HTMLを作ります。前のレッスンを参考にして、HTMLを下記のように記述してください：
<article>
<h3>タイトル</h3>
<p>内容</p>
<a href="リンク">See</a>
<button>登録</button>
</article>function displayFeedResults(xmlData) {
var items = $(xmlData).find('item');
items.each(function(n) {
var title = $(this).find('title').text();
var description = $(this).find('description').text();
var link = $(this).find('link').text();
var html =
'<article>' +
'<h3>' + title + '</h3>' +
'<p>' + description + '</p>' +
'<a href="' + link + ' target="_blank"">See</a>' +
'<button>登録</button>' +
'</article>';
});
}アイテム用のHTMLを作成したのでindex.htmlも修正してください。
<section>
<header>
<h2>一覧</h2>
</header>
<div id="feed-articles"></div>
</section>以前あったダミーのところに<div id="feed-articles"></div>を記述します。
displayFeedResultsでは、htmlメソッドを利用してfeed-articlesをクリアします。あとは、feed-articlesの中に全てのフィード情報を追加します。
function displayFeedResults(xmlData) {
$('#feed-articles').html('');
var items = $(xmlData).find('item');
items.each(function(n) {
...
var html = ...;
$('#feed-articles').append(html);
});
}ブラウザーでページを更新して、表示を確認してください。
