livedoor clip の JSONP API からタグ・クラウドを生成するデモ

id:secondlife さんの AsyncJSONP (参照: MochiKit で JSONP の利用) を使って、MochiKit の勉強がてら作ってみました。

livedoor clip の JSONP API を利用してタグ・クラウドを生成する、というものです。最近どんなキーワードの話題が注目されているかが分かると思います:

MochiKit を使ったのは実は今回が始めてなんですが、(昨今の脳トレブームにも通ずるような) 頭脳を刺激されるような感じがして、とても楽しいです。

OO 言語等との語順の違いとか、高階関数の利用が必然的に求められる点など、個人的に普段使わない頭の使い方をさせられるためなんでしょうね。

とりわけイテレータ関数の利用において、できるだけ中間の変数を作らず関数の組み合わせだけで処理する、というあたりが頭の使いどころになってくるようです。

例:

// ふつうの JavaScript
var links = [];
for (var i = 0; i < json.clips.length; i++) {
  if (json.clips[i].public_clip_count > 1) {
    links.push(json.clips[i].link);
  }
}

// MochiKit
imap(
  itemgetter("link"),
  ifilter(
    compose(
      partial(operator.lt, 1),
      itemgetter("public_clip_count")
    ),
    json.clips
  )
)

(整形上縦に長くなっていますが、var を一つも使っていないことに注目してください)

また、Prototype.js との比較で見ると、"bindMethods" という関数が大きなアドバンテージになっていると思いました:

Prototype の場合、いちいち "method.bind(this)" として、メソッドの実行されるコンテキスト ("this" が何を参照するか) を指定しなければならないところを、"bindMethods" は最初の一回だけで、全てのオブジェクト・メソッドのコンテキストを固定してくれます。これはもの凄く便利です。

とまぁ感想はそのぐらいにして、デモはこちらです:
JSONP API Demo of Livedoor Clip

IE6 で動作及びクラッシュ確認(笑)をしております (リロードでクラッシュ)。その他は未テストです。ご注意ください。

なお、タグのスタイル指定及び API の仕様に関しては、それぞれ下記のサイトを参考にさせて頂きました:

NEWZingo

livedoor clip jsonp api sample / livedoor clip osekkai

特に、"api sample" の方から、面式の無い方のお名前を勝手に利用 (コピペ) させて頂いています。ごめんなさい。