みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

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


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

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

↑上記のように西暦年月日と1件目のタイトルが右から左に流れてきて止まる。(間は半角で)
 4~5秒表示後、次の2件目が流れてくる。

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


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

例. 2010年11月15日 最新記事のタイトル
例. 2010年11月14日 記事2件目のタイトル
例. 2010年11月13日 記事3件目のタイトル
例. 2010年11月12日 記事4件目のタイトル
例. 2010年11月11日 記事5件目のタイトル

↑上記のように西暦年月日と1~5件目のタイトルを表示させたい。(間は半角で)

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


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

投稿日時 - 2010-11-15 12:30:37

QNo.6320846

fi7

困ってます

質問者が選んだベストアンサー

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

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

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

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

投稿日時 - 2010-11-18 09:27:08

ANo.5

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.4

続き、

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
を見てくれ。
あんまり、テストしてないよ!

投稿日時 - 2010-11-16 16:25:27

お礼

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

投稿日時 - 2010-11-17 02:51:30

ANo.3

マーキースクロールみたいなのも一応出来た。
↓だ。
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);
}

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

投稿日時 - 2010-11-16 16:16:43

ANo.2

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

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行スクロールのやつを利用するかと....
(続く)

投稿日時 - 2010-11-16 11:02:05

ANo.1

<!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>

後は、明日...

投稿日時 - 2010-11-15 18:47:12

お礼

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

投稿日時 - 2010-11-16 00:10:22

あなたにオススメの質問