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の紹介<br />小宮 健 (@tk0miya)<br />2010-12-08<br />
自己紹介<br />小宮 健   (@tk0miya)<br />株式会社タイムインターメディア所属<br />普段は Web アプリ開発 (PHP, Ruby など)してます<br />Python 歴は約 1年ぐらい<br />発表するのは...
遷移図作ってますか?<br />プロジェクトで画面遷移図を作ることになった<br />弊社では Excel、Visio で作ることが多い<br />画面を箱、遷移を矢印で表現するタイプのもの<br />実際にやってみると大変!<br />
苦労 その1:追加/削除が大変<br />ここに 1 画面追加<br />
苦労 その1:追加/削除が大変<br />1.スキマを作る<br />
苦労 その1:追加/削除が大変<br />2.図形を置く<br />
苦労 その2:ずれる<br />
苦労 その2:ずれる<br />
苦労 その2:ずれる<br />
苦労 その2:ずれる<br />
苦労 その3:その他<br />Excel のバージョンが合わなくて図が壊れた<br />図の微調整ばかりで全然進まない<br />だんだん Excel (や Visio)が嫌いになってきた<br />Sphinx を使ってみたいのに組み合わせ...
こんなのメンテナンスしたくない!<br />
というわけでツールを作ってみました<br />
blockdiag(ぶろっくだいあぐらむ)<br />遷移図生成ツール<br />定義ファイル(テキスト)から画像(PNG, SVG)を生成<br />Graphvizっぽい文法<br />テキストなのでバージョン管理しやすい<br />自動的...
blockdiag の使い方<br />遷移図の定義を作ります<br />diagram {<br />  A -> B -> C;<br />          B -> D;<br />}<br />blockdiagコマンドで画像を生成<...
blockdiag:細かい装飾(1)<br />各要素ごとに色、画像、矢印の向きなどが設定できる<br />背景色、線の色、実線/点線<br />背景画像<br />矢印の向き<br />
blockdiag:細かい装飾(2)<br />そのほかの装飾<br />ノードのグルーピング<br />遷移の説明文 (短め)<br />
blockdiag:ちょっと複雑な例<br />diagram {<br />toppage -> add -> add_confirm -> toppage;<br />toppage -> edit -> edit_confirm -> t...
blockdiag:ちょっと複雑な例<br />
デモ<br />http://blockdiag.appspot.com/<br />
blockdiag を使おう<br />blockdiagコマンド<br />% blockdiag –o output.png  input.diag<br />% blockdiag –T svg output.svg  input.dia...
Sphinx との連携<br />Sphinx 用プラグイン:sphinxcontrib-blockdiag<br />% easy_installsphinxcontrib-blockdiag<br />reSTの中に埋め込むことができます<...
今後の予定<br />ノードの形状切り替え<br />ひし形、楕円、角丸の四角、メール、DB (円筒)、ファイル<br />レイアウトエンジンの見直し<br />遷移図以外のブロック図にも対応したい (妄想)<br />遷移図以外のドキュメント...
おしまい<br />ご静聴ありがとうございました<br />
Upcoming SlideShare
Loading in …5
×

遷移図生成ツール blodkdiag の紹介 / Python Workshop 2010/12

11,829 views

Published on

遷移図生成ツール blockdiag の紹介
at 帰ってきた Python Workshop 2010/12.

Published in: Technology
  • Be the first to comment

遷移図生成ツール blodkdiag の紹介 / Python Workshop 2010/12

  1. 1. 遷移図生成ツール blockdiagの紹介<br />小宮 健 (@tk0miya)<br />2010-12-08<br />
  2. 2. 自己紹介<br />小宮 健 (@tk0miya)<br />株式会社タイムインターメディア所属<br />普段は Web アプリ開発 (PHP, Ruby など)してます<br />Python 歴は約 1年ぐらい<br />発表するのは初めて!<br />Sphinx-users とか Python mini hack-a-thon に出没<br />
  3. 3. 遷移図作ってますか?<br />プロジェクトで画面遷移図を作ることになった<br />弊社では Excel、Visio で作ることが多い<br />画面を箱、遷移を矢印で表現するタイプのもの<br />実際にやってみると大変!<br />
  4. 4. 苦労 その1:追加/削除が大変<br />ここに 1 画面追加<br />
  5. 5. 苦労 その1:追加/削除が大変<br />1.スキマを作る<br />
  6. 6. 苦労 その1:追加/削除が大変<br />2.図形を置く<br />
  7. 7. 苦労 その2:ずれる<br />
  8. 8. 苦労 その2:ずれる<br />
  9. 9. 苦労 その2:ずれる<br />
  10. 10. 苦労 その2:ずれる<br />
  11. 11. 苦労 その3:その他<br />Excel のバージョンが合わなくて図が壊れた<br />図の微調整ばかりで全然進まない<br />だんだん Excel (や Visio)が嫌いになってきた<br />Sphinx を使ってみたいのに組み合わせづらい<br />一度画像で保存する必要がある<br />
  12. 12. こんなのメンテナンスしたくない!<br />
  13. 13. というわけでツールを作ってみました<br />
  14. 14. blockdiag(ぶろっくだいあぐらむ)<br />遷移図生成ツール<br />定義ファイル(テキスト)から画像(PNG, SVG)を生成<br />Graphvizっぽい文法<br />テキストなのでバージョン管理しやすい<br />自動的にレイアウトしてくれる<br />追加/削除が簡単<br />ずれたりしない<br />日本語 (UTF-8) 対応<br />easy_installblockdiagでインストール可能<br />
  15. 15. blockdiag の使い方<br />遷移図の定義を作ります<br />diagram {<br /> A -> B -> C;<br /> B -> D;<br />}<br />blockdiagコマンドで画像を生成<br />% blockdiag –o sample.png input.diag<br />
  16. 16. blockdiag:細かい装飾(1)<br />各要素ごとに色、画像、矢印の向きなどが設定できる<br />背景色、線の色、実線/点線<br />背景画像<br />矢印の向き<br />
  17. 17. blockdiag:細かい装飾(2)<br />そのほかの装飾<br />ノードのグルーピング<br />遷移の説明文 (短め)<br />
  18. 18. blockdiag:ちょっと複雑な例<br />diagram {<br />toppage -> add -> add_confirm -> toppage;<br />toppage -> edit -> edit_confirm -> toppage;<br />toppage -> delete_confirm -> toppage;<br />toppage [label = "○○マスタ管理画面nトップページ"];<br /> add [label = "○○追加画面"];<br />add_confirm [label = "○○追加画面n(確認)"];<br /> edit [label = "○○編集画面"];<br />edit_confirm [label = "○○編集画面n(確認)"];<br />delete_confirm [label = "○○削除画面n(確認)"];<br />}<br />
  19. 19. blockdiag:ちょっと複雑な例<br />
  20. 20. デモ<br />http://blockdiag.appspot.com/<br />
  21. 21. blockdiag を使おう<br />blockdiagコマンド<br />% blockdiag –o output.png input.diag<br />% blockdiag –T svg output.svg input.diag<br />オンラインデモ<br />http://tk0miya.bitbucket.org/blockdiag/build/html/demo.html<br />SVG が表示できるブラウザで!<br />リファレンス<br />http://tk0miya.bitbucket.org/blockdiag/build/html/<br />
  22. 22. Sphinx との連携<br />Sphinx 用プラグイン:sphinxcontrib-blockdiag<br />% easy_installsphinxcontrib-blockdiag<br />reSTの中に埋め込むことができます<br />.. blockdiag::<br /> diagram {<br /> A -> B -> C;<br /> B -> D;<br /> }<br />使用例<br />http://tk0miya.bitbucket.org/blockdiag/build/html/sphinxcontrib.html<br />
  23. 23. 今後の予定<br />ノードの形状切り替え<br />ひし形、楕円、角丸の四角、メール、DB (円筒)、ファイル<br />レイアウトエンジンの見直し<br />遷移図以外のブロック図にも対応したい (妄想)<br />遷移図以外のドキュメントも補助ツールを作りたい<br />画面設計書をもっと簡単に!もっと手軽に!<br />興味がある方は @tk0miya に声をかけてください<br />
  24. 24. おしまい<br />ご静聴ありがとうございました<br />

×