酢ろぐ！

カレーが嫌いなスマートフォンアプリプログラマのブログ。

Google AJAX Feed API を使ってみた

Web

今日はGoogle AJAX Feed APIを使って、Googleブログ検索の結果を表示みました。

前に話題になった時に一度チャレンジしてみたのですが、「javascript？なにそれ美味しいの？」というレベルだったので途中で投げ出してしまいましたが、そこから毛が生えた程度には成長したのでリベンジしてみました。

一応、これでフィードの表示は出来ました。(ちょっと長いけど……）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAZCFlm0FwnWJ2qMBp8G3bahQAoVMUYodpmLLKY_3YrAjsMC5RVRTc_73A3gaSFvvjR1G-UOazqqk-sQ"></script>
    <script type="text/javascript">
    <!--
      // ブログ検索したいキーワードを指定する
      var keyword = 'CH3COOH';

      function feedInitialize() {

        // ブログ検索用のURLを作成
        var feedUrl = 'http://blogsearch.google.co.jp/blogsearch_feeds?hl=ja&um=1&q=';
        feedUrl += encodeURIComponent(keyword);
        feedUrl += '&lr=lang_ja&ie=utf-8&num=10&output=rss&scoring=d';

        // どこのURLからFeedを持ってきたか確認する為に表示
        var url_container = document.getElementById("url");
        url_container.innerHTML = '<a href="' + feedUrl + '">ソース</a>';

        // 取得するFeedのURLを指定する
        var feed = new google.feeds.Feed(feedUrl);

        // 表示するエントリの数を指定(ここでは10個に)
        feed.setNumEntries(10);

        // Feedの取得を行う
        feed.load(function(result) {

          // エラーが発生したら処理を終了させる
          if (result.error) return;

          var container = document.getElementById("feed");
          var text = "";
          for (var i = 0; i < result.feed.entries.length; i++)
          {
            var entry = result.feed.entries[i];

            var eTitle = entry.title;
            var eContent = entry.contentSnippet;
            var eLink = entry.link;

            text += '<dt><a href="' + eLink + '">' + eTitle + '</a></dt>';
            text += '<dd>' + eContent + '</dd>';
          }
           container.innerHTML = '<dl>' + text + '</dl>';
        });
      }

      google.load("feeds", "1");
      google.setOnLoadCallback(feedInitialize);

    -->
    </script>

    <title>Google AJAX Feed API を使ってみた</title>
  </head>
  <body>

    <!-- ここにFeedのURLを入れる -->
    <div id="url"></div>

    <!-- ここにFeedのリンクと内容を入れる -->
    <div id="feed">loading...</div>

  </body>
</html>

これをUTF-8で保存してブラウザで見てみると……下図のようにGoogleブログ検索のFeedをきちんと表示してくれました。

ところで、どうもところどころ表示されているエントリとされないのがあるみたいです。（新しいエントリ程歯抜けになってる？）

Google AJAX Feed APIを経由させると吐かれるフィードが異なるのかなぁ。ひょっとしたらAPIへの指定の仕方がまずい(何か足りていない)のかな。javascript難しいです……

追記

このエントリを書いている間に「もしかしてキャッシュ？」と、思いついたので調べてみたら当たりでした。

取得するFeedのURLに対してダミーのパラメータを付与して、キャッシュを騙す事で最新のFeedを取得出来るようです。こんな感じ。

    // ダミーのパラメータを付与する事でキャッシュを参照せずに新規で取得する
    var dummy = '&dummy=' + new Date().getTime(); 
    feedUrl += dummy;