Posted by : Izumikawa Fukumi 2012年8月1日水曜日

最近僕は、自分のプロフィールサイトを作ろうと言う計画をしていて
そのサイトのコンテンツで重要なのがRSSでした。

なので色々とrssフィードを検索して調べたのですが
Flashを使ったrssフィードだったりして使い物になりません。
せっかくだからブログパーツを使わないで作りたいですよね?

でもいい情報を見つけたので皆さんにも紹介します。
(多分知っている方は、多いと思います。それかこれよりもいいのがあると思います。)


表示例...

こんな感じのリスト式で表示されます。
この場合記事のタイトルとリンクを取得されます。

google+の場合記事の一行目の字とリンクを取得します。
ご理解ください。

必要な物は、1つ
GoogleのAPlキーだけ
APlキー入手は、他の講座をご覧ください。




【ソース】

<script type="text/javascript" src=" "></script>//APlキーを"と"の間に記入
<script type="text/javascript">
<!--//
google.load("feeds", "1");
var entryArray = new Array();
var entryNum = 0;
function initialize() {
feedAdd("http://gplus.slfeed.net/RSS2/103883213408660487064", 2);
feedAdd("http://aquarzx2010.blogspot.com/feeds/posts/default", 1);//取得したいRSSのURL"と"内に記入
}
function feedAdd(rssUrl, boolNum) {
var feed = new google.feeds.Feed(rssUrl);
feed.setNumEntries(3);//一つのサイトのRSSを何個取得するか?デフォルトの場合3
feed.load(function(result) {
if (!result.error) {
for (var i = 0; i < result.feed.entries.length; i++) {
entryArray[entryNum] = result.feed.entries[i];
var date = new Date(result.feed.entries[i].publishedDate);
entryArray[entryNum].sortDate = ( date.getFullYear()*1000000 ) + ( (date.getMonth() + 1)*3600*32 ) + ( date.getDate()*3600 ) + ( date.getHours()*60 ) + date.getMinutes();
entryArray[entryNum].blogName = result.feed.title;
entryNum+=1;
}
}
if(boolNum==1){
feedOutput("feed", 100);//フィードの出力
}
});
}
function feedOutput(feedId, listNum){
var useFeed = "";
var useDate = "";
var container = document.getElementById(feedId);
entryArray = asort(entryArray, "sortDate");
if(listNum==100){//出力するリスト数
listNum = entryNum;
}
for (var i = 0; i < listNum; i++) {
var entry = entryArray[i];
var date = new Date(entry.publishedDate);
var m = date.getMonth() + 1;
if (m < 10) {m = "0" + m;}
var d = date.getDate();
if (d < 10) {d = "0" + d;}
var h = date.getHours();
if (h < 10) {h = "0" + h;}
var mn = date.getMinutes();
if (mn < 10) {mn = "0" + mn;}
useDate = m + "月" + d + "日";
useFeed += '<div style="float:left;width:120px;">'+ m + "/" + d + "(" + h + ':' + mn + ')' + '</div><div  style="float: left;width:400px;height:18px;overflow:hidden;"><a href="' + entry.link + '" target="_blank" title="' + entry.title + '【' + entry.blogName + '】">' + entry.title + '</a> <img src="http://b.hatena.ne.jp/entry/image/large/' + entry.link + '"></div><div style="float:right;width:150px;height:18px;overflow:hidden;">' + entry.blogName + '</div><br><hr size="1" />';
}
container.innerHTML = '<div>' + useFeed + '<div></div></div>';
}
function asort(myArray, key){
return myArray.sort ( function (b1, b2) { return b1[key] > b2[key] ? -1 : 1; } );
}
google.setOnLoadCallback(initialize);
//-->
</script>
<div style="height:300px; width:700px; overflow:auto;" id="feed">ロード中しばらく待たれ!</div>





このソースをコピペで使用してください。コメントが書かれている所だけを修正すれば
完了になります。

APlキーは、src=" ">の「"」と「"」の間に記入してください。
取得するRSSのURLは、
feedAdd(" ", 1)の「"」と「"」の間に記入してください。

これで準備完了
最後にロードメッセージを変えてみましょう。

ソースの最後にd="feed">ロード中しばらく待たれ!</div>があります。
そこの「ロード中しばらく待たれ!」を消して好みの字を書くだけです。
画像も表示出来るのでGIFのロード画像を使うのもいいですね♪

説明は、以上です。
どうですか?簡単ですか?出来ませんか?
もし出来ないのならコメントに書いてください。

以上です。

- Copyright © I aim to creator. - Hatsune Miku - Powered by Blogger - Designed by Johanes Djogan -