他ページなどのコンテンツを動的に表示する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のフィードを一部抜粋したものです。
XMLもjQueryで要素を取得できる
XHTMLはXML互換を目指したHTMLですが、本来のXMLはソースを見れば分かる通り、HTMLとは少し印象が違います。ただ、タグで囲われていたりして、実はXMLもHTMLと同じようにDOM構造を持っています。
例えば記事は、各item要素に該当します。また、記事のURLはlink要素に、タイトルはtitle要素にそれぞれ入っていますね。
何がいいたいかと言うと、XMLもHTMLと同じようにjQueryで要素を取得できる、ということです。一番シンプルにlink要素のURLを抜き出したい場合は、以下のようにします。
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()は以下のように値を渡すことで利用できます。
RSSをリストに表示する
ようやく本題ですが、実は今回やることはとても単純です。
仕様は以下の通りです。
- div#rssの中にul要素を入れる
- RSSフィードを取得
- div#rss>ulにフィードから取得したタイトルリンクを追加
- 3を繰り返す
AJAX自体は先に述べた、.ajax()で特に何も気にせずできてしまうので、気にせずに実際にコードを書いてみましょう。
コード自体はとてもシンプルで単純です。ポイントは2つあり、まずはsuccess: function(data){ で受け取っているdataです。
コメントの通り、dataはRSSそのものなので、次のポイントである最後らへんの
で、HTMLと同じようにjQueryでリンク先とタイトルを抜き出すことができます。
実行結果を見てみましょう。
今回のコードで、1カ所見覚えがない書き方があるのですが、分かりますか?
答えは以下の部分です。
ここは今まであれば、以下のように.attr()と.text()2つに分けてメソッドチェーンで書いていました。
これがjQuery1.4以降は最初のパターンのように、$()の第2引数にまとめて書くことができます。何気にとても便利でコードが見やすくなるので、1.4以降を使っている方は覚えておくといいでしょう。
プラグイン化
RSS2.0をリストで表示する、という機能は実装できたので、色々な場面で使えるようにプラグインにしてみましょう。まずは完成したソースコードを見てください。
実行する場合は以下のように実行します。
変更点
プラグインにした際の変更点は
- URLや表示件数はrss2renderのオプションで指定できる
- 読み込みが完了するまでloadingテキストを表示
の2点です。
プラグインの定義方法
また今回はプラグインの定義方法をいつもとは違う方法にしてみました。
上記の2つは書き方が違うだけで、他には違いはありません。使っているプラグインによっては、後者の書き方で書いているプラグインもあるので、これらは同じ意味だよ、ということを理解してもらえればと思います。
オプション
実行するときに
のように、rss2renderの引数に{}でオプションを渡していますが、jQueryプラグインを使ったことのある方にはお馴染みの方法ですね。必要なものだけ渡すことができるので、いくつも引数を書く必要がなく、とても便利です。
オプションの定義方法もとても簡単で、以下のようにします。
変数cがオプションで、オプションのプロパティとして、値を持たせます。左が名前で、右がデフォルトの値になります。
ただし、このスクリプトの場合、URLがないと何もできないので、以下の処理を追加しておきます。
loading中はテキストを表示する
まず初期化のタイミングで以下のように<div id="loading">loading...</div>
を入れておきます。
$.ajax()が成功したら、.remove()で削除します。
オプションで指定した数を超えた場合終了する
さらに、この処理を追加するために、.each()の引数にiを渡しておきます。
このiを利用して、c.number - 1 よりも i が大きくなったら処理をやめるようにします。
以上でプラグイン化まで出来ました。完成サンプルを確認してみてください。表示件数は5件にしています。