Google AJAX Feed APIとは

広告

それではここからGoogle AJAX Feed APIを使ったスクリプトを作成しフィードを取得する方法について解説していきます。Google AJAX Feed APIに関する情報は下記をご覧下さい。

p2-1

これから開発を行われる方はまずガイドをご覧になって下さい。左側に表示されている「Feed API」メニューをクリックして下さい。さらに「Developer's Guide」メニューをクリックして下さい。

p2-2

このページにはGoogle AJAX Feed APIを使ったスクリプトの記述方法について解説されています。一度ご覧になっておいて下さい。

ガイドには簡単なサンプルが掲載されていますので実際に動かしてみてGoogle AJAX Feed APIがどのように使うことができるのか確認してみます。少し下へスクロールして頂くと「The "Hello World" of Feed」と書かれたサンプルがあります。

p2-3

こちらがGoogle AJAX Feed APIを使ったサンプルとなります。HTMLページの中にAPIを利用したスクリプトを記述されていることが分かります。このページをブラウザで表示すると指定したフィードを読み込みそれをHTMLページに表示します。

ではテキストエディタを開き先程のページに表示されているサンプルプログラムをコピーしてエディタに貼り付けて下さい。 

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

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

    function initialize() {
      var feed = new google.feeds.Feed("http://googlejapan.blogspot.com/atom.xml");
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement("div");
            div.appendChild(document.createTextNode(entry.title));
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);

    </script>
  </head>
  <body>
    <div id="feed"></div>
  </body>
</html>

サンプルプログラムの中で対象となるフィードを次のように変更してあります。(上記の赤字の部分です)。 

変更前：
new google.feeds.Feed("http://fastpshb.appspot.com/feed/1/fastpshb");

変更後：
new google.feeds.Feed("http://googlejapan.blogspot.com/atom.xml");

このURLは下記から取得しています。

p2-4

画面右上の「Site Feed」と書かれたリンク先が「http://googlejapan.blogspot.com/atom.xml」となっています。

では先程のファイルを「sample.html」として保存し、ブラウザで表示して下さい。次のように表示されます。

p2-5

「Google Japan Blog」が配信しているATOMフィードを取得し、その中でタイトルだけを取り出して表示しています。

このように非常に簡単なスクリプトを記述するだけで様々なサイトが配信しているRSSやATOMフィードを取得して利用することが可能になります。

( Written by Tatsuo Ikura )