ホームページ内でのRSS表示の方法

質問

自分のホームページ内に、GoogleのBlogger（ブログ）での各記事のタイトルを表示させたいと考えています。

表示させたい内容は下記の２通りです。

★最新記事から５件を流れる文字で表示させたい

例． 　2010年11月15日 記事１件目のタイトル

↑上記のように西暦年月日と１件目のタイトルが右から左に流れてきて止まる。（間は半角で）
　４～５秒表示後、次の２件目が流れてくる。

※表示させたい件数が変わる事があると思うので、たとえば２～５件とかの設定ができるようにしたい。
　また、停止表示させる秒数や流れてくる速度を変更できるようにしたい。
　日付とタイトルの間に時間を挿入できるようにしたい。　⇒　2010年11月15日 21:15 記事１件目のタイトル
　また、日付を表示しないで時間だけを表示できるようにしたい。　⇒　21:15 記事１件目のタイトル
　基本的には各記事のページにリンクさせたいのですが、リンク先を自由に変更できるようにしたい。
　リンク先の表示方法を変更できるようにしたい。　⇒　target="_blank" など

★最新記事から５件を常に表示させたい

例． 　2010年11月15日 最新記事のタイトル
例． 　2010年11月14日 記事２件目のタイトル
例． 　2010年11月13日 記事３件目のタイトル
例． 　2010年11月12日 記事４件目のタイトル
例． 　2010年11月11日 記事５件目のタイトル

↑上記のように西暦年月日と１～５件目のタイトルを表示させたい。（間は半角で）

※表示させたい件数が変わる事があると思うので、たとえば２～５件とかの設定ができるようにしたい。
　日付とタイトルの間に時間を挿入できるようにしたい。　⇒　2010年11月15日 21:15 記事１件目のタイトル
　また、日付を表示しないで時間だけを表示できるようにしたい。　⇒　21:15 記事１件目のタイトル
　基本的には各記事のページにリンクさせたいのですが、リンク先を自由に変更できるようにしたい。
　リンク先の表示方法を変更できるようにしたい。　⇒　target="_blank" など

○PHPとJavaScript両方でのやり方を知りたいので、詳しい方がいましたらよろしくお願いします。

回答No.5

yyr446 · ベストアンサー

各処理ごとの解説や設置方法をご教授頂ければ．．．

＝＞設置方法については、HTMLまるごとのサンプルが
https://gist.github.com/701552
にある（まだ消されて無いみたい）ので、参考にしてほしい。

　各処理ごとの解説といっても、それほど高度な技法は使ってないです。
っていうかそんなスキルは私には無いです。むしろ好ましくない部分が
あったりするので、解説なんておこがましいです。
ほとんどベタコーディングなので、1行づつ、初心者向けのjavascript
リファレンスなんかで確認してけば、やってる事がわかると思います。
（GoogleのAPI利用の部分は、本人も把握しきっていませんが（無責任））

　この質問をクローズした上で、解らない部分を別途の質問で部分的に、
投稿されれば、解りやすく解説されたり、もっといいコードを書いてくれる
人がたくさんいるでしょう。

回答No.4

yyr446

続き、

feedout.prototype.scrolling = function(){
　this.scroll_timer = setInterval((function(that){
　 return function(){
　　 that.scr_count += 10;
　　 var pos = that.width - that.scr_count;
　　 if (pos < 0){
　　　pos = 0;
　　　clearInterval(that.scroll_timer);
　　　that.scroll_timer = null;
　　 }
　　 that.data[that.rot_count].style.left = pos + "px";
　 }
　})(this),this.scr_int);
}

と作っておいて、例えば
<div id="my_blog_info" style="position:relative;width:30em;height:1em;overflow:hidden;border:1px solid gray">
に対して、

　　 my_output = new feedout(blogEntries);
　　 my_output.scroll(document.getElementById("my_blog_info"),
　　　5,
　　　{hizuke:true,jikan:true},
　　　"_blank",
　　　20000,　　//ローテーションのインターバル(ミリ秒)
　　　100 //スクロールのインターバル(ミリ秒)
　　 );

と指定して使う。

※一気通貫のリストは、
https://gist.github.com/701552
を見てくれ。
あんまり、テストしてないよ！

お礼

コーディングして頂きありがとうございます。
こんな時間になってしまいましたが、教えて頂いた事を自分なりに解析＆実践してみました。
まだまだ勉強不足で、なかなかうまくいかないのですが、もう少し時間をかけてがんばってみようと思います。
お手数をおかけして申し訳ないのですが、各処理ごとの解説や設置方法をご教授頂ければありがたいです。
なにとぞよろしくお願いします。

回答No.3

yyr446

