ピアニストガイド
吉澤 ヴィルヘルム
青弓社 2006-02
Amazonで詳しく見る by G-Tools
ピアニスト・ガイドという本がある。ピアニストを 1 人 1 ページかけて紹介している。本書の特徴の一つに、そのピアニストの「師匠」を明記していることが挙げられる。
ピアニストの「師匠」からその「師匠」のピアニストを調べれば更に「師匠の師匠」が分かる。これを繰り返していけば、ピアニストの系譜図が描ける。そこで graphviz というツールを使って、「ピアニストの系譜図」を描いてみた。
系譜図がとんでもなく大きくなったので、小さな図を掲載しておく。図をクリックするとオリジナル・サイズの図をダウンロードできる。
ソースコードを github 上で公開した。
参考になれば嬉しい。また、足りないピアニストの情報があれば [email protected] にお知らせ頂けると助かる。
Graphviz で Edge (ノードとノードを繋ぐワイヤーもしくは矢印のこと) を見えなくするには、style に invis を設定する。例えばこんな感じ。
a -> b [style=invis];
複数の Edge を見えなくさせるには、こんな風に書いてもいい。
{
edge [style=invis];
a -> b;
a -> c;
a -> d -> e;
}
Edge を消す方法には、背景色と同じ色を Edge に設定する方法もある。
a -> b [color=white]
ただ、この方法だと背景色を他のものに変えた時に Edge が再び現れてしまう。また、ノードの枠線を矢印の先が白色で上書きして、ほんの少しだけど枠線が欠けたやうに見えてしまう。あまりスマートな解法じゃない。
ぼくは Blogger の歴史 を Graphviz で描く時にこの方法を使ったけど、今はもう style=invis 方式に変えてしまった。
ぼくは「Blogger の歴史」で、こんな風に「見ない Edge」を使った。
digraph g {
# Headers
{
node [shape=plaintext];
row1; row2; row3;
}
{ rank=same; row1; row2; row3; }
{
# edge [style=invis];
row1 -> row2 -> row3;
row1 -> a;
row2 -> c;
row3 -> e;
}
# Relations
{ rank=same; b; c; }
a -> b -> c -> d;
e -> f;
}
列の説明をグラフの上に書く、というスクリプト。row1, row2 row3 を rank=same を使って同階層にまとめている。これを絵にするとかうなる。
そして、style=invis で Edge を消すと
ほら、いい感じ。
もっと複雑なグラフでも、rank を使って矢印を張り、edge を消してしまうと幸せになれることが多い。思い通りにノードを配置できないことがあったら、是非思い出して欲しい。
昨日、Blogger の歴史年表を描くのに graphviz のドキュメントを読んでいたら、画像を埋め込む方法を見つけた。
画面遷移のサンプルを描いてみた。まずは実行例とソースコードをばご覧あれ。
Ubuntu で slapd をインストールする時の設定画面の画面遷移。
digraph G {
node [shape=plaintext];
slapd1 [label=<<table><tr><td><img src="s1.png"/></td></tr></table>>];
slapd2 [label=<<table><tr><td><img src="s2.png"/></td></tr></table>>];
slapd3 [label=<<table><tr><td><img src="s3.png"/></td></tr></table>>];
slapd4 [label=<<table><tr><td><img src="s4.png"/></td></tr></table>>];
slapd1 -> slapd2 -> slapd3 -> slapd4;
}
s1.png から s4.png まで、4 枚の画像を用意してある。
gnaphviz では、label の指定に HTML ライクな書式が使える。使える要素は、table, br, font, img の 4 つ。これを " ではなく < と > で囲む。
例えば、
foo [label="foo\nbar"]
をこの書式で書くと、次のやうになる:
foo [label=<foo<br/>bar>]
茶目っ気を出して、ラベルの中で色を変えることも可能。
foo [label=<<font color="blue">foo</font><br/><font color="red">bar</font>>]
table, br, font はどこででも書けるけど、img 要素は table の中でしか書けない。table の中では tr, td 要素を使うことができる。なので画像を貼る最小のコードは次のやうになる。
hoge [label=<<table><tr><td><img src="hoge.png"/></td></tr></table>>];
img 要素の属性は src と scale の 2 つのみ。HTML の alt 属性はない。
scale 属性は table のセルに余分なスペースがある時の振る舞いを決定する。属性値は次の通り:
最後に、node に label を付ける際はサンプルのやうに node [shape=plaintext]; を付けるといい。そうしないと、画像の周りに円が描かれてしまう。
クリボウの Blogger Tips さんが、Blogger の歴史についてまとめていらっしゃる。
過去に (旧) Blogger と呼ばれたり、Blogger beta と呼ばれたりと、混乱しがちな歴史が一望できる。説明も詳しく分かりやすい。
このクリボウ版 Blogger 年表に刺激を受けて、ぼくも年表を作ってみた。解説はクリボウ氏の記事を読まれたし。
クリックすると大きな画像が見られます
この年表は、Graphviz を使って描いた。ソースコードは gist に置いたので、興味のある方はどうぞ。改変はご自由に。
git clone git://gist.github.com/135521.git gist-135521
ウェブページの HTML 構造を解析して、Graph にしてくれるサービスがある。
ここでいう Graph は、数学用語でいう所の「グラフ」。「点と点を線で結んだもの」をグラフと呼ぶ。
簡単に色の説明をば。「黒」が HTML 要素。ページの一番トップ。緑が div、赤がテーブル関係、黄色がフォーム関係の要素。青がリンクで、紫が画像。段落に改行、引用の要素がオレンジ。最後に灰色が、その他の要素。
Websites as graphs の実行には、Java Runtime が必要。
この可視化について最初に記事を書いたのは、(おそらく) Aharef というブログ。
当初、Graph 化するアプリケーションは提供されてなくて、解析結果だけが載っていた。今も、CNN.com や boingboing.net、apple.com などの解析結果を同記事で見ることができる。
このサイトを日本で紹介したのが、秋山さんのブログ。
後で、Java applet 版 (上の an HTML DOM Visualizer Applet ページ) が公開されて、誰でも、任意のページを解析できるようになった。
いま、巷では、「websitesasgraphs」というタグを付けて Flickr に解析結果をアップするのがはやっているとか...
ぼくは、このアプレットが出たのを lomo さんのサイトで知った。
他人のページの構造を見てみるのも楽しもんだけど、やっぱり自分のサイトで遊ぶのが一番! Applet がお花を描いてくれるのを見ると和む :) 疲れた時なんかに、どうぞ。
昨日は日本語を Windows 上の graphviz で使う方法について書いた。UNIX でも同様の手順で日本語フォントを使えようになる。
Unix におけるポイントは、graphviz はフォント名にハイフンを許していないらしいこと。つまり、kochi-mincho.ttf というフォント名は認識されないので、mincho.ttf という名前ででもシンボリック・リンクを張るようにしておく。なお、graphviz はフォントをカレント・ディレクトリーでも探すので、カレント・ディレクトリーにリンクを張ってもよいかも。
Graph (点と点を線で結んだネットワークを指す数学用語) を可視化するのに grapihviz というソフトがある。
digraph test {
TeX -> DVI -> PS
DVI -> PDF
}
上のソースを en.dot という名前のファイルで保存して、graphviz のツール dot で処理すると次のような絵ができる。
$ dot -Tpng -o en.png en.dot
Windows で日本語を使うには、次の三つの手順を踏む。
DOTFONTPATH は、msmincho.ttc が置いてあるフォルダー名を指定する。WindowsXP なら、c:\WINDOWS\Fonts\。
digraph test {
node [ fontname="msmincho.ttc" ];
"共和政ローマ" -> "ローマ帝国" -> "西ローマ帝国"
"ローマ帝国" -> "東ローマ帝国"
}
上のソースを ja.dot と保存して dot にかけると...
$ dot -Tpng -o ja.png ja.dot
サンプルの図は、最も簡単な部類に入るもの。もっと複雑なソースでも OK なので興味のある人はお試しあれ。