Google AJAX Feed APIでRSSフィードをタブで表示

 以前「Google AJAX Feed APIでRSSフィードを表示」ということでGoogle AJAX Feed APIを使ってRSSフィードを表示する方法を紹介しましたが、今回複数のRSSフィードをタブ形式で表示する方法を紹介します。
loading...
 まずはJavaScirpt部分です。フィードの数は自由に変更できますが、たくさん表示すると2段になるので注意してください。表示する記事数も変更できます。API keyはこちらのページで取得してください。
<script type="text/javascript" src="http://www.google.com/jsapi?key=取得したAPI key"></script>

    <script language="Javascript" type="text/javascript">//<![CDATA[

      google.load("feeds", "1");

      function OnLoad() {
        var feedControl = new google.feeds.FeedControl();

        feedControl.addFeed("RSSフィードのURL", "タグのタイトル");
        feedControl.addFeed("RSSフィードのURL", "タグのタイトル");
        feedControl.addFeed("RSSフィードのURL", "タグのタイトル");

     <!--表示したいエントリー数-->
        feedControl.setNumEntries(5);

     <!--リンクを別窓で開く場合を以下を挿入してください-->
        feedControl.setLinkTarget(google.feeds.LINK_TARGET_BLANK);

        feedControl.draw(
             document.getElementById("feedControl"),  {
             drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED  });
      }

      google.setOnLoadCallback(OnLoad);
    //]]>
    </script>
 そして表示したい場所に次のソースを挿入すればフィードが表示されます。
<div id="feedControl">loading...</div>
div内の文字はフィードが表示されるまでの間に表示されます。「ajaxloading.gif」みたいな画像を入れてあげるとおしゃれかも。画像はぜひ以下のページを参考に! 投稿者や投稿日時を表示したくないというという場合はCSSでカスタマイズできます。まず、全体の構造がどうなっているのかを把握する必要があります。
<!-- The Feed Control Class (Note: Linear Mode is Shown) -->
<div class="gfc-control">

  <!-- Per Feed Container -->
  <div class="gfc-resultsRoot">

    <!-- Per Feed Header(フィードのタイトル) -->
    <!-- .gfc-title holds Feed's Label -->
    <div class="gfc-resultsHeader">
      <div class="gfc-title"></div>
    </div>

    <!-- Collection of Entries -->
    <div class="gfc-results">

      <!-- One .gfc-result per entry -->
      <div class="gfc-result">

        <!-- One .gf-result per entry(記事の数だけ繰り返し) -->
        <div class="gf-result">

          <!-- タイトル(リンク部分) -->
          <div class="gf-title">
            <a class="gf-title"></a>
          </div>

          <!-- 投稿者 -->
          <div class="gf-author"></div>

          <!-- 投稿日付 -->
          <div class="gf-relativePublishedDate"></div>

          <!-- 記事の内容 -->
          <div class="gf-snippet"></div>

        </div>
      </div>
      
      <div class="gfc-result"></div>
    </div>
  </div>
  
  <div class="gfc-resultsRoot"></div>

</div>
繰り返しのところはちょっと分かりにくいかもしれません。説明べたですいません。

全体の構造が理解できたら、変更したい場所のクラスをこちらで指定あげれば自由にカスタマイズできます。

#feedControl .gf-result .gf-author,
#feedControl .gf-result .gf-spacer,
#feedControl .gf-result .gf-relativePublishedDate,
#feedControl .gf-result .gf-snippet {
  display : none;
  }
例えば、上記のように指定すると、投稿者や投稿日時は表示されませんので、下のようにタイトルのみとなります。
loading...
自由にカスタマイズもできますし使い勝手はいいと思います。ちなみにこのブログでも右上に設置しています。これはフィードのURLとタイトルに変数を使用して、その記事に付いているタグの最新記事一覧を表示しています。
<!--tag_list-->
feedControl.addFeed("http://weboook.blog22.fc2.com/?xml&utag=<%topentry_tag_list_parsename>", "<%topentry_tag_list_name>");
<!--/tag_list-->
このブログの場合このようになりますね。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
「2008 3 月 01」ですと"年"と"日"が表示されておりませんが、これが一般的なんでしょうか?
【2008/03/18 15:57】 | hoge #- | [edit]
ご指摘ありがとうございます。
恥ずかしながら気付いていませんでした。

ただGoogle側の問題なのでこちらから修正できないかと思います。
もし修正方法があれば紹介させていただきます。
【2008/03/20 20:52】 | 管理人 #6urEx/7U | [edit]
ご回答ありがとうございます。
Googleの問題であれば仕方ないですね。
ですけど、ちょっとお粗末な感じがしますね・・・
【2008/03/24 16:54】 | hoge #- | [edit]
このコメントは管理人のみ閲覧できます
【2008/10/10 08:56】 | - # | [edit]
タブメニュー、拝見させて頂きました。
すごいです。
ぜひ使用させて頂こうと思います。

それから、厚かましいのですが、rss記事が別窓で開ける事とリストマークが付帯出来れば最高です。
方法等有ればご指導願えませんか?
【2009/06/22 15:07】 | pao #BFJTYZbE | [edit]
当ブログをご利用いただきありがとうございます。

