ここから本文です

Google Feed API でRSS内の画像を自動的にリサイズする方法について教えてください...

jag********さん

2011/6/1719:47:54

Google Feed API でRSS内の画像を自動的にリサイズする方法について教えてください。

現在、外部JSに以下を記載しています。
======================================================
google.load("feeds", "1");

function initialize() {
var feedurl = "RSSのURL";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(表示記事数);
feed.load(dispfeed);

function dispfeed(result){
if (!result.error){
var container = document.getElementById("HTML内に表示するID名");
var htmlstr = "";
htmlstr += '<div id="feed-rapper">';

for (var i = 0; i < result.feed.entries.length; i++) {

var entry = result.feed.entries[i];
htmlstr += '<div class="feed-Control">';
htmlstr += '<h3 class="title"><a href="' + entry.link + '">' + entry.title + '</a></h3>';
htmlstr += '<div class="entry-contents">' + entry.content.substr(0,200)+' ...<a href="' + entry.link + '">続きはこちらから</a>' +'</div></div>';

}
htmlstr += '</div">';

container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
}
}
google.setOnLoadCallback(initialize);

======================================================
今のところ記事内の画像はそのままの大きさで表示されている状態ですが、
自動的にリサイズできればと思っています。

こちらを見て真似しようと思ったのですが、
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1154506071
どこの何を差し替えればいいのか理解できませんでした。

補足答えてくださった方すみません、そのコードはjsファイルとして外部でまとめても大丈夫でしょうか。
その際上記に記載したコードの後に続けて書いた方がいいのですか?

閲覧数:
736
回答数:
1
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

ann********さん

編集あり2011/6/1723:58:13

// elemを上限幅にリサイズする関数
function resizeImage(elem) {
var img = new Image;
var size = 100; // 横幅上限
img.onload = function () {
var h = elem.height;
var w = elem.width;
var n = 1;
if (w > size) {
n = size / w;
elem.height = Math.ceil(h * n);
elem.width = size;
}
img = img.onload = elem = null;
};
img.src = elem.src;
}
-----------------------------
...
container.innerHTML = htmlstr;

// htmlを流し込んだ後、img要素にresizeImage関数を順次当てる
var imgs = container.getElementsByTagName('img');
for (var j = 0, l = imgs.length; j < l; j++) {
resizeImage(imgs[j]);
}
...


リサイズといっても、上限を決めて画像幅を揃えるだけですが。
-----------------------------
追記:

// elemをリサイズする関数
function resizeImage(elem) {
var img = new Image;
var size = 100; // 横幅上限
img.onload = function () {
var h = elem.height;
var w = elem.width;
var n = 1;
if (w > size) {
n = size / w;
elem.style.height = Math.ceil(h * n) + 'px'; // 変更
elem.style.width = size + 'px'; // 変更
}
img = img.onload = elem = null;
};
img.src = elem.src;
}


スタイルシートの方が優先されますから、styleのプロパティに設定すべきでした。
-----------------------------
追記:

/// elemをリサイズする関数
function resizeImage(elem) {
var img = new Image;
var size = 100; // 横幅上限
img.onload = function () {
var h = img.height; // 変更
var w = img.width; // 変更
var n = 1;
if (w > size) {
n = size / w;
elem.style.height = Math.ceil(h * n) + 'px'; // 変更
elem.style.width = size + 'px'; // 変更
}
img = img.onload = elem = null;
};
img.src = elem.src;
}


imgの方見なきゃダメですよね。なにやってんだか。。。
-----------------------------
追記:補足について

container.innerHTML = htmlstr; // この行は質問文のdispfeed関数内に記述されている箇所のことです。その直後に以下を追記します。

// htmlを流し込んだ後、img要素にresizeImage関数を順次当てる
var imgs = container.getElementsByTagName('img');
for (var j = 0, l = imgs.length; j < l; j++) {
resizeImage(imgs[j]);
}


リサイズする関数は呼出し可能であればどこに置いても大丈夫です。よく分からなければ他の関数の内側にならないよう、同じ外部jsファイルの先頭にでも置いて下さい。

質問した人からのコメント

2011/6/20 10:21:09

できました!
ありがとうございました!!

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる