blog chart.jp のブログパーツが重いので勝手に改造した

すでにローンチから時間が経ってしまっていますが、ブログを色々な角度から解析してチャート化してくれるWebサービス「blog chart.jp」というのがあります。
ABCDEFGの頭文字をもつ６つの指標から評価を行う点がユニークですね。

ブログチャートでは、以下の6つの指標を用いて影響力レベルを計測しています。

Access（アクセス：ブログのアクセス数）
Buzz （話題度：ブログやサイトからの被リンク数）
Clip （クリップ数：ソーシャルブックマークサービスからの被クリップ数）
Discussion （議論発生度：ソーシャルニュースサイトなどでの注目数、議論数）
Evaluate （評価：読者からの評価レベル）
Feed　（購読数：RSSフィードの購読数）

via: ブログラボの新サービス「ブログチャート」を公開しました – ブログラボ （Bloglabs.jp)

で、このblogchart.jpですがローンチ直後からすっごく動作が重くて画面がなかなか表示されなかったり、dankogaiにこき下ろされたり、ちょっとシステム部分に不安があります。
解析に相当の負荷がかかっているということなんでしょうかね？
で、個人的に非常に気になるのがブログパーツが重い事。
blogchart.jpが提供するブログパーツを貼る事によって、ブログレベルを表示する事ができるとともに、ビーコンの役目を果たしてアクセス数をカウントしてくれ、ブログレベルにも影響していくという仕組みです。
で、いま貼っているブログパーツのコードがこんなんなんだけど、

<script type="text/javascript" src="http://blogchart.jp/js/blogparts.js"></script>
<script type="text/javascript"><!--
id="632";blogurl="http://creazy.net/";partstype="b";viewBlogparts();
// --></script><br />

始めの外部JS（blogparts.js）を呼び出す時点でもの凄い時間がかかっています。
このファイルは静的なファイルのはずなんですけどねぇ。
で、scriptからレスポンスが返ってこないと以後の画面が表示されないので、画面の上の方に張り付けちゃったりするとエントリー自体が見えないような事態になってしまうのです。
で、ちょっとこのJSの中身を覗いてみたんですが、

function viewBlogparts(){
var rs = Math.round(Math.random()*2147483647);
var link = "http://blogchart.jp/blog?url="+blogurl;
var imgsrc = "http://blogchart.jp/blogparts?type="+partstype+"&id="+id+"&referer="+document.referrer+"&rs="+rs;
document.write("<a href='");
document.write(link);
document.write("' target='_blank' >");
document.write("<img src='");
document.write(imgsrc);
document.write("' border=0 width=163 height=53 />");
document.write("</a>");
}

という感じになっていて、HTMLの吐き出しを document.write でやってる。
（関数内で document.write ってのもどうなんだろうと思ったり…）
これを、後から実行してもいいようにDOMで流し込む感じにしたい。

function viewBlogparts(){
var rs     = Math.round(Math.random()*2147483647);
var link   = "http://blogchart.jp/blog?url="+blogurl;
var imgsrc = "http://blogchart.jp/blogparts?type="+partstype+"&id="+id+"&referer="+document.referrer+"&rs="+rs;
var outtag = "<a href='"+link+"' target='_blank'><img src='"+imgsrc+"' alt='blogchart.jp' border=0 width=163 height=53 /></a>";
if ( document.getElementById('blogchart_badge') ) document.getElementById('blogchart_badge').innerHTML = outtag;
}

こんな感じに変えてみた。
そして、これを blogchart.js というファイル名で保存しておいて、

<div id="blogchart_badge"></div>
(snip)
<script type="text/javascript" src="http://yourdomain.com/js/blogchart.js"></script>
<script type="text/javascript"><!--
id="632";blogurl="http://creazy.net/";partstype="b";viewBlogparts();
// --></script><br />
</body>
</html>

このように、ブログパーツを保存したいところに “blogchart_badge” とか名前を付けた要素を作っておいて、bodyの閉じタグの直前で呼び出す様にすれば少なくともブログ自体は表示されるので一安心。

注意事項

当たり前ですが、公式のコードを勝手に変えて使っているのでblogchart.jp側が仕様を変えたら動かなくなる可能性大です。
その点ご了承の上、自己責任でご利用頂ければと思います。
っていうか、blogchart.jpさんになんとかパフォーマンス改善を頑張ってほしい！