［み］Google Feed APIでアンテナサイトを5分で作る方法

calendar2014年9月5日　tagGoogle JavaScript web

［み］Ingressが楽しすぎて、Wikiにつづいてアンテナサイトも作ったで紹介したアンテナサイト「Ingressアンテナ」は、Google Feed APIを使って5分で作ることができます！
Ingressアンテナ

今回はその作り方を紹介します。コードをコピペすれば、誰でも5分でアンテナサイトが作れますので、ぜひ作ってみてください。

基本のコード

こちらがコピペするコードです。Ingressアンテナには、AdSenseやらTwitterウィジェットやら余計なものがくっついていますので、それを省いたコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
//<![CDATA[
var getRssFeeds = function (_id, _urls, _maxLength) {
if(!_id || !_urls || (!(_urls instanceof Array))) return;
var entryNum = 5;//各RSSの読み込みエントリー数
var maxLength = (_maxLength)? _maxLength : 0 ;
//総エントリー表示数（0はすべて表示)
//変数定義
var entriesArray = new Array();
var complete = 0;
//初期化
var init = function () {
for(var i=0 ; i < _urls.length ; i++){
//RSS読み込み
var feed = new google.feeds.Feed(_urls[i]);
feed.setNumEntries(entryNum);
feed.load(function(result) {
if (!result.error) {
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
entriesArray.push(entry);
var pdate = new Date(entry.publishedDate);
var arr = entriesArray[(entriesArray.length-1)];
arr.sortDate = pdate.getTime();
arr.siteTitle = result.feed.title;
arr.siteUrl = result.feed.link;
}
}
complete++;
if(_urls.length == complete) echo();
});
}
};
//表示
var echo = function () {
entriesArray.sort (function (b1, b2) { return b1.sortDate < b2.sortDate ? 1 : -1; } );//降順にソート
var feedLength = (_maxLength)? _maxLength : entriesArray.length;
var container = document.getElementById(_id);
var html='<ul>';
for (var i = 0; i < feedLength; i++) {
var entry = entriesArray[i];
var pdate = new Date(entry.publishedDate);
var Y = pdate.getFullYear();
var m = pdate.getMonth() + 1;
m = (m < 10)? "0" + m:m;//月数字を2桁で表示
var d = pdate.getDate();
d = (d < 10)? "0" + d:d;//日数字を2桁で表示
var date = Y + "年" + m + "月" + d + "日";
html += '<li>';
html += '<a href="' + entry.link + '">' + entry.title + '</a>';
html += date + entry.siteTitle;
}
html += '</ul>';
container.innerHTML += html;
};
google.setOnLoadCallback(init);
};
getRssFeeds("feeds", [ //ここに読み込みたいRSSを記述
"http://ingressjp.blogspot.com/feeds/posts/default",
"http://ingresswiki.wiki.fc2.com/index.rdf",
"http://ingress.gamerch.com/rss/Atom",
"http://ingress.wiki.fc2.com/index.rdf",
"http://ingress.miha5.com/index.php?cmd=rss&ver=1.0",
"http://rssc.dokoda.jp/r/30a614b87587278d9a2b59e82b17fd50/http/b.hatena.ne.jp/search/tag?q=Ingress"
]);
//]]>
</script>
</head>
<body>
<div id="feeds"></div>
</body>
</html>

これで、各RSSから5件ずつエントリーを拾ってきて表示できます。
→　Google Feed APIのデモ

あとは、class とかつけて CSS で見た目を整えればOKです。

投稿された時間まで表示したいとき

↑のコードでは、投稿日のみ表示して時間は表示しないようになっています。時間も表示したい場合は、次のコードを

var date = Y + "年" + m + "月" + d + "日";

と入れ替えてください。

hour = (hour < 10)? "0" + hour:hour;
var minute = pdate.getMinutes();
minute = (minute < 10)? "0" + minute:minute;
var date = Y + "年" + m + "月" + d + "日" + hour + ":" + minute;

