もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き）
第18回 jQueryでAJAX入門：RSSをAJAXで取得してリストに表示する
他ページなどのコンテンツを動的に表示する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プラグインなどを公開している。
徳田和規（とくだかずのり；5509；nori）
マインドフリー株式会社，ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち，ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。
もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き）
- 第20回 jQueryでAJAX入門：正規表現でサイトに表示したTwitterにリンクをつける
- 第19回 jQueryでAJAX入門：JSONを使いサイトにTwitterを表示
- 第18回 jQueryでAJAX入門：RSSをAJAXで取得してリストに表示する
- 第17回 「その場編集」を実装する
- 第16回 jQueryで楽々実装できるツールチッププラグインを作ってみよう
- 第15回 チェックする項目の選択・未選択を画像でわかりやすくする
- 第14回 入力した/入力するパスワードを見えるようにする
- 第13回 今すぐできる！ユーザビリティを向上させるフォーム操作実践（5）デザインされたチェックボックスを実装する
- 第12回 jQueryでセレクトボックスをデザインする
- 第11回 今すぐできる！ユーザビリティを向上させるフォーム操作実践（3）
- 第8回 適切な説明を加えたデザインにするには
- 第7回 静的なサイトでローディング時の表示をコントロールするには
- 2010年6月第3週号 1位は，ユーザビリティやユーザーエクスペリエンスの落とし穴と回避方法，気になるネタは，CSSだけで描いたTwitterのクジラのイラスト
- 2010年6月第1週号 1位は，Appleが公開したHTML5によるSafariのテクノロジーデモ，気になるネタは，iPad登場で「MAGASTORE」に異変
- 2009年12月第3週号 1位は，CSS3を使うことで，より素晴らしく，より短時間にデザインされた実践的テクニック，気になるネタは，バイドゥ，日本語入力システム「BaiduType」公開
