簡単に外部RSSをサイトに表示できるGoogle Feed API【基本編】

 外部のRSSをサイトに表示するのに大変便利な「Google Feed API」ですが、最近「Google Developers」で、わざわざキーを発行する必要がなくなったようで、さらに使い勝手が良くなりました。今回はこの「Google Feed API」の使い方を解説します。


概要

 ※本記事は「Google Feed API」の基礎的な部分の解説になります。複数RSSに対応する「Google Feed API」の使い方は、下記の記事を参考にどうぞ! 簡単に外部RSSをサイトに表示できるGoogle Feed API【複数RSS対応編】


 RSSはatom・RSS1.0・RSS2.0など複数の形式があり、webサイトやブログ毎にバラバラです。これを取り込むには、phpならMagpieRSSやSimpleXML関数を使って整形するのが定番ですが、ある形式には対応していなかったり、ちょっとしたことでエラーが発生したり、簡単そうに見えて実はかなり大変です。

 しかしこの「Google Feed API」を使えば、どの形式のRSSでも関係なく一括で整形してくれますので、スピードも軽いですし、これさえおぼえておけばもう悩む必要もなくなります。





基本形


<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("feeds", "1");
function initialize() {

var feed = new google.feeds.Feed("【RSSのURL】");
feed.load(function(rss) {
if (!rss.error) {

// 【RSSの処理を記述】

}
});
}
google.setOnLoadCallback(initialize);

</script>
</head>

<body>
<div id="topics"></div> <!--【RSSを表示する箇所】-->
</body>
</html>

 上記が「Google Feed API」を使う際の基本形になります。

 【RSSのURL】の箇所にRSSのアドレスを追加します。RSSの中身がGoogleを通して、変数に格納されますので、【RSSの処理を記述】のところで、タイトルやテキストをhtmlの形に整形して、【RSSを表示する箇所】に出力するように記述します。





サンプル


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google AJAX Feed API</title>
<meta name="keywords" content="Google,RSS,Feed,API" />
<meta name="description" content="Google AJAX Feed APIのサンプル" />
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">

google.load("feeds", "1");
function initialize() {

// 読み込むRSSを設定
var feed = new google.feeds.Feed("https://news.7zz.jp/feed");
feed.load(function(rss) {
if (!rss.error) {

// 使用する変数を宣言
var channel = new Array();
var entry = new Array();

// RSSからサイトの情報を配列に格納
channel['title'] = rss.feed.title;
channel['link'] = rss.feed.link;
channel['favicon'] = "http://favicon.hatena.ne.jp/?url=" + channel['link'];
channel['description'] = rss.feed.description;
channel['author'] = rss.feed.author;

// RSSから記事の情報を配列に格納
for (var i=0; i<rss.feed.entries.length; i++){

entry&#91;i&#93; = {
title : rss.feed.entries&#91;i&#93;.title,
link : rss.feed.entries&#91;i&#93;.link,
content : rss.feed.entries&#91;i&#93;.content,
contentSnippet : rss.feed.entries&#91;i&#93;.contentSnippet,
publishedDate : rss.feed.entries&#91;i&#93;.publishedDate
};
entry&#91;i&#93;&#91;'img'&#93; = rss.feed.entries&#91;i&#93;.content.match(/src="(.*?)"/igm);

for (var j=0; j<entry&#91;i&#93;&#91;'img'&#93;.length; j++){
entry&#91;i&#93;&#91;'img'&#93;&#91;j&#93; = entry&#91;i&#93;&#91;'img'&#93;&#91;j&#93;.replace(/src=/ig, "");
entry&#91;i&#93;&#91;'img'&#93;&#91;j&#93; = entry&#91;i&#93;&#91;'img'&#93;&#91;j&#93;.replace(/"/ig, "");
}
}

// 情報をhtmlに整形
var Feed = '<h2>n'
+ '<a href="' + channel&#91;'link'&#93; + '">' + channel['title'] + '</a>n'
+ '</h2>n'
+ '<img width="195" src="' + entry&#91;0&#93;&#91;'img'&#93;&#91;0&#93; + '">'
+ '<h3>n'
+ '<img src="' + channel&#91;'favicon'&#93; + '">n'
+ '<a href="'+ entry&#91;0&#93;&#91;'link'&#93; + '">' + entry[0]['title'] + '</a>n'
+ '</h3>n'
+ '<p>' + entry[0]['contentSnippet'].substr(0, 100) + '……</p>nn';

// 表示するタグに追加
$('#topics').append( Feed );

}
});
}
google.setOnLoadCallback(initialize);

