みはら.comはアフィリエイト広告を利用しています
［み］Ingressが楽しすぎて、Wikiにつづいてアンテナサイトも作ったで紹介したアンテナサイト「Ingressアンテナ」は、Google Feed APIを使って5分で作ることができます！
Ingressアンテナ
今回はその作り方を紹介します。コードをコピペすれば、誰でも5分でアンテナサイトが作れますので、ぜひ作ってみてください。
こちらがコピペするコードです。Ingressアンテナには、AdSenseやらTwitterウィジェットやら余計なものがくっついていますので、それを省いたコードです。
[cc lang=”HTML”]
あとは、class とかつけて CSS で見た目を整えればOKです。
↑のコードでは、投稿日のみ表示して時間は表示しないようになっています。時間も表示したい場合は、次のコードをvar date = Y + "年" + m + "月" + d + "日";と入れ替えてください。
[cc lang=”JavaScript”]
hour = (hour 10)? “0” + hour:hour;
var minute = pdate.getMinutes();
minute = (minute 10)? “0” + minute:minute;
var date = Y + “年” + m + “月” + d + “日” + hour + “:” + minute;
[/cc]
↑このコードは時間も分も必ず2桁で表示するようにしています。でないと、たとえば1時6分が「1:6」のように何時だかわかりにくい表示になってしまいます。
タイトルだけじゃ味気ないし、はてブ数とかツイート数とか表示したらもっとアンテナサイトっぽくなるよね！という方は、次のコードを追加してください。
[cc lang=”html”]
[/cc]
基本のコードに加え、投稿された時間も表示し、はてブ数・ツイート数も表示するコードがこちらです。
[cc lang=”html”]
ここまで紹介したものは、複数サイトのフィードを読み込んで時間順に並べて表示するコードでしたが、「すしぱくのアンテナサイト｜ぱくんな」のようにサイトごとに表示したい場合はこちらのコードです。
[cc lang=”html”]
ラーメンのトッピングみたいですね。嗚呼ラーメン食べたい。
全部のせ（投稿時間・はてブ数・ツイート数も表示）のコードがこちら。
[cc lang=”html”]
ここまでで、アンテナサイトのフォーマットは完成です。あとは、フィードを追加していくだけです。WordPressやMovableTypeで作られたサイトなら、勝手にフィードを吐き出してくれてますが、中にはフィードがないサイト、あるいは、フィードはあるけどあるカテゴリのみのフィードが欲しいとき、そんな時は、フィードを生成してしまいましょう。
Ingressアンテナで言えば、「タグ「Ingress」を検索 – はてなブックマーク」っていうのが、生成したフィードから拾ってきているものです。もちろん、はてなブックマークはフィードがありますが、「Ingress」というタグがついたものだけのフィードは流石に準備してくれていません。
フィードの生成はこのサイトで行いました。
RSS Creater
生成したいサイトのURLをいれるだけでOKです。Ingressアンテナのように、ピンポイントのアンテナサイトの時は、フィードを生成するサイトが活躍してくれます。
Ingressアンテナのコードそのまんまですが、参考まで。
[cc lang=”css”]
/*————————————–
リセット
————————————–*/
* {
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;
}
[/cc]
これだと、こんなカンジです。
Ingressアンテナ
アンテナに追加してほしい方は、どうぞみはらまでご連絡ください：）
それにしても、アンテナサイトは5分でできるのに、この記事読み終えるのは5分以上かかりそうですねｗｗ
Ingressやっている方、どうぞWikiを編集してくださいね：）
Ingress Wiki
