Web言語のお勉強~ど素人が往く~

かつてVB6を1年くらい触った事があるだけのど素人がWeb言語に挑戦します。勉強結果を随時発表します。

このブログの有効活用方を思いついた!「はてなブログウィジットの実験場」


昨日、メインブログであるマネー報道 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さん)からの依頼がありまして、コピーライト部分のコードを除外しました。