| Tips 1 | Feedを読み込んで表示させたい | JavaScript |
| ＞＞ | point 日付部分はXMLの種類に合わせる | ||
| ＞＞ | point 別ドメインのFeedは読み込みに一工夫必要 |
最近、Feedを読み込んで最新情報を表示させる機会が増えてきたのではないだろうか？ Feedを表示させる方法は、jQueryのプラグインや「Google AJAX Feed API」（code.google.com/intl/ja/apis/ajaxfeeds/）を使用したりすることで、埋め込みが容易になってきている。ここでは読み込みにプラグインを使用せずに表示させてみよう【1】。まずはHTML【2】、JavaScript【3】を用意しよう。読み込むFeedはAtom形式を用意した。
【1】Feedを読み込んだ例
【2】HTML
【3】JavaScript
では、JavaScriptを見ていこう。読み込んで表示させるにあたって、HTMLの「新着リスト」の文言を消したいので、2行目のempty（）で読み込んだ際に消している。次に、entrylistというidがふられた要素内に、＜ul＞＜/ul＞を追加している【4】。4行目の$.get（）で読み込むファイルとコールバック関数を指定している。
【4】ul要素を追加する
Atomではそれぞれのエントリー部分がで囲まれているので、$（'entry',data）.each（）;でそれぞれのentryを読み込みコールバック関数を指定している。var title = $（'title', this）.text（）;でそれぞれのentryのtitleを変数「title」に格納。dateもpublished部分を格納している。各記事のエントリーへのリンクは、linkのhref属性を取得してurlに格納している【5】。
【5】Feedから各要素を取り出す
日時を表示させる部分に関しては読み込むFeedの種類によって違いが出てくる。Atomの場合はJavaScriptのDate関数だけでは表示させることができないので、ここでは「Rewish」の「JavaScriptのDateオブジェクトを拡張してPHPのdate関数を実装」（rewish.org/javascript/php_date）で紹介されている「php_date.js」を使用してみる。HTMLで「php_date.js」を先に読み込んでおくことで、Date関数のように使うことが可能になる。表示形式とFeedから読み込んだ日付のdateを与えて、objに入れておく【6】。
【6】日付部分はFeedの種類によって変わる
最後にここまで取得したモノを連結する【7】。ここでulの中にli要素を追加して、さらにそのli要素にhtmlを追加する。JavaScriptでFeedを読み込む場合、別ドメインにあるものをそのまま扱うことはできない。その場合はクロスドメイン対策も必要になってくるので気をつけておこう。
【7】取得したものを表示させる
【1】Feedを読み込んだ例
【2】HTML
【3】JavaScript
では、JavaScriptを見ていこう。読み込んで表示させるにあたって、HTMLの「新着リスト」の文言を消したいので、2行目のempty（）で読み込んだ際に消している。次に、entrylistというidがふられた要素内に、＜ul＞＜/ul＞を追加している【4】。4行目の$.get（）で読み込むファイルとコールバック関数を指定している。
【4】ul要素を追加する
Atomではそれぞれのエントリー部分が
【5】Feedから各要素を取り出す
日時を表示させる部分に関しては読み込むFeedの種類によって違いが出てくる。Atomの場合はJavaScriptのDate関数だけでは表示させることができないので、ここでは「Rewish」の「JavaScriptのDateオブジェクトを拡張してPHPのdate関数を実装」（rewish.org/javascript/php_date）で紹介されている「php_date.js」を使用してみる。HTMLで「php_date.js」を先に読み込んでおくことで、Date関数のように使うことが可能になる。表示形式とFeedから読み込んだ日付のdateを与えて、objに入れておく【6】。
【6】日付部分はFeedの種類によって変わる
最後にここまで取得したモノを連結する【7】。ここでulの中にli要素を追加して、さらにそのli要素にhtmlを追加する。JavaScriptでFeedを読み込む場合、別ドメインにあるものをそのまま扱うことはできない。その場合はクロスドメイン対策も必要になってくるので気をつけておこう。
【7】取得したものを表示させる
