オープンソース紹介

「Google AJAX Feed API」を使ってみよう!

ブログのRSS情報をWebサイトトップ等に表示させたい場合、強引にRSSを表示させるプログラムを作成しても可能ですが、せっかくなのでGoogleが公開しているAPIを利用してみましょう。Googleは、いくつかAPIを公開していますので、
どんどんこちらで紹介していこうと思います。

今回は・・・
「ジーピーオンラインの制作実績」のRSSを読み込んで見ましょう!

制作実績のRSSはこちらです!
http://www.gpol.co.jp/works/index.php?action=rss

この情報を、GoogleのAPIを通して、
簡単なTopics形式の表示にチャレンジしてみます!

できたhtmlはこんな感じです!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Google API RSS</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

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

function initialize() {
var feed = new google.feeds.Feed("http://www.gpol.co.jp/works/index.php?action=rss");  // 読み込むRSS

feed.setNumEntries(10);

feed.load(function(result) {

 if (!result.error) {

  var rsshtml = "";

  for (var i = 0; i < result.feed.entries.length; i++) {
   var entry = result.feed.entries[i];
   var dd = new Date(entry.publishedDate);
   var yearNum = dd.getYear();
   if (yearNum < 2000) yearNum += 1900;
   var date = '<br>【' + yearNum + "年"+(dd.getMonth()+1)+"月"+dd.getDate()+"日】 ";
   rsshtml += " " + date +"<a href='" + entry.link + "' title='" + entry.title + "'>" + entry.title + "</a><br />";
   rsshtml += entry.content + "<br /><br />";
  }
  var rssdata = document.getElementById("RssList");
  rssdata.innerHTML = rsshtml;
 }
});
}

google.setOnLoadCallback(initialize);

</script>
</head>
<body>
<ul>
<div id="RssList"></div>
</ul>
</body>


ちょっと単純なものになってしまいましたが、
まぁ上手く表示できればよしとしましょう。

このAPIで気をつけたい箇所は下記の4点です。

【Google APIの読み込み】
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
グーグルのAPI設定をしておく必要があります。


【RSS情報】
var feed = new google.feeds.Feed("http://www.gpol.co.jp/works/index.php?action=rss");  //読み込むRSS
読み込むRSS情報の設定をする必要があります。


【html出力変数】
var rssdata = document.getElementById("RssList");
ここで設定する変数が、htmに出力する変数になります。


【htmlに出力】
<div id="RssList"></div>
この箇所に、スクリプトで設定した変数を記述します。

このhtmlを出力すると以下のようになります。

gpol_seisaku_rss.gif

どうなる事かと内心思ってましたが、成功です!
とりあえずRSS情報を引っ張ってくることができました!!

やはり単純なhtmlだと少し寂しいですね。。。

htmlの装飾をする場合は、下記の箇所、

   var date = '<br>【' + yearNum + "年"+(dd.getMonth()+1)+"月"+dd.getDate()+"日】 ";
   rsshtml += " " + date +"<a href='" + entry.link + "' title='" + entry.title + "'>" + entry.title + "</a><br />";
   rsshtml += entry.content + "<br /><br />";

この箇所にスタイルシート等を記述すれば、
いい感じにできるはずです!

公式サイトでドキュメントも公開していますので、今後ガンガン使っていこう!
と思われる方は、是非参考にしてみて下さい!

Google AJAX Feed API 公式サイト
http://code.google.com/intl/ja/apis/ajaxfeeds/documentation/


(hirohito)

Webシステムのツボとは

オープンソースの紹介や、プログラミング講座、フリーソフトのレビューなど、Webエンジニアが送る、つれづれ日記。
【隔週金曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive