blockdiagにリンク機能を追加
shirou
こんにちは。
blockdiagのノードにlink要素を付けられるようにし、SVGで書き出した場合に
そのノードをクリックしたらlinkをたどれるようにしました。
また、sphinxcontrib-blockdiagを変更し、SVGを書き出せるようにしました。
これにより、sphinxでblockdiagの図をクリックするとlinkで飛べるようにしてみました。
http://dl.dropbox.com/u/218108/files/link_sphinx/index.html
これは次のようなことをやりたいな、と思っているからです。
1. 自動生成時に図が大きくなる問題を解決
個人的にblockdiagは自動生成するときに使えると思っているのですが、
どうしても一つの図で表しきれないときがあります。
例えば、前にクラスの継承関係を図にしてみたのですが、
すぐに画面からはみ出してしまうぐらいに大きくなりました。
この様な時、適切に分割してリンクを張れるようにしてあればより見やす
く、分かりやすくなると思います。
blockdiagには-s (separate)という、グループ単位で別のファイルに分割
するという機能がありますが、これを使うと、このノードをクリックして
別の図を見たい！と思います。
他の例としては、doxygenではgraphvizを使ってクラスの継承関係を描画す
ることが出来ますが、graphvizはURL要素がありますのでクラスの継承関
係の図からそのクラスの解説ページへのリンクを張っています。
例: http://www.nigels.com/glt/doc/inherits.html
リンク機能を追加することにより、このような導線を作れると思います。
2. Sphinxで図を使って整理されたドキュメントを作りたい
図はいろいろな要素の関係をぱっと見て把握できるところが利点です。
とすると、その図からワンクリックでより詳細なページに飛ぶことができ
れば便利だと思います。
例えば、 @togakushi さんがおっしゃっていましたが、nwdiagでホストを
クリックするとそのホストの情報が記載されているページに飛ぶ、という
ことが出来れば便利だと思います。
ただ、こちらは人力だとすると、より書きやすい仕組みが必要ですので、
sphinxcontribで :ref: とあったら適切なURLに変換するようにしてあると
書きやすいと思います。ただ、これはまだ実装していません。
以上、二点がやりたいことです。
これではだめだ、ここをこうしたほうがいい、などありましたら、
ぜひお聞かせください。
よろしくお願いします。
# なお、pngでもsphinxでクリッカブルマップにして
# 同様な機能を実現できるのではないかと思っています。
Komiya Takeshi
> blockdiagのノードにlink要素を付けられるようにし、SVGで書き出した場合に
> そのノードをクリックしたらlinkをたどれるようにしました。
> また、sphinxcontrib-blockdiagを変更し、SVGを書き出せるようにしました。
> これにより、sphinxでblockdiagの図をクリックするとlinkで飛べるようにしてみました。
リンクのところは後述の通り少し検討したいですが、
SVG 出力できるようにした箇所については取り込みたいと思います。
なお、HTML writer 向けの箇所を書き換えたと思うのですが、
どのようなタグで SVG を埋め込んでいますか?
ブラウザによって <img>, <object>, <embed> など、埋め込み方が異なっているので
どうやっているのか興味があります。
> 1. 自動生成時に図が大きくなる問題を解決
同意します。
separate オプションをつけたとおり、図が大きくなった時の
フォローアップが必要だと感じています。
当初は separate オプションで SVG ファイルを生成したときに、
別のファイルへのリンクを付与するようにしていました。
しかし、コマンドラインで使った場合と Sphinx や他のものに埋め込んだ場合で
リンク先が変わってしまうなどの問題があり、
混乱を避けるため最終的にリンク機能を削除したことがあります。
そのため、何をターゲットにした機能にするのか(どのように使われる機能か)が
非常に気になっています。
例::
* ユーザーが指定した属性をそのまま使う (blockdiag では調整しない)
* separate オプションと連動させる
* Sphinx 向けの機能 (:ref: 対応などもする)
※ 僕は以前ここで挫折したので、何がいいのかあまりイメージがないところです。
以前は単なる "実装"でユーザーが利用できるかたちの "機能" ではなかったので、
今回はフォーカスできるといいなと思ってます。
> # なお、pngでもsphinxでクリッカブルマップにして
> # 同様な機能を実現できるのではないかと思っています。
Sphinx 向けであればこれはぜひ欲しいですね。
shirou
2011年11月2日20:07 Komiya Takeshi <i.tk...@gmail.com>:
> なお、HTML writer 向けの箇所を書き換えたと思うのですが、
> どのようなタグで SVG を埋め込んでいますか?
> ブラウザによって <img>, <object>, <embed> など、埋め込み方が異なっているので
> どうやっているのか興味があります。
<img>で埋め込むと、リンク機能が効かなくなるので<svg>で埋め込んでいます。
一応Mac上でchromeとFirefoxとSafariでは表示とリンクが機能することは確認しましたが、
Windowsでの確認はしてません。すいません。
>> 1. 自動生成時に図が大きくなる問題を解決
> 当初は separate オプションで SVG ファイルを生成したときに、
> 別のファイルへのリンクを付与するようにしていました。
> しかし、コマンドラインで使った場合と Sphinx や他のものに埋め込んだ場合で
> リンク先が変わってしまうなどの問題があり、
> 混乱を避けるため最終的にリンク機能を削除したことがあります。
> 例::
> * ユーザーが指定した属性をそのまま使う (blockdiag では調整しない)
> * separate オプションと連動させる
> * Sphinx 向けの機能 (:ref: 対応などもする)
確かにどのように使われるかによってリンクは変わってくるので
そのあたりは難しいですね。
ぼくは基本的にユーザが指定した属性をそのまま使うのがいいと思います。
ただ、ぼく自身はsphinxで使いたいので、:ref:対応はしたい、と思っています。
でも、おっしゃるとおりこれだけだとまだ「機能」な気もします。
とりあえずぼく自身が欲しい機能を実装してみて、実際に使ってもうちょっと良くしていく、
という方向でいいでしょうか。
ほかに使う人がいて、要望が出てくればまた考えるという感じで。
>> # なお、pngでもsphinxでクリッカブルマップにして
>> # 同様な機能を実現できるのではないかと思っています。
>
> Sphinx 向けであればこれはぜひ欲しいですね。
ですね。ちょっと試してみます。
Komiya Takeshi
> <img>で埋め込むと、リンク機能が効かなくなるので<svg>で埋め込んでいます。
> 一応Mac上でchromeとFirefoxとSafariでは表示とリンクが機能することは確認しましたが、
> Windowsでの確認はしてません。すいません。
<svg> なんてタグがあったんですね。
あと(より詳しく)チェックするとしたら opera と ie9 なんですかね。
主要どころがカバーされているので問題ないと思います。
> ぼくは基本的にユーザが指定した属性をそのまま使うのがいいと思います。
> ただ、ぼく自身はsphinxで使いたいので、:ref:対応はしたい、と思っています。
…
> でも、おっしゃるとおりこれだけだとまだ「機能」な気もします。
> とりあえずぼく自身が欲しい機能を実装してみて、実際に使ってもうちょっと良くしていく、
> という方向でいいでしょうか。
> ほかに使う人がいて、要望が出てくればまた考えるという感じで。
それで ok です。
僕の好みになってしまうのですが、
使い勝手に目をつぶって機能を作るのは避けたいので、
まずは Sphinx 向けに(:ref: 対応など)やっていくのはありだと思います。
ちょっと手がかかってしまうかもしれませんが、やってみましょう。
>>> # なお、pngでもsphinxでクリッカブルマップにして
>>> # 同様な機能を実現できるのではないかと思っています。
>>
>> Sphinx 向けであればこれはぜひ欲しいですね。
>
> ですね。ちょっと試してみます。
お願いします。
座標を取るのは以下のコードでいけると思います。
draw = DiagramDraw(...)
for node in draw.nodes:
cell = draw.metrics.cell(node)
print cell
※ 動かしていないので動かなかったらごめんなさい。
※ シェイプに合わせた座標を取るのは思いつかなかったので、
セルの大きさを取得してます。
shirou
2011年11月4日0:08 Komiya Takeshi <i.tk...@gmail.com>:
> @tk0miya です。
>
>> <img>で埋め込むと、リンク機能が効かなくなるので<svg>で埋め込んでいます。
>> 一応Mac上でchromeとFirefoxとSafariでは表示とリンクが機能することは確認しましたが、
>> Windowsでの確認はしてません。すいません。
>
> <svg> なんてタグがあったんですね。
> あと(より詳しく)チェックするとしたら opera と ie9 なんですかね。
>
> 主要どころがカバーされているので問題ないと思います。
試してみました。
- IE9, Firfox-6, chrome (Windows) -> OK
- Opera(Windows) -> NG
- iphone -> NG
とはいえ、ここを見ると
http://stackoverflow.com/questions/5356196/svg-not-showing-in-opera-and-firefox-but-chrome
operaもsvgタグはサポートされてるようですね。
どうもsvgが二重になってるのがまずい気がします…
明日辺りに直します。