Google Feed APIを使ってJavaScriptでRSSを取得して表示する。

Google Feed APIを使うとCGIやPHPなどが使えないサーバーでもJavaScriptでRSSを取得してブログなどに表示させることが出来る。FC2ブログなどのレンタルブログなどでRSSから取得した情報を表示したい場合などに使えるだろう。

使い方などの詳細は、下記のページなどで参照することが出来る。サンプルソースなどがあるので英語がわからなくてもプログラムが読める人ならなんとかなるだろう。実際私がそうであるように。

Google Feed API – Google Code[http://code.google.com/intl/ja/apis/feed/]
Google Feed API Developer’s Guide – Google Feed API – Google Code

実際にGoogle Feed APIを利用して下記ページの楽天市場のレディースファッションのデイリー売れ筋ランキングの内1位~10位迄を画像付きで表示するJavaScriptを書いてみる。

【楽天市場】レディースファッション | デイリー売れ筋人気ランキング(1位~50位) – ランキング市場

Google Feed APIを利用するにはまず利用するサイト専用にAPI KeyをGoogleのページから取得する必要がある。以下のリンク先からAPI Keyを取得できる。

Sign-up for an API Key – Google Loader – Google Code

取得したAPI Keyは以下のようにして使う。<head>~</head>の間に挿入しておくか、作成したスクリプトと一緒に貼り付けて使う。以下の例で使用しているAPI Keyはこのサイト用のものなので実際にサンプルを動かす場合には自分のサイト用に取得したAPI keyを利用する必要がある。

<script src="https://www.google.com/jsapi?key=ABQIAAAALzmN1hgTr2PC_IRwV5lbFRSyNpe6ieGxTDwC7hiaorwE3hy2EhSHZzpjusBl7KtoROnZK4WVyhHARg" type="text/javascript"></script>

実際に作成したサンプルは以下の通り。楽天市場のレディースファッションのデイリー売れ筋ランキングである以下のURLを参照して1位~10位迄を表示するようにしてある。http://ranking.rakuten.co.jp/rss/daily/g100371st0sl0rt1du1ge9mb0pr00p1.xml

文字コードはGoogle Feed APIが自動的に調整してくれるようで、取得するRSSの文字コードと表示するブログの文字コードが異なっていても自動で変換してくれいているようなので心配要らない。

表示する件数は「feed.setNumEntries(10); 」の部分で調整している。10がRSSから取得する件数となる。

 

<script src="https://www.google.com/jsapi?key=ABQIAAAALzmN1hgTr2PC_IRwV5lbFRSyNpe6ieGxTDwC7hiaorwE3hy2EhSHZzpjusBl7KtoROnZK4WVyhHARg" type="text/javascript"></script>
<script type="text/javascript">

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

function initialize() {
  var feed = new google.feeds.Feed("http://ranking.rakuten.co.jp/rss/daily/g100371st0sl0rt1du1ge9mb0pr00p1.xml");
  feed.setNumEntries(10);
  feed.load(function(result) {
    if (!result.error) {
      var container = document.getElementById("feed");
      var html = ”;
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        var image = entry.content.match(/http\:\/\/thumbnail.+?\.(?:jpg|gif|png)\?_ex=128×128/);
        html += ‘<p><a href="’ + entry.link + ‘"><img src="’ + image + ‘" alt="’ + entry.title + ‘"/></a></p>’;
        html += ‘<p><a href="’ + entry.link + ‘">’ + entry.title + ‘</a></p>’;
      }
      container.innerHTML = html;
    }
  });
}
google.setOnLoadCallback(initialize);

</script>

<div id="feed" style="width:200px;"></div>

※シングルクォートなどの文字が勝手に全角になったりしている所は各自変換して下さい。

下が実際にこのページに上のスクリプトとほぼ同様の物を貼りつけたところ、細かいデザインの調整は行っていないので素の状態で表示されている。

アンテナサイトを作ってみたりとか色々応用できると思う。


タグ : , ,