Google Feed APIを使って外部ブログのRSSを表示する方法

Google Feed APIをはじめて使ったのでめも。

<追記>
現在、Google Feed APIは公式に推奨されていません。
いつ廃止されてもおかしくない状態ですので、実装は別の方法をおすすめします…。

■公式ドキュメント
Google Feed API — Google Developers

サンプル

js読み込み

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//APIのモジュールを読み込み
google.load("feeds", "1");

function initialize() {
	//フィードの取得
	var feed = new google.feeds.Feed("フィードのURL");

	//エントリの表示数の設定
	feed.setNumEntries(3);

	//関数の定義
	feed.load(function(result) {
		if (!result.error) {
			//読み込みが成功したときの処理
			var container = document.getElementById("feed");
			var htmlstr = "";
			for (var i = 0; i < result.feed.entries.length; i++) {
				
				var entry = result.feed.entries[i];

				//日付の取得
				var pdate = new Date(entry.publishedDate); //Dateクラス
				var pyear = pdate.getFullYear();   //年
				var pmonth = pdate.getMonth() + 1; //月
				var pday = pdate.getDate();        //日

				//日付を2桁表示に変更
				if (pyear < 2000) pyear += 1900;
				if (pmonth < 10) {pmonth = "0" + pmonth;}
				if (pday < 10) {pday = "0" + pday;}

				var date = pyear + "." + pmonth + "." + pday + " ";

				//画像の取得
				imgsrc = entry.content.match(/src="(.*?)"/igm);

				//html生成
				htmlstr += '<li><a href="' + entry.link + '">';
				htmlstr += '<div class="thum"><img ' + imgsrc + ' width="95" height="75"></div>';
				htmlstr += '<p class="info">' + date + '| ' + entry.categories[0] + '</p>';
				htmlstr += '<p class="tit">' + entry.title + '</p></a></li>';
			}
			container.innerHTML = htmlstr;
		} else {
			//読み込みが失敗したときの処理
			alert(result.error.code + ":" + result.error.message);
		}
	});
}
google.setOnLoadCallback(initialize);
</script>

<ul id="feed"></ul>

#APIの読み込み

##JSファイルを読み込み

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

##APIのモジュールを読み込み

基本これでOK

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

###書き方はこんなかんじ

google.load(module, version, package)

1番目の引数にはAPIの名前(module)

* feeds   …Google AJAX Feed API
* imaps   …Google Maps API
* isearch …Google AJAX Search API

2番目の引数（version）

とりあえず1が安定らしいので1。

3番目の引数（package）

省略

#関数の定義

<script type="text/javascript">

  //APIのモジュールを読み込み
  google.load("feeds", "1");

  function initialize(){
    // 実行される処理
  }

  google.setOnLoadCallback(initialize);

</script>

#フィードを取得する

function initialize(){
　　var feed = new google.feeds.Feed("フィードのURL");
　　feed.load(function(result){
　　  // 実行される処理
　　}
}

google.feeds.FeedクラスでフィードのURLを指定する。
「load」メソッドを使って関数呼び出し。
関数を呼び出すときに、読み込みエラーなどのオブジェクトが渡されれるので指定できる。

function initialize(){
  var feed = new google.feeds.Feed("フィードのURL");
  feed.load(function(result){
    if (!result.error){
　　　　//読み込みが成功したときの処理
       alert("成功");
    }else{
　　　　//読み込みが失敗したときの処理
       alert(result.error.code + " : " + result.error.message);
    }
  });
}

#エントリの表示数の設定

feed.setNumEntries(エントリ数);

setNumEntriesメソッドを使う。

feed.setNumEntries(3);
feed.load(function(result) {
　　if (!result.error) {
　　　 for (var i = 0; i < result.feed.entries.length; i++) {
        〜処理〜
　　　 }
　　}
});

#フィードの情報を取得する

プロパティ	要素
feedUrl	フィードのURL
title	タイトル
link	URL
description	説明
author	作成者
entries[]	エントリ

feed.load(function (result){
  if (!result.error){
    var title = result.feed.title;
    var link = result.feed.link;
    var description = result.feed.description;
    var author = result.feed.author;
  }
});

#エントリの情報を取得する

プロパティ	要素
title	タイトル
link	URL
content	本文
contentSnippet	概要
publishedDate	日付
categories[]	タグのリスト

feed.load(function (result){
  if (!result.error){
    for (var i = 0; i < result.feed.entries.length; i++) {
      var entry = result.feed.entries[i];
    }
  }
});

##日付の形式変更

publishedDateプロパティでDateクラスのオブジェクトを作成

var pdate = new Date(entry.publishedDate);

Dateクラスのオブジェクトを作っておくとで細かい要素を取得できる

var pdate = new Date(entry.publishedDate);
var pday = pdate.getDate();　　　　　//日
var pmonth = pdate.getMonth() + 1;　//月（※0から11の値を返すので+1）
var pyear = pdate.getFullYear();　　//年
var phour = pdate.getHours();　　　  //時
var pminute = pdate.getMinutes();　 //分
var psecond = pdate.getSeconds();　 //秒

日付の2桁表示

if (pyear < 2000) pyear += 1900;
if (pmonth < 10) {pmonth = "0" + pmonth;}
if (pday < 10) {pday = "0" + pday;}
var date = pyear + "." + pmonth + "." + pday + " ";

##画像の表示

imgsrc = entry.content.match(/src="(.*?)"/igm);
htmlstr += '<div class="thum"><img ' + imgsrc + ' width="95" height="75"></div>';

画像はmatchメソッドで普通に取得。

#タイトルの長さをCSSで設定

1行で文末を...にしたい場合はこれでOK

.tit {
  overflow:hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}

ただ、複数行の場合、text-overflowは使えないので、
:afterで画像とかテキストとかで無理矢理置くしかないっぽい。

.tit {
  position: relative;
  height: 300px;
}

.tit:after {
  position: absolute;
  display: block;
  content: '…';
  width: 15px;
  height: 15px;
  right: 0px;
  bottom: 0px;
  background: #fff;
}

##RSSが更新されない場合
キャッシュを拾って表示するため、なかなか更新されなかったりする。
分単位でキャッシュを更新して表示したい場合、URLの後ろに時間を指定すればOK

var d = new Date();
var dq = d.getMonth()+""+d.getDate()+""+d.getHours()+d.getMinutes();
var feed = new google.feeds.Feed("http://サイトのURL/feed?"+dq);

#参考サイト

• Google AJAX Feed API入門
• [サイトに外部ブログのRSSを表示する方法と、記事タイトルが長すぎる場合に省略表示する方法メモ。｜ウェビメモ] (http://webimemo.com/web/3873)
• Google Ajax Feed APIでWordPress等の外部ブログのRSSをキャッシュを使用せずに表示する方法など