またまた新しくプロフ画像取得クラスを作りました

今回はgoogle closure libraryの勉強を兼ねて、flashを使わずにHTML5のローカルストレージを使ってプロフ画像取得プラグインを作ってみました。
アメブロはHTMLが自分で書けないので、一部dom操作とdomcontentloaded判定にjQueryの力を借りています。

あと、まだ製作途中でスクリプトの統合などを行っていないため重いです。
スクリプトのパスも変わる可能性がありますのでご利用は自由ですがご了承ください。

まずはスクリプトを読み込みます。

<script type="text/javascript" src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script type="text/javascript" src="http://meat18.mods.jp/1closure/profdatastorage.js"></script>

使い方は前回より簡単です。

<script type="text/javascript">

/*まず、ストレージを呼び出します。*/
var pds = new bingobongoApp.profDataStorage();

/*データマネージャのインスタンスを作ります。*/
/*第一引数はアメーバID、第二引数はストレージです。*/
var pdm = new bingobongoApp.profDataManager('blog-lab',pds);

/*読み込む*/
pdm.getData(function(ppData){
/*ここに読み込み成功時の処理を書きます。*/
/*ppData.srcが画像のURL ppData.widthが横幅 ppData.heightが縦幅です。*/
});

</script>

これを使ってコメントにプロフ画像を載せてみます。

<script type="text/javascript">
jQuery(function(){

/*新レイアウトでは不要です。*/
jQuery('span.comment_author > a').addClass('commentAuthor');

var pdStorage = new bingobongoApp.profDataStorage();
var comAuthers = goog.dom.getElementsByTagNameAndClass('a','commentAuthor');
var currentComNumber = 0;
var comLength = comAuthers.length;
var profSetAtCom = function(comments,current,length){
var comment = comments[current];
comment.pdm = new bingobongoApp.profDataManager((comment.href.split('/')).reverse()[1],pdStorage);
comment.pdm.getData(function(ppData){
var autherName = comment.innerText;
comment.innerText = '';
goog.dom.appendChild(comment,goog.dom.createDom('img',{src:ppData.src,alt:autherName,title:autherName,width:'70'},''));
comment.pdm = null;
if(current + 1 < length){profSetAtCom(comments,current + 1,length);}
});
};
if(comLength){profSetAtCom(comAuthers,currentComNumber,comLength);}
});
</script>

自分でHTMLを書けない以上、domcontentloaded判定はどうしても必要なのでjQueryの助けを借りちゃいました。
ちなみに新レイアウトではjQueryは標準装備されていないようですので、scriptタグを自分で加える必要があります。

いやー、ローカルストレージいい感じです。