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

  • 39
    いいね
  • 1
    コメント
この記事は最終更新日から1年以上が経過しています。

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

参考サイト