2009-12-19
ブログ新設のお知らせ
Livedoor Blogでブログ新しく開設してみました。
とは言っても、このブログを辞めるつもりではなく、技術と関係ない戯言を書く場所が欲しいと思っただけです。
あとはJavaScript実行できるブログ欲しいなと思ったのもありますね。
技術系のこと(グリモン作ったりとか)に関しては、今後もこっちでも書く予定です。
そして、コラムやらなんやら属人性の高いものはあっちで書くようにしようと思ってます。
興味のある方は見に来てやってください。そして、こちらも今後ともよろしくお願いします。
2009-11-13
Twitterのフォロワー一覧のページでプロフィール情報を表示するブックマークレット書いたよ。
お久しぶりです。
更新をだいぶ怠っていたんですけど、ちょっと書いてみたブックマークレットの紹介をしときます。
内容
フォローしてる人(following)とかされてる人(followers)の一覧ページで
それぞれの最新のポストが一個だけ表示されてますけど、
個人的にはそれよりもその人のプロフィールが見たいと思って以下のようなブックマークレット書いてみました。
とっくに誰か作ってそうな気がしますが、習作ってことで。
使い方
Twitterのフォロワー一覧ページ(例：http:twitter.com/ombran/followers)で
Firefox3.5.5とOpera10.01で動作確認してます。他のブラウザでもたぶん動くはず。
[注意点]表示されてるユーザ(20名)分の通信が行われるので、処理が重くなる可能性があります。
プロフィール情報追加版ブックマークレット
ユーザそれぞれの最新ポストの上にプロフィール情報が追加されます。
javascript:(function(){var addresses = $("#follow_grid address"); addresses.each(function(){ var user = $(this).find(".screenname:first > a").text(); var user_url = "http://twitter.com/" + user; var self = this; $.get(user_url, {}, function(response){ bio = $(response).find("#bio > .bio").text(); $(self).append("<br /><span>" + bio + "</span>"); }); }); })();
プロフィール情報書換版ブックマークレット
ユーザそれぞれの最新ポストをプロフィール情報に書き換えます。
javascript:(function(){ var addresses = $("#follow_grid address"); addresses.each(function(){ var user = $(this).find(".screenname:first > a").text(); var user_url = "http://twitter.com/" + user; var self = this; $.get(user_url, {}, function(response){ bio = $(response).find("#bio > .bio").text(); $(self.parentNode).find(".user-body:first .currently").replaceWith("<span>" + bio + "</span>"); }); }); })();
ソース
本当はグリモンにする予定だったんですが、jQueryの関係でうまく動作しなかったんで、
とりあえずブックマークレットで公開しました。
それぞれは以下のソースを二つに分けたものです。
(function(){ // プロフィール情報の追記か書換かのフラグ // true: 書換, false: 追記 var replace = false; var addresses = $("#follow_grid address"); addresses.each(function(){ // ユーザ名取得 var user = $(this).find(".screenname:first > a").text(); var user_url = "http://twitter.com/" + user; // プロフィール追加 var self = this; $.get(user_url, {}, function(response){ // ユーザページからプロフィール情報取得 bio = $(response).find("#bio > .bio").text(); if(replace){ // 表示内容をプロフィール情報に書換 $(self.parentNode).find(".user-body:first .currently").replaceWith("<span>" + bio + "</span>"); } else { // 表示内容にプロフィール情報を追加 $(self).append("<br /><span>" + bio + "</span>"); } }); }); })();
以上
リストとか作成するときに、プロフィール情報見れたほうが便利だろうなー、と思って作りました。
TwitterはjQuery使ってるみたいなので、かなり楽してますｗ
使ってみたい方はご自由にお使いください。
2009-02-18
Twitterのページ内でインクリメンタルサーチするグリモン書いたよ
[2009年2月23日追記]
Twitterのページ内をインクリメンタルサーチするグリモン作りました。
メモ用にふぁぼってたやつとかを探しやすくする用途とかに使えるかな。
名前は適当に「twincre」・・・センスがありませんねw
名前は「Twitter Incremental Search Helper」に変えました。長いですけどわかりやすくということで。
ページ内にデータが多ければ多いほど便利さが上がるんで、AutoPagerizeと併用を推奨します。
というより、1ページに表示される量なら普通に見たほうが早いですねw
実際にインストールすると上のようなインクリメンタルサーチ用のテキスト入力ボックスが表示されるので、
そこに検索データの入力を行えば、対応するデータのみ表示されるようになります。
あと、document.getElementsByClassNameという関数をつかってるので、Firefox2では動きません。
というわけで、Firefox3専用となります。Operaだと9.50以上なら動くかも。
githubに置いているので、使いたいかたはご自由にどうぞ。
Userscripts.orgにも置くようにしました。
2009-01-16
HTMLレンダリングエンジンとJavaScriptエンジンの対応について調べてみた
ちょっとHTMLレンダリングエンジンとJavaScriptエンジンの対応について調べたりしたんで、そのメモ。
名前調べただけなんで、詳しいことはググってください。
| HTMLレンダリングエンジン | JavaScriptエンジン | 主なWebブラウザ |
|---|---|---|
| Gecko | SpiderMonkey | Firefox 3.0まで |
| TraceMonkey | Firefox 3.1以降に実装予定 | |
| WebKit | JavaScriptCore | Safari |
| V8 | Google Chrome | |
| Presto | linear_b | Opera 7から9.27まで |
| futhark | Opera 9.50以降 | |
| Trident | JScript | Internet Explorer |
[修正]SquirrelFish ExtremeはJavaScriptCoreの一部(VMの名称)
以上
こんな感じですかね。間違いあったら教えてください。
参考
2008-12-07
gihyo.jpの「具体例で学ぶ！情報可視化のテクニック」のプログラムを勝手にRubyで書き換えてみた。その４
勝手にRubyで書き換えてみたプログラムも今回でラストになります。
プログラムのダウンロードは以下のリンク先のdownloadからご自由にどうぞ。
ombran/gihyojp-visualization-ruby - GitHub
今回はvisualization6フォルダのプログラムについての説明になります。
visualization6の説明
元記事だと第6回にあたる内容になります。
このプログラムは、はてなブックマークの人気エントリーをツリーマップとして可視化するプログラムになります。
詳しいことは元記事を見てもらったほうがわかりやすいと思います。
visualization6フォルダの内容
visualization6のフォルダ内容は以下のようになっています。
$ tree visualization6 visualization6 |-- Demo.rb |-- Visualization | |-- BinaryTreeMapRenderer.rb | |-- Bookmark.rb | |-- BookmarkDetail.rb | |-- BookmarkItem.rb | |-- Cluster.rb | |-- ClusterBuilder.rb | |-- DistanceEvaluator.rb | |-- HatenaBookmarkAPI.rb | |-- Item.rb | |-- MultiVector.rb | |-- Node.rb | |-- TreeMapRenderer.rb | `-- WardDistanceEvaluator.rb |-- Visualization.rb `-- hatena_bookmark.png
Visualization.rbを読み込むことだけで、Visualizationフォルダ以下のファイルを全て読み込めるようにしてあります。
Demo.rbがデモ用のプログラムとなります。
RMagickとJSONライブラリのインストール
画像処理にRMagick、JSONデータのパースにJSONライブラリを使用するので、あらかじめインストールしておいてください。
まずRMagickはgemだと
# gem install rmagick
# apt-get install librmagick-ruby
# gem install json
プログラムの説明
基本的にプログラムのクラスそれぞれは元記事のプログラムと対応させてあるので、見比べられるようにしてあります。
ただ、ブックマークのタグを整数インデックスに変換するIndexMapperクラスというのが元記事のプログラムにはありますが、こちらのプログラムではMultiVectorクラスのデータがハッシュで作成しているので、IndexMapperクラスがいらなくなります。
以下のBookmarkItemクラスから元記事でのマッピングをしていないことがわかると思います。
# BookmarkItem.rb module Visualization # はてなブックマークエントリに対応する末端ノード class BookmarkItem < Visualization::Item # @param bookmark：Visualization::Bookmarkオブジェクト # @param detail：Visualization::BookmarkDetailオブジェクト def initialize(bookmark, detail) # ブックマーク数をそのまま平均化すると比率が極端になるので # 平方根をとって調整する super(bookmark.title, tagsToVector(detail), Math.sqrt(detail.bookmarkCount)) @bookmark = bookmark @detail = detail end def tagsToVector(detail) vector = Visualization::MultiVector.new detail.tags.each do |tag| vector.set(tag => (vector.get(tag).to_i + 1)) end vector.normalize return vector end def getBookmark return @bookmark end def getDetail return @detail end end end
あとは、画像描画をしているBinaryTreeMapRendererクラスですね。
基本的に元記事と同じですが、画像に文字を書き込んでいるdrawStringWithinメソッドは特殊なんで説明しときます。
まずプログラムは以下のようになります。
# BinaryTreeMapRenderer.rb（一部分） module Visualization class BinaryTreeMapRenderer ... # ブックマークされたエントリのタイトル def drawStringWithin(draw, title, rect) d = draw # フォントサイズ pointsize = [(Math.sqrt(rect.width * rect.height) / 10).to_i, 10].max # 日本語表示のためにフォント指定(環境によって変更してください) d.font = "/usr/share/fonts/truetype/kochi/kochi-gothic.ttf" # 文字色 d.fill("white") d.stroke_width(0) d.pointsize(pointsize) # 文字を改行しながら出力 words = [rect.width.to_f/pointsize.to_f, 1].max.to_i t_ary = title.split("") t_size = t_ary.size rows = (t_size.to_f/words.to_f).ceil rows.times do |i| start = i * words finish = ((i + 1) * words) - 1 text = t_ary[start..finish].join y = rect.y + pointsize * (i + 1) d.text(rect.x + 5, y + 5, text) end end end end
d.fontでフォントの指定をしないと日本語を表示できないので気をつけてください。またこれは環境によって違うので、それぞれの環境で日本語を表示できるフォントの絶対パスを指定してください。
あとはpointsizeで文字の大きさを設定していたり、表示領域ごとに文字列を改行しながら表示しています。
ちなみにブックマーク数が多さで文字の大きさを変更してあります。
デモプログラムの実行
プログラムのデモを行うDemoクラスは以下のようになります。
# Demo.rb $KCODE = 'u' require 'rubygems' require 'RMagick' require File.dirname(__FILE__) + '/Visualization' class Demo include Visualization # 出力ファイル名 OUTPUT_FILE_NAME = 'hatena_bookmark.png' def run api = HatenaBookmarkAPI.new bookmarks = api.getHotEntries puts bookmarks.size.to_s + " entries." # 階層的クラスタリングの入力データを作成 input = [] bookmarks.each do |bookmark| puts bookmark.title puts " [url] " + bookmark.url # サーバの負荷を抑えるため呼び出し間隔を空ける sleep(1) detail = api.getDetail(bookmark.url) input << BookmarkItem.new(bookmark, detail) if (detail != nil) puts " [bookmarkCount] " + detail.bookmarkCount.to_s puts " [tags] [" + detail.tags.join(", ") + "]" end end # Ward法に基づく階層的クラスタリングを準備 evaluator = Visualization::WardDistanceEvaluator.new builder = Visualization::ClusterBuilder.new(evaluator) # クラスタリングを実行 puts "クラスタリング開始(結構時間かかります)" result = builder.build(input) puts "クラスタリング終了" # クラスタリング結果を表示 puts "画像生成開始" output(result) puts "出力ファイル：" + OUTPUT_FILE_NAME end def output(node) # 出力画像を作成 g = Magick::Image.new(1024, 768) # グラフィックオブジェクトを作成 d = Magick::Draw.new # 背景を白で塗りつぶす d.fill("white") d.rectangle(0, 0, g.columns, g.rows) d.draw(g) # ツリーマップの描画を実行 renderer = Visualization::BinaryTreeMapRenderer.new bounds = Magick::Rectangle.new(g.columns - 40, g.rows - 40, 20, 20) renderer.render(g, node, bounds) # 画像をPNGファイルに保存 g.write(OUTPUT_FILE_NAME) end end demo = Demo.new demo.run
デモプログラムを実行すると、以下のような出力が得られます。
$ ruby Demo.rb 30 entries. おいしいスープのレシピ集:アルファルファモザイク [url] http://alfalfa.livedoor.biz/archives/51402336.html [bookmarkCount] 249 [tags] [あとで読む, レシピ, お役立ち, ... ... クラスタリング開始(結構時間かかります) 30 29 28 27 26 ... 6 5 4 3 2 クラスタリング終了 画像生成開始 出力ファイル：hatena_bookmark.png
これで、hatena_bookmark.pngという以下のような画像ファイルが出力されます。
ツリーマップによってクラスタリングの結果が視覚的にわかりやすく表現されていることがわかると思います。
ただし、入力データは、はてなブックマークのホッテントリに依存するので、出力される画像はその時によって変化します。
以上
今回で、はてなブックマークのホッテントリのツリーマップ化ができるようになったので、これで勝手にRubyで書き換えたプログラムは終了です。
情報可視化に関してすごく勉強になりました。あと、書き換えをする中でRubyのプログラミングについてもいい勉強になりました。
こういう記事を書いてくれたgihyo.jpに感謝です。
参考
具体例で学ぶ！情報可視化のテクニック：第6回 はてなブックマークの可視化（後編）｜gihyo.jp … 技術評論社
関連
gihyo.jpの「具体例で学ぶ！情報可視化のテクニック」のプログラムを勝手にRubyで書き換えてみた。 - What is Normal 〜 もはや普通がわからない 〜
gihyo.jpの「具体例で学ぶ！情報可視化のテクニック」のプログラムを勝手にRubyで書き換えてみた。その２ - What is Normal 〜 もはや普通がわからない 〜
gihyo.jpの「具体例で学ぶ！情報可視化のテクニック」のプログラムを勝手にRubyで書き換えてみた。その３ - What is Normal 〜 もはや普通がわからない 〜
