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

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

関連記事

Google Analytics の検索エンジン定義と独自の検索エンジンを追加する方法

【2009/09/07:追記】 このページで解説している方法が使えなくなりました。 問題の解説と対応策は下記エントリーをご覧ください。 Google Analytics に独自検索エンジンを追加してい …

【更新】ソーシャルメディアに共有するボタンの設置方法(Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ)

ソーシャルメディアの各サービスがこぞって「いいね!」などの共有ボタンをリリースしています。ブログやニュースメディアでも頻繁に目にする昨今ですが、色々なソーシャルボタンの設置方法をまとめて紹介したいと思 …

no image

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

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

WordPressでstyle.cssを更新したらwp_enqueue_styleでキャッシュクリアする

どうも、ヤガーです。 しばらくWEB技術ネタを投稿していませんが、頻繁に使うテクニックについてはちゃんとブログに残していこうと思います。 企業HPなどを制作する時に、長い間Wordpressが使われて …

Deliciousの被ブックマーク推移グラフを表示するURL見つけた

ボクは普段ソーシャルブックマークサービスはDeliciousを使っているんですが、ブログ用にブクマ数やグラフ、タグなんかを表示できるTagometerというブログパーツが用意されています。 With …

スポンサードリンク

スポンサードリンク