↑このコードは時間も分も必ず2桁で表示するようにしています。でないと、たとえば1時6分が「1:6」のように何時だかわかりにくい表示になってしまいます。

はてブ数・ツイート数も表示したいとき

タイトルだけじゃ味気ないし、はてブ数とかツイート数とか表示したらもっとアンテナサイトっぽくなるよね！という方は、次のコードを追加してください。

時間まで表示して、はてブ数・ツイート数も表示するコード

基本のコードに加え、投稿された時間も表示し、はてブ数・ツイート数も表示するコードがこちらです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
//<![CDATA[
var getRssFeeds = function (_id, _urls, _maxLength) {
if(!_id || !_urls || (!(_urls instanceof Array))) return;
var entryNum = 6;//各RSSの読み込みエントリー数
var maxLength = (_maxLength)? _maxLength : 0 ;
//総エントリー表示数（0はすべて表示)
//変数定義
var entriesArray = new Array();
var complete = 0;
//初期化
var init = function () {
for(var i=0 ; i < _urls.length ; i++){
//RSS読み込み
var feed = new google.feeds.Feed(_urls[i]);
feed.setNumEntries(entryNum);
feed.load(function(result) {
if (!result.error) {
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
entriesArray.push(entry);
var pdate = new Date(entry.publishedDate);
var arr = entriesArray[(entriesArray.length-1)];
arr.sortDate = pdate.getTime();
arr.siteTitle = result.feed.title;
arr.siteUrl = result.feed.link;
}
}
complete++;
if(_urls.length == complete) echo();
});
}
};
//表示
var echo = function () {
entriesArray.sort (function (b1, b2) { return b1.sortDate < b2.sortDate ? 1 : -1; } );//降順にソート
//this.entriesArray.sort (function (b1, b2) { return b1.sortDate > b2.sortDate ? 1 : -1; } );//昇順にソート
var feedLength = (_maxLength)? _maxLength : entriesArray.length;
var container = document.getElementById(_id);
var html='<ul>';
for (var i = 0; i < feedLength; i++) {
var entry = entriesArray[i];
var pdate = new Date(entry.publishedDate);
var Y = pdate.getFullYear();
var m = pdate.getMonth() + 1;
m = (m < 10)? "0" + m:m;//月数字を2桁で表示
var d = pdate.getDate();
d = (d < 10)? "0" + d:d;//日数字を2桁で表示
var hour = pdate.getHours();
hour = (hour < 10)? "0" + hour:hour;
var minute = pdate.getMinutes();
minute = (minute < 10)? "0" + minute:minute;
var date = Y + "年" + m + "月" + d + "日" + hour + ":" + minute;
html += '<li>';
html += '<a href="' + entry.link + '">' + entry.title + '</a> <img src="http://b.hatena.ne.jp/entry/image/large/' + entry.link + '"> <img src="http://tools.tweetbuzz.jp/imgcount?url=' + entry.link + '">';
html += date + entry.siteTitle;
}
html += '</ul>';
container.innerHTML += html;
};
google.setOnLoadCallback(init);
};
getRssFeeds("feeds", [ //ここに読み込みたいRSSを記述
"http://ingressjp.blogspot.com/feeds/posts/default",
"http://ingresswiki.wiki.fc2.com/index.rdf",
"http://ingress.gamerch.com/rss/Atom",
"http://ingress.wiki.fc2.com/index.rdf",
"http://ingress.miha5.com/index.php?cmd=rss&ver=1.0",
"http://rssc.dokoda.jp/r/30a614b87587278d9a2b59e82b17fd50/http/b.hatena.ne.jp/search/tag?q=Ingress"
]);
//]]>
</script>
</head>
<body>
<div id="feeds"></div>
</body>
</html>

こんなカンジになります。
→　Google Feed APIのデモ　その2

