Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

遷移図生成ツール blockdiag の紹介 @ Pycon mini JP 2011/01

25,369 views

Published on

Published in: Technology, Art & Photos
  • Be the first to comment

遷移図生成ツール blockdiag の紹介 @ Pycon mini JP 2011/01

  1. 1. 遷移図生成ツールblockdiagの紹介<br />小宮 健 (@tk0miya)<br />2011-01-29<br />
  2. 2. おまえ誰よ?<br />小宮 健 (@tk0miya)<br />株式会社タイムインターメディア所属<br />技術者募集中らしいです<br />Python 歴は約 1年ぐらい<br />Sphinx-users とか Python mini hack-a-thon に出没<br />LT開始 30分前まで資料作ってました<br />ドラが鳴らないようがんばります<br />
  3. 3. 遷移図、書いてますか?<br />
  4. 4. blockdiagの紹介<br />テキストから画面遷移図を生成するツール<br />コマンドライン / Sphinx 拡張として動作<br />悪名高きExcel 方眼紙がイヤで作った<br />並べ替えるのが面倒、ずれる 、etc…<br />
  5. 5. Excel 方眼紙時代の思い出<br />
  6. 6. 苦労 その1:追加/削除が大変<br />ここに 1 画面追加<br />
  7. 7. 苦労 その1:追加/削除が大変<br />1.スキマを作る<br />
  8. 8. 苦労 その1:追加/削除が大変<br />2.図形を置く<br />3.矢印を調整<br />
  9. 9. 苦労 その2:ずれる<br />
  10. 10. 苦労 その2:ずれる<br />
  11. 11. 苦労 その2:ずれる<br />
  12. 12. 苦労 その2:ずれる<br />
  13. 13. 苦労 その3:その他<br />Excel のバージョンが合わなくて図が壊れた<br />図の微調整ばかりで全然進まない<br />だんだん Excel (や Visio)が嫌いになってきた<br />Sphinx を使いたいのに組み合わせづらい<br />一度画像で保存する必要がある<br />別ファイルなので調整のたびに Excel を開くことに…<br />
  14. 14. というわけでblockdiagを作りました<br />
  15. 15. blockdiagの特徴<br />遷移図生成ツール<br />コマンドライン / Sphinx<br />定義ファイル(テキスト)から画像(PNG, SVG)を生成<br />Graphvizっぽい文法 (DOT like 文法)<br />自動的にレイアウトしてくれる<br />追加/削除が簡単<br />ずれたりしない<br />日本語 (UTF-8) 対応<br />easy_installblockdiagでインストール可能<br />
  16. 16. blockdiag の使い方<br />遷移図の定義を作ります<br />diagram {<br /> A -> B -> C;<br /> B -> D;<br />}<br />blockdiagコマンドで画像を生成<br />% blockdiag –o sample.png input.diag<br />
  17. 17. blockdiag:細かい装飾(1)<br />各要素ごとに色、画像、矢印の向きなどが設定できる<br />背景色、線の色、実線/点線<br />背景画像<br />矢印の向き<br />
  18. 18. blockdiag:細かい装飾(2)<br />そのほかの装飾<br />ノードのグルーピング<br />遷移の説明文 (短め)<br />
  19. 19. 新機能:ノードの形状変更<br />ノードのshape 属性を指定する<br />node1 [shape = “roundedbox”]<br />基本系<br />
  20. 20. 新機能:ノードの形状変更<br />ノードのshape 属性を指定する<br />node1 [shape = “roundedbox”]<br />フローチャート系<br />
  21. 21. 新機能:ノードの形状変更<br />ノードのshape 属性を指定する<br />node1 [shape = “roundedbox”]<br />その他<br />
  22. 22. 新機能:文法/属性の拡張<br />矢印の折り返し (folded 属性)<br />mail -> login [folded]<br />図が横長になったときに手動で調整する<br />
  23. 23. 新機能:文法/属性の拡張<br />グループ表現のネスト<br />単純にネストするだけ<br />group { A -> B; group { B -> C } }<br />
  24. 24. 出力サンプル<br />基本系<br />フローチャート<br />クローラー<br />Web ブラウザ上でのデモ<br />
  25. 25. 出力サンプル:基本系<br />
  26. 26. 出力サンプル:フローチャート系<br />
  27. 27. 出力サンプル:クローラ<br />クローラで生成する<br />デザイナーさんは画像を使って遷移図を作ってるらしい<br />PyCon mini JP サイトをクロールしてみた<br />urllib + PyQt (スナップショット取得) で適当なクローラ作成<br />
  28. 28. 出力サンプル:Web デモ<br />Web デモ<br />GoogleAppEngine上で動くように書き換えたもの<br />http://blockdiag.appspot.com/<br />ぬるぬる動くよ!<br />Ajax で書き換える度に SVG を生成しまくってます<br />
  29. 29. 今後の予定<br />ばぐつぶし(´・ω・`)<br />Sphinx 連携の強化<br />単なる図からドキュメントとして整備できるように<br />遷移図以外のブロック図にも対応する<br />フローチャートとかモジュール配置図とか<br />遷移図以外のドキュメントツールを作る<br />テーマ:簡単でメンテナンスできるくらいを書こう<br />興味がある方は @tk0miya まで<br />Twitter で blockdiagってつぶやくと喜びます。<br />
  30. 30. おしまい<br />ご静聴ありがとうございました<br />

×