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

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

<追記>
[現在、Google Feed APIは公式に推奨されていません。](https://developers.google.com/feed/)
いつ廃止されてもおかしくない状態ですので、実装は別の方法をおすすめします…。


■公式ドキュメント
[Google Feed API — Google Developers](https://developers.google.com/feed/?hl=ja)

# サンプル

```html: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>
```

```html
<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入門](http://www.ajaxtower.jp/googleajaxfeed/)
* [サイトに外部ブログのRSSを表示する方法と、記事タイトルが長すぎる場合に省略表示する方法メモ。｜ウェビメモ] (http://webimemo.com/web/3873)
* [Google Ajax Feed APIでWordPress等の外部ブログのRSSをキャッシュを使用せずに表示する方法など](http://memocarilog.info/webdesign/5059)