2014/05/08

【JavaScript】コピペで簡単!!Google Feed APIの使い方

【JavaScript】コピペで簡単!!Google Feed APIの使い方

前回は【PHP】XMLで取得したデータをJSON形式に変換する方法ということで,RSSで配信されているXMLデータを取得し,JSONに変換する方法を紹介しました.

しかし,一度PHPを挟むのは面倒ですし,どうせならJavaScriptだけで取得できたほうが便利ですよね.

そこで,今回はJavaScriptのみでXMLデータを取得できるGoogle Feed APIを紹介します.

目次

Google Feed APIとは

Google Feed APIとは,Googleが提供するAPIの一つです.これまでクロスドメイン問題によりPHPなどのサーバ側プログラムを必要としていたRSSの取得が,クライアント側のスクリプトのみで行えるようになります.

サンプルと実行結果

Google Feed APIのページ内,左メニューのFeed APIをクリックし,続いてDeveloper's Guideをクリックします.

The "Hello World" of Feedの項目をクリックすると,以下の様なサンプルソースが表示されます.

<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://fastpshb.appspot.com/feed/1/fastpshb");
      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>

これをそのままコピーアンドペーストするだけで,RSSの取得ができます.

好みのサイトのRSSを取得したい場合は,http://fastpshb.appspot.com/feed/1/fastpshbの部分を変更するだけです.

また,取得したフィードの数を変更したい場合は,

var feed = new google.feeds.Feed("~~~");
feed.setNumEntries(10);
feed.load(functi......

のように記述することで,取得件数を変更できます.

取得件数とRSSのURLを本ウェブサイトに変更し,実際に実行した結果は以下のようになります.

まとめ

Google Feed APIを利用することで,とても簡単にRSSを取得することが出来ることがお分かりいただけたかと思います.

今回紹介した方法ではタイトルだけの取得になっていますが,オブジェクトに変換されているので,他の情報の取得も難なく行えると思います.

上記のサイトでソースの紹介・解説がされているので,参考にしてみてください.