Movable Type 備忘録

 Google AJAX Feed API

  • Apr212007
  • Vote:
    http://bizcaz.com/archives/2007/04/21-223233.php
  • Categories: Tools
  • Tags:
  • Social Bookmark

こんにちわ^^

今日は昨日までとは違って東京は暖かかったです(●´∀｀●)
学生の頃の友人たちと上野で飲んできました。

福島からわざわざこの日の為に東京に来た友人もいて、学生の頃の思い出話に華咲きました。
みんなの近況が聞けて楽しかったです。わたしもがんばらなきゃ･･･と思う今日この頃です。

さて、先日Google AJAX Feed APIってのが公開されました。

どんなAPIかというと、お気に入りブログのRSSやAtomの一般的なFEEDをカンタンに取得することができるAPIみたいです。

さっそくわたしも使ってみましたのでご紹介します。

このAPIを使えば、クロスドメインの制約を気にすることなく、他サイトのFEEDを利用することができるようです。

まずはサンプルですね (￣∇￣)b
サンプルとして、いつもお世話になってるぷーこさんとTAEKOさんのサイトのFEEDを表示させてみました。

Google AJAX Feed API Keyを取得する

  1. まず、Google AJAX Feed APIからStart using the Google AJAX Feed APIをクリックして、以下のことを行います。

    • 「I have read and agree with the terms and conditions」にチェック
    • 「My web site URL」に各自のサイトのURLを入力
    • 「Generate API Key」をクリック

  2. そうすると、Googleアカウントでのログインを促されますので、ログインします。
    Googleアカウントをお持ちでない人は、こちらから登録できます。

  3. 結果、以下の情報がもらえます。

    • Your key is:
      API Keyになります。

    • This key is good for all URLs in this directory:
      先ほど入力した、各自のサイトのURLが表示されます。

    • Here is an example web page to get you started:
      FEEDを表示するためのサンプルHTMLになります。
      先ほどわたしが例として示したのは、このHTMLをカスタマイズしたものです。

  4. あとは、サンプルHTMLをお好みでカスタマイズするなどして、表示させてたいページの</body>タグの上辺りに追加することでお気に入りサイトのFEEDを表示させることができました。

ちなみに、例として示したお気に入りサイトの一覧は以下のコードになります。

  1. <script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR API KEY"></script>
  2. <script type="text/javascript">
  3.  
  4. var urls = new Array("http://feeds.feedburner.jp/EgoecoDays",
  5.                      "http://taeko.w-museum.com/wing/index.xml");
  6.  
  7. google.load("feeds", "1");
  8.  
  9. function initialize() {
  10.   var container = document.getElementById("google-feed");
  11.   container.innerHTML = "<dl>";
  12.  
  13.   for (var n = 0; n < urls.length;n++ ) {
  14.       var feed = new google.feeds.Feed(urls[n]);
  15.       feed.setNumEntries(5);
  16.  
  17.       feed.load(function(result) {
  18.         if (!result.error) {
  19.           container.innerHTML += "<dt><a href='" + result.feed.link + "'>" + result.feed.title + "<\/a><\/dt>";
  20.  
  21.           for (var i = 0; i < result.feed.entries.length; i++) {
  22.             var entry = result.feed.entries[i];
  23.             container.innerHTML += "<dd><a href='" + entry.link + "'>" + entry.title + "<\/a><\/dd>";
  24.           }
  25.         }
  26.       });
  27.   }
  28.  
  29.   container.innerHTML += "<\/dl>";
  30. }
  31.  
  32. google.setOnLoadCallback(initialize);
  33. </script>

青い字の部分で取得したいサイトのFEEDを記述してます。
赤い字の部分で最近投稿された記事を5件分取得してます。 ピンクの部分で一覧表示させてます。

ここまでを</body>タグの上辺りに追加します。
そそ、以下の赤い字のYOUR API Keyというところを、各自のAPI Keyで記述しておきます。

  1. <script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR API KEY"></script>

そして、以下の緑の字の部分を表示したい場所(たとえば、サイドバーなど)に追加します。
ここに取得したFEEDの一覧が表示されます。

  1. <div id="google-feed"></div>

以上です。

  • Related Entries

 Trackback Pings(1)

from S[es] blog

遅ればせながら・・・、ではあるが、Google Ajax Feed API、便利...

Tracked on January 28, 2008

 Comments(8)

#1: Posted by oscar @ April 24, 2007 [REPLY]
user-pic

こんにちは～
これ、プロキシ用意しなくてよかったりして、ずいぶん便利ですよね。
リニューアルがひと段落したら、早速試してみようと思ってます。

 
#2: Posted by bzbell @ April 26, 2007 [REPLY]
user-pic

