Hatena::ブログ(Diary)

What is Normal 〜 もはや普通がわからない 〜 このページをアンテナに追加 RSSフィード

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>");
            }
        });
    });
})();

以上

リストとか作成するときに、プロフィール情報見れたほうが便利だろうなー、と思って作りました。

TwitterjQuery使ってるみたいなので、かなり楽してますw

使ってみたい方はご自由にお使いください。

2009-02-18

Twitterのページ内でインクリメンタルサーチするグリモン書いたよ

[2009年2月23日追記]

Twitterのページ内をインクリメンタルサーチするグリモン作りました。

メモ用にふぁぼってたやつとかを探しやすくする用途とかに使えるかな。

名前は適当に「twincre」・・・センスがありませんねw

名前は「Twitter Incremental Search Helper」に変えました。長いですけどわかりやすくということで。

ページ内にデータが多ければ多いほど便利さが上がるんで、AutoPagerizeと併用を推奨します。

というより、1ページに表示される量なら普通に見たほうが早いですねw

f:id:ombra:20090218183502p:image

実際にインストールすると上のようなインクリメンタルサーチ用のテキスト入力ボックスが表示されるので、

そこに検索データの入力を行えば、対応するデータのみ表示されるようになります。

あと、document.getElementsByClassNameという関数をつかってるので、Firefox2では動きません。

というわけで、Firefox3専用となります。Operaだと9.50以上なら動くかも。

githubに置いているので、使いたいかたはご自由にどうぞ。

twitter_incremental_search_helper.user.js ? GitHub

Userscripts.orgにも置くようにしました。

no title

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の名称)


以上

こんな感じですかね。間違いあったら教えてください。


参考

Firefox 3 (3.1) vs. Google Chrome vs. Safari 3 vs. Opera 9.5 vs. Internet Explorer 8 (IE8) vs. Internet Explorer 7 (IE7)

JavaScriptエンジンについて整理してみる - にたまごほうれん草

2008-12-07

gihyo.jpの「具体例で学ぶ!情報可視化のテクニック」のプログラムを勝手にRubyで書き換えてみた。その4

勝手にRubyで書き換えてみたプログラムも今回でラストになります。

プログラムダウンロードは以下のリンク先のdownloadからご自由にどうぞ。

GitHub - ombran/gihyojp-visualization-ruby: The Ruby version of the information visualization introduced by gihyo.jp.(unofficial)

今回は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

ちなみに、Ubuntuだとaptインストールできます。

# apt-get install librmagick-ruby

次にJSONライブラリgemインストールできます。

# 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という以下のような画像ファイルが出力されます。

ツリーマップによってクラスタリングの結果が視覚的にわかりやすく表現されていることがわかると思います。

ただし、入力データは、はてなブックマークホッテントリに依存するので、出力される画像はその時によって変化します。

f:id:ombra:20081207233935p:image:w600


以上

今回で、はてなブックマークホッテントリのツリーマップ化ができるようになったので、これで勝手にRubyで書き換えたプログラムは終了です。

情報可視化に関してすごく勉強になりました。あと、書き換えをする中でRubyプログラミングについてもいい勉強になりました。

こういう記事を書いてくれたgihyo.jpに感謝です。


参考

第6回 はてなブックマークの可視化(後編):具体例で学ぶ!情報可視化のテクニック|gihyo.jp … 技術評論社


関連

gihyo.jpの「具体例で学ぶ!情報可視化のテクニック」のプログラムを勝手にRubyで書き換えてみた。 - What is Normal 〜 もはや普通がわからない 〜

gihyo.jpの「具体例で学ぶ!情報可視化のテクニック」のプログラムを勝手にRubyで書き換えてみた。その2 - What is Normal 〜 もはや普通がわからない 〜

gihyo.jpの「具体例で学ぶ!情報可視化のテクニック」のプログラムを勝手にRubyで書き換えてみた。その3 - What is Normal 〜 もはや普通がわからない 〜