excel を捨てよ blockdiag を使おう 2011/05 #tqrk03 (tokyu.rb)

8,351 views

Published on

Published in: Technology
  • Be the first to comment

excel を捨てよ blockdiag を使おう 2011/05 #tqrk03 (tokyu.rb)

  1. 1. Excel を捨てよblockdiagを使おう<br />小宮 健 (@tk0miya)<br />2011-05-29<br />
  2. 2. 自己紹介<br />小宮 健 (@tk0miya)<br />株式会社タイムインターメディア所属<br />プログラマやってます。<br />普段は PHP, Python, Perl, Ruby などを書いています<br />Ruby は 1.4 からのユーザです<br />Sphinx-users の方から来ました<br />
  3. 3. Excel を捨てよ blockdiagを使おう<br />ドキュメントには図が付きもの<br />システム構成図<br />画面遷移図<br />フローチャート<br />UML 系の図 (クラス図、シーケンス図など)<br />ネットワーク図<br />これらの図をどんなツールで書いていますか?<br />
  4. 4. よく使われる作図ツール<br />Excel<br />Visio<br />Powerpoint<br />Photoshop<br />UML 系作画ツール (astah* など)<br />ASCII アート的ななにか<br />Cacooなどのドロー系 Web サービス<br />私の会社では Excel をよく使っています<br />
  5. 5. Excel 方眼紙時代の思い出<br />
  6. 6. 苦労 その1:追加/削除が大変<br />ここに 1 画面追加<br />
  7. 7. 苦労 その1:追加/削除が大変<br />1.スキマを作る<br />
  8. 8. 苦労 その1:追加/削除が大変<br />2.不要な矢印を消す<br />
  9. 9. 苦労 その1:追加/削除が大変<br />3.図形を配置する<br />
  10. 10. 苦労 その1:追加/削除が大変<br />4.矢印を調整<br />
  11. 11. 苦労 その2:ずれる<br />
  12. 12. 苦労 その2:ずれる<br />
  13. 13. 苦労 その2:ずれる<br />
  14. 14. 苦労 その2:ずれる<br />
  15. 15. Excel との格闘の日々<br />更新の度に移動して消して作ってを繰り返す<br />変更点は大したことない<br />変更作業はとっても面倒<br />誰かに任せるとぐちゃぐちゃに…<br />ツールに使われてる感、徒労感<br />ドキュメント更新('A`)マンドクセ<br />いつまでも初版のままのドキュメント<br />
  16. 16. というわけでExcel、Visio の代わりを作りました<br />
  17. 17. blockdiagシリーズ<br />テキストを図に変換するツール群<br />blockdiag:ブロック図<br />seqdiag:シーケンス図<br />actdiag:アクティビティ図<br />nwdiag:ネットワーク図<br />今までのツールで困っていたことを解決する<br />自動レイアウトで変更が簡単<br />テキストデータなので編集しやすい<br />Lightweight に図を作っていける<br />
  18. 18. blockdiagの例<br />このテキストが…<br />diagram {<br /> A -> B -> C;<br /> B -> D;<br />}<br />
  19. 19. blockdiag の例<br />こうなる<br />
  20. 20. seqdiagの例<br />このテキストが…<br />diagram {<br /> browser => server;<br />}<br />
  21. 21. seqdiag の例<br />こうなる<br />
  22. 22. nwdiagの例<br />このテキストが…<br />diagram {<br /> network global {<br /> address = "210.x.x.x/24”;<br /> web01; web02;<br /> }<br /> network dmz {<br /> address = "172.x.x.x/24”;<br /> web01; web02; db01; db02;<br /> }<br />}<br />
  23. 23. nwdiag の例<br />こうなる<br />
  24. 24. blockdiag:三つのキーワード<br />スピード<br />構成を書くだけで図が生成される<br />配置など余計なことに煩わされない<br />メンテナンス性<br />自動レイアウトのため並び替えが不要<br />モチベーション<br />気軽に書いて共有できる<br />スピード感があるので楽しい<br />
  25. 25. blockdiagで書けること (1)<br />各要素ごとに色、画像、矢印の向きなどが設定できる<br />背景色、線の色、実線/点線<br />背景画像<br />矢印の向き<br />
  26. 26. blockdiagで書けること (2)<br />そのほかの装飾<br />ノードのグルーピング<br />遷移の説明文 (短め)<br />
  27. 27. blockdiagで書けること (3)<br />ノードの shape 属性を指定する<br />node1 [shape = “roundedbox”]<br />基本系<br />
  28. 28. blockdiagで書けること (4)<br />ノードの shape 属性を指定する<br />node1 [shape = “roundedbox”]<br />フローチャート系<br />
  29. 29. blockdiagで書けること (5)<br />ノードの shape 属性を指定する<br />node1 [shape = “roundedbox”]<br />その他<br />
  30. 30. blockdiagシリーズの利用例<br />blockdiag<br />画面遷移図: http://bit.ly/lZkszJ<br />ブロック図: http://bit.ly/kYpK6Y<br />フローチャート: http://bit.ly/m7fLsM<br />組織図: http://bit.ly/l6OOhZ<br />seqdiag: http://bit.ly/lwvEox<br />変な使い方: http://bit.ly/gMCskC<br />nwdiag: http://bit.ly/kR5tYF<br />
  31. 31. ドキュメント連携(埋め込み)<br />blockdiagシリーズは各種ツールと連携できる<br />Sphinx<br />Redmine (Wiki ページ内)<br />Trac (Wiki ページ内)<br />moinmoin<br />mediawiki<br />Web API (jsonp)<br />
  32. 32. デモ<br />ブラウザ上で動くバージョン (Interactive Shell) を利用<br />Google Appengine上で動作<br />SVG 出力しているので IE では見えません<br />http://interactive.blockdiag.com/<br />
  33. 33. まとめ<br />ドキュメント(の図)、書いてますか?<br />ドキュメント(の図)は楽して楽しく書こう<br />blockdiagシリーズは楽するための一つの回答<br />blockdiag.com に情報があります<br />分からないことは Google グループ blockdiag-discuss へ<br />楽するためにはもっと知恵と経験が必要<br />意見やアイディアください (@tk0miya まで)<br />

×