</script>
</head>

<body>

<h1>Google Feed APIのサンプル</h1>

<!-- RSSを表示するタグ -->
<div id="topics"></div>

</body>
</html>

Google Feed API表示

サンプルの実行結果

ファイルのダウンロード[72KB]

 ウェブソクのRSSを読み込んで、ブログのタイトル・リンク、最新の記事のタイトル・リンク・画像・テキストを表示するサンプルです。

 RSSの整形と出力する部分が簡単になるので、jQueryを一緒に使っています。(49~62行目の記述が簡単になります。)jQueryの最新版は下記からダウンロードが可能です。

jQuery

 また本文に含まれるimgを抽出して、最初の画像を表示するようにしています。(41~46行目)




関連ファイルを読み込み(7~8行目)

 必要なファイルを読み込んでいます。整形と出力が簡単になるので、jQueryも一緒に使用しています。


配列を宣言(21~22行目)

 わかりやすいように、配列を使います。


サイトのタイトルなど配列に格納(25~29行目)

 rss.feed.title、rss.feed.linkというのは、RSSの内容がGoogleで抽出され、それぞれサイトタイトル、サイトURLを表しています。それらを使いやすいように配列に格納します。

 Googleで抽出された各情報は下記のようになります。「rss」の名前は任意で変更できます。

プロパティ情報
rss.feed.titleサイトのタイトル
rss.feed.linkサイトのURL
rss.feed.descriptionサイトの概要
rss.feed.authorサイトのオーナー

 また記事の情報は、「rss.feed.entries[]」の配列に格納されており、記事の順番でrss.feed.entries[0]、rss.feed.entries[1]という形で格納されています。

 例えば、最初の記事のタイトルは「rss.feed.entries[0].title」、2番目の記事のリンクは「rss.feed.entries[1].link」となります。

 記事の情報をまとめると下記のようになります。

プロパティ情報
rss.feed.entries[…].title記事のタイトル
rss.feed.entries[…].link記事のURL
rss.feed.entries[…].content記事の内容
rss.feed.entries[…].contentSnippet記事の概要
rss.feed.entries[…].publishedDate記事の公開日時
rss.feed.entries[…].categories[…]記事のカテゴリやタグ


記事のタイトルなど配列に格納(32~47行目)

 「rss.feed.entries.length」として、記事の数で繰り返し、記事毎に情報を配列に格納します。記事の内容や概要に画像が含まれていれば、そのアドレスを抽出するようにしています。


表示用に情報をhtmlに整形(50~58行目)

 表示したい場所に合わせて、配列に格納した情報をhtmlにします。


表示用に情報をhtmlに整形(61行目)

 「#topics」とは、下の「id=”topics”」を名前をつけたdivタグのことです。「.append」というのは、そのdivタグの中に「Feed」を追加するという意味です。





複数記事に対応する場合


サンプル


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google AJAX Feed API 複数記事の場合</title>
<meta name="keywords" content="Google,RSS,Feed,API" />
<meta name="description" content="Google AJAX Feed APIのサンプル" />
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">

