新 delicious の被ブックマーク数を取得する
2008/08/07 22:48 - JavaScript
今回は慣れない JavaScript の話。
私はこのブログの各エントリーに、はてなブックマークと del.icio.us の被ブックマーク数を表示するようにしていました。
しかしつい先日のこと、8月1日でしたろうか。
del.icio.us はバージョンアップをおこない delicious となりました。 それに伴い、今までの方法では delicious の被ブックマーク数が取得できなくなってしまいました。
自分の書いた記事が他者からどれくらい参照されているのかということを教えてくれるこの機能、私にとっては、私が他人様からどれくらい必要とされているのかということを知るための機能とも言い換えてもよろしい。
この数値がカウントアップされることを通して私は私の存在価値を確認していた、といっても過言ではない。
私にとってはそれくらい重要な機能が、たった一夜のうちに消え失せたのでした。
明日から何を心の支えにして生きていけばいいんだ……
del.icio.us の4色に色分けされた正方形のアイコンだけが寂しく表示されたエントリー。 それはボクの心の虚しさそのもの。 地獄のどん底に突き落とされたようなこの気分!
斯くまで私は精神的に追いつめられていたのでありました。
が、しかし! 絶望の淵から這いあがって参りました!
後述する二つのエントリーのおかげで、delicious の被ブックマーク数を取得する JavaScript が書けましたよ。
なお、ワタクシ JavaScript はあまり触ったことがありません。 function 使ってサブルーチン記述したのも初めてなくらい JavaScript には疎いです。 よって JavaScript の構文的には問題のある部分があるかもしれませんが、とりあえず私の環境では特に問題なく動いているので、今ここでそのコードを晒し、諸賢からのご指摘賜われればと思います。
まぁとっとと delicious がここいらへんの API を公開してくれれば、こんな苦労することもないし悲痛な思いをすることもなかったんですけどねー。
ってなワケでこれがその JavaScript ファイル。 delicious.js というヒネリも何にもない名前です。
動作条件
delicious.js は単独では動きません。
旧 del.icio.us では被ブックマーク数を取得するために、当該 URL を MD5ハッシュ化ということをしなければいけませんでした。
新 delicious でもそこらへんの扱いは変わっていないようです。 よって md5.js が必要となります。以下から入手してください。
なお、動作確認は以下の環境でおこないました。
- OS
- MS Windows XP Home Edition Version 2002 SP3
- Browser
- IE 7.0.5730.13
- Firefox 3.0.1
- Opera 9.50
使用方法
html の head 部と body 部にそれぞれ以下のような記述が必要になります。
<head 部> <script type="text/JavaScript" src="md5.js"></script> <script type="text/JavaScript" src="delicious.js"></script>
<body 部> <script> <!-- getTotalPosts('delicious からの被ブックマーク数を調べたい URL'); // --> </script>
getTotalPosts の引数となる URL は、http:// からはじまるものをそのまま記述すればオッケー。 MD5 ハッシュ化は delicious.js 内部でおこないます。
元どおり、各エントリーに delicious からの被ブックマーク数が表示できるようになりました。
再び生きる望みが湧いてきましたよ!(笑)
これで考慮の憂いなくエントリーを書き続けることができようというもの。
以下、簡単にテクニカルノートなぞ(蛇足)。
JSON を使う
鍵は JSON 形式というデータとのこと。
ジェイソンって何? 13日(金)? なぞという稚拙なボケは放っといて。
JSON というのはデータをやり取りするためのテキストだそうです。文法は ActionScript の Array や Object と同じみたいです。 詳細は Google 先生にお尋ねください。
その JSON を取得するためのリンクと、JSON のどの値を見ればよいのかということが、下記エントリーには丁寧に記述されています。
ステキな情報ありがとうございます。
JSON を得る
データの在り処は分かりました。次はそのデータを取得し、解析する段です。
<a href="JSON の在り処の URL">anchor</a>
上記のようなリンクタグを記述した html をブラウザで読み込み anchor をクリックすると、ファイルのダウンロードを促すダイアログが表示されます。 そのダイアログに則り、ファイルをダウンロードするとテキストデータを入手することができます。 このテキストファイルが JSON というものなんですね。 テキストエディタで開いてみると、なんかそれっぽいデータが格納されています。
ところで人間が見るためなら a タグでダウンロードするのもいいだろうけど、オートマチックに html で表示させる場合はどういう JavaScript を書けばいいんだ? JavaScript の勉強をしていないオレ様ちゃんにはさっぱりわからんちん。
そこで参考にさせていただいたのが、こちらのエントリーです。
こちらもステキな情報ありがとうございます。
JavaScript はシロウトなんで説明は省きますが、こちらに書かれているコードを捏ねくり回しているうちにできたコードが今回アップした delicious.js です。
ただひとつだけ書くとすれば、delicious の JSON は一番外枠が Array になっているのがブービートラップと言えましょうか( function callBack{} の中身を参照のこと)。
ちなみにメインの関数に document.write が二つありますが、それぞれ以下のことをしています。
一つめの document.write は delicious のアイコン表示と参照対象 url の個別ページへのリンクを表示。
二つめの document.write が今回の肝、被ブックマーク数の取得および表示。