Google AJAX Feed APIを使った外部サイトのRSS埋め込み
それでは、図2を見てみましょう。このサンプルでは、「URL」のテキストボックスに「http://thinkit.jp/rss/rss20.xml」などのRSSのURLを入力して「送信」を押すと、Google AJAX Feed APIを使って、指定されたRSSを取得し、RSS内の各記事のタイトルをJSTを使って描画します。サンプルファイルはこちらからダウンロードできます(808_2.zip/25.4 KB/GPL)。
このサンプルでもHTMLとJavaScriptを完全に分離しています。HTMLファイルでは、サンプル1でも読み込んでいた、jQuery、JSTに加えて、Google AJAX Feed APIのライブラリファイルと、このサンプルアプリケーションのために自作したsample2.jsを読み込んでいます。
このサンプルでは、「送信」ボタンを押すとテキストボックスに入力された値をurlという変数に代入します。
var url = $('#url').val();
このURLをGoogle AJAX Feed APIに渡して、RSSを取得させます。
![](/images/article/808-201-t.png)
JSTテンプレートでのforループの使い方
それでは、取得されたRSSのデータの描画のサンプルを通じて、JSTによるforループ構文を紹介していきます。今回のサンプルで使用されているJSTテンプレートは以下の通りです。
{for entry in entries}
- ${entry.title}
{/for}
これがサンプル1と同様に非表示化された