google.load("feeds", "1");
function initialize() {

// 読み込むRSSを設定
var feed = new google.feeds.Feed("https://news.7zz.jp/feed");
feed.setNumEntries(10);
feed.load(function(rss) {
if (!rss.error) {

// 使用する変数を宣言
var channel = new Array();
var entry = new Array();
var Feed = "";

// RSSからサイトの情報を配列に格納
channel['title'] = rss.feed.title;
channel['link'] = rss.feed.link;
channel['favicon'] = "http://favicon.hatena.ne.jp/?url=" + channel['link'];
channel['description'] = rss.feed.description;
channel['author'] = rss.feed.author;

// RSSから記事の情報を配列に格納
for (var i=0; i<rss.feed.entries.length; i++){

entry&#91;i&#93; = {
title : rss.feed.entries&#91;i&#93;.title,
link : rss.feed.entries&#91;i&#93;.link,
content : rss.feed.entries&#91;i&#93;.content,
contentSnippet : rss.feed.entries&#91;i&#93;.contentSnippet,
publishedDate : rss.feed.entries&#91;i&#93;.publishedDate
};
entry&#91;i&#93;&#91;'img'&#93; = rss.feed.entries&#91;i&#93;.content.match(/src="(.*?)"/igm);

for (var j=0; j<entry&#91;i&#93;&#91;'img'&#93;.length; j++){
entry&#91;i&#93;&#91;'img'&#93;&#91;j&#93; = entry&#91;i&#93;&#91;'img'&#93;&#91;j&#93;.replace(/src=/ig, "");
entry&#91;i&#93;&#91;'img'&#93;&#91;j&#93; = entry&#91;i&#93;&#91;'img'&#93;&#91;j&#93;.replace(/"/ig, "");
}

// 記事をhtmlに整形
Feed += '<img width="195" src="' + entry&#91;i&#93;&#91;'img'&#93;&#91;0&#93; + '">'
+ '<h3>n'
+ '<img src="' + channel&#91;'favicon'&#93; + '">n'
+ '<a href="'+ entry&#91;i&#93;&#91;'link'&#93; + '">' + entry[i]['title'] + '</a>n'
+ '</h3>n'
+ '<p>' + entry[i]['contentSnippet'].substr(0, 100) + '……</p>nn';
}

// 最後にタイトルを追加
Feed = '<h2>n'
+ '<a href="' + channel&#91;'link'&#93; + '">' + channel['title'] + '</a>n'
+ '</h2>n'
+ Feed;

// 表示するタグに追加
$('#topics').append( Feed );

}
});
}
google.setOnLoadCallback(initialize);

</script>
</head>

<body>

<h1>Google AJAX Feed API 複数記事の場合</h1>

<!-- RSSを表示するタグ -->
<div id="topics"></div>

</body>
</html>

サンプルの実行結果

 複数記事を表示するには、34行目のfor文の内側に、記事をhtmlに整形する部分部分を入れれば良いかと思います。

 





おわりに  あまりJavaScriptを知らない方でもわかるように書いてみましたがいかがでしょうか?細かいところまで全部わかっていなくても、なんとか使いこなせると思います。もしわからないところがあれば、コメントに書いて頂ければ、わかる範囲でお答えしますよー(゚∀゚)









