Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 5 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);

参考サイト

matsui-a
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away