もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第18回 jQueryでAJAX入門:RSSをAJAXで取得してリストに表示する

この記事を読むのに必要な時間:およそ 5.5 分

他ページなどのコンテンツを動的に表示するAJAXもjQueryを使えば驚くほど簡単に利用することができます。今回はAJAXを利用して,RSSフィードを取得,表示してみましょう。

RSS

普段の情報収集でRSSリーダーを使っている方は多いと思いますが,RSSフィードと言っても,現在使われているものは,主なものでRSS1.0,RSS2.0というようにバージョンが2つあり,これらはXMLの形式が多少違いますので,分かりやすいように今回はRSS2.0に対象を絞ります。他にもAtomという規格自体が違うフィードもあります。

XML?

画像

RSSはXML(Extensible Markup Language)という言語で書かれています。以下はgihyo.jpのRSS2.0のフィードです。リンク先を開いてブラウザの「ページのソース」などで,ソースを確認してみてください。

また,以下は5509のRSS2.0のフィードを一部抜粋したものです。

RSSサンプルソース

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
    xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:wfw="http://wellformedweb.org/CommentAPI/"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:atom="http://www.w3.org/2005/Atom"
    xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
    xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
>
<channel>
    <title>5509(+1)</title>
    <atom:link href="http://moto-mono.net/feed" rel="self" type="application/rss+xml" />
    <link>http://moto-mono.net</link>
    <description>Output the knowledge</description>
    <lastBuildDate>Sun, 28 Feb 2010 05:18:47 +0000</lastBuildDate>
    <generator>http://wordpress.org/?v=2.8.1</generator>
    <language>ja</language>
    <sy:updatePeriod>hourly</sy:updatePeriod>
    <sy:updateFrequency>1</sy:updateFrequency>
    <item>
        <title>コーダー向け勉強会「.coder」の開催が決定しました</title>
        <link>http://moto-mono.net/2010/02/22/dotcoder_session1.html</link>
        <comments>http://moto-mono.net/2010/02/22/dotcoder_session1.html#comments</comments>
        <pubDate>Mon, 22 Feb 2010 10:24:34 +0000</pubDate>
        <dc:creator>nori</dc:creator>
        <category><![CDATA[WebDev]]></category>
        <guid isPermaLink="false">http://moto-mono.net/?p=2205</guid>
        <description><![CDATA[内容]]></content:encoded>
        <wfw:commentRss>http://moto-mono.net/2010/02/22/dotcoder_session1.html/feed</wfw:commentRss>
        <slash:comments>0</slash:comments>
    </item>
</channel>
</rss>

XMLもjQueryで要素を取得できる

XHTMLはXML互換を目指したHTMLですが,本来のXMLはソースを見れば分かる通り,HTMLとは少し印象が違います。ただ,タグで囲われていたりして,実はXMLもHTMLと同じようにDOM構造を持っています。

例えば記事は,各item要素に該当します。また,記事のURLはlink要素に,タイトルはtitle要素にそれぞれ入っていますね。

何がいいたいかと言うと,XMLもHTMLと同じようにjQueryで要素を取得できるということです。一番シンプルにlink要素のURLを抜き出したい場合は,以下のようにします。

要素の取得

var URL = $('link','item').text();

HTML要素の取得とまったく同じですね。この事は今回とても重要なことなので,覚えておいてください。

jQueryでAJAX

AJAX(Asynchronous JavaScript + XML)はその名前の通り,本来はJavaScriptとXMLでページの遷移なく,データを受信してページの情報を書き換える,というものです。一般的には非同期通信と言われます。

最近ではAJAXのWebアプリもかなり多いので,目にすることも多いと思います。

AJAXの制約

AJAXは一見便利なようですが,通信にはクロスドメイン(ドメインをまたぐ)上の制約があります。制約というのは,他のドメインのサイトのデータは取得できない,という点です。この問題は,システム側で一度キャッシュをして渡す,であるとか,Google AJAX Feed APIを利用する,取得するデータにXMLではなくJSONPを使う,など様々な方法で回避できるのですが,今回はそれらは行わずシンプルにローカルにXMLを保存したものを使うことにします。

$.ajax()メソッド

今回AJAX通信を実現するにあたり,jQueryの.ajax()メソッドを利用します。.ajax()は以下のように値を渡すことで利用できます。

$.ajax({
    dataType: 'xml',
    url: 'feed/rss2.xml',
    success: function(data) {
        // 引数で受け取るdataがRSSになる
        // ここに実行したい処理を書く
    }
});

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/

コメント

コメントの記入