Google Feed APIを使ってJavaScriptでRSSを取得して表示する。はてなブックマーク数

| コメント(0) | トラックバック(0)

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

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

Google Feed API - Google Code
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=128x128/);
        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>

 

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

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

 

1位:予約【1月17日 00時00分 販売スタート!! 延長★送料無料】【2011春新作 \1290】SMLサイズ クラッシュorノンクラッシュ春カラー♪ストレッ

1位:予約【1月17日 00時00分 販売スタート!! 延長★送料無料】【2011春新作 \1290】SMLサイズ クラッシュorノンクラッシュ春カラー♪ストレッ

2位:RRK5000本完売!前回より更に改良して再販! 入荷いたしました!!メール便配送送料無料選べる5カラー+5cm脚長の5サイズ美脚ライン!スキニーデニム スキニ...

2位:RRK5000本完売!前回より更に改良して再販! 入荷いたしました!!メール便配送送料無料選べる5カラー+5cm脚長の5サイズ美脚ライン!スキニーデニム スキニ...

3位:【初売りセール】送料無料!ゆるカジ★[MAC]手書き風ロゴプリント♪フード付きプルオーバー☆パーカーワンピース△【入荷済】

3位:【初売りセール】送料無料!ゆるカジ★[MAC]手書き風ロゴプリント♪フード付きプルオーバー☆パーカーワンピース△【入荷済】

4位:当店全品の中から自由に選べる♪お好きなアイテム15,000円(税込)分を詰め込んで⇒なんと10,500円(税込)に!期間限定&個数限定◆全品対象!よりどり福袋《...

4位:当店全品の中から自由に選べる♪お好きなアイテム15,000円(税込)分を詰め込んで⇒なんと10,500円(税込)に!期間限定&個数限定◆全品対象!よりどり福袋《...

5位:初回秒殺の為緊急追加!!★tocco2011春コクション★葛岡碧さんカタログアイテム 【Roccioロシオ】toccoモデル162cmです♪【ブラックは2月9日...

5位:初回秒殺の為緊急追加!!★tocco2011春コクション★葛岡碧さんカタログアイテム 【Roccioロシオ】toccoモデル162cmです♪【ブラックは2月9日...

6位:ふわふわ冬バージョン♪パロディプリントワンピース冬バージョン★楽天ランキング入賞のあのワンピがカムバック【冬新作】パロディプリントワンピース★冬バージョン※メー...

6位:ふわふわ冬バージョン♪パロディプリントワンピース冬バージョン★楽天ランキング入賞のあのワンピがカムバック【冬新作】パロディプリントワンピース★冬バージョン※メー...

7位:1月13日10時~再販**大人気ランキング1位*ura-bsk896(無地)とbbb-bsk1666(チェック柄)お好きなタイプをチョイス★*腹巻きリブデザイン...

7位:1月13日10時~再販**大人気ランキング1位*ura-bsk896(無地)とbbb-bsk1666(チェック柄)お好きなタイプをチョイス★*腹巻きリブデザイン...

8位:【送料無料】【冬物値下げ・特別SALE】水玉柄ニットソーエンパイア ワンピース Aライン 単品購入メール便配送(代引除く) レビュー記載で送料無料!【smtb0...

8位:【送料無料】【冬物値下げ・特別SALE】水玉柄ニットソーエンパイア ワンピース Aライン 単品購入メール便配送(代引除く) レビュー記載で送料無料!【smtb0...

9位:●72時間限定!●中身が全て自分で選べる!失敗無しの大満足な『☆魔法の福袋チケット☆』

9位:●72時間限定!●中身が全て自分で選べる!失敗無しの大満足な『☆魔法の福袋チケット☆』

10位:上質なナチュラルウエアの人気ブランド・サンテテのお得な福袋が登場!ノルディックな新作ジャガードワンピ・長袖カットソー・ソックス2足の贅沢4点で19,320円が4...

10位:上質なナチュラルウエアの人気ブランド・サンテテのお得な福袋が登場!ノルディックな新作ジャガードワンピ・長袖カットソー・ソックス2足の贅沢4点で19,320円が4...

トラックバック(0)

ここだよ

トラックバックスパム対策の為この記事にトラックバックを行うにはトラックバック元の記事中にこのページのURL「http://blog.kumacchi.com/2011/01/google_feed_apijavascriptrss.html」を含めてください。

コメントする

RSS

rss

ウェブページ

よく読まれている記事

アクセスランキング

 

QRコード

KUMA TYPE QRコード

マイページ

yays

このブログ記事について

このページは、くまっちが2011年1月18日 23:58に書いたブログ記事です。

ひとつ前のブログ記事は「【海外ドラマ】『ヤング・スーパーマン シーズン3』の感想」です。

次のブログ記事は「Google Feed APIで用意されている要素以外の要素にアクセスする方法」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

  • seo
track feed KUMA TYPE フィードメーター - KUMA TYPE あわせて読みたい