CSSで整形する（JavaScriptに組み込み）
昨日の続きです。現在完成しているソースに昨日のHTMLを組み込んでいきます。まずはHTMLで書かれている部分を抽出してみましょう。htmlstrで始まる行がHTMLソースをあらわしています。<JavaScriptソース抜粋>for (var i = 0; i < result.feed.entries.length; i++) {var entry = result.feed.entries[i];htmlstr += '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';var imgCheck = entry.content.match(/(src=\"http:)[\S]+((\.jpg)|(\.gif)|(\.png))\"/);if(imgCheck){htmlstr += '<img ' + imgCheck[0] + ' width=120>';}htmlstr += '<p>' + entry.contentSnippet.substring(0, 150) + '</p>';var strdate = createDateString(entry.publishedDate);htmlstr +='<p>' + strdate + '</p>';}意外にHTML部分は少ないのが判ります。抜き出してみましょう。<h3><a href="entry.linkの中身">entry.titleの中身</a></h3><img src="http:抜き出した画像のURL" width=120><p>entry.contentSnippet.substring(0,150)</p><p>strdate</p>ここに昨日のソースを追加します。<div class="rss_entry"><div class="rss_title"><h3><a href="entry.linkの中身">entry.titleの中身</a></h3></div><div class="rss_main"><div class="rss_img"><img src="http:抜き出した画像のURL" width=120></div><div class="rss_content"><p>entry.contentSnippet.substring(0,150)</p><p>strdate</p></div><div class="clear"><hr></div></div> <!-- rss_main --></div> <!-- rss_entry -->CSSでホームページを作っておられる方なら難しくはないですね^^これを元のソースに戻します。google.load("feeds", "1");function initialize() {var feedurl = "ブログのRSSから広告除去したURL";var feed = new google.feeds.Feed(feedurl);feed.setNumEntries(5);feed.load(function (result){if (!result.error){var container = document.getElementById("feed");var htmlstr = "";for (var i = 0; i < result.feed.entries.length; i++) {var entry = result.feed.entries[i];htmlstr +='<div class="rss_entry">';htmlstr +='<div class="rss_title"><h3><a href="' + entry.link + '">' + entry.title + '</a></h3></div>';htmlstr +='<div class="rss_main">';var imgCheck = entry.content.match(/(src=\"http:)[\S]+((\.jpg)|(\.gif)|(\.png))\"/);if(imgCheck){htmlstr += '<div class="rss_img"><img ' + imgCheck[0] + ' width=120></div>';}htmlstr +='<div class="rss_content">';htmlstr += '<p>' + entry.contentSnippet.substring(0, 150) + '</p>';var strdate = createDateString(entry.publishedDate);htmlstr += '<p>' + strdate + '</p></div>';htmlstr +='<div class="clear"><hr></div>';htmlstr +='</div></div>';}container.innerHTML = htmlstr;}else{alert(result.error.code + ":" + result.error.message);}});}function createDateString(publishedDate){var pdate = new Date(publishedDate);var pday = pdate.getDate();var pmonth = pdate.getMonth()+1;var pyear = pdate.getYear();if(pyear < 2000){pyear = pyear+1900} ;var strdate = pyear + "年" + pmonth + "月" + pday + "日";return strdate;}google.setOnLoadCallback(initialize); 画像があってもなくても同じように表示されるようになりました。