コメント

  1. 遊民。 より:
    はじめまして。Google Feed APIの使い方ではいちばんわかりやすい説明でした。

    RSSの情報から発言タイトルのみを一覧にして、記事へのリンクはなしにしたいと思っています。そのような場合、どのような記述がいいのでしょうか? よろしくお願いします。
  2. gaito777 より:
    こんにちは!わかりやすいと言っていただけるとは嬉しいです!がんばって書いたかいがありました。笑 ありがとうございます。

    サンプルコードの49~58行目の「情報をhtmlに整形」の部分の位置を変えるといいと思います。

    サンプルコード 32行目
    for (var i=0; i<rss.feed.entries.length; i++){

    【RSSから記事の情報を配列に格納】

    【情報をhtmlに整形】←ここで整形

    }

    上記のfor文の中では順番に記事を取り込みますから、そのときにrss.feed.entries[i].titleをFeedに追加して、表示するタグを作れば良いと思います。

    これでいかがでしょうか?
  3. 遊民。 より:
    いちばんシンプルな形にしてみたのですが、やっぱり僕には難しいようです(汗。




    google.load(“feeds”, “1”);
    function initialize() {

    // 読み込むRSSを設定
    var feed = new google.feeds.Feed(“http://news.7zz.jp/feed”);
    feed.load(function(rss) {
    if (!rss.error) {

    // 使用する変数を宣言
    var channel = new Array();
    var entry = new Array();

    // RSSからサイトの情報を配列に格納
    channel[‘title’] = rss.feed.title;

    // RSSから記事の情報を配列に格納
    for (var i=0; i<rss.feed.entries.length; i++){

    entry[i] = {
    title : rss.feed.entries[i].title
    };
    }

    // 情報をhtmlに整形
    var Feed = 'n’
    + channel[‘title’] n’
    + ‘n’n’;

    // 表示するタグに追加
    $(‘#topics’).append( Feed );

    }
    });
    }
    google.setOnLoadCallback(initialize);

  4. gaito777 より:
    こんにちは!タイトルだけ表示したいなら、こんな感じです。リストタグで出力してます。

    ※サンプル
    http://7zz.jp/work/sample/js/google_feed_api/simple_title.html


    google.load(“feeds”, “1”);
    function initialize() {

    // 読み込むRSSを設定
    var feed = new google.feeds.Feed(“RSSフィード”);
    feed.load(function(rss) {
    if (!rss.error) {

    // 使用する変数を宣言
    var entry = new Array();
    var Feed = ‘
      n’;

      // RSSから記事の情報を配列に格納
      for (var i=0; i
      // 情報をhtmlに整形
      Feed += '
    • ‘ + rss.feed.entries[i].title + ‘
    • n’;
      }

      Feed += ‘
    nn’;

    // 表示するタグに追加
    $(‘#topics’).append( Feed );

    }
    });
    }
    google.setOnLoadCallback(initialize);

  5. 遊民。 より:
    希望どおりのものを書いていただいてありがとうございます。
    仕組みとしては理解できたと思うのですが、
    サンプルのソースのRSSフィードのURLを変更すると、
    中身が表示されなくなってしまいます。
    文字コードはUTF-8で改行はLFになってるんですが、
    ほかにどこがいけないのでしょうか?
  6. 遊民。 より:
    すみません。訂正です。
    jquery-1.7.1.jsを忘れてました。
    これを同じフォルダに置いたら動作しました。
    たいへん助かりました。ありがとうございます。
  7. 遊民。 より:
    すみません。もうひとつ教えてください。
    RSSフィードのタイトル配信数は、該当サイトに依存するのでしょうか?
    エキサイトブログだと4つしか配信されないようなんですが、この数を増やすことはできないですよね?
  8. gaito777 より:
    こんにちは!うまくいって良かったです!
    表示件数の指定もできますよー
    下記を追加するだけです。

    feed.setNumEntries(表示させたい記事件数);

    例えば10件なら、

    var feed = new google.feeds.Feed(“http://news.7zz.jp/feed”);
    feed.setNumEntries(10); ←【これ追加】
    feed.load(function(rss) {
    if (!rss.error) {
    ・・・・
    ・・

    こんな感じで、loadする前にセットしてあげればokです。
    ただRSSで表示されている記事数以上には表示されないので注意です。


    ※サンプル
    http://7zz.jp/work/sample/js/google_feed_api/simple_title.html
    こんな感じです。サンプル10件にしてみました。

    いかがですか?

  9. 遊民。 より:
    こんばんは。
    素早い返信、ありがとうございます。
    追加行でOKでしたが、ブログを2つ表示させるうち、
    ひとつは4つしか表示されなくて、もうひとつは10個出ました。
    同じエキサイトブログなので、
    もしかしたらブログの設定で変更できるのかもしれません。
    これはブログの持ち主に確認してみます。

    いずれにしても、
    RSSのタイトルリンクのないものが欲しかったので、
    たいへん助かりました。
    ありがとうございます。
  10. gaito777 より:
    どういたしまして!
    おっしゃるとおり、ブログの設定でRSSの記事件数を調整できる場合もありますので、確認した方がいいですね。
  11. tad より:
    とてもわかりやすく、他のブログからRSSで表示させる方法が分かりました。
    その後、同じサイトから複数の記事を表示させるための記述もコメントに見つけてチャレンジしたのですが、画像、タイトル、本文のレイアウトをそのまま複数表示させる場合、タイトルだけの複数表示とは記述が違っている部分があるので、良く分からずできませんでした。
    もし、できたらタイトルだけでなく、最初のサンプルと同じように画像とタイトル、本文を複数表示させる記述方法を教えていただけませんでしょうか。
    もうひとつ質問なのですが、このRSS Feedで表示されたサイトをiPhoneで見ると表示されません。iPadでは表示されるのですが、iPhoneで表示されない原因とか分かりますでしょうか。
    他の方が書かれたGoogle Feed APIの記述方法でも同じようにiPhoneでは表示されませんでした。
  12. gaito777 より:
    こんにちは!

    ■複数記事対応について
    コードが長いので記事の方に、複数記事に対応した書き方を追記しておきましたので、参考にどうぞ。

    変数に記事の内容を、どんどん追加していって、最後に表示するだけなので、内容は理解していただけると思います。


    ■iPhone表示について
    あとiPhoneの表示についてですが、私の方ではサンプルは問題なく表示されています。
    http://7zz.jp/work/sample/js/google_feed_api/disp_sample_iphone.png


    もしかして、ブラウザの設定でJavaScriptが動かないように設定されていませんでしょうか。

    iPhoneのSafariなら、「設定」→「Safari」で下の方に「JavaScript」のオンオフができる箇所がありますので、確認してみて下さい。
  13. Tad より:
    素早いご返答ありがとうございます。
    早速試してみます。

    iPhoneのSafariはJavaScript オンにしてあるので、アップしているサイトがCMSのサイトなのでそっちに問題があるのかもしれません。調べてみます。

    このようなサイトの運営は大変かと思われますが、とてもありがたいです。
  14. Tad より:
    先日はお返事いただきありがとうございました。
    サイトの方はCSSでカスタマイズして表示もまずまずうまく出来ました。
    こちらのサイトの記述は他のGoogle Feed APIとは中身が違っていて、こちらのほうがカスタマイズしやすかったので利用させていただいております。
    ところで、複数のブログから日付順に並べたいのですが、各ブログからは読み込み記事数も指定して表示するような記述方法がありますでしょうか。
    他の方のコードの場合、表示させる部分でのカスタマイズがしにくくて、うまく出来ませんでした。
    もし、出来る方法をお教えいただけたら有難いです。
    よろしくお願いいたします。
  15. gaito777 より:
    こんばんは!
    他のサイトとやり方違うんですか!同じだと思っていました……

    ご希望のカスタマイズは可能ですよ。

    考え方としては、RSSのURLと表示したい記事数を配列にして、Feedとかの変数に全部取り込んで、最後に日時でソートかけて表示すればできあがりです。

    また時間のある時にサンプル作ります。
    ちょっと待ってていただいてもいいですか?
  16. Tad より:
    ご返事ありがとうございます。
    Google Feed AJAX APIの記述は設計する人によって癖があるのか、基本は同じようですが、微妙に違っていて別の人の記述から部分を流用みたいなことは基本がわかっていないと無理ですね。

    急がなくても大丈夫です。ありがとございます。

    うまく表示できたので、今はいろいろカスタマイズを試しています。
    タイトルをトップに表示して、下の左に画像を配置し、右に本文というパターンと、画像を大きくして、画像の下にタイトル、本文を置くパターンなど試しています。
    本当は画像も縦横比の違っている画像も統一して表示できる「MyThumbnail」(http://www.kfsoft.info/MyThumbnail/demo.php)というjQueryも導入してみたいのですが、このAPIの表示画像に適応させる方法について理解できていません。
    複数のブログからのFeed表示と縦横比の違う画像も綺麗に並べられたら嬉しいです。
    ついでにもう一つ質問なのですが、Feedで読み込んで表示させる時に、一番最初の記事(最新の記事)だけを除いて2番目移行の記事の数を指定して表示させることとかもできるのでしょうか。
    いろいろ質問してしまって申し訳ございません。
    これが出来ればかなり手の込んだ表示も可能になると思うのでぜひ実現できればと思っています。
    よろしくお願いいたします。
  17. Tad より:
    お忙しいところ恐縮です。
    楽しみに待っております。
  18. Tad より:
    サンプル楽しみに待っております。
    よろしくお願いいたします。
  19. gaito777 より:
    こんにちは!長々とお待たせしてすみません。
    概ねサンプルはできているのですが、うまく動かないところがありまして現在修正中です。

    今受けている仕事と、このブログの更新で手がいっぱいですので、また暇な時期になったら手直しいたしますので、気長にお待ちいただければ幸いです。申し訳ありません。
  20. Tad より:
    仕事優先第一です。無理は言いません。
    気長に待ちます。
    でも、必ずお願いします。
    期待しています!
  21. Hal より:
    記事の投稿日時を表示するには、どのように書いたら良いのか分かりません。教えて下さい!お願い致します。
    また、複数のRSSに対応したサンプルも楽しみにしています!ついでに24時間以内にアップされた記事についてはnew!が表示されるとかだと嬉しいですw(願望)
  22. ハムスター名無し より:
    他所でも色々探して試したんですが、いずれもうまくいきませんでした。こちらのだとほんとに簡単に設置できました有難うございました。
  23. gaito777 より:
    こんばんは!
    複数RSSに対応した記事を書きました!

    簡単に外部RSSをサイトに表示できるGoogle Feed API【複数RSS対応編】
    http://news.7zz.jp/ajax/2447.html

    なるべくシンプルに書きました。
    各RSSから取り込む記事数や、最終的に表示したい記事数も調整できます。
    長らくお待たせしてすみませんでした。m(__)m
  24. Tad より:
    お忙しい中、お応えいただき感謝いたします!
    早速試してみます!
    後日、報告させて頂きます!
  25. gaito777 より:
    いえいえ、こちらこそ遅くなって申し訳ありませんでした。
    お役に立てれば幸いです。
  26. ERO より:
    gaito777様、突然のコメントお許しください。
    このサイトの「簡単に外部RSSをサイトに表示できるGoogle Feed API【基本編】」のスクリプトは、非常に役に立ち、大変!大変感謝しております!

    自分のサイトでは「複数記事に対応する場合」のスクリプト元に16行目のvar~をコメントアウトしてそこに以下のスクリプトを追加することにより複数サイトからのRSS読み込みを実現しました。(文法的に会っているのか判りませんが…動いております。ちなみに他の方が公開しているスクリプトの動きそうなものをコピペしただけです)

    var feedurl = new Array(“サイトAのURL”,”サイトBのURL”); //RSSのURL
    for (n = 0; n < feedurl.length;n++ ) {
    var feed = new google.feeds.Feed(feedurl[n]);

    この基本編のスクリプトの場合、同じサイトの複数個所に設置しても動きました!(もちろんJSを外部ファイルにし、それぞれIDを変えました)

    残念ながら新しい「簡単に外部RSSをサイトに表示できるGoogle Feed API【複数RSS対応編】」の方は、同じサイトの複数個所にはIDを変えてもうまく動きません(1か所に集約される)でした。(なんとなくやってみただけなので、もしかしたら私のミスかもしれません!)

    でも、基本編のほうが動くので無問題です!

    ただ、一つだけご質問なのですが…(質問と言うかほとんど依頼です。スイマセン!)
    「RSSを配信しているサイトの過去記事(最新ではなく)をランダムに拾ってくる」ことは可能でしょうか?

    例えばx日(←xは指定できる)前よりも前のエントリーをランダムに拾ってくる。ない場合は拾わないとか…

    自分でも調べつつやってみようかと思いましたが…基礎が判っていないのでそこからやり始めております。なのでいつになるか…

    もしお時間の都合がよろしければ、ヒント等を与えていただければ幸いです。
    それでは、失礼いたします。
  27. gaito777 より:
    こんにちは!

    過去記事に関しては、取得先のサイトがどこまでの記事をRSS配信しているかによって、取得できるかどうかが決まります。

    通常はブログの設定で「RSS配信は10記事分」などに限定して設定します。この場合は最新から10記事までしか表に出ていませんので、その10記事分しかRSSを取得できません。

    仮に過去記事全てのRSSを取得できたとしても、1度過去記事を全て読み込んで、それをランダムにピックアップして、表示するという手順になりますので、結構処理が重くなりそうです。

    ですので、あまりオススメはできないのですが、いかがでしょうか。
  28. ERO より:
    gaito777 様

    ご回答…本当にありがとうございます!
    確かにRSSって普通制限ありますよね。それがすっかり頭から消えておりました…しかもそれ全部って大変処理が重くなりそう…

    でも、逆にスッキリしました!
    本来の私の目的は「現在の最新記事をx個取得して表示するコードとは別にそれ以外の記事を取得して表示させたい」ということでしたので…単純に今のコードにx個前の記事から記事をx個取得すればいいのか!とモヤモヤしてたものが晴れた気分になりました!
    もちろんxは大きくするにも限界があるし、重くなるしでやりすぎは注意ですが、1サイトから取ってくるRSSて1・2個程度ですから…まずは自分でやってみます!

    最後に人さまのサイトにて思いつきノート的なコメント…大変申し訳ありません。
    gaito777様のお陰で本当にたすかりました。ありがとうございました。
  29. gaito777 より:
    いえいえー

    触ってみたら段々わかってくると思うので、挑戦してみて下さい。
  30. みやど より:
    はじめまして! とても分かりやすい記事で参考になります

    さっそく使ってみたのですが、日付を表示させようと
    + ” + entry[0][‘publishedDate’] + ‘n’
    を追加してみたら、実際表示されたのが
    Sat, 05 Jan 2013 07:12:45 -0800
    となりました

    これを「2013年1月5日」と表示させるにはどうしたらよいのでしょうか?

    それとは別にwordpressのRSSを取得しようとすると何も表示されないのですが何が原因なのでしょうか?
    サイトの問題かと思い、wordpress3.5を新規インストール、プラグイン無しの状態でRSSを取得してみても駄目でした
  31. gaito777 より:
    こんばんは!

    ■日付について
    日付の変換は下記と同じですので、参考にしてください。

    簡単に外部RSSをサイトに表示できるGoogle Feed API【複数RSS対応編】
    http://news.7zz.jp/ajax/2447.html


    ■WordPressのRSSについて
    状況がわからないので、指摘できる原因が多すぎますね。
    新規のWordPressって記事がない状態でRSSって出力してますか?
    なにも表示されないってことなので、JavaScriptのエラーのような気がしますねー

    WordPressのRSSは表示されているのか?
    JavaScriptの変数は全て宣言されているか?

    など、処理する順番で、一つ一つ切り分けて原因を探るといいですよ。
  32. みやど より:
    お返事ありがとうございます
    日付の変換なんとか出来ました! ありがとうございます

    wordpressのRSS取得なのですが、原因がよく分かりません…orz
    http://babel-gaou.sakura.ne.jp/blogtest/
    テスト用に新規インストールしてプラグイン無し・テスト投稿をした状態です、wordpress本体プラグイン最新です
    このアドレスのRSSを取得する場合
    http://babel-gaou.sakura.ne.jp/blogtest/?feed=rss2
    上記アドレスで表示できるはずだと思うのですが、何も表示されない状態になってしまいます
    解決方法を教えて頂けると嬉しいです、よろしくお願い致します
  33. gaito777 より:
    こんにちは!
    日付はうまくいったようで良かったですね。

    WordPressのテストサイトを見させていただきましたが、
    RSSの出力は問題はなさそうですね。

    これで「何も表示されない」となると、
    多分読み込む側のJavaScriptの問題でしょう。

    読み込む際に、主にタイトルと本文は読み込んでいることと思いますが、
    タイトルすら表示されず、完全に真っ白な状態でしたら、
    おそらくエラーでしょう。

    JavaScriptなどの読み込む側を、
    再度細かくチェックしてはいかがでしょうか。
  34. みやど より:
    度々申し訳ありません、いろいろ弄ってはみたのですが原因がいまいち分かりませんでした…

    こちらのページで配布されているGoogle AJAX Feed APIのサンプルのZIPファイルをDLし、RSS取得アドレスを
    http://babel-gaou.sakura.ne.jp/blogtest/?feed=rss2
    にしても何も表示されなく

    for (var j=0; j<entry[i]['img'].length; j++){
    entry[i]['img'][j] = entry[i]['img'][j].replace(/src=/ig, "");
    entry[i]['img'][j] = entry[i]['img'][j].replace(/"/ig, "");
    }

    この部分を削ると画像は表示されませんが、他の部分は表示されました
    ここで問題が起こっているのだと思うのですが、JavaScriptが分からないので手詰まりになってしまいました
    この部分の修正方法を教えて頂けませんでしょうか、お願い致します
  35. みやど より:
    あら、記号が使えないようですね
    43~46行目のimgに関する部分です
  36. gaito777 より:
    こんばんは!

    あくまでもサンプルですので、全てのRSSに合わないと思って下さいね。
    読み込みたいRSSに合わせて、各自でカスタマイズをお願いします。



    その部分は単純にimgタグ内のurlを取得しているだけなので、
    そんなに難しくないですよ。
    おそらくRSS内に画像が無いのに、urlを取得しようとしてエラーが出ているのかな?

    簡単に外部RSSをサイトに表示できるGoogle Feed API【複数RSS対応編】
    http://news.7zz.jp/ajax/2447.html

    こちらの同じ部分を見て下さい。
    imgタグがなかったら、その部分を飛ばすようにしています。


    少しJavaScript勉強しておくと、いろいろ応用が効くので、
    おすすめですよ。
    JavaScriptの情報はいくらでも出てきますので、
    がんばって勉強してみて下さい。
  37. みやど より:
    なんとか無事解決しました!
    お手数おかけして申し訳ありませんでした
    本当にありがとうございます!
  38. gaito777 より:
    こんにちは!了解です。
    うまく行って良かったです。
  39. hebo より:
    こんにちは。
    最近良く見かけるあんてなサイトを自分用に作りたいなーと思っていたところ、こちらを参考に無事作ることができました。
    めちゃくちゃ分かりやすかったです。ありがとうございます。
    http://heboantenna.at-ninja.jp
  40. gaito777 より:
    こんばんは!
    おお〜それはなによりでした!使い方がうまく伝わって良かったです。
  41. mimu より:
    こんにちは。
    ブログのJPGだけ表示させたい場合、どのようにしたらいいか、アドバイスお願いします。
  42. gaito777 より:
    こんばんは!
    単純にimgタグを抜き出して出力すればいいのではないでしょうか?
    大きさを調整したいのなら、画像のurlを抜き出して、htmlに整形する時に任意でwidthとheightを決めて、imgタグにしてあげればいいと思います。
  43. mimu より:
    度々すみません。DLしたHTMLのimgタグを抜き出して出力する。
    の意味を少しアドバイスお願いします。ココログのRSSを取ってきているのですが、文章の絵文字(GIF)をとってきてしまい、肝心の投稿写真が表示されないです。よろしくお願いします。
  44. gaito777 より:
    それはもうマッチングのやり方次第だと思います。
    例えば本文に含まれている画像のurlを、絵文字を除外して、全て配列に格納して表示するとかでしょうか。
    あとは絵文字の除外する条件を見つければ良いと思います。
    例えば、urlの中にドメインが共通しているとか、フォルダを使っているとか、最悪gifを全部除外する、などでいけると思います。
  45. みなみ より:
    ご質問なのですが
    画像と画像下にタイトルで
    こちらのサイトの合わせて読みたい関連記事のような
    横4,5列表示には出来るのでしょうか?
    不躾な質問で申し訳ありませんが
    宜しくお願い致します。
  46. gaito777 より:
    こんにちは!
    もちろん可能です。
    最後にタグを出力すると思いますが、
    それをスタイルシートで整えます。
    自分の好きな形になるように、タグを増減させて、
    それをスタイルシートを使って形を整えればokです。

みやど へ返信する コメントをキャンセル

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください