Edited at

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

More than 3 years have passed since last update.

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);


参考サイト