昨日、メインブログであるマネー報道 MoneyReportの方の記事下パーツをZenbackから「あとから読みたい」ウィジットに載せ変えました。
直帰率は4%も改善し、非常に喜んだのですが・・・
ちと遅い。
読み込みが。
ブログキャプチャー画像を読み込んでいたり、はてなAPIにRSSフィードに、ツイート数を読み込むモジュールまでも読み込んでいる!
いきなりどれを減らしたら良いかなんてわからないし、どの程度の速度で読み込めるとかはテストしてみたい。
うーん、と思っていてひらめいた!
ちょうどこの持て余していたWeb言語のお勉強ブログでテストしちゃえばいいんだ!
と。
私は常々はてな記法でブログを書いています。
はてな記法が良いのは、JavaScriptとかを本文に書いてもちゃんと動くんですよ!
という訳で、本日は昨日メインブログに乗っけたのと同じモジュールを載せて見ます。
日々、色々といじくったのを載せていきますので、お楽しみに~。
あわせて読みたい
記事を読込中...
元の開発の方へのリンクはこちら。
http://bulldra.hatenablog.com/entry/2013/11/09/081719
コードも一応載せておきます。
<style> .entry-list #new-entries-title { color: #141414; font-size: 150%; font-weight: bold; line-height: 1.5em; border-bottom: 1px solid orange; border-left: 10px solid orange; margin: 15px 0 10px 0; padding:3px 10px 1px 10px; } .entry-list .intro-article-wrapper a { text-decoration: none; color: #0085cd; font-weight: bold; font-size: 14px; } </style> <div id="new-entries-title">あわせて読みたい</div> <span id="new_entriee">記事を読込中...</span> <script src="https://www.google.com/jsapi"></script> <script type="text/javascript"> /* この辺を自分のブログに合わせて変更 */ var blogURL = "http://moneyreport.hatenablog.com/"; var blogTITLE = "マネー報道 MoneyReport"; var maxNUM = 5; var popularNUM = 0; /* コピーライトっぽいの */ var copyRIGHT = ''; google.load("feeds", "1"); var entries = new Array(); /* 配列にシャッフル機能を追加 */ Array.prototype.shuffle = function() { var i = this.length; while(i){ var j = Math.floor(Math.random()*i); var t = this[--i]; this[i] = this[j]; this[j] = t; } return this; } function initialize() { /* feed群の生成 */ var feeds = new Array(); /* ブクマ順エントリ */ feeds.push(new google.feeds.Feed( "http://b.hatena.ne.jp/entrylist?sort=count&mode=rss&url=" +blogURL)); /* 最新エントリ */ feeds.push(new google.feeds.Feed( blogURL+ "/rss")); /* feed読み取り処理 */ var c = 0; for(var i = 0; i < feeds.length; i++) { feeds[i].setNumEntries(10); feeds[i].load(function(result) { /* 読み込めないなら終了 */ if (result.error) { ; } else if(result.feed.entries.length == 0) { ; } else { /* 条件に合致した場合のみ結果配列に追加 */ entries = entries.concat(result.feed.entries); } /* 全部のfeedが読み終わったら処理を実施 */ if(++c == feeds.length){ createHtml(); } }); } } function createHtml() { /* 1件もないなら終了 */ if (entries.length == 0) { return; } /* popularNUMで指定した分だけはてブ数上位は必ず表示 */ var resultEntries = new Array(); for(var x = 0; x < popularNUM; x++) { if(document.location.href.lastIndexOf(entries[0].link, 0) != 0){ resultEntries.push(entries[0]); } entries.splice(0, 1); } /* シャッフル */ entries = entries.shuffle(); for(var x = 0; x < entries.length && resultEntries.length < maxNUM; x++) { /* ブラウザで対象エントリを表示している場合はスキップ */ if(document.location.href.lastIndexOf(entries[x].link, 0) === 0) { continue; } /* 既に結果リストに含まれていたらスキップ */ var flg = false; for(var y = 0; y < resultEntries.length; y++) { if(resultEntries[y].link.lastIndexOf(entries[x].link, 0) === 0) { flg = true; } } if(!flg) { resultEntries.push(entries[x]); } } /* 指定数のHTMLを生成 */ var resultHtml = ""; for(var x = 0; x < resultEntries.length; x++) { var entry = resultEntries[x]; var entryTitle = entry.title.replace('- '+blogTITLE , '') /* HTML生成 */ var html = '<div class="intro-article-wrapper" style="width: 100%; overflow:auto; margin-bottom:10px;">' + '<a class="intro-article-img" href="' + entry.link + '" style="float:left;" rel="nofollow">' + '<img src="http://capture.heartrails.com/150x130/shadow?' + entry.link + '" align="left" width="150" height="130" alt="' + entryTitle + '">' + '<a class="intro-article-title" href="' + entry.link + '" rel="nofollow">' + entryTitle + '</a> <img src="http://b.hatena.ne.jp/entry/image/' + entry.link + '">' + '<a href="http://tweetbuzz.jp/redirect?url=' + entry.link + '"><img src="http://tools.tweetbuzz.jp/imgcount?url=' + entry.link + '"/></a></div>'; resultHtml += html; } /* コンテナに反映 */ var container = document.getElementById("new_entriee"); container.innerHTML = resultHtml + copyRIGHT; } google.setOnLoadCallback(initialize); </script>
追記
ウィジェット作者様(id:bulldraさん)からの依頼がありまして、コピーライト部分のコードを除外しました。