この記事は 約 0分58秒 で読めます。
先人様たちの知識をすこしずつお借りしております。感謝です。
画像パスを抜き出す正規表現が全てのケースで有効かはわかりませんが、sony、ライブドアブログといったところのフィードは意図通りに表示しました。
余談ですが、先頭が「http」か「/」のときのみ画像を表示するようにしてますが、正規表現でいえば「./」も「../」も拾っています。
今のところ処理としては弾いていますが、相対パスの場合ってどう処理すると汎用的になるんでしょうかね?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
google.load('feeds', '1'); function initBlog(){ var rootPath = '***'; //「***.com」最後の「/」は不要 var feedurl = '***'; //フィードのURL var isIE = (/(msie|MSIE)/gi).test(navigator.appVersion) || (/(T|t)rident/gi).test(navigator.appVersion); var feed = new google.feeds.Feed(feedurl); feed.setNumEntries(20); //表示件数 feed.load(function (result){ if (!result.error){ for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var title = '<div><a target="_blank" href="' + entry.link + '">' + entry.title + '</a></div>'; var content = '<div>' + entry.contentSnippet.replace(/\s/gi,'') + '</div>'; var originalDate = new Date(entry.publishedDate); var day = originalDate.getDate(); var month = originalDate.getMonth() + 1; var year = originalDate.getFullYear(); var formatDate = '<div>' + year +'.'+ month +'.'+ day + '</div>'; var imgCheck = entry.content.match(/(http[s]?\:\/\/|\/\w+|\.\/\w+|\.\.\/\w+)[\w\+\$\;\?\.\%\,\!\#\~\*\/\:\@\&\\\=\_\-]+(jpg|jpeg|gif|png|bmp)/gi); if(imgCheck){ for (var j = 0, k = imgCheck.length; j < k; j++) { var imgUrl = imgCheck[j]; if(isIE){ imgUrl += '?' + (new Date()).getTime(); } if(/^http/gi.test(imgUrl) || /^\/\w+/gi.test(imgUrl)){ //先頭が'http'か'/'の時のみ画像を表示 if(/^\/\w+/gi.test(imgUrl)){ imgUrl = rootPath + imgUrl; } var entryImg = $('<img>'); entryImg.attr('src', imgUrl) .css({ 'position': 'relative', 'visibility': 'hidden' }); if(entry.link){ entryImg = $('<a>') .attr('target', '_blank') .attr('href', entry.link) .append(entryImg); } entryImg = $('<div>') .attr('id', 'timestamp-' + (new Date()).getTime()) .addClass('blog-image-link') .css('overflow', 'hidden') .append(entryImg); var preloading = [ imgUrl ]; preload(preloading, entryImg, function(){ //initialize }, function(){ //progress }, function(targetElement){ //complete removeWithKey(nowPercent, targetElement.attr('id')); fit(targetElement); } ); break; } } } $('.blog') .append(title) .append(entryImg) .append(content) .append(formatDate); } } }); } google.setOnLoadCallback(initBlog); var nowPercent = {}; function preload(images, preloader, initialize, progress, complete){ var img = []; var total = images.length; var decrementCount = total; var counterName = preloader.attr('id'); nowPercent[counterName] = 0; $(images).each(function(i){ var src = this; img[i] = new Image(); img[i].onload = function(){ decrementCount--; nowPercent[counterName] = Math.ceil(100 * (total - decrementCount) / total); if(decrementCount === total - 1){ //initialize initialize(preloader); } if(0 < decrementCount){ //progress progress(preloader); } else{ //complete complete(preloader); } }; img[i].src = src; }); } function removeWithKey(target, keyName) { for(var key in target){ if(key === keyName){ delete target[key]; } } } function fit(target){ var ratio = target.width() / target.find('img').width(); var width = Math.round(target.find('img').width() * ratio); var height = Math.round(target.find('img').height() * ratio); if(target.height() > height){ ratio = target.height() / height; width = Math.round(width * ratio); height = Math.round(height * ratio); } target.find('img').width(width); target.find('img').height(height); target.find('img').css({ top: -target.find('img').height() / 2 + target.height() / 2, left: -target.find('img').width() / 2 + target.width() / 2 }); target.find('img').css('visibility', 'visible'); } |
★11月14日追記
Firefoxで動かなくて調べたら「google.setOnLoadCallback(initBlog);」の部分はinitBlogを定義したあとじゃないとダメでした。
関数リテラルと関数定義の違いって以下の認識だったからちょっと謎です。ちなみにIE8とかchromeは以前のコードでも問題なくいけてたんですよ…
関数リテラルで作成した関数は、実行された後でしか使用できない。関数定義は関数定義の前でも使用することができる。