サイトごとに表示したい場合

ここまで紹介したものは、複数サイトのフィードを読み込んで時間順に並べて表示するコードでしたが、「すしぱくのアンテナサイト｜ぱくんな」のようにサイトごとに表示したい場合はこちらのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>

<meta charset="utf-8">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
//<![CDATA[
var getRssFeeds = function (_id, _urls, _maxLength) {
if(!_id || !_urls || (!(_urls instanceof Array))) return;
var entryNum = 5;//各RSSの読み込みエントリー数
var maxLength = (_maxLength)? _maxLength : 0 ;
//総エントリー表示数（0はすべて表示)
//変数定義
var entriesArray = new Array();
var complete = 0;
//初期化
var init = function () {
for(var i=0 ; i < _urls.length ; i++){
//RSS読み込み
var feed = new google.feeds.Feed(_urls[i]);
feed.setNumEntries(entryNum);
feed.load(function(result) {
if (!result.error) {
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
entriesArray.push(entry);
var pdate = new Date(entry.publishedDate);
var arr = entriesArray[(entriesArray.length-1)];
arr.sortDate = pdate.getTime();
arr.siteTitle = result.feed.title;
arr.siteUrl = result.feed.link;
}
}
complete++;
if(_urls.length == complete) echo();
});
}
};
//表示
var echo = function () {
entriesArray.sort (function (b1, b2) { return b1.sortDate < b2.sortDate ? 1 : -1; } );//降順にソート
//this.entriesArray.sort (function (b1, b2) { return b1.sortDate > b2.sortDate ? 1 : -1; } );//昇順にソート
var feedLength = (_maxLength)? _maxLength : entriesArray.length;
var container = document.getElementById(_id);
var html='<ul>';
for (var i = 0; i < feedLength; i++) {
var entry = entriesArray[i];
var pdate = new Date(entry.publishedDate);
var Y = pdate.getFullYear();
var m = pdate.getMonth() + 1;
m = (m < 10)? "0" + m:m;//月数字を2桁で表示
var d = pdate.getDate();
d = (d < 10)? "0" + d:d;//日数字を2桁で表示
var hour = pdate.getHours();
hour = (hour < 10)? "0" + hour:hour;
var minute = pdate.getMinutes();
minute = (minute < 10)? "0" + minute:minute;
var date = Y + "年" + m + "月" + d + "日" + hour + ":" + minute;
html += '<li>';
html += '<a href="' + entry.link + '" target="_blank">' + entry.title + '</a>';
html += date + entry.siteTitle;
}
html += '</ul>';
container.innerHTML += html;
};
google.setOnLoadCallback(init);
};

getRssFeeds("feeds1", [
"http://ingress.miha5.com/index.php?cmd=rss&ver=1.0"
]);
getRssFeeds("feeds2", [
"http://rssc.dokoda.jp/r/30a614b87587278d9a2b59e82b17fd50/http/b.hatena.ne.jp/search/tag?q=Ingress"
]);
getRssFeeds("feeds3", [
"http://ingressjp.blogspot.com/feeds/posts/default"
]);
getRssFeeds("feeds4", [
"http://ingresswiki.wiki.fc2.com/index.rdf"
]);
getRssFeeds("feeds5", [
"http://ingress.gamerch.com/rss/Atom"
]);
getRssFeeds("feeds6", [
"http://ingress.wiki.fc2.com/index.rdf"
]);
//]]>
</script>
</head>
<body>
<div id="feeds1"></div>
<div id="feeds2"></div>
<div id="feeds3"></div>
<div id="feeds4"></div>
<div id="feeds5"></div>
<div id="feeds6"></div>
</body>
</html>

このコードで、こんなカンジになります。
→　Google Feed APIのデモ　その3

全部のせのコード

ラーメンのトッピングみたいですね。嗚呼ラーメン食べたい。

