Google Feed APIで画像付き最新情報を表示 | ホームページ制作ならSource Marine

Google Feed APIで画像付き最新情報を表示

前々から、できるだろうなぁ~、できたらいいなぁ~得意げっと思ってずっとやらなかったんですが、ついにお仕事で必要性にかられて本腰いれました。

Google Feed APIで画像付き最新情報を表示!


$Source Marineのブログ-Google Feed APIで画像付き最新情報を表示

このプログラムのポイントはRSS情報からいかにして「画像情報を取り出すか?」っというところでした。Google先生でいろいろ調べてみたものの、中の画像全部出してしまったり、全然動かなかったり・・・。ヽ(`Д´)ノ
どれも今一つ理想と違う感じでかなり迷走してたどり着いた答えが正規表現でした。
って言っても僕もよーとわかりましょえん!
っということで実際のコードがこちら!



google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("RSSのURL");
feed.setNumEntries(5);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("blog-feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var gazo = entry.content.match(/(http:){1}[\S_-]+((\.jpg)|(\.JPG))|(\.gif)|(\.png)/);
var photo = ("<img src=画像がなかった時の代替え画像URL />");
if(gazo){
container.innerHTML += '<p class="title"><a href="' + entry.link + '">' + entry.title + '</a></p>';
container.innerHTML += "<p><a href='" + entry.link + "'><img src=" + gazo[0] +" /></a></p>";
container.innerHTML += '<div class="clear"></div>';
} else {
container.innerHTML += '<p class="title"><a href="' + entry.link + '">' + entry.title + '</a></p>';
container.innerHTML += "<p><a href='" + entry.link + "'>" + photo +"</a></p>";
container.innerHTML += '<div class="clear"></div>';
}
var div = document.createElement("div");
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);



このポイントはこれにつきます!
var gazo = entry.content.match(/(http:){1}[\S_-]+((\.jpg)|(\.JPG))|(\.gif)|(\.png)/);
これが正規表現というやつで、RSSの中から画像のタグにマッチする部分を見つけ出して、配列に格納していきます。
そして、配列の一番最初の画像を
container.innerHTML += "<p><a href='" + entry.link + "'><img src=" + gazo[0] +" /></a></p>";
で表示させるわけです。

そして、画像がない時があると困るので、
var photo = ("<img src=画像がなかった時の代替え画像URL />");
で画像がない時に表示する画像のURLを宣言して
else {
container.innerHTML += '<p class="title"><a href="' + entry.link + '">' + entry.title + '</a></p>';
container.innerHTML += "<p><a href='" + entry.link + "'>" + photo +"</a></p>";
container.innerHTML += '<div class="clear"></div>';
}
画像がない場合のタグを設定するっという事です。

ちなみに
container.innerHTML += '<div class="clear"></div>';
↑これは苦し紛れで出てきたものなのであまり気にしない方向で(/ω\)