マーキースクロールみたいなのも一応出来た。
↓だ。
feedout.prototype.scroll = function(cotainer,No,format,lnk_target,rot_int,scr_int){
　this.cotainer = cotainer;
　this.idx = No?Math.min(this.entry.length,No):Math.min(this.entry.length,5);
　this.format = format;
　this.lnk_target = lnk_target;

　this.rot_int = rot_int;
　this.rot_count = 0;
　this.rot_timer = null;
　this.scr_int = scr_int;
　this.scr_count = 0;
　this.scroll_timer = null;

　this.data = [];
　this.width = this.cotainer.clientWidth;
　var a,dataobj,hizuke,jikan,str,span;
　for(var i=0;i<this.idx;i++){
　 a = document.createElement("a");
　 a.href = this.entry[0].getHtmlLink().getHref();
　 a.target = this.lnk_target;
　 a.appendChild(document.createTextNode(this.entry[i].getTitle().getText()));
　 dateobj = this.entry[i].getUpdated().getValue().date;
　 hizuke = dateobj.getFullYear() + "年"
　　　　　　 + (dateobj.getMonth() + 1) + "月"
　　　　　　 + dateobj.getDate() + "日" + " ";
　 jikan = ((dateobj.getHours() < 10)?"0"+dateobj.getHours():dateobj.getHours())
　　　　　+ ":"
　　　　　+ ((dateobj.getMinutes() < 10)?"0"+dateobj.getMinutes():dateobj.getMinutes())
　　　　　+ " ";
　 str = (this.format.hizuke?hizuke:"") + (this.format.jikan?jikan:"");
　 span = document.createElement("span");
　 span.appendChild(document.createTextNode(str));
　 span.appendChild(a);
　 span.style.position = 'absolute';
　 span.style.left = this.width + 'px';
　 this.data[i] = span;
　}

　this.cotainer.appendChild(this.data[this.rot_count]);
　this.scrolling();
　this.rot_timer = setInterval((function(that){
　 return function(){
　　 while(that.cotainer.hasChildNodes())
　　　that.cotainer.removeChild(that.cotainer.firstChild);
　　 that.rot_count += 1;
　　 if(that.rot_count > that.idx - 1) that.rot_count = 0;
　　 that.cotainer.appendChild(that.data[that.rot_count]);
　　 that.scr_count = 0;
　　 that.scrolling();
　 }
　})(this),this.rot_int);
}

やはり、長すぎて投稿制限オーバーしたのでので続く。

回答No.2

yyr446

リスト表示の方は、簡単にかたずいた
↓でよいだろう。

function feedout(blogEntries){
　this.entry = blogEntries;
}

feedout.prototype.list = function(cotainer,No,format,lnk_target){

　this.cotainer = cotainer;
　this.idx = No?Math.min(this.entry.length,No):Math.min(this.entry.length,5);
　this.format = format;
　this.lnk_target = lnk_target;

　var a,dataobj,hizuke,jikan,str,li;

　for(var i=0;i<this.idx;i++){
　 a = document.createElement("a");
　 a.href = this.entry[0].getHtmlLink().getHref();
　 a.target = this.lnk_target;
　 a.appendChild(document.createTextNode(this.entry[i].getTitle().getText()));

　 dateobj = this.entry[i].getUpdated().getValue().date;
　 hizuke = dateobj.getFullYear() + "年"
　　　　　　 + (dateobj.getMonth() + 1) + "月"
　　　　　　 + dateobj.getDate() + "日" + " ";
　 jikan = ((dateobj.getHours() < 10)?"0"+dateobj.getHours():dateobj.getHours())
　　　　　+ ":"
　　　　　+ ((dateobj.getMinutes() < 10)?"0"+dateobj.getMinutes():dateobj.getMinutes())
　　　　　+ " ";
　 str = (this.format.hizuke?hizuke:"") + (this.format.jikan?jikan:"");

　 var li = document.createElement("li");
　 li.appendChild(document.createTextNode(str));
　 li.appendChild(a);
　 this.cotainer.appendChild(li);

　}
}

<ul id="my_blog_list" style="margin:0px;padding:0px;list-style:none;"></ul>
に対して、

　　 my_output = new feedout(blogEntries);
　　 my_output.list(document.getElementById("my_blog_list"), // Ulのコンテナー
　　　5, // 表示する記事の件数
　　　{hizuke:true,jikan:true}, // 日付・時間の表示の有無
　　　"_blank" // リンクの開き先
　　 );

と指定すれば、仕様をみたしてるかな。

※スクロール（マーキー表示？）はどうするか、<marquee>要素使えば
　楽だが、芸が無いし、廃止されるかもしれないし、
　前に作った1行スクロールのやつを利用するかと．．．．
（続く）

回答No.1

yyr446

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Blogger API Sample</title>
<style type="text/css"></style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("gdata","1.x");</script>
<script type="text/javascript">
google.setOnLoadCallback(function(){
　var bloggerService = new google.gdata.blogger.BloggerService('GoogleInc-jsguide-1.0');
　var feedUri = 'http://XXXXX.blogspot.com/feeds/posts/default';
　var handleBlogFeed = function(blogFeedRoot) {
　 var blogEntries = blogFeedRoot.feed.getEntries();
　 if(!blogEntries.length){
　　　alert("記事が1件もありません");
　　　return;
　 }else

　　 my_output = new feedout(blogEntries);
　　 my_output.list(document.getElementById("my_blog_list"),
　　　5,
　　　{hizuke:true,jikan:true},
　　　"_blank")
　　 );
　};
　var handleError = function(error) {
　 alert(error);
　};
　bloggerService.getBlogFeed(feedUri,handleBlogFeed,handleError);
});

function feedout(blogEntries){
　this.entry = blogEntries;
/*
　alert(this.entry[0].getTitle().getText());
　alert(this.entry[0].getHtmlLink().getHref());
　alert(this.entry[0].getUpdated().getValue().getDate());
*/
}

feedout.prototype.list = function(contanir,no,format,lnk_target){

}
</script>
</head>
<body>
<h1>Google Blogger API Sample</h1>
<ul id="my_blog_list"></ul>
</body>
</html>

後は、明日．．．

お礼

ありがとうございます。
よろしくお願いします。