ご指摘の件ですが
別窓で開く方法は記事を修正しましたのでご確認ください。

リストマークについては
これはそもそもリストではなくdivで構成されているので
リストっぽく見せるには背景画像等で対応しないといけないと思います。
【2009/06/23 23:07】 | 管理人 #- | [edit]
早々のご回答ありがとうございます。
当HP(製作中-)に、CSSと組合わせて、搭載させて頂こうと思います。
これからもがんばってください。
【2009/06/24 17:30】 | pao #BFJTYZbE | [edit]
これは素晴らしい!
ぜひ使わせていただきますね。
【2010/12/16 04:42】 | ぽち #- | [edit]
投稿者や投稿日時が消えてくれません。

display : none;

これはどこに入れたら良いのですか?
【2011/06/19 17:05】 | 初見 #- | [edit]
おはようございます。

日付は  .gf-result .gf-relativePublishedDate
投稿者は .gf-author

となりますので、
.gf-result .gf-relativePublishedDate,
.gf-author {
display: none;
}

と設定してあげるといいのかなと思います。
【2011/06/20 07:50】 | 管理人 #E2ywrYdA | [edit]
いろいろRSSツールを探していて、ここにたどり着きました。
ぜひ活用したいと思ってます。

1つ質問をお願いします。

ブログ等の自動広告を『PR』部分にて判別・非表示にするスクリプトはどの部分に組み込めばよいのでしょうか?

教えていただければ助かります。
【2011/07/11 23:34】 | taka0727 #tIzNQ2cE | [edit]
おはようございます。

恐らくここで紹介している方法ではタイトルの判別はできないと思います。

http://weboook.blog22.fc2.com/blog-entry-35.html
で紹介されている方法なら、タイトルを表す変数もあるので
可能かもしれません。

あと、以前にmagpieRSSを使って同じようなことしたことがあります。
【2011/07/19 08:09】 | 管理人 #- | [edit]
はじめまして、ぽん太と申します。
こちらのブログを参考にさせていただき、FC2ブログでタグの内容をタブで
表示させられるようになり、感謝しております。
ところでなのですが、私のやり方がまずいようで記事を10件表示するように
feedControl.setNumEntries(10)と設定したのですが、なぜか5件までしか表示されません。
これはどう解決したら良いか、お分かりになるようでしたら教えていただけると幸いです。
自分でもいろいろ試したのですが、どうしても解決できませんでした。
それと、最新記事ではなくランダムに記事内容を表示させられると、さらにいいかなと思うのですが、これも合わせて教えていただけると幸いです。
教えてばかりで申し訳ありません。
【2011/09/06 17:02】 | ぽん太 #PXXG49oI | [edit]
ぽん太さん

はじめまして。
ブログを拝見させていただきましたが、
フィードに載せてある記事の数が5件しかないので
10件に設定しても5件しか表示されないのだと思います。

ブログの設定で「RSSの設定」というところがありますので
そこで表示件数を変えるというと思います。

ランダムについては多分できないと思います。

できればいいですよね~
【2011/09/07 05:25】 | 管理人 #E2ywrYdA | [edit]
おはようございます、ぽん太です。
早々のご回答ありがとうございます。

ご回答いただいたとおりに、
RSSフィードの件数を10件に変更したのですが、
やはり5件しか表示されませんでした。

RSSの表示件数は10件になったのですが・・・。

私の設定の仕方が何か間違っているのかもしれませんね。

せっかく、ご回答いただいたのに直せず、すみません。
【2011/09/07 10:20】 | ぽん太 #PXXG49oI | [edit]
失礼いたしました!!
今確認したら、5件以上表示できるようになっていました!
ありがとうございます!!
【2011/09/07 17:49】 | ぽん太 #PXXG49oI | [edit]
ポン太さん

うまくいってよかったです。
またお立ち寄りください~
【2011/09/08 07:40】 | 管理人 #E2ywrYdA | [edit]
.gf-result .gf-author,
.gf-result .gf-spacer,
.gf-result .gf-relativePublishedDate,
.gf-result .gf-snippet {
display : none;
}

↑はCSSのどの部分に入れ込めばいいのでしょうか?

上の例のようにしたいのですが、初心者なもので消し方がわかりません。
【2012/09/05 02:14】 | じょーかー #- | [edit]
じょーかーさん

スタイルシート内でしたらどこに記述しても大丈夫だと思います。

どうしてもできない場合は、好ましい方法ではないですが
以下のようにHTML内に記述するとできるかもしれません。

<style>
.gf-result .gf-author,
.gf-result .gf-spacer,
.gf-result .gf-relativePublishedDate,
.gf-result .gf-snippet {
display : none;
}
</style>
【2012/09/06 08:09】 | 管理人 #E2ywrYdA | [edit]
htmlの方でやってみるとできました!ありがとうございます!
好ましい方法ではないのですね…

利用させていただきます!

少しカスタマイズをしようと思うのですが、

投稿日時などを付けた時にリンクの下に表示されますが、右側にくるように指定させることってこのcssを編集したらできるのでしょうか。
【2012/09/06 17:25】 | じょーかー #- | [edit]
うまくいってよかったです。