>>1 oscar さん

こんにちわ^^
返事が遅くなりすいません (m;_ _)mペコ

Google Ajaxは使い方は統一されてるので便利ですよね♪

 
#3: Posted by sora @ April 8, 2009 [REPLY]
user-pic

初めまして、soraと申します。
Google AJAX Feed APIを使っているのですが、、
新着記事にはnewアイコンを表示させることもできるのでしょうか？

 
#4: Posted by Author Profile Page bzbellからsoraへの返信 @ April 8, 2009 [REPLY]
user-pic

>>3 sora さん

こんばんわ^^

以下のコードをお使いください。 

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_API_KEY"></script>
<script type="text/javascript">
var urls = new Array("http://●●●/index.xml");
google.load("feeds", "1");
function initialize() {
var now       = (new Date()).getDate();
var container = document.getElementById("google-feed");
container.innerHTML = "<dl>";
for (var n = 0; n < urls.length;n++ ) {
var feed = new google.feeds.Feed(urls[n]);
feed.setNumEntries(5);
feed.load(function(result) {
if (!result.error) {
container.innerHTML += "<dt><a href='" + result.feed.link + "'>" + result.feed.title + "<\/a><\/dt>";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry   = result.feed.entries[i];
var entdate = new Date(entry.publishedDate).getDate();
var newmark = '';
if (now == entdate) newmark = '<img src="http://●●●/new.gif" width="20" height="5" \/>';
container.innerHTML += "<dd><a href='" + entry.link + "'>" + entry.title + "<\/a>" + newmark + "<\/dd>";
}
}
});
}
container.innerHTML += "<\/dl>";
}
google.setOnLoadCallback(initialize);
</script>
※行頭に全角スペースが入ってますので、削除してからお使いください。

カンタンに説明すると、

  1. 9 行目で今日の日付をとってます。
  2. 24 行目でエントリの日付をとってます。
  3. 27 行目で日付をチェックして必要なら NEW マークを付けます。
  4. 28 行目で NEW マークを表示してます。

以上です。
確認してませんが、たぶん期待する表示になるかと思います。
ご確認くださいぺこり

 
#5: Posted by sora @ April 9, 2009 [REPLY]
user-pic

bzbell様
お返事ありがとうございます★
テンプレートのスクリプトはMTじゃないと使えないんでしょうか？
の上に記入するのではなくの上ですよね？；＾＾
全角を抜いてそのまま貼り付けたんですが、エラーで表示されませんでした。

現在のGoogle AJAX Feed APIのテンプレートに9行目、24行目、27行目、28行目を追加することで表示されました★
すごく助かりました本当にありがとうございます。
ぺこり

 
#6: Posted by sora @ April 9, 2009 [REPLY]
user-pic

bzbell様
何度も何度も本当すいません。;_;
NEWアイコンが一日で消えるという設定を3時間後には消えるなどできますでしょうか？
宜しくお願い致します。

 
#7: Posted by Author Profile Page bzbellからsoraへの返信 @ April 9, 2009 [REPLY]
user-pic

>>6 sora さん

こんばんわ^^

以下のコードを参考にしてください。 

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_API_KEY"></script>
<script type="text/javascript">
var urls = new Array("http://●●●/index.xml");
var limit = 3 * 60 * 60 * 1000;// 3 時間後
google.load("feeds", "1");
function initialize() {
var now       = (new Date()).getTime();
var container = document.getElementById("google-feed");
container.innerHTML = "<dl>";
for (var n = 0; n < urls.length;n++ ) {
var feed = new google.feeds.Feed(urls[n]);
feed.setNumEntries(5);
feed.load(function(result) {
if (!result.error) {
container.innerHTML += "<dt><a href='" + result.feed.link + "'>" + result.feed.title + "<\/a><\/dt>";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry   = result.feed.entries[i];
var entdate = new Date(entry.publishedDate).getTime();
var newmark = '';
if (now >= entdate && now <= (entdate + limit)) {
newmark = '<img src="http://●●●/new.gif" width="20" height="5" \/>';
}
container.innerHTML += "<dd><a href='" + entry.link + "'>" + entry.title + "<\/a>" + newmark + "<\/dd>";
}
}
});
}
container.innerHTML += "<\/dl>";
}
google.setOnLoadCallback(initialize);
</script>

変更点は 5 行目追加と、28 行目を変更してます。
ご確認くださいぺこり

 
#8: Posted by sora @ April 15, 2009 [REPLY]
user-pic

bzbell様
うまくできました。
この度は本当にありがとうございました。
うるうる

 

 Post a Comment

 

コメント用フィード