このページの本文へ

JavaScriptで外部フィードを手軽に取り込める

Google Feed APIで3分マッシュアップ

2009年04月08日 08時00分更新

藤本 壱

  • この記事をはてなブックマークに追加
本文印刷

実際に外部のフィードを表示してみよう

 Google AJAX Feed APIを実際に使ってみましょう。前のページの手順に基づき、ASCII.jp - Web Tools&Tips(http://ascii.jp/web/)のフィードから記事のタイトルと概要を10件分出力するサンプルを作ってみました。コード中にはコメントを付けてあるので、参考にしてください。このサンプルは以下のアドレスで動作を確認でできます。

http://www.h-fj.com/ascii/google_ajax_feed/sample.html


<div id="feed"><p>しばらくお待ちください。</p></div>
<script type="text/javascript">
function loadFeed() {
    // 初期化
    var feed = new google.feeds.Feed("http://ascii.jp/web/rss.xml");
    // 記事を最大10件読み込む
    feed.setNumEntries(10);
    // 記事を読み込む
    feed.load(function(result) {
        var html;
        // 読み込みに成功したときの処理
        if (!result.error) {
            // サイトのタイトルを出力
            html = '<h1><a href="' + result.feed.link + '">' + result.feed.title + '</a></h1>';
            // 各記事の情報を順に出力
            if (result.feed.entries.length) {
                html += '<ul>';
                for (var i = 0; i < result.feed.entries.length; i++) {
                    // 各記事のタイトルと概要を出力
                    var entry = result.feed.entries[i];
                    html += '<li><a href="' + entry.link + '">' + entry.title + '</a><br />';
                    html += '<span class="content">' + entry.contentSnippet + '</span></li>';
                }
                html += '</ul>';
           }
       }
       // 読み込みエラー時の処理
       else {
           html = '<p>フィードの読み込みに失敗しました。</p>';
       }
       // 読み込み結果を、idが「feed」の要素に流し込む
       var container = document.getElementById("feed");
       container.innerHTML = html;
    });
}
// ページが読み込まれたら、loadFeed関数を実行する
google.setOnLoadCallback(loadFeed);
</script>


Google API
ASCII.jp Web Tools&Tipsのフィードの情報を表示した例

 また、このサンプルをさらに改良して、複数のフィードを選択できるようにした例も作ってみました。以下のURLで公開していますので、参考にしてください。

http://www.h-fj.com/ascii/google_ajax_feed/sample2.html


 今回はGoogle AJAX Feed APIのごく基本的な使い方を紹介しましたが、このAPIにはほかにもさまざまな機能があります。詳細は、Google AJAX Feed APIのページを参照のうえ試してみましょう。

http://code.google.com/intl/ja/apis/ajaxfeeds/

Web Professionalトップへ

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く