Google Feed APIで画像付き最新情報を表示
前々から、できるだろうなぁ～、できたらいいなぁ～
っと思ってずっとやらなかったんですが、ついにお仕事で必要性にかられて本腰いれました。
このプログラムのポイントはRSS情報からいかにして「画像情報を取り出すか？」っというところでした。Google先生でいろいろ調べてみたものの、中の画像全部出してしまったり、全然動かなかったり・・・。ヽ(`Д´)ノ
どれも今一つ理想と違う感じでかなり迷走してたどり着いた答えが正規表現でした。
って言っても僕もよーとわかりましょえん！
っということで実際のコードがこちら！
このポイントはこれにつきます！
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>';
↑これは苦し紛れで出てきたものなのであまり気にしない方向で(/ω＼)
っと思ってずっとやらなかったんですが、ついにお仕事で必要性にかられて本腰いれました。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>';
↑これは苦し紛れで出てきたものなのであまり気にしない方向で(/ω＼)
IE9を入れてみた
うーん(￣へ ￣ 何とも言えません。。。
スピードがどうのって言われても、多分人間にはわからない範囲だし、レイアウトが変わったから微妙に使いにくい。
まあ、今回からhtml5＆css3対応だからちょっと楽しいです。
後、ターゲットブランクが別タブで開くようになったからちょっと気分がいい。
でも、絶対Google Chorme意識したよね（笑）
そしてそして、いつもの悩ましいCSS解釈の違い！やっぱりあります！（以前のバージョンほどではないが）どうもIE8より解釈が厳格になった感じ。
