Delicious画像APIが過負荷で繋がりにくい場合のJavaScriptで対応方法

投稿日：2009年6月2日

以前に、ボクが作って公開したDeliciousのブックマーク数を画像で表示するAPIですが、
・Delicious2.0 の被ブックマーク数画像取得APIを作りました [C!]
ありがたい事にものすごいアクセスが来ているため Delicious API への接続数上限を超える事が多いらしく正しい値を返さない事が多いです。
現在、Delicious のサポートに ban を解いてほしい旨の連絡は入れてみたのですが、少し時間をくれという返事を頂いております。ですので、もしブログに貼りたいだけでしたらJSONをJavaScriptで呼び出してブックマーク数を表示する方法がありますのでそちらを試して欲しいと思っています。

JavaScriptからDeliciousのJSON APIを取得してブックマーク数を表示する

Delicious APIではブックマーク数を調べたいURLをMD5ハッシュに変換して渡す必要があります。ここが、JavaScriptから呼び出しづらい大きな理由なんですが、JavaScriptでもMD5のエンコード/デコードができるライブラリがありますのでそれを使えば実現できます。
・高度な JavaScript 技集
こちらのサイトからmd5.jsをダウンロードして適当なフォルダに設置します。
（ここでは /js/md5.js として設置しました。）
それを、HTMLのHEADタグの中で呼び出します。

<script type="text/javascript" src="/js/md5.js"></script>

次に同じくHEADタグの中にMD5化したURLを保持しておく変数を定義します。

<script type="text/javascript">
var delicious_check_urls = [];
</script>

配列になっているのは一覧ページ等で複数のURLのチェックに対応するためです。
個別ページでは必要ないかもしれませんがこのままいきます。
次は実際にブックマーク数を表示したい部分に要素を追加します。

<script type="text/javascript">
url_hash = MD5_hexhash('<$MTEntryPermalink$>');               // MD5に変換
delicious_check_urls[delicious_check_urls.length] = url_hash; // 配列に格納
document.open();
document.write('(<span id="'+url_hash+'">0</span>)'); // MD5のURLをIDにセットしたSPAN要素を作成
document.close();
</script>

ここで、MD5ライブラリの関数を使ってURLをハッシュ化しています。
そして、そのMD5をIDとした要素（今回はSPANにしました）を出力します。
ボクの場合はMTを使っているので、調べたいURLは<$MTEntryPermalink$>で代入しました。
さて、最後に実際にブックマーク数を調べて表示するまでです。
このスクリプトはなるべく body タグの閉じる直前に入れるのがいいでしょう。

/**
* get Delicous count
*/
function getDeliciousCount(json) {
if ( json.length ) {
document.getElementById(json[0].hash).innerHTML = json[0].total_posts;
}
}
// URL配列に入っている分だけ処理する
for ( i=0; i<delicious_check_urls.length; i++ ) {
script = document.createElement('script');
script.charset = 'UTF-8';
script.src = 'http://feeds.delicious.com/v2/json/urlinfo/' + delicious_check_urls[i] + '?callback=getDeliciousCount';
document.getElementsByTagName('head')[0].appendChild(script);
}

まずは、getDeliciousCount関数ですが、これはJSONPからコールバックするために用意してあります。引数でJSONが入ってくるので、total_postsに格納されているブックマーク数をMD5ハッシュでIDを付けた要素に流し込んでいます。
そして、JSONPの呼び出しはdelicious_check_urls配列の数分、forループで回しながら実行しています。

まとめ

Delicious APIは同一接続元からのアクセス上限を設定しているようなのですが、このエントリーで紹介した方法であればアクセスするポイントは見ているユーザのアクセスポイントとなり、同一のサーバからとりにいくよりも分散されるため上限に達する事はないと思います。
基本的にはコピペだけでいけると思いますのでテンプレートをいじる事が出来る人はぜひやってみてください。
Delicious画像APIの問題に関しては引き続き改善するように努力します。
ってか、Delicious返事くれ・・・。ってか公式に画像API作ってくれ・・・。