Your SlideShare is downloading. ×
excel を捨てよ blockdiag を使おう 2011/05 #tqrk03 (tokyu.rb)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

6,458
views

Published on

Published in: Technology

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,458
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
18
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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