全部のせ（投稿時間・はてブ数・ツイート数も表示）のコードがこちら。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
//<![CDATA[
var getRssFeeds = function (_id, _urls, _maxLength) {
if(!_id || !_urls || (!(_urls instanceof Array))) return;
var entryNum = 5;//各RSSの読み込みエントリー数
var maxLength = (_maxLength)? _maxLength : 0 ;
//総エントリー表示数（0はすべて表示)
//変数定義
var entriesArray = new Array();
var complete = 0;
//初期化
var init = function () {
for(var i=0 ; i < _urls.length ; i++){
//RSS読み込み
var feed = new google.feeds.Feed(_urls[i]);
feed.setNumEntries(entryNum);
feed.load(function(result) {
if (!result.error) {
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
entriesArray.push(entry);
var pdate = new Date(entry.publishedDate);
var arr = entriesArray[(entriesArray.length-1)];
arr.sortDate = pdate.getTime();
arr.siteTitle = result.feed.title;
arr.siteUrl = result.feed.link;
}
}
complete++;
if(_urls.length == complete) echo();
});
}
};
//表示
var echo = function () {
entriesArray.sort (function (b1, b2) { return b1.sortDate < b2.sortDate ? 1 : -1; } );//降順にソート
//this.entriesArray.sort (function (b1, b2) { return b1.sortDate > b2.sortDate ? 1 : -1; } );//昇順にソート
var feedLength = (_maxLength)? _maxLength : entriesArray.length;
var container = document.getElementById(_id);
var html='<ul>';
for (var i = 0; i < feedLength; i++) {
var entry = entriesArray[i];
var pdate = new Date(entry.publishedDate);
var Y = pdate.getFullYear();
var m = pdate.getMonth() + 1;
m = (m < 10)? "0" + m:m;//月数字を2桁で表示
var d = pdate.getDate();
d = (d < 10)? "0" + d:d;//日数字を2桁で表示
var hour = pdate.getHours();
hour = (hour < 10)? "0" + hour:hour;
var minute = pdate.getMinutes();
minute = (minute < 10)? "0" + minute:minute;
var date = Y + "年" + m + "月" + d + "日" + hour + ":" + minute;
html += '<li>';
html += '<a href="' + entry.link + '" target="_blank">' + entry.title + '</a> <img src="http://b.hatena.ne.jp/entry/image/large/' + entry.link + '"> <img src="http://tools.tweetbuzz.jp/imgcount?url=' + entry.link + '">';
html += date + entry.siteTitle;
}
html += '</ul>';
container.innerHTML += html;
};
google.setOnLoadCallback(init);
};
getRssFeeds("feeds1", [
"http://ingress.miha5.com/index.php?cmd=rss&ver=1.0"
]);
getRssFeeds("feeds2", [
"http://rssc.dokoda.jp/r/30a614b87587278d9a2b59e82b17fd50/http/b.hatena.ne.jp/search/tag?q=Ingress"
]);
getRssFeeds("feeds3", [
"http://ingressjp.blogspot.com/feeds/posts/default"
]);
getRssFeeds("feeds4", [
"http://ingresswiki.wiki.fc2.com/index.rdf"
]);
getRssFeeds("feeds5", [
"http://ingress.gamerch.com/rss/Atom"
]);
getRssFeeds("feeds6", [
"http://ingress.wiki.fc2.com/index.rdf"
]);
//]]>
</script>
</head>
<body>
<div id="feeds1"></div>
<div id="feeds2"></div>
<div id="feeds3"></div>
<div id="feeds4"></div>
<div id="feeds5"></div>
<div id="feeds6"></div>
</body>
</html>

で、これだとこんなカンジです。
→　Google Feed APIのデモ　その4

フィードを吐き出していないサイトのフィードを作る方法