けど、やっぱりマークアップ(HTML)と装飾(CSS)は分けて記述するのが
基本かと思いますし、できれば外部CSSに記述した方がいいと思います。

お問い合わせの件ですが、
CSSを編集すれば可能ですが、元々のCSSがGoogleのサーバーにあり
内容はよく分かりませんの確かなことはいえません。

.gf-relativePublishedDate {float:left;}

などのように回り込ませるとできるかもしれませんけど。。
確認はしていませんのであしからず。
【2012/09/06 21:54】 | 管理人 #E2ywrYdA | [edit]
教えていただきありがとうございます!
試して移動させるところまでできました。

外部CSSに記述してなぜ反映されないのか、その辺を勉強してなんとか解消できるようにします。
【2012/09/06 23:37】 | じょーかー #- | [edit]
うまくいってよかったです。
けどなぜなんでしょうね~ 不思議です。

またお立ち寄りください!
【2012/09/07 07:04】 | 管理人 #E2ywrYdA | [edit]
ブログを始めようとして、タブメニューぜひ使用させて頂きたいのですが、
loading... と表示された後、空白になってしまいます。
http://weboook.blog22.fc2.com/blog-entry-35.html  のほうは出来たのですが…。
大変お手数ですが何か分ければ教えてください。
【2013/07/22 15:30】 | まこのてMac #HfMzn2gY | [edit]
まこのてMac さん

ちょっとこれだけでは原因は分かりませんが、
javascriptが正常に機能できていないということですので、
まずはダブルコロンやカンマなどの抜けがないか
確認することだと思います。

うまくいくことを願っています。
【2013/07/23 05:35】 | 管理人 #E2ywrYdA | [edit]
 ご回答本当にありがとうございます。それもこんなに早くいただけるとは。

 エディター上で、再度貼り直して編集したら、表示されるようになりました。エンコーディングなどが違ったのでしょうか? とにかく解決してありがたいです。

 さらに質問で済みませんが、CSSでカスタマイズする際、FC2ブログの場合だと FC2 BLOG 管理ページ の「スタイルシート編集 」で 末尾にでも付け加えればよいのでしょうか?
 上手くいかなかったので、上の、じょーかーさん への回答にあった、"好ましくない"、HTML内に記述する方法だとできました。
【2013/07/23 14:58】 | まこのてMac #HfMzn2gY | [edit]
まこのてMac さん

うまく表示されてよかったです。

ご質問の件ですが、以下のようにして、
「スタイルシート編集 」に追加するとうまくいくかもしれません。

#feedControl .gf-result .gf-author,
#feedControl .gf-result .gf-spacer,
#feedControl .gf-result .gf-relativePublishedDate,
#feedControl .gf-result .gf-snippet {
display : none;
}
【2013/07/23 23:01】 | 管理人 #E2ywrYdA | [edit]
 「#feedControl」が抜けていました。うまく表示されました。
 
 またも質問なのですが、上記本文中の例では「#feedControl」が不要なのはなぜでしょうか。
 http://weboook.blog22.fc2.com/blog-entry-268.html など読んで考えてみたのですが、分かりませんでした。
【2013/07/25 14:29】 | まこのてMac #HfMzn2gY | [edit]
まこのてMac さま

CSSの優先順位の問題だと思いますが、
#feedControlを入れた方が無難ですので
記事内のCSSも#feedControlを追加しました。

ご指摘ありがとうございました。
【2013/08/01 06:45】 | 管理人 #E2ywrYdA | [edit]
 こちらこそ、初心者の質問にも丁寧にご回答いただき、ありがとうございます。
 御サイトのPopular Articles のみならず、時間をとって、基礎からしっかり学ばせていただきたいと思います。
【2013/08/05 11:13】 | まこのてMac #HfMzn2gY | [edit]
まこのてMac さま

そう言っていただくとうれしい限りです。
今後もよろしくお願いします!
【2013/08/09 02:46】 | 管理人 #E2ywrYdA | [edit]
FC2の関連記事を出す方法を検索していてこのページを見つけました。

記事の最後に書かれているtag_listを使った方法を試してみたところ、
表示がうまくいきません。

英語のタグはうまくいくのですが、日本語を含んだタグだと何も表示されません。
私のところだけかと思いましたが、このブログのタグも日本語タグですと
何も表示されていないことを見つけました。

ここです。
http://weboook.blog22.fc2.com/blog-entry-190.html

これはFC2のタグRSSが悪さをしているのでしょうか。それとも
Google側の仕様なのでしょうか。
ご意見をお聞かせ願えればと思います。
なにか私の勘違いでしたら、すみません。
【2014/01/26 01:29】 | まる #- | [edit]
まる さん

コメントありがとうございます。
確かに日本語が含まれたタグは表示されませんね。
FC2のフィードのURLは、日本語をUTF-8にエンコードして表示されるわけですが
それがGoogle側で認識しないのかなと思います。

対応を色々考えてみましたが解決しませんでした。
引き続き調べてみます。
【2014/01/26 12:39】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加