2007年05月20日

Google AJAX Feed API

JavaScriptだけでRSSリーダを簡単に自作する方法が出来たっぽいので試してみました。

っていうか、自分的に見やすい導入方法が無かったので自分用にまとめ

まず、

からユーザキーを取得します。

ちなみに、このユーザキーを取得するにはGoogleのアカウントが必要です。
Gmailのアカウントがあれば良いので、持ってない人はこの機会に取ってしまいましょう( ̄▽ ̄)ノ

(まぁ、既に持っていてもユーザキーとアカウントが紐付けされるので、あえて捨てアカウントを取得するという手もありますが(^^;)
で取得すると自分のユーザキーとそれを用いたサンプルが表示されるんですが、今一なサンプルなので、もうちょっと使いやすい物を掲載

<html>
  <head>
    <script type="text/javascript" 
     src="http://www.google.com/jsapi?key=上記のサイトで取得したコード">
    </script>
    <script type="text/javascript">

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

    function initialize() {
      var feed = new google.feeds.Feed("RSSのURL");
      feed.setNumEntries(12); //データの表示件数です。デフォルトだと4件
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("DIVのID");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement("div");
            var a = document.createElement("a");
            a.href = entry.link;
            a.target = "_blank"; //リンクを別のWindowで開く場合
            a.style.color = "色指定";
            a.appendChild(document.createTextNode("≫" 
              + entry.title + " [" + entry.publishedDate.substring(5, 25) 
              + "]"));
            div.appendChild(a);
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);

    </script>
  </head>
  <body>
    <div id="DIVのID"></div>
  </body>
</html>
こんな感じです。

なお、このサンプルだとタイトルだけで概要は表示されません。
概要を表示させたい場合は「entry.content」をスクリプトで表示させてください。

っていうか、ブログのツールバーに表示させたいだけなら

を使うのが楽です。
使い方はこちらのサイト(↓)が詳しいです。あと、「Google AJAX Feed API」についてはが画像付きで参考になるかと思います。

それからAPIのリファレンスはこちら

Posted by Takuchan at 2007年05月20日 16:58 | トラックバック(0)