Ajax 第二弾 流れるはてなブックマーク

web

流れるはてなブックマーク(http://sshi.s57.xrea.com/ajax/hatena.html)。

はてなブックマークを眺めるAjaxを作ってみた。はてなブックマークに登録されたURL情報が流れていくのを眺められます。一応、カテゴリーとキーワードで絞りこむことが可能。最初はちょっともたつくけど、あとは非同期にデータを取得しているので、そこそこスムーズに流れるはず。
Firefox,IE,operaで動作確認済み。XMLHttpRequestが使えなければ、IFRAMEを使うようにしてあるので、operaでも動作します。でもたまにopera固まります。ごめんなさい。Firefox推奨。
うーん、今、もう一度試してみたら、絞り込みはFirefoxじゃないと上手く動作しないようだ。DOMの扱い方、間違えてるかな。というわけで、やっぱりFirefox推奨。

仕組みはCGIとJavascriptのハイブリッドで、CGI側に蓄えたはてなブックマーク情報をJSONにした上で、XMLHttpRequestを使ってブラウザと通信してます。xrea上のデータをばかすか太らせる勇気もないので、CGI側のデータ更新はしてないです。とりあえず昨日、今日の2000件ほどのみ。でもまだ、ちゃんとJSONを作れていないようで、たまにJSON読みこみエラーになっちゃいます。愛敬愛敬。

ブラウザ上での表示も、工夫すればもっと変わったこと(本当にスムーズにスクロールさせるとか)ができるはずだけど、とりあえずここまで。誰か手を加えてみませんか？

クライアント側で使っている、xmlhttprequest.jsはAjaxでの通信を受けもつモジュール。ブラウザによってXMLHttpRequestかIFRAMEを切りかえて通信に使います。http://ma.la/mirrorman/wiki.cgi/IFRAMEHttpRequest で公開されているものを加工して作りました。あ、でもIFRAMEでのPOSTのところはややこしそうだったので、けずっちゃいました。IFRAME使う場合は、GETしかできません。加工にあたっては、http://www.interq.or.jp/student/exeal/dss/ejs/を参考にオブジェクト指向的にしてみました。貴重な情報を公開されているお二人に感謝。

面倒だったので、CGI側のソース(例によってRuby)は未公開。欲しい人いたらコメントください。

JSON変換モジュール

ruby

と、思ったけど、入れ子になったHashとArrayをJSONに変換するRubyスクリプトだけ貼りつけておこう。上のAjaxのCGI側で使っています。

module JSON
  module_function

  def str2json(str)
    '"' + str.gsub(/"/,'\"') + '"'
  end

  def value2json(value)
    case value.class.to_s
    when 'Hash'
      return hash2json(value)
    when 'Array'
      return array2json(value)
    when 'String'
      return str2json(value)
    when 'NilClass'
      return "null"
    else
      return str2json(value.to_s)
    end
  end

  def hash2json(hash)
    members = hash.map do |key,value|
      "#{str2json(key)} : #{value2json(value)}"
    end.join(',')
    return "{ #{members} }"
  end

  def array2json(ar)
    ret = ar.map do |item|
      value2json(item)
    end.join(',')
    return "[#{ret}]"
  end
end

使い方は、こんな感じ。

test = {}
test['hoge'] = [1,2,3,'string']
puts JSON.hash2json(test)
=> { "hoge" : ["1","2","3","string"] }

適当に作ったので変かもしれません。特に文字列をエスケープしているあたり。ツッコミ歓迎。
著作権は主張しませんが、自己責任でのご利用をお願いします。

続々 流れるはてなブックマーク

web

簡単なアニメーションを追加してみた。こちら。http://sshi.s57.xrea.com/ajax/hatena2.html
データは変更してないので見えるものは同じ。

追加時にズーミングさせて、うにゅっと流れる感じを出してみた。