ここまでで、アンテナサイトのフォーマットは完成です。あとは、フィードを追加していくだけです。WordPressやMovableTypeで作られたサイトなら、勝手にフィードを吐き出してくれてますが、中にはフィードがないサイト、あるいは、フィードはあるけどあるカテゴリのみのフィードが欲しいとき、そんな時は、フィードを生成してしまいましょう。

Ingressアンテナで言えば、「タグ「Ingress」を検索 – はてなブックマーク」っていうのが、生成したフィードから拾ってきているものです。もちろん、はてなブックマークはフィードがありますが、「Ingress」というタグがついたものだけのフィードは流石に準備してくれていません。

フィードの生成はこのサイトで行いました。
RSS Creater

生成したいサイトのURLをいれるだけでOKです。Ingressアンテナのように、ピンポイントのアンテナサイトの時は、フィードを生成するサイトが活躍してくれます。

CSSのサンプル

Ingressアンテナのコードそのまんまですが、参考まで。

/*--------------------------------------
リセット
--------------------------------------*/
* {
margin: 0;
padding: 0;
font-size: 100%;
}
a {
text-decoration: none;
}
ul, ol {
list-style: none;
}
img {
vertical-align: top;
border: 0;
}
html {
font-family: "メイリオ", verdana, sans-serif;
font-size : 100%;
line-height : 1.5;
color: #333;
}

/*--------------------------------------
リンク
--------------------------------------*/
a {
color: #00aeef;
}
a:hover {
text-decoration: underline;
}

/*--------------------------------------
構成
--------------------------------------*/
#contents {
width: 976px;
margin: 0 auto;
clear: both;
}
#main {
width: 624px;
display: block;
float: left;
background-color: #fff;
}
#sub {
width: 336px;
display: block;
float: right;
}

/*--------------------------------------
ヘッダ
--------------------------------------*/
header {
margin-bottom: 16px;
}
h1 {
color: #00aeef;
font-size: 52px;
padding: 24px;
}
.nav {
width: 100%;
height: 40px;
display: block;
background-color: #75d3f6;
margin-bottom: 16px;
}
ul#menu {
width: 976px;
margin: 0 auto;
}
ul#menu li {
float: left;
text-align: center;
border: none;
padding: 8px 16px;
color: #fff;
}
ul#menu li:hover {
background-color: #00aeef;
}

/*--------------------------------------
フィード
--------------------------------------*/
#feeds li,#feeds1 li,#feeds2 li,#feeds3 li,#feeds4 li,#feeds5 li,#feeds6 li {
border-bottom: 4px solid #75d3f6;
padding: 20px 0 12px;
}
#feeds li:hover,#feeds1 li:hover,#feeds2 li:hover,#feeds3 li:hover,#feeds4 li:hover,#feeds5 li:hover,#feeds6 li:hover {
background-color: #ECF0F1;
}
h2 {
font-size: 1.8em;
color: #666;
background-color: #ECF0F1;
border-bottom: 4px solid #7F8C8D;
padding: 16px;
margin:48px 0 0;
}
h2.first {
margin-top: 0;
}
.e_title {
font-size: 1.4em;
font-weight: bold;
}
.small {
font-size: 0.7em;
}
div#main ul li img {
vertical-align: middle;
}

/*--------------------------------------
サイド
--------------------------------------*/
.ad1 {
margin-bottom: 16px;
}
.ad2 {
margin-top: 16px;
}

/*--------------------------------------
下の広告
--------------------------------------*/
.ft_ad {
text-align: center;
padding: 8px;
}

/*--------------------------------------
フッター
--------------------------------------*/
footer {
background-color: #75d3f6;
}
.copy {
color: #fff;
padding: 24px;
}
.copy a {
color: #fff;
}
.copy a:hover {
text-decoration: none;
}

これだと、こんなカンジです。
Ingressアンテナ

アンテナに追加してほしい方は、どうぞみはらまでご連絡ください：）

それにしても、アンテナサイトは5分でできるのに、この記事読み終えるのは5分以上かかりそうですねｗｗ