MEMOMEM

¶ Graphviz_make_dot_file_and_svg

Graphviz の練習

dot ファイルの中身：

ファイル名 -> test



graph{
    graph [rankdir=RL, ranksep=0.15, overlap=false, size=50.0];
    node [fontname="Gill Sans"];
    edge [dir=both, arrowhead=none, arrowtail=none];
    LAMBDA[URL="http://basicwerk.com/memo.cgi?search=LAMBDA"];
    LAT[URL="http://basicwerk.com/memo.cgi?search=LAT"];
    LISP[URL="http://basicwerk.com/memo.cgi?search=LISP"];
    SCHEME[URL="http://basicwerk.com/memo.cgi?search=SCHEME"];
    PERL[URL="http://basicwerk.com/memo.cgi?search=PERL"];
    REGEX[URL="http://basicwerk.com/memo.cgi?search=REGEX"];
    LAMBDA -- {LAT;LISP;SCHEME;REGEX;PERL};
    PERL -- {SCHEME;REGEX};
    REGEX -- {LISP;SCHEME;PERL};
}

graph [ ..., size=50.0]; はグラフが大きくなりすぎた時のことを考えて。このサンプルぐらいの大きさなら関係ない。

で、下記のコマンドを実行すると、

$ neato -Tsvg -O test

こんな SVG が生成される。

dot ファイルからグラフを生成するコマンドはいろいろあるので、後で試してみる。

circo, dot, fdp, neato, nop, nop1, nop2, osage, patchwork, sfdp, twopi

参考：

Graphviz - 簡単な使い方

http://reddog.s35.xrea.com/wiki/Graphviz.html

Graphvizのneatoでノード間の線の長さを変更する

http://kyle-in-jp.blogspot.jp/2011/03/graphvizneato_26.html

Graphvizのレイアウトについて - だらろぐ

http://r-satsuki.air-nifty.com/blog/2009/04/graphviz-d4e2.html

Graphvizレイアウトサンプル - hp12c

http://melborne.github.io/2013/04/02/graphviz-layouts/

#Graphviz #SVG #Visualizing #HTML

SN 2013/06/30 12:32:30

Archives > Graphviz_make_dot_file_and_svg.html

¶ HTML_SVG_htaccess_AddType

HTML に SVG を埋め込むには、サーバが Content-Type:image/svg+xml で返さないといけないので、.htaccess に以下の行を追加。

AddType image/svg+xml .svg AddType image/svg+xml .svgz

SVG ファイルを外部ファイルに設置して、Object 要素で読み込むという方法に一度はトライしたが、この方法だと、Node に設定した HREF を叩いた時、SVG を読み込んでいる Object 内にハイパーリンク先のページを読み込んでしまうという仕様に遭遇。

これは意図した動作ではなかったので、やはり HTML 内に SVG をベタ書きすることにした。

HTML5 基準なら、body 内にいきなり SVG 要素を書き始めれば良い。

参考：

[SVG][.htaccess]HTMLに外部SVGファイルを埋め込む - すごい速さ

http://coban.jp/blog/2010/10/13/svg-htaccesshtmlに外部svgファイルを埋め込む/

#SVG #HTML5 #Apache #htaccess #Graphviz

SN 2013/06/29 00:07:21

Archives > HTML_SVG_htaccess_AddType.html

¶ HTML_white-space_nowrap

随分昔の記憶で、指定した文字列を自動的に改行させたくない場合は <NOBR></NOBR> を使っていたように思うのだが、これは Netscape の独自仕様だそうで、HTML5 では廃止されてるそうです。アーメン。

なので、現在は CSS から white-space: 属性を使いましょう。



/* ボックスの大きさに応じて改行する */
span.normal {
    white-space: normal;
}


/* <PRE> タグといっしょ */
span.pre {
    white-space: pre;
}


/* このクラスの部分文字列は改行しない */
/* ボックスに幅に達する前に、*/
/* 部分文字列ごと次の行に送られる */
span.nowrap {
    white-space: nowrap;
}

参考はいつもお世話になっている、

HTMLクイックリファレンス

http://www.htmq.com/style/white-space.shtml

#HTML #CSS #HTML5

SN 2013/06/27 10:32:01

Archives > HTML_white-space_nowrap.html

¶ HTML_Character_reference

HTML の特殊文字リファレンス。

こちらのサイトがホントに詳しくて助かりました。

使いたいときの HTML特殊文字 & 機種依存文字 - みんなの知識ちょっと便利帳

[ が [ とか。

#HTML

SN 2013/06/26 23:21:58

Archives > HTML_Character_reference.html

¶ 20130621001920_regex_lookbehind_not

例えばあるHTML文書の中に埋め込まれた画像の情報を抜き出したいとします。

画像には jpg, gif, png が複数入り乱れているとしましょう。

この中から「拡張子が gif でない」画像の URL だけ抽出したいとします。

「〜でない」という条件と、それ以外が複数ある場合に便利なのが「否定の先後読み」という正規表現のテクニックです。

この場合、拡張子は URL の最後に付きますので、一旦 URL 全体を正規表現に飲み込ませて、飲み込んだ文字列のケツがどうなってるか後から確認させますので、「否定の後読み」を使います。

また、正規表現には方言や制限がたくさんありますが、最も自由度の高い正規表現エンジンは Perl に組み込まれたものです。

Perl で「拡張子が gif でない」画像の URL だけ抽出する処理をワンライナーで書くと次のようになります。



$ perl -wnl -e 'print $1 if m/<img src="([^"]+(?<!\.gif))"[^>]*>/imsg' file

(?<!\.gif) この部分が否定の後読み (?<!…) になっています。

[^"]+ でダブルクォーテーション内の文字列 = URL を飲み込んだ後、ちょっと後戻りして拡張子が gif でない、つまりそれ以外の jpg や png にマッチするかどうかを確かめています。

マッチすると "([^"]+(?<!\.gif))" のようにダブルクォーテーションの内側が括弧でくくられているので、正規表現エンジンによって組み込み変数である $1 にキャプチャされ、最後に Perl によって print されます。

#Regex #Perl #HTML

SN 2013/06/26 23:20:34