Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

JavaScript 小技集

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

投稿日:


以前に、ボクが作って公開した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作ってくれ・・・。

-JavaScript, 小技集

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

タブ開き過ぎの人用のFirefox拡張「Tab mix Plus」で「FaviconizeTab」みたいなミニマム表示を実現

Firefoxの拡張といえば、タブ拡張なんかはメジャーな方だと思うんだけど、色々入れてると機能がコンフリクトしちゃってうまく動かなくなったりしますよね。ボクは基本的には「Tab Mix Plus」しか …

no image

mixi日記投稿用APIを使ってPHPからmixi日記にポスト

via: mixi for iPhoneから発掘されたmixi日記投稿用API « ku という事で、iPhone用のアプリをキッカケにmixi日記にポストできるAPIが見つかったそうです。Perlの …

第1回:CSSで画像にborderをつけてみる

記念すべき初回のエントリーはCSSによるborderのスタイルを色々試してみます。やっぱりフォトサイトで一番気を遣うのは写真(画像)を表示するための <IMG>タグ だと思います。で、bo …

no image

Smartyで配列のダンプを表示させる5つの方法

Smartyといえば、言うまでもなくPHPの中ではとても有名なテンプレートエンジンです。自分でも長い事使ってきたんだけども、使い方が分からなくて困るほど難しい事をしてこなかったせいか全然深いところまで …

no image

第8回:Twitter JavaScript Badges の日付フォーマットを自由にカスタマイズ

久しぶりに twitter ネタです。 というかシツコク JavaScript badges のお話。 以前のエントリーで IE での日付表示がおかしい件に対応しました。 そのエントリーにフォローする …

スポンサードリンク

スポンサードリンク